Jennessa's Blog: แต่งบลอคง่าย ๆ ด้วยตัวคุณเอง

หวัดดีค่ะ (^^)V

เวลาผ่านไปเร็วมั่กๆ เจนเนสซ่ามาอยู่ออสเตรเลียจะปีนึงละ เมื่อวานเพิ่งสอบเสร็จวันสุดท้าย รู้ตัวอีกทีก็ไม่ได้อัพบลอคมานานแสนนาน 555

ทริควันนี้ง่ายมากกก ใน exteen เราสามารถใส่ link ตรง sidebar ได้ที่ Manage --> Links ส่วนใหญ่คงรู้กันอยู่แล้วเนาะ ปกติเวลาเพิ่มหรือแก้ไข link ก็จะเป็นแบบรูปข้างล่าง

.

.

เราสามารถกำหนดสีให้แต่ละคำในช่อง Description ได้ด้วยการใส่ <font>เข้าไปครอบคำที่เราต้องการจะระบายสี ของเจนเนสซ่าใส่ในช่อง Description ว่า

<font color="red">มหาวิทยาลัย</font><font color="green">ของ</font><font color="blue">ฉัน</font>

ดังรูปข้างล่าง

.

.

link คำว่า "มหาวิทยาลัยของฉัน" ตรง sidebar ก็จะออกมาเป็นสี ๆ ตามที่เรากำหนดไว้ ดังรูป

.

.

หรือจะใช้เป็นโค้ดสีก็ได้นะคะ แทนที่จะเป็นชื่อสี ตัวอย่างเช่น

 <font color="#ff0000">มหาวิทยาลัย</font><font color="#00cc00">ของ</font><font color="#3300cc">ฉัน</font>

จริง ๆ นอกจากจะกำหนดสีได้แล้ว เรายังกำหนดคุณสมบัติอื่น ๆ ได้อีกนะคะ อย่างเช่น ขนาดตัวอักษร (size), รูปแบบตัวอักษร (face)  ถ้าอยากรู้เพิ่มเติมก็อ่านเพิ่มได้ที่ http://www.w3schools.com/tags/tag_FONT.asp ค่า

-----------------------------------

จบแล้ว :D อีกสามอาทิตย์จะกลับไทย เย้ คิดถึงอาหารไทยมากๆๆๆ อาหารทะเลด้วย 55 

ไว้พบกันใหม่เอนทรีหน้าค่ะ

(^^)V

หวัดดีค่า (^_^)V

คุณ teddy-yunyun ถามไว้ใน c-box ว่า จะใส่ไอคอนหน้าหัวข้อเรื่องตรง sidebar ยังไง ตามนี้เลยค่ะ Let's gooo

1.   ใน CSS, หาคำว่า #sidebar .module ul, #sidebar2 .module ul ค่ะ  จะเห็นโค้ดข้างล่างค่ะ

#sidebar .module ul, #sidebar2 .module ul {
     margin:5px 0px 0px 5px;
     padding:0;
     list-style: none;
}

2.  ให้คอมเมนต์ list-style:none; ออกค่ะ แล้วเพิ่ม list-style-type, list-style-position เข้าไป ดังโค้ดข้างล่างค่ะ

#sidebar .module ul, #sidebar2 .module ul {
     margin:5px 0px 0px 5px;
     padding:0;
     /*list-style: none;*/
     list-style-type: square;
     list-style-position: inside;
}
 

list-style-type  -  กำหนด style ของหัวข้อว่าจะให้เป็นแบบไหน มีให้เลือกมากมาย เช่น disc, circle, square หรือ decimal ดูค่าที่เราสามารถใช้ได้ทั้งหมดได้ที่นี่ค่ะ http://www.w3schools.com/Css/css_reference.asp#list

list-style-position -  สามารถใส่เป็น inside หรือ outside ค่ะ  ทดลองเปลี่ยนดูค่ะ ว่ามันต่างกันยังไง

3.  แต่ถ้าอยากใช้รูปภาพเป็นไอคอน ให้เพิ่ม list-style-image เข้าไป ดังข้างล่างค่ะ

#sidebar .module ul, #sidebar2 .module ul {
      margin:5px 0px 0px 5px;
      padding:0;
      /*list-style: none;*/
      list-style-image: url(http://jennessa.exteen.com/images/flower.gif);
      list-style-position: inside;
}

4.  แก้ CSS แล้ว อย่าลืมกดปุ่ม Save ตรงมุมขวาล่างค่ะ

