Yokey My Blog Editor

มาเข้าเรื่องกันว่าจะต้องไปจัดการกันอย่างไร
เข้าระบบ New Blogger แล้วเข้าหน้า Dashboard
ไปที่แมนู Template กดปุ่ม Edit HTML เพื่อเข้าไปจัดการ

ทำเครื่องหมายที่ตัวเลือก Expand Widget Templates เพื่อทำการขยายโค๊ด Widget Templates ให้เราจัดการได้ทุกส่วน เพราะเราต้องทำการเพิ่มโค๊ด Adsense และจำเป็นอาจต้องมีการแก้ไข CSS ของ Templates ด้วย

โดยทั่วไปหลังจากที่ ชาว Adsense Blogger ทำการเลือกชนิดของ Adsense และ Gen โค๊ดออกมาก็จะได้ในลักษณะนี้

    <script type="text/javascript">    
google_ad_client="pub-xxxxxxxxxxxxxxxxxxx";
google_ad_host="pub-xxxxxxxxxxxxxxxx";
google_ad_width=468;
google_ad_height=60;
google_ad_format="468x60_as";
google_ad_type="text";
google_color_border="FFFFFF";
google_color_bg="FFFFFF";
google_color_link="333333";
google_color_url="FF6633";
google_color_text="FF4233";
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

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

<div class='post-body'>

พอเจอแล้วทำการเพิ่มโค๊ดของ Adsense ลงไป แต่...เดี่ยวก่อน

ก่อน เราต้องทำการเพิ่ม

<div class="widget-content"> **Adsense Code** </div>

ครอบ Adsense Code ด้วยเพื่อสามารถให้ New Blogger จัดการ Widget Templates ได้ถูกต้อง

ซึ่งจะได้การวางโค๊ดประมาณนี้

<!-- ++++++++Begin Adsense Code ++++++++ -->
  <div class="widget-content">
    <script type="text/javascript">    
google_ad_client="pub-xxxxxxxxxxxxxxxxxxxx";
google_ad_host="pub-xxxxxxxxxxxxxxxxx";
google_ad_width=468;
google_ad_height=60;
google_ad_format="468x60_as";
google_ad_type="text";
google_color_border="FFFFFF";
google_color_bg="FFFFFF";
google_color_link="333333";
google_color_url="FF6633";
google_color_text="FF4233";
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
  </div>
<!-- ++++++++End Adsense Code ++++++++ -->
    <div class='post-body'>

เสร็จแล้วก็ลองกด preview ดูก่อนนะครับว่าผลเป็นยังไง

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

<div class='post-footer'>

ดังตัวอย่าง

<!-- ++++++++Begin Adsense Code ++++++++ -->
  <div class="widget-content">
    <script type="text/javascript">    
google_ad_client="pub-xxxxxxxxxxxxxxxxxxxx";
google_ad_host="pub-xxxxxxxxxxxxxxxxx";
google_ad_width=468;
google_ad_height=60;
google_ad_format="468x60_as";
google_ad_type="text";
google_color_border="FFFFFF";
google_color_bg="FFFFFF";
google_color_link="333333";
google_color_url="FF6633";
google_color_text="FF4233";
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
  </div>
<!-- ++++++++End Adsense Code ++++++++ -->
    <div class='post-footer'>

สิ่งที่ต้องพึงระวังคือ เมื่อเรา gen code ออกมาสิ่งสำคัญคือขนาด google_ad_format="468x60_as"; เพราะเมื่อเราเอามาวางในส่วนของ เนื้อหา Body post นั้น ค่าของแทมเพลทโดยมาก จะอยู่ที่ "width: 460px;" อยู่แล้ว ทำให้โค๊ดที่ได้ผิดเพี้ยนไปครับ เพราะมันขังขาดอีก 8 พิกเซล ซึ่งจะทำให้การแสดงผล Adsense ไม่ถูกต้องหรือขาดหาย

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

