สาระน่ารู้ IT: May 2012

Monday, May 21, 2012

วิธีเปลี่ยนรูปแบบ Font บน Blogger ด้วย Cufon Font

ขั้นตอนการเปลี่ยนรูปแบบ Fonts โดยใช้ สคริปต์ของ Cufon

ขั้นที่ 1 เตรียมและเลือก Fonts ที่ต้องการให้แสดงผลใน Blogger
คุณสามารถดาวน์โหลด Font ที่แจกฟรีจากรายชื่อเว็บไซต์ด้านล่างที่นี้

http://www.f0nt.com
http://www.wazu.jp/gallery/Fonts_Thai.html
http://www.dafont.com
http://www.fontstock.net
http://www.urbanfonts.com
http://www.1001freefonts.com
http://www.pickfonts.com
http://www.highfonts.com
http://www.fontsquirrel.com
http://www.wonderfonts.com
http://www.fontspace.com
http://www.gmkfreefonts.com/index.php
http://font.downloadatoz.com
http://www.freepremiumfonts.com
http://www.downloadfreefonts.com
http://www.pickafont.com

ขั้นที่ 2 สร้างโค้ดจาก Cufon
เมื่อได้ Fonts ที่ต้องการแล้วไฟล์ของ Fonts อาจจะมีสกุลไฟล์เป็น TTF หรือ OTF หรือ PFB

สมมติว่าตอนนี้ผมจะใช้ Font ชื่อ TH Krub ผมก็เอาไฟล์มาวางไว้ที่ Desktop เพื่อความสะดวก

โปรดสังเกตว่า Fonts ที่ผมเลือกนั้นมีรูปแบบ 4 อย่างด้วยกันคือ ปกติ ตัวหนา ตัวเอียง และทั้งหนาและเอียงพร้อมกัน ซึ่งถ้าเป็นกรณีที่คุณทำเองคุณอาจจะเลือกมาใช้เพียงไฟล์เดียวก็ได้ แต่อาจจะไม่รองรับในกรณีคุณต้องการให้ Fonts เป็นตัวหนา หรือตัวเอียง

ขั้นที่ 3 สร้าง Script จาก Cufon
ในขั้นนี้ให้ทุกคนไปที่

http://cufon.shoqolate.com/

สคริปต์ที่เราต้องใช้มี 2 สคริปต์ด้วยกัน ดังนั้นเราสร้างสคริปต์ 2 ครั้งดังนี้

3.1 คลิกที่ ปุ่ม Download เพื่อรับ Script คำสั่งหลัก

ผลที่ได้คือ ไฟล์ cufon-yui.js ซึ่งเป็นไฟล์ของจาวาสคริปต์ที่เราจะนำไปใช้ต่อไป ดังนั้นให้เก็บไฟล์นี้เอาไว้กอ่น

3.2 ขั้นต่อมาให้ Upload ไฟล์ของ Fonts ที่ได้เตรียมไว้และตั้งค่าต่าง ๆ ดังนี้
ในที่นี้ผมเตรียมไฟล์ไว้ 4 ไฟล์ตามที่ได้อธิบายไว้ข้างต้นแล้ว ดังนั้นผมก็จะ upload ไฟล์ทั้ง 4 ขึ้นไปให้หมด และสำหรับการตั้งค่าผมจะกล่าวถึงจุดที่สำคัญเท่านั้น ซึ่งแสดงดังรูปด้านล่าง

เลือกไฟล์จากเครื่องเพื่อ upload >> ถ้ามีหลายไฟล์ให้ตั้งชื่อใหม่

การตั้งค่าการแสดงผลของ Fonts

ถ้าไม่จำกัดผู้ใช้สคริปต์ที่กำลังสร้างให้เว้นว่างเอาไว้

ยอมรับเงื่อนไขและ คลิก Let’s do this! เพื่อ Generate โค้ด

เมื่อดาวน์โหลดสคริปต์ที่ 2 ได้แล้ว ถ้าหากไฟล์ที่ได้มีชื่อยาวเกินไป ก็ควรปรับแต่งให้ชื่อสั้นลง (ในที่นี้ผมปรับเป็นชื่อ TH_Krub)

ขั้นที่ 4 ฝาก Java Script ไว้ที่ Free Host หรือ Server ของคุณเอง

จากขั้นที่ 3 ตอนนี้เราได้ไฟล์ 2 ไฟล์คือ cufon-yui.js และ TH_Krub.js

ให้ทำการฝากจาวาสคริปต์ทั้ง 2 ไฟล์นี้ ไว้ที่ Free Host หรือ Server ของคุณเอง โดยอาจจะใช้ Host หรือ วิธีต่อไปนี้

http://www.sigmirror.com
http://www.yourjavascript.com
Googlecode
Google site

ซึ่งเมื่อฝากไฟล์แล้วคุณจะได้ URL ไฟล์ 2 ไฟล์ดังนี้

http://hackublog.googlecode.com/files/cufon-yui.js
http://hackublox.googlecode.com/files/TH_Krub.js

หมายเหตุ

ถ้าคุณมีปัญหาเรื่อง Server คุณอาจจะใช้ไฟล์แรก คือ

http://hackublog.googlecode.com/files/cufon-yui.js

ที่ ผมได้ทำการ upload เลยก็ได้ แต่ไฟล์ที่ 2 คุณจะต้อง upload เองเพราะรูปแบบ Font ที่คุณต้องการอาจจะไม่เหมือนกับที่ผมทำให้ดูในตัวอย่างนี้

ขั้นที่ 5 การเรียกใช้สคริปต์ใน Blogger

ตำแหน่งในการวางสคริปต์ นั้นเราจะวางใน HTML ของ Template โดยวางเอาไว้ก่อนหน้าโค้ด </head>

การใช้โค้ด

สคริปต์ที่เราจะใช้ในการปรับแต่ง Fonts ใน blogger ทำโดยใช้โค้ดต่อไปนี้

5.1 ถ้าต้องการใช้ Fonts เพียงรูปแบบเดียวให้ใช้โค้ด

<script src='http://hackublog.googlecode.com/files/cufon-yui.js' type='text/javascript'/>
<script language='javascript' src=' http://hackublox.googlecode.com/files/TH_Krub.js ' type='text/javascript'/>
<script type='text/javascript'>
    Cufon.replace(
        ' #header h1, h2.post-title, #sidebar h2,#content h3, widget h2',
        { fontFamily: 'TH Krub' });
</script>

การปรับแต่งโค้ด

โค้ดสีชมพูคือสคริปต์ของ Fonts ที่เราสร้างไว้ในขั้นที่ 4 และ คุณจะต้องใส่ชื่อ Fonts TH Krub ให้ตรงกับชื่อของ Fonts ด้วย เพราะถ้าใส่ชื่อผิด สคริปต์ก็จะไม่ทำงาน

และโค้ดสีม่วงคือ id หรือ class ที่ต้องการให้ Fonts เปลี่ยนรูปแบบ สามารถดูได้จาก template ของคุณเอง

(ถ้าดูไม่เป็นให้สอบถามผมมาอีกทีนะครับ)

เมื่อเอาโค้ดไปวางก่อนโค้ด </head> ผลที่ได้จะเป็นดังภาพ

5.2 กรณีที่ต้องการใช้ Fonts มากกว่า 1 รูปแบบใน Template เดียวให้ใช้โค้ดดังนี้

<script src='http://hackublog.googlecode.com/files/cufon-yui.js' type='text/javascript'/>
<script language='javascript' src='http://hackublox.googlecode.com/files/TH_Krub.js' type='text/javascript'/>
<script language='javascript' src='http://hackublog.googlecode.com/files/Bebas_400.font.js' type='text/javascript'/>
<script type='text/javascript'>
Cufon.replace(' #header h1, h2.post-title, #content h3 ', { fontFamily: ' TH Krub '});
Cufon.replace(' #sidebar h2,.widget h2', { fontFamily: ' Bebas '});
</script>

ผลที่ได้จะเป็นดังภาพ

คุณสามารถเพิ่มสคริปต์ของ Fonts เข้าไปได้ตามต้องการโดยแทรกสคริปต์ของโค้ด และ ระบุ id หรือ class ที่ต้องการให้ Fonts เปลี่ยนเช่นถ้าต้องการใช้ Fonts 4 แบบ โค้ดที่ใช้เป็น

<script src='http://hackublog.googlecode.com/files/cufon-yui.js' type='text/javascript'/>
<script language='javascript' src=' URL font1.js ' type='text/javascript'/>
<script language='javascript' src=' URL font2.js ' type='text/javascript'/>
<script language='javascript' src=' URL font3.js ' type='text/javascript'/>
<script language='javascript' src=' URL font4.js ' type='text/javascript'/>

<script type='text/javascript'>
Cufon.replace(' ไอดีหรือคลาสที่ต้องการให้ Font เปลี่ยน ', { fontFamily: ' ชื่อ Font1 '});
Cufon.replace(' ไอดีหรือคลาสที่ต้องการให้ Font เปลี่ยน ', { fontFamily: ' ชื่อ Font2 '});
Cufon.replace(' ไอดีหรือคลาสที่ต้องการให้ Font เปลี่ยน ', { fontFamily: ' ชื่อ Font3 '});
Cufon.replace(' ไอดีหรือคลาสที่ต้องการให้ Font เปลี่ยน ', { fontFamily: ' ชื่อ Font4 '});
</script>

หมายเหตุ
1. การเพิ่ม รูปแบบ Fonts แต่ละครั้งทำได้โดยทำซ้ำขั้นตอน 1-4 ทุกครั้งครับ
2. โค้ดของ Fonts ในตัวอย่างนี้คุณสามารถเอาไปใช้ได้เลยครับ เพราะผมไม่ได้จำกัดสิทธิ์เอาไว้

4 วิธีในการปรับแต่ง Blogger Post Title

ขั้นเตรียมการ

ก่อนอื่นคุณจะต้องเตรียมรูปภาพหรือไอคอนขนาดที่ต้องการ (อย่าให้ใหญ่มาก ประมาณ 16x16 หรือ 24x24)

สมมติในที่นี้ผมเตรียมภาพด้านล่างเอาไว้

URL ของภาพ

http://upic.me/i/5f/paperpencil.png

โค้ดของภาพนี้คือ

<img border="0" src="http://upic.me/i/5f/paperpencil.png"/>

วิธีที่ 1 ใส่ Icon ให้ Post Title

วิธีนี้ทำได้ง่ายมาก เพียงแค่คุณได้เตรียมรูปภาพหรือ icon ที่ไม่ใหญ่โตจนเกินไปแล้วนำโค้ดไปวางลงไปในหัวเรื่องขณะที่เขียนบทความหรือ อาจจะเขียนบทความไปแล้ว และทำการเอาโค้ดไปเพิ่มภายหลังก็ได้ วิธีทำดูจากรูปด้านล่างครับ

ผลที่ได้

หมายเหตุ
(1) ถ้าคุณวางโค้ดไว้ด้านหลัง Title iconก็จะอยู่ด้านหลังของ Title
(2) วิธีการนี้มีข้อดีคือสามารถใช้ icon ที่แตกต่างกันในแต่ละบทความได้ แต่มีข้อเสียคือไม่สามารถปรับตำแหน่งของรูปได้

วิธีที่ 2 ใส่ Icon ให้ Post Title

วิธีนี้ก็เป็นการใส่ icon ให้กับ Post Title เช่นเดียวกับวิธีที่ 1 แต่มีความยืดหยุ่นมากขึ้น

ก่อนอื่นให้ Login และไปที่ แผงควบคุม >> รูปแบบ(การออกแบบ) >> แก้ไข HTML >>และขยายแม่แบบเครื่องมือ

จากนั้นให้ค้นหาโค้ด

<a expr:href='data:post.url'><data:post.title/></a>

ซึ่งคุณจะพบชุดโค้ดในบริเวณนั้นเป็น

<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>

ถ้าคุณวางโค้ดของรูปที่เตรียมไว้คือ

<img border="0" src="http://upic.me/i/5f/paperpencil.png"/>

(1) ถัดจากโค้ดสีแดงรูปภาพหรือ icon จะปรากฎที่ด้านบนของ Title

(2) ถัดจากโค้ดสีม่วงรูปภาพหรือ icon จะปรากฎที่ด้านซ้ายของ Title

(3) ถัดจากโค้ดสีเขียวรูปภาพหรือ icon จะปรากฎที่ด้านขวาของ Title

(4) ถัดจากโค้ดสีชมพูรูปภาพหรือ icon จะปรากฎที่ด้านล่างของ Title

นี่คือตัวอย่างการวางโค้ดให้ปรากฎทางซ้ายของ Title

<b:if cond='data:post.url'>
<a expr:href='data:post.url'>
<img border="0" src="http://upic.me/i/5f/paperpencil.png"/>
<data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>

วิธีนี้มีข้อดีคือยืดหยุ่นกว่าวิธีแรกแต่มีข้อเสียคือยังไม่สามารถกำหนดตำแหน่งได้มากกว่า 4 ตำแหน่ง ที่ได้กล่าวมาแล้ว

วิธีที่ 3 การกำหนด ตำแหน่งของ icon ของ Title ด้วย CSS

วิธีนี้อาศัยหลักการกำหนด CSS 3 อย่างคือ Background, padding และ Height

3.1 ขั้นแรกให้ทุกคนเข้าไปที่เมนู แก้ไข HTML และพยายาม เน้นครับว่าให้พยายาม ค้นหาโค้ดที่มีลักษณะคล้ายกับโค้ดต่อไปนี้

.post h1{
/* ตรงบริเวณนี้แต่ละ Template จะพบไม่เหมือนกัน */
}

หรือ

.post h2{
/* ตรงบริเวณนี้แต่ละ Template จะพบไม่เหมือนกัน */
}

หรือ

.post h3{
/* ตรงบริเวณนี้แต่ละ Template จะพบไม่เหมือนกัน */
}

ถ้าไม่พบชุดโค้ดดังกล่าวให้สังเกตว่าชุดโค้ดใดที่กำหนด Post title ซึ่งส่วนใหญ่จะมี Keyword คำว่า Post , Title หรือคำว่า H1,H2 ปะปนอยู่กับชื่อ Class หรือ id นั้น ๆ ด้วย (ถ้าคุณหาไม่พบโปรดแจ้งขอความช่วยเหลือที่บทความนี้)

เอาล่ะไม่ว่าคุณจะพบโค้ดแบบไหนแนวทางการปรับแต่งต่อไปก็จะคล้าย ๆ กัน ซึ่งใน Template ที่ผมทำให้ดูในตัวอย่างพบโค้ดดังนี้

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

ในที่นี้ผมจะลองใส่ Background ให้ Title ด้วยภาพที่เราเตรียมเอาไว้โดยไม่ได้ปรับแต่งอะไร

