วิธีเปลี่ยนรูปแบบ 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(
        &#39; #header h1, h2.post-title, #sidebar h2,#content h3, widget h2&#39;,
        { fontFamily: &#39;TH Krub&#39; });
</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(&#39; #header h1, h2.post-title, #content h3 &#39;, { fontFamily: &#39; TH Krub &#39;});
Cufon.replace(&#39; #sidebar h2,.widget h2&#39;, { fontFamily: &#39; Bebas &#39;});
</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(&#39; ไอดีหรือคลาสที่ต้องการให้ Font เปลี่ยน &#39;, { fontFamily: &#39; ชื่อ Font1 &#39;});
Cufon.replace(&#39; ไอดีหรือคลาสที่ต้องการให้ Font เปลี่ยน &#39;, { fontFamily: &#39; ชื่อ Font2 &#39;});
Cufon.replace(&#39; ไอดีหรือคลาสที่ต้องการให้ Font เปลี่ยน &#39;, { fontFamily: &#39; ชื่อ Font3 &#39;});
Cufon.replace(&#39; ไอดีหรือคลาสที่ต้องการให้ Font เปลี่ยน &#39;, { fontFamily: &#39; ชื่อ Font4 &#39;});
</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

0

delicious

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



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



อธิบายรูปที่ 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 ครับ จะได้ออกมาเป็นแบบนี้

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

พอเราได้โค้ดที่แปลงแล้วก็ 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 นะครับ

แทรก 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='&quot;post-body-&quot; + data:post.id'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </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