เสร็จแล้วค่ะ แต่ว่าวิธีนี้จะแสดงหัวข้อในทุก ๆ เรื่องตรง sidebar ซึ่งบางทีเราก็ไม่อยากแสดงหัวข้อตรงบางส่วนใน sidebar เช่น ตรง Links หรือเราอาจจะอยากให้ตรง Categories เป็นไอคอนรูปดอกไม้ แล้วตรง Recommend เป็นไอคอนรูปเป็ด โปรดติดตามเอนทรีหน้าค่ะ ตอนนี้ขอไปห้องสมุดก่อนค่ะ จะปิดแว้ววว บ๊ายบายค่ะ (^^)V

หวัดดีค่ะ ทุกคน (^^)V

คิดถึงหน้าเขียนเอนทรี รู้สึกไม่ได้เข้ามานาน 555....... (= =")

ไม่ได้เขียนเรื่องเกี่ยวกับแต่งบลอคมานานมากมาย เมื่อหลายวันที่ผ่านมา มีคนถามเรื่องการใส่กล่องคุยบนบลอค (Cbox หรือ ShoutBox) ติด ๆ กันหลายคน หลายคนยังงง ๆ ว่าจะใส่ผ่าน Custom Code (ฟีเจอร์ใหม่ของ exteen) ยังไง ขอบคุณเวบมาสเตอร์ที่ต่อไปนี้ไม่ต้องมานั่งตัดโค้ดให้ตาลายอีกแล้วค่ะ วิธีทำง่ายมาก

1. อ่านเอนทรี วิธีการใส่กล่องคุยในบลอค หรือ Cbox Step-by-Step ก่อนค่า ทำจนถึงข้อ 6. คือได้โค้ดมาแล้ว โค้ดหน้าตาแบบนี้

.

2. ไปที่ Manage --> Theme --> Widgets แล้วเลื่อนลงไปดูข้างล่างตรง Available Widgets จะเห็นกล่อง Custom Code 1 2 3 4 ดังรูปค่ะ

.

3. เอาเมาส์คลิกค้างไว้ที่กล่อง Custom Code อันไหนก็ได้ค่ะ แล้วลากไปใส่ที่ Sidebar ค่ะ

.

4. กดที่รูปดินสอในกล่อง Custom Code ที่เราเพิ่งเอาไปใส่ใน Sidebar จะมีหน้าต่างเล็ก ๆ ขึ้นมา เอาโค้ด Cbox ที่ได้จากข้อ 1. ใส่ลงไปในหน้าต่างนั้น แล้วกดปุ่ม OK ดังรูปค่ะ

.

5. ขั้นตอนนี้สำคัญมาก !!! ... อย่าลืมกดปุ่ม Save ตรงมุมขวาล่างของหน้าเวบด้วยค่า (>_<)

.

เสร็จแล้ว เย้ ไม่ต้องแก้โค้ดเลย คลิกๆๆ drag n' drop ก็ได้แล้ว กล่องคุย :D ลองไปอ่านที่เวบมาสเตอร์เขียนเกี่ยวกับ Custom Code ได้ที่เอนทรีนี้ค่ะ ฟีเจอร์ใหม่ ๆ by webmaster

โค้ดอื่น ๆ ที่ไม่ใช่กล่องคุย ก็ใส่แบบนี้เหมือนกันนะคะ เช่น โค้ดตัวนับสถิติ, โค้ด widgets จากเวบต่าง ๆ เจนเนสซ่าก็ใส่ไว้อันนึง ไว้ดูรูปแมวเหมียว ^^

*** เพิ่มเติม ***

จากคอมเมนต์ของ [Mr.O] ข้อจำกัดของ Custom Code ก็คือ จะใส่โค้ดได้ไม่เกิน 2000 ตัวอักษรค่ะ ถ้ายาวกว่านั้นก็ต้องตัดแต่งพันธุกรรมโค้ดนิดนึงค่ะ (ชอบคำนี้จัง 55) อาจจะลบที่เป็นคอมเมนต์ออก ลบเครื่องหมายคำพูด (") ออกบ้างบางตัว เพื่อให้ไม่เกิน 2000 ตัวอักษร

ปุจฉา: แล้วจะรู้ได้ไงว่าโค้ดเกิน 2000 ตัวอักษรรึป่าว ?

jennessa: นั่งนับ.... (= =") หรือเอาโค้ดไปนับตัวอักษรได้ที่ http://www.lettercount.com/ หรือลอง google คำว่า 'character count' จะมีหลายเวบให้เลือกเหมือนกันค่ะ

............

อาทิตย์หน้าเจนเนสซ่าจะสอบแล้วค่ะ เผลอแป๊บเดียวก็ผ่านไปหนึ่งเทอมแล้ว เวลาผ่านไปอย่างรวดเร็วจริง ๆ ค่ะ ขอไปอ่านหนังสือต่อ สอบเสร็จแล้วจะมาอัพใหม่ค่า (^ ^)V