.post h3 {
background:url(http://upic.me/i/5f/paperpencil.png) 0px 0px no-repeat;
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

ผลที่ได้

จะเห็นว่ารูปกับ Title มันทับกันอยู่ ต่อไปผมจึงจะทำให้ Title ขยับไปทางขวาอีก 40px เพื่อให้ Title ไม่ทับกับพื้นหลัง

.post h3 {
background:url(http://upic.me/i/5f/paperpencil.png) 0px 0px no-repeat;
padding-left
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
padding-left:40px;
}

สังเกตว่าผมเพิ่มค่า padding-left:40px; ที่บรรทัดสุดท้ายเพราะว่าโค้ดเดิมนั้นมีค่า padding:0 0 4px; อยู่แล้วผมจึงไม่อยากไปปรับแก้ของเก่า และเพื่อให้ง่ายต่อการอธิบายครับ

เมื่อดูผลลัพธ์ที่ได้ดีขึ้นเป็นกองเลยครับ

ในกรณีที่คุณใช้รูปภาพที่ใหญ่เกินไปภาพที่ปรากฎอาจจะขาดหายไปได้ เช่น

วิธีแก้ไขคือเพิ่มโค้ดความสูงเข้าไปให้พอดีกับความสูงของภาพ และอาจจะเพิ่มค่า padding ให้มากขึ้นอีก เช่น

.post h3 {
background:url(http://upic.me/i/0n/paperpencil45.png) 0px 0px no-repeat;
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
padding-left:60px;
padding-top:15px;
height:40px;
}

โปรดสังเกตว่าผมได้เพิ่มความสูงเป็น height:40px; เพราะภาพที่ผมใส่เข้าไปใหม่นี้มีขนาด 40x40 และได้เพิ่มค่า padding-top:15px; เพื่อให้ Title ลอยอยู่ระดับเดียวกับรูปภาพ ผลที่ได้เป็นดังภาพด้านล่าง

วิธีที่ 4 การใส่ Background ให้กับ Title

วิธีนี้ทำได้คล้ายคลึงกับวิธีที่ 3 ต่างกันตรงที่เราจะไม่ใช้ icon ขนาดเล็กมาเป็น Background

แต่จะใช้สีหรือรูปภาพมาเป็น background แทน

การเริ่มต้นให้ทำเช่นเดียวกับวิธีที่ 3 ซึ่งจะพบในตัวอย่างนี้โค้ดเป็น (โค้ดที่คุณพบอาจจะแตกต่างจากนี้ตามที่ได้อธิบายไปแล้ว)

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

กรณีที่ 1 ถ้าต้องการใส่พื้นหลัง Title ด้วยสี

สมมติในที่นี้ผมต้องการใส่พื้นหลังให้หัวข้อเป็นสีดำ สูง 25px และมีเส้นขอบหนา 1 px สีแสด

ดังนั้นเมื่อปรับแต่งโค้ดแล้วจะได้โค้ดเป็น

.post h3 {
margin:5px 0 10px 0; /*ปรับแต่งค่า margin ใหม่ */
padding:5px 0 5px 10px; /*ปรับแต่งค่า padding ใหม่ */
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
height:25px; /*ความสูงของ Title 25px*/
background:#000; /*พื้นหลังสีดำ*/
border:1px solid #FF5D00; /*เส้นขอบสีแสด*/
}

และเมื่อแก้โค้ดและบันทึกแล้วจะได้ผลลัพธ์เป็น

กรณีที่ 2 ใส่พื้นหลัง Title ด้วยรูปภาพ

และในกรณีคุณต้องการให้ Title มีรูปภาพสวย ๆ ก็จะต้องเตรียมภาพพื้นหลังที่มีความสูงไม่มากนัก

เช่นในที่นี้ผมเตรียมภาพขนาด 470 คูณ 35 px ดังรูปด้านล่าง

โค้ดที่เราจะเพิ่มเข้าไปจากโค้ดเดิมมีดังนี้

.post h3 {
margin:5px 0 10px 0; /*ปรับแต่งค่า margin ใหม่ */
padding:8px 0 2px 10px; /*ปรับแต่งค่า padding ใหม่ */
font-size:140%;
font-weight:normal;
color:$titlecolor;
height:25px;/*จะใส่ความสูงให้เท่ากับภาพพื้นหลังหรือตามที่ต้องการก็ได้*/
background: #000 url(http://upic.me/i/b5/wrfppt31441503.gif) 0px 0px repeat-x; }

โค้ด http://upic.me/i/b5/wrfppt31441503.gif เปลี่ยนเป็นรูปภาพของคุณเองได้ตามใจชอบ

ส่วนโค้ด #000 คือโค้ดสีดำซึ่งจะมองเห็นในกรณีที่รูปภาพไม่เต็มพื้นที่ที่กำหนด

ผลลัพธ์ที่ได้

วิธีเพิ่ม Gadget ในส่วนหัวของแม่แบบ Blogger รุ่นใหม่

การเพิ่ม AdSense, Search box ,Banner 468x60 หรือ Gadget อื่น ๆ ที่คุณต้องการ แต่การสอนในบทความดังกล่าวผมได้สอนเป็นแนวทางเอาไว้สำหรับแม่แบบรุ่นเก่า (เนื่องจากตอนที่เขียนไม่มีแม่แบบรุนใหม่ของ Blogger ) บทความนี้ผมจึงเขียนขึ้นมาอีก 1 บทความเพื่อให้ง่ายสำหรับคนที่ใช้แม่แบบที่ออกแบบโดยทีมพัฒนาของ blogger ให้ทำได้สะดวกและง่ายขึ้น

Blogger Layout, Header

จากบทความ วิธีสร้างพื้นที่สำหรับ Add Gadgets ที่ Blogger Header ซึ่งในบทความผมได้สอนการสร้างพื้นที่ทางขวาของส่วนหัวของบล็อก เพื่อใช้ในการเพิ่ม AdSense, Search box ,Banner 468x60 หรือ Gadget อื่น ๆ ที่คุณต้องการ แต่การสอนในบทความดังกล่าวผมได้สอนเป็นแนวทางเอาไว้สำหรับแม่แบบรุ่นเก่า (เนื่องจากตอนที่เขียนไม่มีแม่แบบรุนใหม่ของ Blogger ) บทความนี้ผมจึงเขียนขึ้นมาอีก 1 บทความเพื่อให้ง่ายสำหรับคนที่ใช้แม่แบบที่ออกแบบโดยทีมพัฒนาของ blogger ให้ทำได้สะดวกและง่ายขึ้น

SEO blogger สอน วิธี สร้าง ทำ บล็อก blog แต่ง blog Blogger

ขั้นตอนการสร้าง พื้นที่สำหรับเพิ่ม gadget ที่ส่วนหัวของ Blogger Template รุ่นใหม่

ขั้นที่ 1 Login เข้าไปที่ Blogger.com
จากแผงควบคุมให้เข้าไปที่การแก้ไข HTML และค้นหาโค้ด .header-outer ซึ่งคุณจะพบชุดโค้ด

.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll top left;
_background-image: none;
color: $(header.text.color);
-moz-border-radius: $(header.border.radius);
-webkit-border-radius: $(header.border.radius);
-goog-ms-border-radius: $(header.border.radius);
border-radius: $(header.border.radius);
}

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

.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll top left;
_background-image: none;
color: $(header.text.color);
-moz-border-radius: $(header.border.radius);
-webkit-border-radius: $(header.border.radius);
-goog-ms-border-radius: $(header.border.radius);
border-radius: $(header.border.radius);
float:left;
width:50%;
}
#newheader{
float:right;
margin: 5px auto;
width:50%;
}

เมื่อจบขั้นที่ 1 แล้วถ้าเราดูในองค์ประกอบของหน้าจะพบหน้าตาของพื้นที่ซึ่งเปลี่ยนไปเป็นดังรูป

Header Gadget blogger blogspot ทำ แต่ง สร้าง blog

หรือบางท่านอาจจะเป็นแบบนี้ ซึ่งก็ถือว่าไม่ได้ทำอะไรผิดพลาดครับ

อธิบายรูปที่ 2 :
สาเหตุที่ Gadget PageList เลื่อนขึ้นมาซ้อนทับกับส่วน Header เพราะว่าเราได้ใส่ Style float:left; เพิ่มเข้าไปในส่วนหัวซึ่งหมายถึงสั่งให้ชิดซ้ายจึงทำให้ Element ที่อยู่ถัดมาขึ้นไปซ้อนทับได้ วิธีแก้ไขคือเราต้องใช้การ Clear Style ซึ่งดูต่อได้จากขั้นที่ 2

ขั้นที่ 2 ต่อไปให้ค้นหาโค้ด <header> ในแม่แบบ ซึ่งคุณจะพบชุดโค้ดดังนี้

<header>
    <div class='header-outer'>
    <div class='header-cap-top cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    <div class='fauxborder-left header-fauxborder-left'>
    <div class='fauxborder-right header-fauxborder-right'/>
    <div class='region-inner header-inner'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Design Blogger Template (ส่วนหัว)' type='Header'/>
</b:section>
    </div>
    </div>
    <div class='header-cap-bottom cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    </div>
    </header>

จากนั้นให้แทรก HTML สีแดงลงไปดังโค้ดด้านล่าง

<header>
    <div class='header-outer'>
    <div class='header-cap-top cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    <div class='fauxborder-left header-fauxborder-left'>
    <div class='fauxborder-right header-fauxborder-right'/>
    <div class='region-inner header-inner'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Design Blogger Template (ส่วนหัว)' type='Header'/>
</b:section>
    </div>
    </div>
    <div class='header-cap-bottom cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    </div>
</header>
<div id='newheader'>
   <b:section class='content-inner' id='ilovehackublog' maxwidgets='10' showaddelement='yes'/>
</div>
<div style='clear:both;'/>

ผลลัพธ์ที่ได้จะเป็นดังนี้

คุณสามารถเพิ่ม Gadget ที่ต้องการได้ตามใจชอบครับ เช่น ตัวอย่างด้านล่างนี้ผมเพิ่ม AdSense ขนาด 468x60 ลงบนส่วนหัวของ blogger

หวังว่าคงเป็นประโยชน์กับ Blogger รุ่นใหม่ทุกคนครับ มีปัญหาเรื่องการติดตั้งหรือโค้ดไม่ตรงกับที่สอนในบทความนี้โปรดสอบถามที่ Comment ด้านล่างบทความนี้

การใส่โค้ด adsesne ในเนื้อหาของ Blogger

การใส่โค้ด adsesne ในเนื้อหาของ Blogger
ถ้าเป็น WordPress ก็แค่ใช้ plugin นิดหน่อยแต่พอเป็น Blogger มันค่อนข้างยุ่งยากนิดหน่อย ต้องเปลี่นแปลงครื่องหมายต่างๆ ภายในโค็ด adsesne เพราะเราใส่ไปตรงๆมันไม่ได้ครับ
ใช้บริการเว็บนี้ได้เลยครับ ใส่โค้ดแอดเซ็นเข้าไป มันจะแปลงออกมาในรูปแบบที่ใช้ใน Blogger ทันที
http://www.eblogtemplates.com/blogger-ad-code-converter/
เราเอาโค้ดเดิมใส่เข้าไปในช่อง converter ครับ จะได้ออกมาเป็นแบบนี้

<script type="text/javascript"><!–
google_ad_client = "pub-12345678";
/* 336×280, created 11/16/09 tom */
google_ad_slot = "12345678";
google_ad_width = 336;
google_ad_height = 280;
//–>
</script>
<script type="text/javascript"
src="hxxp://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

พอเราได้โค้ดที่แปลงแล้วก็ login เข้ามาที่ Dashboard ใน Blogger ของเราแล้วเลือก Template -> Edit HTML แล้วติ๊กที่ Expand Widget Templates ด้วยนะครับ เพราะถ้าเราไม่ติ๊ก โค้ดที่ซ่อนไว้เราจะหาไม่เจอนะครับ
จากนั้นเพื่อให้ง่ายต่อการค้นหาก็ให้กด ctr+f ค้นหา (ใช้ได้กับการค้นหา keyword ใน browser) แล้วพิมพ์ “post.body” จะเจอโค้ดรูปแบบนี้ เราจะทำการใส่โค้ดแอดเซ็นที่เราได้มาลงไป

<div class=’post-header-line-1′/>
<div style=’float:left;’>
โค้ด adsense ที่เป็นรูปแบบ Blogger แล้ว
</div>
<div class=’post-body’>
<p><data:post.body/></p>
<div style=’clear: both;’/> <!– clear for photos floats –>
</div>

จากรูปแบบข้างบนจะได้โฆษณา adsense ที่ตำแหน่งด้านซ้ายครับ

ถ้าอยากให้โฆษณา adsense ชิดด้านขวา ก็แค่เปลี่ยนโค้ดจาก left เป็น right

<div style=’float:right;’>
โค้ด adsense ที่เป็นรูปแบบ Blogger แล้ว
</div>

ก็จะได้แจะได้โฆษณา adsense ที่ตำแหน่งด้านขวาแบบนี้ครับ

นอกจากนั้นเรายังสามารถกำหนดระยะห่างโดยรอบของโฆษณา adsense กับเนื้อหา โดยใช้กำหนด margin

<div style=’float:left; margin:5px 10px 15px 20px’>
โค้ด adsense ที่เป็นรูปแบบ Blogger แล้ว
</div>

ตัวเลข 5 px คือค่าระยะห่างด้านบน
ตัวเลข 10 px คือค่าระยะห่างด้านขวา
ตัวเลข 15 px คือค่าระยะห่างด้านล่าง
ตัวเลข 20 px คือค่าระยะห่างด้านซ้าย

ส่วนสีของโค้ดโฆษณา adsense แบบใหม่ก็เข้าไปแก้กันเองใน Google นะครับ

Monday, May 14, 2012

แทรก Adsense ไปให้อยู่ระหว่าง Title หรือ ใต้ Body

1. ไป ที่ Google Adsense สร้าง ป้ายมา 1 อัน

2. ไป Blogger เลือก Design > Edit Html > กด Expand Widget Templates

3. เปิด link http://www.elliotswan.com/postable/

ขึ้นมา copy code ที่ได้จาก ข้อ 1 ลงไป

4. กด Make it friendly

5. กลับไปที่ Edit HTML กด Ctr+F พิมพ์คำว่า post-body

จะเจอ

<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
<data:post.body/>
<div style='clear: both;'/> 
</div>

6. ถ้า Copy จากข้อ 4 มาวาง ก่อน <div class จะเป็น วาง Banner หลัง Title พยายามเลือก Text ให้เนียนๆ คนกดเยอะครับ ไม่ผิดกฎ ด้วย
7. ถ้า Copy จากข้อ 5 มาวาง หลัง /div> จะเป็นวาง Banner หลัง เนื้อหาที่ Post เสร็จแล้ว แต่อยู่ก่อน Read more ครับ

ใส่ Gadget โฆษณาขนาด 125 x 125

ขั้นตอนในการใส่โค้ดทำได้ดังนี้
1. ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML >> คลิกขยายแม่แบบเครื่องมือ
2. มองหาโค้ด ]]></b:skin> แล้วแทนที่ด้วย

.ads-sponsors {    
margin-top:5px;     
}     
.ads-sponsors img {     
padding: 5px;     
border: 1px solid #CCCCCC;     
margin-right: 5px;     
margin-bottom: 5px;     
}     
.ads-sponsors p {     
font-size: 12px;     
margin: 10px 0px 0px;     
padding: 0px;     
float: left;     
width: 342px;     
font-weight: bold;     
color: #000000;     
}     
.ads-sponsors p a {     
color: #006699;     
text-decoration: underline;     
}     
.ads-sponsors img:hover {     
padding: 5px;     
border: 1px solid #999999;     
margin-right: 5px;     
margin-bottom: 5px;     
}     
]]></b:skin>

3. จากนั้นไปที่องค์ประกอบหน้า >> Add Gadget >> เลือก Gadget ชนิด HTML/java สคริปต์

ตั้งชื่อ แล้ววางโค้ดเหล่านี้ลงไป และทำการบันทึก

<div id="advert_125x125">    
<a href="ใส่ LINK-1"><img alt="ใส่ข้อความโต้ตอบ" src="ใส่ LINKรูปที่1"/></a>     
<a href="ใส่ LINK-2"><img alt="ใส่ข้อความโต้ตอบ" src="ใส่ LINKรูปที่2"/></a>     
<a href="ใส่ LINK-3"><img alt="ใส่ข้อความโต้ตอบ" src="ใส่ LINKรูปที่3"/></a>     
<a href="ใส่ LINK-4"><img alt="ใส่ข้อความโต้ตอบ" src="ใส่ LINKรูปที่4"/></a>     
</div>

ปล. โค้ดนี้เหมาะกับ Template ที่มี sidebar กว้างไม่น้อยกว่า 250 px

วิธีแสดงบทความล่าสุดพร้อมรูป แบบ Animation

การแสดงบทความล่าสุดจะมีประโยชน์มากในกรณีที่ ผู้อ่านได้เปิดอ่านบทความอื่นอยู่ แล้วไม่ต้องการกลับมาดูบทความล่าสุดในหน้าแรกทุกครั้ง ก็สามารถเลือกอ่านได้จาก Sidebar Gadget นี้ได้ทันทีครับ

วิธีติดตั้ง

ไปที่แผงควบคุม >> รูปแบบ Add Gadget ในตำแหน่งที่ต้องการ >> เลือก Gadget ชนิด HTML/จาวาสคริปต์ >> วางโค้ดด้านล่างนี้ลงไปแก้ไขตามต้องการ โดยไม่ต้องตั้งชื่อแล้วทำกับบันทึก

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<style media="screen" type="text/css">   
    <!-- 
    #spylist {   
    overflow:hidden;    
    margin-top:0px;    
    padding:0px 0px;    
    height:250px;    
    }    
    #spylist ul{    
    width:318px;    
    overflow:hidden;    
    list-style-type: none;    
    padding: 0px 0px;    
    margin:0px 0px 0px 0px;    
    }    
    #spylist li {    
    width:310px;    
    padding: 5px 5px;    
    margin:0px 0px 0px 0px;    
    list-style-type:none;    
    float:none;    
    height:50px;    
    overflow: hidden;    
    background:#EDEEEF;    
