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

สอนติดโค้ด Adsense ใน blogger

บทความนี้เป็นบทความที่ต่อเนื่องมากจากบทความ 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 ที่ได้กล่าวมาข้างต้นแล้ว


สอนแต่งบล็อกของ blogger

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

ทำเมนูของ blogger







วิธีที่ 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 >> และเลือกขยายแม่แบบเครื่องมือ

สอน blogspot


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

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

<div class='post-body'>

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

ผลที่ได้

สอนทำบล็อกของ blogger 

หมายเหตุ บางแม่แบบอาจจะหาโค้ด <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>

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



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

สอนใส่เพลงจาก mixpod


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


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

ตอนนี้มีความคิดเห็น : 21 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. รบกวนอีกแล้ครับ คือว่า โฆษณาที่เราใส่ลงไปในบล้อก บางทีก็ตัวหนังสือเล็ก บางทีก็ตัวใหญ่ เป็นเพราะอะไร และต้องแก้อย่างไรครับ http://joinmart-online.blogspot.com/ นะครับ

  1. @ JOINMART : ตอนที่เราสร้างโค้ดโฆษณามันมีส่วนที่เลือกกำหนดขนาดอักษรครับ ส่วนในกรณีที่สร้างโค้ดมาแล้วก็เข้าไปที่บัญชี AdSense แล้วไปที่เมนู การตั้งค่า AdSense >> จัดการโฆษณา >> ดูทางขวามือของโฆษณาที่ต้องการแล้วตั้งค่าใหม่ให้ขนาดอักษรเป็นขนาดที่ต้อง การครับ

  1. ปกติแล้วเราควรเลือกเท่าไหร่ครับ ถ้าผมอยากได้เท่ากับตัวหนังสือที่เท่ากับในบล้อกของผม หรือที่บล้อกคุณ Mr.Hackublog เลือกเท่าไหร่ครับ

  1. @ JOINMART: เลือกให้เป็นค่าเริ่มต้นครับ เพราะถ้าเลือกตัวเลือกนี้มันจะเท่ากับขนาดอักษรของเราอัตโนมัติอยู่แล้วครับ

  1. รบกวนถามนิดนึงครับ ผมสับสนในข้อ5.1 ให้เอาโค้ดจาก adsense ไป convert ก่อนแล้วค่อยเพิ่มโค้ดสีแดง หรือว่าเอาโค้ดที่ได้จาก adsense มาเพิ่มโค้ดสีแดงเข้าไปก่อนแล้วเอาไป convert ครับ.

  1. @ smashburger : เอาไป Convert ก่อนแล้วเพิ่มโค้ดสีแดงครับ
    Convert ตรงกล่อง Comment ด้านล่างที่เราคุยกันนี้ก็ได้ครับ

  1. อยากรู้เรื่อง google affiliate network เพราะวันก่อนได้รับจดหมายจาก blogger เลยสมัครผ่านแล้ว มันใช้หากินได้เปล่าครับน้อง hackublog

  1. @ SiTHicHai : ลองศึกษาดูสิครับ ผมเองยังไม่ได้เริ่ม จึงยังไม่มีคำแนะนำครับ และต้องออกตัวครับผมไม่ได้ถนัดเรื่อง Internet marketing ถ้าเป็นเรื่อง SEO นี่พอได้ครับ เพราะว่าการทำ SEO ไม่จำเป็นต้องใช้ในเรื่อง Internet marketing เสมอไปครับ

  1. สวัสดีครับ ผมได้ทดลองทำดูตามตัวอย่างแล้ว โดยจะลองใส่ ADS ใว้ใต้หัวข้อ คือใส่ต่อจาก < div class='post-body' >
    แต่มันไม่ขึ้นก็เลยลอง < data:post.body / > ดูมันติด แต่ไปอยู่ข่างล่างสุดแทนน่ะครับ - - ผมทำอะไรผิดไปหรือป่าวครับ
    แวะดูได้นะครับ ^^ konrainamjai.blogspot.com/

  1. @KonRaiNamJai : กรณีนี้ต้องวางก่อนโค้ด < data:post.body /> ครับ

    อีกวิธีหนึ่งคือเราต้อง ขยายเทมเพลตวิดเจ็ต แล้ววางถัดจากโค้ด
    <div class='post-body entry-content'>

    หรือ
    <div class='post-header-line-1'/>

    ซึ่งต้องลองวางดูในแม่แบบของตัวเองครับ

    แต่ทุกครั้งที่วางโค้ดในแม่แบบ อย่าลืม Convert Code ก่อนทุกครั้งนะครับ

  1. ขอบคุณมากครับตอนนี่ติดได้ทั้งส่วนบลใต้หัวข้อบทความและล่างสุดบรรทัดสุดท้ายของบทความแล้วครับ ^^

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

  1. ตามนี้อ่าค่ะ


    <!-- Start Here -->

    <script type="text/javascript"><!--
    google_ad_client = "pub-2xxxxxxxxxxxxxx";
    /* 120x90, created 7/17/08 */
    google_ad_slot = "55xxxxx2";
    google_ad_width = 120;
    google_ad_height = 90;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>

    <!-- End Here -->

  1. ผมโพสระหว่างบทความไม่ได้เลยครับมันขึ้น

    ไม่สามารถยอมรับ HTML ของคุณ: แท็กไม่สมบูรณ์: DIV

  1. หา >>รูปแบบ >> องค์ประกอบของหน้า ไม่เจออ่ะครับ มันอยู่ตรงไหนอ่ะครับ

  1. เราสามารถเอาadตัวอื่นที่ไม่ใช่adsenseมาแปะใต้บทความได้มั้ยครับ

  1. ลองตั้งนานครับ ถ้าไม่ได้บทความพี่นี่แย่เลยครับ

    ขอบคุณครับ

  1. พอผ่านได้ไหมครับ ^^!

    http://ma-down-load.blogspot.com/

  1. ขอบคุณครับ

  1. <div class='post-footer'> ค้นหาโค้ดนี้ เจอ 2 อัน ลงทั้งสองอันเลยป่าวครับ

  1. ตอนนี้ สมัคร adsens ผ่านแล้ว แต่ลงโฆษณา ไม่มีโฆษณา โผล่มาเลย เป็นแค่พื้นที่เปล่าๆ ว่างไว้ ไม่ทราบว่าแก้ไขยังไง ครับ ลองดูก่อนที่ wearemce.blogspot.com งงมาก

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel