5 วิธีติดตั้ง Google Adsense บน Blogger (ตอนที่ 5)

บทความนี้เป็นบทความที่ต่อเนื่องมากจากบทความ 5 วิธีติดตั้ง Google Adsense บน Blogger (ตอนที่ 4) หากคุณต้องการอ่านตั้งแต่เริ้มต้นควรอ่านตั้งแต่ 5 วิธีติดตั้ง Google Adsense บน Blogger (ตอนที่ 3) ครับ

อย่างไรก็ตามแต่ละตอนก็ยังมีความอิสระจากกันคุณสามารถอ่านวิธีติดตั้ง AdSense เฉพาะในบทความนี้ได้เลยครับ


วิธีที่ 4 เพิ่ม Adsense จาก กล่องบทความบล็อก

วิธีนี้ทำได้เช่นเดียวกับการเพิ่ม Gadget Adsense แต่แตกต่างตรงที่ตำแหน่งของ Adsense จะอยู่เหนือหรือใต้บทความ

4.1 Log in เข้าไปที่ draft.blogger >>  ไปที่แผงควบคุม >>รูปแบบ >> องค์ประกอบของหน้า

คลิกแก้ไขที่กล่อง บทความบล็อก 

4.2 ในส่วนนี้มีค่าต่าง ๆ ที่ให้ตั้งค่าที่น่าสนใจมากมาย (หลายคนไม่เคยคลิกเข้ามาดูเลย) ประเด็นของเราคือเพิ่ม Adsense

  ดังนั้นเลือก แสดงโฆษณาระหว่างบทความ

4.3 เมื่อปรากฎเครื่องมือในการตั้งค่า คุณก็สามารถตั้งค่าได้เช่นเดียวกับการเพิ่ม Gadget ที่ได้กล่าวมาข้างต้นแล้ว

4.4 เมื่อตั้งค่าเสร็จสิ้นแล้วก็ทำการบันทึกครับ ผลลัพธ์ที่ได้จะเป็นดังนี้ครับ

---

---

วิธีที่ 5 ใส่ Adsense โดยเข้าไปแก้ไข HTML ของแม่แบบ

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

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

โดยไปที่ >> Blogger Ad Code Converter เมื่อได้โค้ดมาเรียบร้อยแล้วให้ดำเนินตามวิธีที่แนะนำไว้ดังนี้

5.1 ก่อนอื่นทุกคนจะต้องสร้างโค้ดของโฆษณาจาก Google Adsense เตรียมเอาไว้ก่อน และควรสร้างโค้ดให้มีขนาดกว้าง+ยาว เหมาะสมกับตำแหน่งที่จะวางด้วย สมมติว่าได้โค้ดเป็น

<script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxxxxxxx";
/* 468x60, ถูกสร้างขึ้นแล้ว x/xx/xx */
google_ad_slot = "xxxxxxxxxxx";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

ให้ทุกคนเพิ่มโค้ดสีแดงลงไปในอีก เพื่อให้ไม่เป็นปัญหาการแสดงผลกับโค้ดของ Adsense  ซึ่งจะได้โค้ดเป็น

<div class='widget-content'>
<script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxxxxxxx";
/* 468x60, ถูกสร้างขึ้นแล้ว x/xx/xx */
google_ad_slot = "xxxxxxxxxxx";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

5.2 ต่อไปเราจะมาพูดถึงการวางโค้ดในตำแหน่งต่าง ๆ

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

5.3 กรณีที่ต้องการวาง Adsense ไว้ใต้หัวเรื่องของบทความ

ให้ค้นหาโค้ด (กด Ctrl + F ช่วยค้น อย่าลืมขยายแม่แบบเครื่องมือก่อน)

<div class='post-body'>

แล้ววางโค้ดในข้อ 5.1 ถัดจากโค้ดดังกล่าว Preview ดูตัวอย่างถ้าพอใจแล้วก็บันทึกแม่แบบครับ

ผลที่ได้

 

หมายเหตุ บางแม่แบบอาจจะหาโค้ด <div class='post-body'> ไม่พบ
ให้ค้นหาโค้ดด้านล่างนี้แทน
<data:post.body/>
เมื่อพบแล้วให้วางโค้ด AdSense เอาไว้ก่อนหน้าโค้ดดังกล่าว

5.4 กรณีที่ต้องการวาง Adsense ไว้ใต้บทความ

ให้ค้นหาโค้ด (กด Ctrl + F ช่วยค้น)

<div class='post-footer'>

แล้ววางโค้ดในข้อ 5.1 ก่อนหน้าโค้ดดังกล่าว Preview ดูตัวอย่างถ้าพอใจแล้วก็บันทึกแม่แบบครับ  

ผลที่ได้

5.5 กรณีที่ต้องการวาง Adsense แทรกลงไปในขณะเขียนบทความ

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

5.5.1 ถ้าคุณไม่ใช้ Automatic Readmore คุณก้ควรจะแสดงบทความในหน้าหลักเพียง 1-2 บทความเท่านั้น เพราะ Adsense จะแสดงผลมากสุดแค่ 3 ตำแหน่ง ต่อ 1 หน้า ดังนั้นถ้าใส่โค้ดเข้าไปทุกบทความก็ต้องเลือกแสดงบทความในหน้าเดียวกันให้ น้อยลง (งงไหมเนี่ย)

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

<div style='float:right;margin:2px;'>

<!--ใส่ Adsense code ในข้อ 5.1 ตรงนี้-->

</div>

ซึ่งจะได้โค้ดใหม่เป็น


พิมพ์ข้อความเนื้อหาของบทความ
พิมพ์ข้อความเนื้อหาของบทความ
พิมพ์ข้อความเนื้อหาของบทความ

<div style='float:right;margin:2px;'>
<div class='widget-content'>
<script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxxxxxxx";
/* 468x60, ถูกสร้างขึ้นแล้ว x/xx/xx */
google_ad_slot = "xxxxxxxxxxx";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>

พิมพ์ข้อความเนื้อหาของบทความ
พิมพ์ข้อความเนื้อหาของบทความ
พิมพ์ข้อความเนื้อหาของบทความ


ผลที่ได้ (ในภาพนี้ผมยังไม่ได้แต่งพื้นหลังให้เข้ากับแม่แบบ ในภาพจึงยังไม่เนียนครับ)

หมายเหตุ ถ้าต้องการให้ชิดซ้าย ก็แก้โค้ดเป็น <div style='float:left;margin:2px;'>


บทความนี้ยาวพอสมควรครับ หากมีข้อสงสัยก็สอบถามเพิ่มเติมนะครับ และหากตกหล่นยังไงก็ช่วยเสนอแนะด้วยครับ เพราะบทความยาวมาก ๆ ก็อาจจะผิดพลาดได้ สุดท้ายก็อยากฝากว่าถ้าสนใจทำ Adsense จริง ๆ ก็พยายามหาอ่านความรู้เพิ่มเติมให้มาก ๆ เพราะที่ผมสอนนี้ถือเป็นพื้นฐานในการทำ ส่วนเทคนิคต่าง ๆ ให้ทำแล้วประสบความสำเร็จก็ยังไม่ได้พูดถึง ถ้าหากทราบข้อมูลใดเพิ่มเติมก็จะมาเพิ่มให้ในตอนที่ 5 อย่าลืมติดตามอ่านนะครับ
ที่มา http://www.hackublog.com/2010/03/5-google-adsense-blogger-4.html