border-top:2px solid #ffffff;border-bottom:1px solid #565656;border-left:1px solid #BBBBBB;border-right:1px solid #565656    
    }    
    #spylist li a {    
    text-decoration:none;    
    color: #520000;    
    font-size:11px;    
    height:18px;    
    overflow:hidden;    
    margin:0px 0px;    
    padding:0px 0px 2px 0px;    
    }    
    #spylist li img {    
    float:left;    
    margin-right:5px;    
    background:#EFEFEF;    
    border:0;    
    }    
    .spycomment{    
    overflow:hidden;    
    font-family:Tahoma,Arial,verdana, sans-serif;    
    font-size:10px;    
    color:#262B2F;    
    padding:0px 0px;    
    margin:0px 0px;    
    }    
    --></style>

   <script language="JavaScript"> 
    imgr = new Array(); 
    imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
    imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
    imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
    imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
    imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";   
    showRandomImg = true; 
    boxwidth = 318; 
    cellspacing = 6; 
    borderColor = "#232c35"; 
    bgTD = "#000000"; 
    thumbwidth = 40; 
    thumbheight = 40; 
    fntsize = 12; 
    acolor = "#666"; 
    aBold = true; 
    icon = " "; 
    text = "comments"; 
    showPostDate = true; 
    summaryPost = 40; 
    summaryFontsize = 10; 
    summaryColor = "#666"; 
    icon2 = " "; 
    numposts = 10; 
    home_page = ' http://ใส่ชื่อบล็อกของคุณ.blogspot.com/ ';
    limitspy=4    
    intervalspy=4000 
    </script> 
<div id="spylist">   
<script src="http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js" type="text/javascript"></script>    
</div>

เมื่อวางโค้ดแล้วแก้ไขโค้ดชื่อบล็อกของคุณ และตัวเลขความกว้างยาวตามความต้องการแล้วบันทึกครับ

แนวทางการปรับแต่งและความหมายของตัวเลข

ตัวเลขสีแดงคือความกว้างควรปรับให้พอดีกับ ความกว้งของ Template ของคุณเพื่อความสวยงาม

ตัวเลขสีแสดคือความสูงของกรอบการแสดงผลซึ่งถ้าตั้งเป็น 250 ก็กำลังสวยงาม แต่ก็สามารถปรับเพิ่มและลดได้

ตัวเลขสีน้ำเงินควรตั้งค่าให้น้อยกว่าตัวเลขสีอแดงเล็กน้อย

ตัวเลขสีเขียวหมายถึงความสูงของแต่ละบทความล่าสุดที่จะแสดงผล

ตัวเลขสีชมพูหมายถึงความสูงและความกว้างของรูปภาพของบทความล่าสุด

ตัวเลขสีม่วง (เลข 4) นั้นหมายถึงบทความล่าสุดที่จะแสดงผลขณะ load

และตัวเลขสีน้ำตาล (เลข 10) หมายถึงจำนวนบทความล่าสุดที่จะนำมาแสดง

หมายเหตุ ถ้าคุณเคยติดตั้ง jquery1.3.2 ไว้ใน Tamplate แล้ว ก็ให้ตัดโค้ดด้านล่างนี้ทิ้งไปแล้วใช้เฉพาะโค้ดที่เหลือ

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

Credit : abu-farhan.com

วิธีซ่อน Widget ในบางหน้าของ Blogger (New Hack!)

1. เป็นเลือกแสดง Widget ในบางหน้าของ Blogger เท่านั้น เช่น ในหน้าบทความ หรือในหน้าแรก แต่ไม่แสดงในหน้าอื่น ๆ

2. วิธีการที่ได้กล่าวมาแล้วนั้นใช้ได้กับ Widget ชนิด HTML/จาวาสคริปต์เท่านั้น

ต่อมาผมพยายามจะ Hack ให้ 1. ซ่อนในบางหน้า แต่แสดงผลในหน้าอื่น ๆ และ 2. ใช้ได้กับ Widget ทุกชนิดซึ่งก็ได้ผลดีทีเดียวครับ ก็เลยมาเขียนเล่าเอาไว้ นอกจากนี้เทคนิควิธีในบทความนี้สามารถต่อยอดไปปรับใช้กับ hack ในรูปแบบอื่น ๆ ได้ด้วย เช่น

1. ต้องการให้แต่ละ widget มีสีสันและรูปแบบต่างกันก็ทำได้ หรือ

2. จะขยายกล่องบทความให้เต็มจอและซ่อน sidebar ทั้งหมดในหน้าบทความก็ได้ด้วย หากมีความสนใจผมก็จะค่อย ๆ เขียนบทความมาเล่าให้ฟังต่อไปภาย 2-3 วันนี้ครับ ถ้าเป็นแฟนตัวจริงกนก็อย่าลืมติดตามอ่านนะครับ

วิธีการซ่อน Widget

ขั้นที่ 1 Log in เข้าไปที่ blogger >> ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML

แล้วค้นหาโค้ด

<div id='sidebar'>
หรือ
<div id='sidebar-wrapper'>
หรือที่ใกล้เคียงกับโค้ดที่ว่านี้ และเมื่อพบแล้วเราจะเห็นว่ามี widget ที่มี id ต่าง ๆ กันเช่น HTML1, Label1, BlogArchive1 เป็นต้น

ขั้นที่ 2 ต่อไปให้สังเกตุและจำชื่อ id ของ Widget ที่คุณต้องการจะซ่อน เช่นในที่นี้ผมต้องการซ่อน Widget BlogArchive กับ AdSense ก็จำชื่อ id เป็น Adsense1 กับ Label1

ขั้นที่ 3 ในการซ่อน Widget ใช้โค้ดต่อไปนี้

3.1 กรณีต้องการซ่อน Widget ในหน้า Home หรือหน้าหลักใช้โค้ด

<b:if cond='data:blog.url == data:blog.homepageUrl'>    
<style type='text/css'>     
#Adsense1 ,#Label1 {display:none;}     
</style>     
</b:if>

3.2 กรณีต้องการซ่อน Widget ในหน้าที่แสดงบทความ (เมื่อคลิกเข้าไปอ่าน) ใช้โค้ด

<b:if cond='data:blog.pageType == &quot;item&quot;'>    
<style type='text/css'>     
#Adsense1 ,#Label1 {display:none;}     
</style>     
</b:if>

3.3 กรณีต้องการซ่อน Widget ในหน้าที่แสดงคลังบทความของบล็อกใช้โค้ด

<b:if cond='data:blog.pageType == &quot;archive&quot;'>    
<style type='text/css'>     
#Adsense1 ,#Label1 {display:none;}     
</style>     
</b:if>

3.4 กรณีต้องการซ่อน Widget ในหน้าแรก + หน้า Label + หน้า search ของบล็อกใช้โค้ด

<b:if cond='data:blog.pageType == &quot;index&quot;'>    
<style type='text/css'>     
#Adsense1 ,#Label1 {display:none;}     
</style>     
</b:if>

หมายเหตุ
โค้ดสำหรับซ่อน Widget ทั้ง 2 ที่ได้กล่าวมา ส่วนที่กำหนด Style อาจเขียนเป็น

<style type='text/css'>    
#Adsense1 {display:none;}
#Label1 {display:none;}     
</style>

แต่จะสิ้นเปลืองบรรทัดโดยใช่เหตุ หากมีการกำหนด Style ที่เหมือนกันควรกำหนดร่วมกันเหมือนโค้ดข้างต้นจะดีกว่า

ขั้นที่ 4 หลังจากที่สร้างโค้ดในขั้นที่ 3 ได้แล้วให้นำโค้ดไปวางไว้ใน Template โดย

Log in เข้าไปที่ blogger >> ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML

จากนั้นค้นหาโค้ด </head> แล้ววางโค้ดในขั้นที่ 3 เอาไว้ก่อนหน้าโค้ดดังกล่าว เมื่อบันทึกแม่แบบก็จบขั้นตอน

บทสรุป

ในการซ่อนครั้งนี้เราอาศัยความรู้เดิม ผนวกกับการใช้ display:none เข้ามาช่วยเพื่อไม่ให้ แสดงผลในหน้าที่ต้องการนั่นเองครับ ลองทำดูนะครับ เทคนิคง่าย ๆ นี้ยังสามารถปรับใช้ได้อีกมาก อย่างน้อยถ้าในหน้าแรกของคุณมี Widget เป็นจำนวนมาก ก็จะทำให้การโหลดหน้าใช้เวลานาน วิธีนี้ก็ช่วยแก้ปัญหาที่ว่าบน blogger ของคุณได้