เพราะฉะนั้นหากต้องการนำ Code Adsense ขนาด ยาว 468 มาวางต้องแก้ไขแทมเพลทให้ส่วนของที่แสดงเนื้อหา ยาวกว่า width: 468px; ครับ
เพราะในเมื่อ Code Adsense width=468; แล้วมาใส่ในช่องที่แคบกว่ามันก็จะถูกปรับในสั่นลงและแสดงเป็นกล่องแทน

เหตุนี้ความจำเป็นที่จะเรียนรู้ในการแก้ไข CSS ก็จำเป็นต่อการทำ Adsense ซึ่งเราต้องทำการแก้ไข CSS ของ Templates ด้วย

ค่าปกติของ Templates (ตัวอย่างจาก Templates ปกติชื่อ: Name: TicTac) ที่เราต้องเข้าไปแก้ไข CSS คือ ในส่วนของ #main และ #sidebar

ตัวอย่าง CSS Templates ในส่วนของ #main และ #sidebar

#main {
  float: left;
  width: 460px; <==================== ขนาดของความกว้างของ main
  margin: 20px 0 0 0;
  padding: 0 0 0 1em;
  line-height: 1.5em;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar {
  float: right;
  width: 259px; <==================== ขนาดของความกว้างของ  sidebar
  padding: 20px 0px 0 0;
  font-size: 85%;
  line-height: 1.4em;
  color: $sidebartextcolor;
  background: url(http://www.blogblog.com/tictac/sidebar_bg.gif) no-repeat 0 0;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

เห็นได้ว่าในส่วนของการแสดงผลของเนื้อหาของ Blogger นั้นมีขนาดความกว้างอยู่ที่ width: 460px; ซึ่งเราจะจำเป็นต้องทำการเพิ่มขนาดกว้างกว่า Adsense Code คือ google_ad_width=468; แต่เมื่อเราขยายในส่วนของความกว้าง #main แล้ว #sidebar ก็จะถูกเบียดและตกไปด้านล้างของหน้าเพจ ก็จำเป็นต้องลดขนาดของ #sidebar ลงมาตามสัดส่วน เช่น เพิ่มความกว้างของ #main จาก width: 460px เป็น width: 489px; เท่ากับว่าเราเพิ่มขึ้นไป 29 px (พิกเซล') ก็ต้องลดขนาดของ #sidebar ลงไป 29 px (พิกเซล') เช่นกัน ดังแสดงตัวอย่าง

#main {
  float: left;
  width: 489px;   <==================== ขนาดของความกว้างของ main
  margin: 20px 0 0 0;
  padding: 0 0 0 1em;
  line-height: 1.5em;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar {
  float: right;
  width: 230px;   <==================== ขนาดของความกว้างของ  sidebar 
  padding: 20px 0px 0 0;
  font-size: 85%;
  line-height: 1.4em;
  color: $sidebartextcolor;
  background: url(http://www.blogblog.com/tictac/sidebar_bg.gif) no-repeat 0 0;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  } 

*** CSS Templates ในส่วนของการแสดงผลเนื้อหา หรือสไลด์บาร์อาจมีชื่อ ฟังก์ชัน CSS ไม่เหมือนกันในการกำกับส่วนแสดงผล และส่วน สไลด์บาร์ ตามตัวอย่าง
เช่น #main และ #sidebar หรือ #main-wrap #sidebar-wrap เป็นต้น

นอกจากนี้ สามารถจัดการ wrapper หรือขนาดแสดงผลของหน้าเพจทั้งหมดแต่อาจยุ่งยากกว่าซึ่งไม่ขอกล่าวถึง (เพราะผมเองก็ยังงงกับ Templates บางตัว) 555

หลังจากนั้นให้ทำการบันทึกให้เรียบร้อย

อ่อ..แถม สำหรับท่านที่ต้องการใส่ Adsense Code ด้านบนในส่วนของ header ก็สามารถทำการใส่ได้ครับ
โดยทำการใส่ไว้หลังจาก

  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>

ตัวอย่าง

<div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
<!-- ++++++++Begin Adsense Code ++++++++ -->
  <div class='widget-content'>
    <script type='text/javascript'>    
google_ad_client="pub-xxxxxxxxxxxxxxxxxxxx";
google_ad_host="pub-xxxxxxxxxxxxxxxxx";
google_ad_width=468;
google_ad_height=15;
google_ad_format="468x15_0ads_al";
google_color_border="FFFFFF";
google_color_bg="FFFFFF";
google_color_link="000000";
google_color_url="BA476B";
google_color_text="0066CC";
</script>
<script src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'>
</script>
  </div>
<!-- ++++++++End Adsense Code ++++++++ -->

ตัวอย่างเอาไปวางที่หน้า Single post comments

<!-- ++++++++Begin Adsense Code ++++++++ -->
  <div class='widget-content'>
    <script type='text/javascript'>    
google_ad_client="pub-xxxxxxxxxxxxxxxxxxxx";
google_ad_host="pub-xxxxxxxxxxxxxxxxx";
google_ad_width=468;
google_ad_height=15;
google_ad_format="468x15_0ads_al";
google_color_border="FFFFFF";
google_color_bg="FFFFFF";
google_color_link="000000";
google_color_url="BA476B";
google_color_text="0066CC";
</script>
<script src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'>
</script>
  </div>
<!-- ++++++++End Adsense Code ++++++++ -->
<div class='comments' id='comments'>

หลังจากเพิ่มเข้ามาแล้ว



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

http://pagead2.googlesyndication.com/*

เข้าไปในส่วนจัดการสกัดบล๊อก URL ที่ไม่ต้องการเท่านี้
ก็ไม่ต้องรำคาญกับ Adsense ที่ไม่ต้องการ และไม่ต้องกลัวว่าจะกดถูก Adsense ของตัวเองแล้วโดนแบน เพราะปรับแต่งจนเนียนสลวย แทบแยกไม่ออกกับเนื้อหาในหรือลิงก์ในเพจจริง ๆ

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



หากไม่สามารถจัดการได้ หรือมีปัญหาส่วนใดสามารถโพสถามมาได้ครับ

เพิ่มเติม 5/8/2007......

มีบางท่านที่ทำแล้วมีปัญหานะครับ เช่นไม่ขึ้นโชว์ให้ เป็นกล่องดำ
ประเด็นหลัก ๆ ในการเพิ่มคือ
1. ไม่เกินจำนวนตามกฏ Adsense ครับ หากใส่มาก มันจะหายไป
2. ใส่โค๊้ผิดไม่ถูกต้องตามหลักการ จะกลายเป็นกล่องสีดำ


ตัวอย่างภาพ การเพิ่ม ad Units



1. เป็นโคีดที่ได้จากการสร้างจาก Add a Page Element > AdSense ครับ นับเป็น AdSense code ตัวที่ 1
2. ตัวนี้เราสร้างขึ้นมาเองหรือจะ copy code จาก ตัวที่ 1 มาก็ได้ครับ นับเป็น AdSense code ตัวที่ 2
3. ตัวใส่โคีดไม่ถูกต้องครับเป็นกล่องดำ นับเป็น AdSense code ตัวที่ 3

เช่น

<script type="text/javascript"><!-- 

//--></script>

อย่าลืมเอา ออกด้วยครับ

4. ตัวสุดท้ายนี้ไม่ขึ้นนะครับเพราะเกินจำนวนตามกฎ ครับ ใส่ได้มากสุด 3 อันครับ มันจึงหายไปไม่แสดงผล นับเป็น AdSense code ตัวที่ 4

คิดว่าหากตรวจสอบในเบื้องต้นแล้วก็จะปรากฏ แต่สิ่งที่ต้องระวังคือ การแสดงผลในการโชว์ ป้าย AdSense ครับต้องให้ครบตามสัดส่วนอย่าให้ขาดหายไป ซึ่งต้องแก้ไข template ที่ใช้งานด้วยครับ