ติดตั้งเพลง MP3 ลงบน Blogger ง่าย ๆ ด้วย Yahoo Media Player

         การ ใส่เครื่องเล่นเพลง หรือเครื่องเล่น MP3 ลงบน Blogger นั้นสามารถทำได้หลายวิธี วิธีที่ผมได้เคยเขียนบทความนำเสนอไปแล้วก็มีทั้งสิ้น 3 วิธีด้วยกัน ได้แก่ การสร้างเครื่อง เล่นเพลงในบล็อก จาก mixpod.com    วิธีใส่ดนตรี mp3 และไฟล์เสียงต่างๆ ลงในบล็อก และ บทความ อีกหนึ่งทางเลือกการ สร้างเครื่องเล่น MP3 ลงในบล็อกของคุณ
      สำหรับในบทความนี้ผมจะนำเสนออีก 1 วิธีในการติดตั้งเครื่องเล่น MP3 ลงใน Blogger ซึ่งตามมุมมองของผมคิดว่าวิธีนี้เป็นวิธีที่ง่ายที่สุดเมื่อเทียบกับหลาย ๆ วิธีที่ได้กล่าวมาแล้ว โดยในที่นี้ก็จะใช้บริการของ mediaplayer.yahoo.com
      ถ้าหากคุณต้องการติดตั้งเพลงเพื่อเป็นสีสันให้กับ blog ของคุณก็ดำเนินการตามขั้นตอนต่อไปนี้ได้เลยครับ
ขั้นตอนการติดตั้ง yahoo mediaplayer บน Blogger

ขั้นเตรียมการ

1. เตรียมไฟล์ MP3 ที่คุณต้องการเล่นบน blog ของคุณ
2. Upload ไฟล์ MP3 ขึ้นไปบน Free Host ที่อนุญาตให้ทำ Hotlink แนะนำ Free File Host ต่อไปนี้

http://www.mailboxdrive.com/ (ไม่ต้องลงทะเบียน) (Bandwith: Unlimited)
http://www.fileden.com/(ต้องลงทะเบียน) (Bandwith: 5GB /เดือน)
http://kiwi6.com/ (ไม่ต้องลงทะเบียน) (Bandwith: 500MB /วัน)
http://www.upload-mp3.com (ต้องลงทะเบียน)
http://www.opendrive.com(ต้องลงทะเบียน)

โดยส่วนตัวแล้วแนะนำให้ฝากกับ mailboxdrive ครับ

3. เมื่อฝากไฟล์จนครบแล้ว ให้คัดลอก URL ของเพลงเตรียมเอาไว้สำหรับติดตั้ง โค้ดที่ได้จะคล้ายกับโค้ดด้านล่าง

http://yourhost.com/yoursong.mp3

4. ขั้นสร้าง Playlist และโค้ดสำหรับติดตั้ง บน Blogger
ให้นำ URL ของเพลงในขั้นที่ 3 มาสร้างโค้ด Playlist โดยใช้โค้ดต่อไปนี้

<a href="http://yourhost.com/yoursong1.mp3">ชื่อเพลง1</a>
<a href="http://yourhost.com/yoursong2.mp3">ชื่อเพลง2</a>
<a href="http://yourhost.com/yoursong3.mp3">ชื่อเพลง3</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

ถ้าต้องการให้มีหลาย ๆ เพลง ก็เพิ่มโค้ดด้านล่างนี้เข้าไปได้เรื่อย ๆ

<a href="http://yourhost.com/yoursong.mp3">ชื่อเพลง</a>

เมื่อสร้างเส็จแล้วจะได้โค้ดดังตัวอย่างด้านล่าง ( สร้าง Playlist โดยใช้ 4 เพลง )

<a href="http://uploads.mp3songurls.com/I-Will-Always-Love-You.mp3">I WILL ALWAY LOVE YOU</a>
<a href="http://uploads.mp3songurls.com/Take-Me-to-Your-Heart.mp3">TAKE ME TO YOUR HEART</a>
<a href="http://uploads.mp3songurls.com/New-Divide.mp3">NEW DIVIDE</a>
<a href="http://uploads.mp3songurls.com/Say-It-s-possible.mp3">SAY IT'S POSSIBLE</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

ขั้นการติดตั้ง

5. การติดตั้ง บน Blogger ทำโดย Log in Blogger เข้าไปที่ >> ไปที่แผงควบคุม >> การออกแบบ >> องค์ประกอบของหน้า

จากนั้นเพิ่ม Gagdet ชนิด HTML/จาวาสคริปต์ ในตำแหน่งที่ต้องการจากนั้นวางโค้ดในขั้นที่ 4 ลงไปและบันทึก

เมื่อจบขั้นที่ 5 ถือว่าการติดตั้งเสร็จสิ้นแล้ว ให้คุณทดสอบดูว่าสามารถเล่นเพลงได้ตามปกติหรือไม่

6. ขั้นสุดท้ายเป็นการปรับแต่งการแสดงผล
6.1 จะเห็นว่าถ้าไม่มีการปรับแต่งเพิ่มเติม ชื่อของแต่ละ Plalist จะติดกันเกินไป ดูแล้วไม่สวยงาม

เราแก้ปัญหาในกรณีนี้โดย ใช้แท็ก <br/> เข้ามาช่วยโดยแทรกลงไปในโค้ดเดิมดังนี้

<a href="http://uploads.mp3songurls.com/I-Will-Always-Love-You.mp3">I WILL ALWAY LOVE YOU</a>
<br/>
<a href="http://uploads.mp3songurls.com/Take-Me-to-Your-Heart.mp3">TAKE ME TO YOUR HEART</a>
<br/>
<a href="http://uploads.mp3songurls.com/New-Divide.mp3">NEW DIVIDE</a>
<br/>
<a href="http://uploads.mp3songurls.com/Say-It-s-possible.mp3">SAY IT'S POSSIBLE</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

ผลที่ได้จะเป็นดังรูปด้านล่าง

หมายเหตุ แท็ก <br/> เป็น HTML แท็กที่ใช้สำหรับตัดข้อความให้ขึ้นบรรทัดใหม่

6.2 แต่ถ้าในกรณีที่ไม่ต้องการให้แสดง Link ของ Playlist และต้องการให้แสดงเพียงตัว Player เท่านั้นให้ใช้โค้ด

<div style='display:none;'>
<a href="http://uploads.mp3songurls.com/I-Will-Always-Love-You.mp3">I WILL ALWAY LOVE YOU</a>
<a href="http://uploads.mp3songurls.com/Take-Me-to-Your-Heart.mp3">TAKE ME TO YOUR HEART</a>
<a href="http://uploads.mp3songurls.com/New-Divide.mp3">NEW DIVIDE</a>
<a href="http://uploads.mp3songurls.com/Say-It-s-possible.mp3">SAY IT'S POSSIBLE</a>
</div>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

ผลที่ได้ก็จะมีเพียงตัว Player เท่านั้นและสามารถเล่นเพลงต่าง ๆ โดยเล่นจากตัว Player โดยตรง

หมายเหตุ
หากใครมีปัญหาเรื่องการปรับระดับเสียงของ Player ให้กด Shift + ปุ่มขึ้น/ลง เพื่อปรับระดับเสียงแทนการใช้เมาส์

2 Gadget ใหม่จาก Blogger (Popular Post + Blog stats )

หลังจากที่ Blogger ได้เพิ่ม Feature ตัวนับสถิติเมื่อเร็ว ๆ นี้ ล่าสุด Blogger ได้พัฒนา ตัวนับสถิติออกมาในรูป Gadget (Blog's stats) ที่สามารถนับปริมาณการเปิดหน้าเว็บบล็อกได้เข้าชมได้ นอกจากนี้ Blogger ยังได้เพิ่ม Popular Post Gadget เข้ามาใน Gadget พื้นฐานอีกด้วย

1. Blog's stats Gadget (สถิติของบล็อก)

หลังจากที่ผมได้ทดสอบใช้งานดูพบว่า Blog's stats Gadget ยัง ทำงานได้ไม่เป็นที่พอใจนักเนื่องจากการนับจำนวนการเปิดอ่านบล็อกนั้นยังนับ รวมการ Refresh จาก ip เดียวกันไปด้วย ซึ่งทำให้ยังไม่สามารถนำผลลัพธ์ที่ได้ไปยังเคราะห์การเข้าชมบล็อกของเราได้ ดังนั้นหากต้องการแม่นยำในการนับสถิติก็ควรดูควบคู่กับตัวนับสถิติอื่น ๆ เช่น Histat และ Google Analytics เป็นต้น

การติดตั้งและการตั้ง ค่า Gadget สถิติของบล็อกสามารถทำได้เช่นเดียวกับการใช้งาน Gadget ชนิดอื่น ๆ ส่วนเรื่องการปรับแต่งก็ยังทำอะไรไม่ได้มากนัก ผมก็หวังว่าทีมงานพัฒนาของ bloggerจะพัฒนาให้ดีขึ้นต่อไป

2. Popular Posts Gadget (บทความที่ได้รับความนิยม)

Gadget นี้จะแสดงผลบทความที่มีจำนวน Comments มากที่สุด คุณสามารถเลือกช่วงเวลาได้และยังสามารถเลือกได้ด้วยว่าจะแสดงเนื้อหา และรูปภาพประกอบด้วยหรือไม่ นับว่าเป็น Gadget ที่สวยงามน่าสนใจและน่าใช้งานมากครับ

หมายเหตุ ในกรณีที่บทความยังไม่มีการเปิดดูเลย Popular Posts Gadget จะไม่แสดงผล และกรณีที่บทความคุณยังไม่มีรูป Gadget นี้ก็จะไม่แสดงผลรูปภาพ

วิธีติดตั้ง jQuery s3Slider บน Blogger

Slideshow ใน Blogger อีกรูปแบบหนึ่งชื่อว่า S3slider ซึ่ง Slideshow ชนิดนี้พัฒนาโดย serie3.info ลักษณะเด่น ๆ ของ SlideShow ก็คือ
1. ติดตั้งง่าย
2. ใช้เวลาในการโหลดบนหน้า blogger รวดเร็ว
3. โค้ดในการติดตั้งมีน้อย ถ้าเทียบกับ SlideShow แบบอื่น ๆ
4. สามารถปรับขนาดได้อย่างง่ายดายยืดหยุ่นในตำแหน่งที่ติดตั้ง
5. สามารถติดตั้งหลาย ๆ จุดในแม่แบบได้พร้อม ๆ กัน
6. สามารถแทรกข้อความทีเป็น Feature ได้ (แสดงผลได้ทั้งภาพและข้อความ)

ตัวอย่างการทำงานของ SlideShow ชนิดนี้ดูได้จาก jQuery S3Slider

สำหรับการติดตั้ง SlideShow ผมจะสร้างทางเลือกในการติดตั้งเอาไว้ 3 ทางเลือกได้แก่
ทางเลือกที่ 1 ติดตั้ง S3slider ขนาดใหญ่อย่างเดียว
ทางเลือกที่ 2 ติดตั้ง S3slider ขนาดเล็กอย่างเดียว
ทางเลือกที่ 3 ติดตั้ง S3slider ขนาดใหญ่หรือเล็กมากกว่า 1 ตำแหน่งในหน้าเดียวกัน

ดังนั้นคุณควรจะระบุความต้องการของตัวเองให้ชัดเจนก่อนแล้วจึงเลือกติดตั้งตามขึ้นตอนใดขั้นตอนหนึ่ง

ขั้นตอนการติดตั้ง jQuery S3Slider

ก่อนอื่นให้คุณ Login เข้าไปที่ blogger.com และจากแผงควบคุมให้เข้าไปที่ การออกแบบ >> แก้ไข HTML

ขั้นที่ 1 ติดตั้ง CSS โค้ดเพื่อกำหนดรูปแบบ

ให้คุณค้นหาโค้ด ]]></b:skin> และเมื่อพบแล้วให้วางโค้ดด้านล่างนี้ลงไปก่อนหน้าโค้ด ]]></b:skin>

#slider {     
    width: 410px;/*ความกว้างของSlideขนาดเล็กนี้สามารถปรับเพิ่มหรือลดได้และควรเท่ากับขนาดของรูป*/     
    height: 300px; /* ปรับให้เท่ากับขนาดของรูปที่ใช้ */     
    position: relative; /* important */     
    overflow: hidden; /* important */     
}     
#slider1, #slider2 {     
    width: 720px;/*ความกว้างของSlideขนาดใหญ่นี้สามารถปรับเพิ่มหรือลดได้และควรเท่ากับขนาดของรูป*/     
    height: 300px; /* ปรับให้เท่ากับขนาดของรูปที่ใช้ */     
    position: relative; /* important */     
    overflow: hidden; /* important */     
}     
#sliderContent, #slider1Content, #slider2Content {     
    width: 720px;     
    position: absolute;     
    top: 0;     
    margin-left: 0;     
}     
.sliderImage, .slider1Image, .slider2Image {     
    float: left;     
    position: relative;     
    display: none;     
}     
.sliderImage span {     
    position: absolute;     
    font: 10px/15px Arial, Helvetica, sans-serif;     
    padding: 10px 13px;     
    width: 384px;     
    background-color: #000;     
    filter: alpha(opacity=70);     
    -moz-opacity: 0.7;     
    -khtml-opacity: 0.7;     
    opacity: 0.7;     
    color: #fff;     
    display: none;     
}     
.slider1Image span, .slider2Image span {     
    position: absolute;     
    font: 10px/15px Arial, Helvetica, sans-serif;     
    padding: 10px 13px;     
    width: 694px;     
    background-color: #000;     
    filter: alpha(opacity=70);     
    -moz-opacity: 0.7;     
    -khtml-opacity: 0.7;     
    opacity: 0.7;     
    color: #fff;     
    display: none;     
}     
.clear {    clear: both;}     
.sliderImage span strong, .slider1Image span strong, .slider2Image span strong { font-size: 14px;}     
.top {    top: 0;    left: 0;}     
.bottom {    bottom: 0;    left: 0;}     
.left {    top: 0;    left: 0;    width: 110px !important;    height: 280px;}     
.right {    right: 0;    bottom: 0;    width: 90px !important;    height: 290px;}

หมายเหตุ
โค้ดด้านบนนี้เป็นที่ผมผสมผสาน CSS ของ S3slider ทั้ง 3 รูปแบบเข้าด้วยกัน โดยที่
ID slider เป็นโค้ดที่กำหนด Style ของ S3slider ขนาดเล็ก (กว้าง 400 สูง 300)
ID slider1 เป็นโค้ดที่กำหนด Style ของ S3slider ขนาดเล็ก (กว้าง 720 สูง 300 แบบที่ 1)
ID slider2 เป็นโค้ดที่กำหนด Style ของ S3slider ขนาดเล็ก (กว้าง 720 สูง 300 แบบที่ 2 )

ดังนั้นคุณอาจจะติดตั้งโค้ดทั้งหมดลงไปเพื่อให้สามารถเพิ่มรูปแบบ S3slider ได้ในภายหลัง หรือถ้าคุณต้องการติดตั้งเพียง S3slider รูปแบบใดรูปแบบหนึ่งเท่านั้น คุณก็สามารถสามารถลบโค้ดที่ไม่เกี่ยวข้องทิ้งไปได้

เช่น ถ้าผมต้องการติดตั้งเฉพาะ S3slider ขนาดเล็กก็อาจจะใช้โค้ดเพียง

#slider {     
    width: 410px;/*ความกว้างของSlideขนาดเล็กนี้สามารถปรับเพิ่มหรือลดได้และควรเท่ากับขนาดของรูป*/     
    height: 300px; /* ปรับให้เท่ากับขนาดของรูปที่ใช้ */     
    position: relative; /* important */     
    overflow: hidden; /* important */     
}     
#sliderContent{     
    width: 720px;     
    position: absolute;     
    top: 0;     
    margin-left: 0;     
}     
.sliderImage{     
    float: left;     
    position: relative;     
    display: none;     
}     
.sliderImage span {     
    position: absolute;     
    font: 10px/15px Arial, Helvetica, sans-serif;     
    padding: 10px 13px;     
    width: 384px;     
    background-color: #000;     
    filter: alpha(opacity=70);     
    -moz-opacity: 0.7;     
    -khtml-opacity: 0.7;     
    opacity: 0.7;     
    color: #fff;     
    display: none;     
}     
.clear {    clear: both;}     
.sliderImage span strong, .slider1Image span strong, .slider2Image span strong { font-size: 14px;}     
.top {    top: 0;    left: 0;}     
.bottom {    bottom: 0;    left: 0;}     
.left {    top: 0;    left: 0;    width: 110px !important;    height: 280px;}     
.right {    right: 0;    bottom: 0;    width: 90px !important;    height: 290px;}

ขั้นที่ 2 ติดตั้งจาวาสคริปต์เพื่อให้ S3slider มีการเคลื่อนไหว

ในขั้นนี้ให้คุณค้นหาโค้ด </head> และเมื่อพบแล้วให้วางโค้ดต่อไปนี้ลงไปก่อนหน้าโค้ดดังกล่าว

<!--s3Slider http://www.hackublog.com Start-->    
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>     
<script src='http://siiam.bravehost.com/s3Slider.js' type='text/javascript'/>     
<script type='text/javascript'>     
    $(document).ready(function() {     
        $(&#39;#slider&#39;).s3Slider({     
            timeOut: 3000      
        });     
        $(&#39;#slider1&#39;).s3Slider({     
            timeOut: 4000     
        });     
        $(&#39;#slider2&#39;).s3Slider({     
            timeOut: 5000     
        });     
    });     
</script>     
<!--/s3Slider-->

ตัวเลข 3000 , 4000 และ 5000 หมายถึงเวลาที่ใช้ในการเปลี่ยน Slide โดยที่ 1000 ก็คือ 1 วินาที ซึ่งคุณสามารถปรับเพิ่มหรือลดตามความต้องการได้ (ตอนปรับให้ดูชื่อของ ID ให้ตรงกับ ID ที่ติดตั้งด้วย)

ส่วนชุดโค้ด

        $(&#39;#ใส่ชื่อไอดีตัวใหม่&#39;).s3Slider({     
            timeOut: 5000     
        });

เป็นการระบุว่าจะให้สคริปต์นี้ส่งผลต่อ ID ใด

ขั้นที่ 3 HTML สำหรับติดตั้ง S3slider

คุณสามารถติดตั้ง S3slider มากกว่า 1 แบบลงไปในหนึ่งหน้าได้ โค้ดทั้ง 3 ชุดต่อไปนี้เป็นโค้ดของ S3slider ทั้ง 3 รูปแบบมีดังนี้

S3slider ขนาดเล็ก

<div id="slider">     
<ul id="sliderContent">     
<li class="sliderImage">     
<img src="ใส่ URL ของรูปภาพขนาด400 x 300" />     
<span class="top"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>     
</li>     
<li class="sliderImage">     
<img src="ใส่ URL ของรูปภาพขนาด400 x 300" />  
<span class="top"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>  
</li>     
<li class="sliderImage">     
<img src="ใส่ URL ของรูปภาพขนาด400 x 300" />     
<span class="top"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>     
</li>     
<li class="sliderImage">     
<img src="ใส่ URL ของรูปภาพขนาด400 x 300" />     
<span class="top"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>     
</li>     
<li class="sliderImage">     
<img src="ใส่ URL ของรูปภาพขนาด400 x 300" />     
<span class="top"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>     
</li>     
<!--แทรกโค้ดชุดใหม่ตรงนี้-->     
<div class="clear sliderImage"></div>     
</ul>     
</div>     
<!-- // slider -->

S3slider ขนาดใหญ่แบบที่ 1

<div id="slider1">     
<ul id="slider1Content">     
<li class="slider1Image">     
<img src="ใส่ URL ของรูปภาพขนาด 720 x 300" />     
<span class="left"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>     
</li>     
<li class="slider1Image">     
<img src="ใส่ URL ของรูปภาพขนาด 720 x 300" />     
<span class="right"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>     
</li>     
<li class="slider1Image">     
<img src="ใส่ URL ของรูปภาพขนาด 720 x 300" />     
<span class="right"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>     
</li>     
<li class="slider1Image">     
<img src="ใส่ URL ของรูปภาพขนาด 720 x 300" />     
<span class="left"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>     
</li>     
<li class="slider1Image">     
<img src="ใส่ URL ของรูปภาพขนาด 720 x 300" />     
<span class="right"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>     
</li>     
<!--แทรกโค้ดชุดใหม่ตรงนี้-->     
<div class="clear slider1Image"></div>     
</ul>     
</div>     
<!-- // slider1 -->

S3slider ขนาดใหญ่แบบที่ 2

<div id="slider2">     
<ul id="slider1Content">     
<li class="slider1Image">     
<img src="ใส่ URL ของรูปภาพขนาด 720 x 300" />     
<span class="top"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>     
</li>     
<li class="slider1Image">     
<img src="ใส่ URL ของรูปภาพขนาด 720 x 300" />     
<span class="left"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>     
</li>     
<li class="slider1Image">     
<img src="ใส่ URL ของรูปภาพขนาด 720 x 300" />     
<span class="bottom"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>     
</li>     
<!--แทรกโค้ดชุดใหม่ตรงนี้-->     
<li class="slider1Image">     
<img src="ใส่ URL ของรูปภาพขนาด 720 x 300" />     
<span class="right"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>     
</li>     
<li class="slider1Image">     
<img src="ใส่ URL ของรูปภาพขนาด 720 x 300" />     
<span class="bottom"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>     
</li>     
<div class="clear slider1Image"></div>     
</ul>     
</div>     
<!-- // slider1 -->

แนวทางปรับแต่ง HTML โค้ด
3.1 การเพิ่มหรือลดจำนวนรูปภาพให้เพิ่มหรือชุดโค้ดต่อไปนี้เข้าไปตามความต้องการ

<li class="slider1Image">    
<img src="ใส่ URL ของรูปภาพ" />     
<span class="bottom"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>     
</li>

3.2 การกำหนดทิศทางการปรากฎของข้อความให้เปลี่ยนค่าได้ที่

<span class="left">

ซึ่งคุณสามารถเปลี่ยนเป็น

<span class="right">

หรือ

<span class="top">

หรือ

<span class="bottom">

ขั้นที่ 4 ตำแหน่งในการติดตั้ง HTML
การติดตั้ง HTML สามารถทำได้หลายวิธีดังนี้

4.1 ใช้วิธี Add Gadget ชนิด HTML/จาวาสคริปต์ (วิธีนี้เหมาะกับ S3slider ขนาดเล็ก แต่ก็ใช้กับขนาดใหญ่ได้)

4.2 ติดตั้งลงไปในส่วนหัวของแม่แบบ
สำหรับแม่แบบรุ่นเก่าให้ค้นหาโค้ด

<div id='content-wrapper'>

ซึ่งบางแม่แบบอาจพบโค้ดเป็น

<div id='content'>

และวาง HTML ของ S3slider ลงไปก่อนหน้าโค้ดดังกล่าว

และสำหรับแม่แบบรุ่นใหม่ให้ค้นหาโค้ด

<div class='fauxborder-left tabs-fauxborder-left'>

และวาง HTML ของ S3slider ลงไปก่อนหน้าโค้ดดังกล่าว

สอนแต่ง blogspot สร้างบล้อกฟรีกับ blogger

4.3 ติดตั้งลงไปใน page หรือบทความ
ถ้าต้องการติดตั้งลงไปใน page หรือบทความ คุณจะต้องคลิกที่แท็บ แก้ไข HTML เสียก่อนจากนั้นจึงวาง HTML ของ S3slider ลงไป

4.4 คุณสามารถติดตั้ง S3slider มากกว่า 1 ตำแหน่งในหนึ่งหน้าโดยมีเงื่อนไขว่าในแต่ละตำแหน่งจะต้องใช้ชื่อ ID ไม่ซ้ำกัน
เช่น ถ้าคุณติดตั้ง S3slider ที่มี ID เป็น id="slider" ไปแล้ว ตำแหน่งอื่นๆ ที่ติดตั้งก็จะต้องใช้ ID เป็น id="slider1" เป็นต้น

หวังว่าคงชอบ Slideshow ชนิดนี้กันนะครับ หากมีข้อสงสัยในการติดตั้งโปรดสอบถามที่บทความนี้ สวัสดีครับ

หมายเหตุ : คุณควรจะดาวน์โหลดจาวาสคริปต์ http://siiam.bravehost.com/s3Slider.js สำรองเก็บไว้ และหากเป็นไปได้ควรจะ upload เพื่อใช้งานเอง ขอบคุณครับ