แสดงบทความที่มีป้ายกำกับ blogger แสดงบทความทั้งหมด
แสดงบทความที่มีป้ายกำกับ blogger แสดงบทความทั้งหมด

วิธีลบข้อความ 'ขับเคลื่อนโดย Blogger ที่อยู่ข้างล่างหรือด้านข้องของ blog

วิธีที่ 1 

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่  'แม่แบบ > แก้ไข HTML'

ขั้นตอนที่ 2. กดปุ่ม 'Ctrl + F' บนคีย์บอร์ดแล้วสั่งค้นหาคำว่า
]]></b:skin>

ขั้นตอนที่ 3. แทนที่โค้ดที่หาเจอนั้นด้วยโค้ดใหม่ด้านล่างนี้
#Attribution1 {
  display: none;
}
]]></b:skin>

ขั้นตอนที่ 4. กดปุ่ม 'บันทึกเทมเพลต' จากนั้นลองเปิดบล็อกเพื่อดูผลลัพธ์


วิธีที่ 2 ถ้าวิธีที่1 ยังไม่หาย

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่
'แม่แบบ > แก้ไข HTML > ดำเนินการ' (ไม่ต้องเลือก 'ขยายเทมเพลตวิดเจ็ต')

ขั้นตอนที่ 2. กดปุ่ม 'Ctrl + F' บนคีย์บอร์ดแล้วสั่งค้นหาคำว่า
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>

ขั้นตอนที่ 3. ลบโค้ดที่หาเจอในขั้นตอนที่แล้วทิ้งไป

ขั้นตอนที่ 4. กดปุ่ม 'บันทึกเทมเพลต'

ขั้นตอนที่ 5. จะมีคำเตือนแจ้งว่า การลบวิดเจ็ตนั้นไม่สามารถเลิกทำได้ โดยถ้าแน่ใจว่าต้องการลบก็ให้กดที่ 'ลบวิดเจ็ต'ก็เสร็จแล้ว จากนั้นลองเปิดบล็อกเพื่อดูผลลัพธ์

2 วีธีนี้ หายแน่นอนครับ ถ้าไม่หายแสดงว่าคุณทำผิดขั้นตอนครับ อิอิ สงสัยก็คอมเม้นด้านล่างนร้าาา !!
read more

การเพิ่ม banner แถบด้านบน blogger คุณ


1. สร้างbannerตามที่ต้องการไว้ก่อน ขนาดแล้วแต่ท่านแต่ความกว้างไม่ควรน้อยกว่า 800 pixel ความสูงของภาพก็ลองออกแบบให้ดูเหมาะสม ไม่สูงมากจนเกินควร ขนาดมาตรฐานประมาณ 100 pixel  ถ้าใส่สูงมากก็จะกินพื้นที่หน้าจอแสดงผล

2.เมื่อเข้าทำงานในฐานะผู้สร้าง(ต้อง login เข้ามา) ซึ่งจะปรากฏรายละเอียดดังภาพด้านล่าง

3. ให้คลิกไปที่ปุ่ม รายการที่ post 

4. จะปรากฏหน้าต่างการทำงาน พร้อมเครื่องมือ ให้ท่านดูที่แถบกลุ่มเครื่องมือด้านซ้ายมือ เลือกรายการ รูปแบบ แล้วคลิก

5.ไปคลิกที่คำว่าแก้ไข ในบริเวณที่เรียกว่าส่วนหัว

6. ที่ปุ่ม Browse ให้ท่านคลิกแล้วไปยังตำแหน่งที่ท่านได้สร้างแบนเนอร์ส่วนหัวไว้ นำภาพเข้ามาตามวิธีการปกติ

7.ทำการกำหนดเงื่อนไขการจัดวาง หากไม่ต้องการให้เห็นข้อความ(ในที่นี้คือคำว่า northeducation) ให้เลือกรายการที่ วางคำอธิบายไว้หลังภาพ

read more

วิธีการสร้างเครื่องมือสำหรับแสดงบทความล่าสุดพร้อมภาพตัวอย่าง

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่ 'การออกแบบ > องค์ประกอบของหน้า'

ขั้นตอนที่ 2. ให้เลือกเพิ่ม Gadget แบบ 'HTML/จาวาสคริปต์'

ขั้นตอนที่ 3. คัดลอกโค้ดด้านล่างนี้ใส่ลงไปในช่อง 'เนื้อหา' และกดปุ่ม 'บันทึก' ก็เสร็จแล้ว
<style type='text/css'>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;
float:left;margin:10px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;width: 100%;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}
</style>
<script style='text/javascript' >
function showrecentpostswiththumbs(json) {document.write('<ul class="recent_posts_with_thumbs">'); for (var i = 0; i < numposts; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break;for (var k = 0; k < entry.link.length;k++){

if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}var thumburl;try {thumburl=entry.media$thumbnail.url;}catch (error)

{
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl=d;} else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Oifsdy_A09MYuf9AdcM56MwBPoi9E3d7VUEkPzJJcRQoQbG_8IWmaZFaJqUt1pvdmcDa32OlSRzm5QQkxZn0nRYFDZoTD7yeWMh0DO8Ovtuz3_sGgGSwRd5yOdsH3MyRx6IGYD8FJAw/s72/no-image-available.png';
}

var postdate = entry.published.$t;var cdyear = postdate.substring(0,4);var cdmonth = postdate.substring(5,7);var cdday = postdate.substring(8,10);var monthnames = new Array();monthnames[1] = "Jan";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Apr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Aug";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dec";document.write('<li class="clearfix">');

if(showpostthumbnails==true)
document.write('<img class="recent_thumb" src="'+thumburl+'"/>');
document.write('<b><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b><br>');

    if ("content" in entry) {
      var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
      var postcontent = entry.summary.$t;}
    else var postcontent = "";
    var re = /<\S[^>]*>/g;
    postcontent = postcontent.replace(re, "");

if (showpostsummary == true) {

      if (postcontent.length < numchars) {
          document.write('<i>');
         document.write(postcontent);
          document.write('</i>');}
      else {
          document.write('<i>');
         postcontent = postcontent.substring(0, numchars);
         var quoteEnd = postcontent.lastIndexOf(" ");
         postcontent = postcontent.substring(0,quoteEnd);
         document.write(postcontent + '...');
          document.write('</i>');}
}

var towrite='';var flag=0;
document.write('<br><strong>');

if(showpostdate==true) {towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}

if(showcommentnum==true)
{
if (flag==1) {towrite=towrite+' | ';}
if(commenttext=='1 Comments') commenttext='1 Comment';
if(commenttext=='0 Comments') commenttext='No Comments';
commenttext = '<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';
towrite=towrite+commenttext;
flag=1;
;
}

if(displaymore==true)
{
if (flag==1) towrite=towrite+' | ';
towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More -></a>';
flag=1;
;
}

document.write(towrite);

document.write('</strong></li>');
if(displayseparator==true)
if (i!=(numposts-1))
document.write('<hr size=0.5>');
}document.write('</ul>');
}

</script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;</script>
<script src='http://anurak-it-health-beauty.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'>
</script>


อธิบายเพิ่มเติม

ตั้งค่าเพื่อแสดงบทความจากทั้งบล็อก
ตอนนำไปใส่บล็อกของคุณเองอย่าลืมแก้ไขคำว่า
 http://anurak-it-health-beauty.blogspot.com
ซึ่งอยู่ในบรรทัดที่ 3 นับจากข้างล่างสุดให้กลายเป็น URL ของบล็อกของคุณเองด้วยครับ

ตั้งค่าเพื่อแสดงบทความจากป้ายกำกับอันเดียว
ส่วนสำหรับผู้ที่ต้องการแสดงข้อมูลจากป้ายกำกับเพียงป้ายเดียวเท่านั้นก็ให้แก้ไขคำว่า
default
ซึ่งอยู่ในบรรทัดที่ 3 นับจากข้างล่างสุดให้กลายเป็น
default/-/
จากนั้นก็เขียนต่อท้ายโค้ดนั้นด้วยชื่อป้ายกำกับที่ต้องการตัวอย่างเช่น
ถ้าผมต้องการแสดงบทความจากป้ายกำกับชื่อ Window XP
จากเว็บไซต์ชื่อ http://anurak-it-health-beauty.blogspot.com
ก็ต้องเปลี่ยน URL ในบรรทัดที่ 3 นับจากข้างล่างสุดของโค้ดจากค่าดั้งเดิมที่ถูกเขียนไว้ว่า
http://anurak-it-health-beauty.blogspot.com/feeds/posts/default
ให้กลายเป็น
http://anurak-it-health-beauty.blogspot.com/feeds/posts/default/-/Window XP

กำหนดจำนวนบทความที่นำมาแสดง
นอกจากนี้ถ้าต้องการเปลี่ยนแปลงจำนวนบทความตัวอย่างก็ให้ปรับตัวเลข 5 ใน
var numposts = 5;
ซึ่งอยู่ในบรรทัดที่ 11 นับจากข้างล่างสุดให้กลายเป็นจำนวนใหม่ได้ตามต้องการ
read more

การส่งโฆษณาคั่นบทความไปแทรกเพิ่มไว้ภายในบทความ

ตามปกตินั้นเราสามารถเปิดใช้โฆษณาระหว่างบทความจากเมนูบล็อกได้เองอยู่แล้ว 
แต่ถ้าหากต้องการให้โฆษณาที่คั่นระหว่างบทความเหล่านั้นไปแสดงอยู่ข้างในบริเวณหัวหรือท้ายของเนื้อหาบทความ (Show Adsense Ads Inside And Between Post) เพื่อให้ผู้ที่เข้าไปอ่านบทความของคุณด้วยเครื่องมือค้นหา หรือเข้าผ่านทางลิงก์ที่ได้ฝากไว้ เห็นโฆษณาเหล่านั้นอยู่ในเนื้อหาด้วย ก็สามารถทำได้ดังนี้

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

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

เริ่มจากเปิดใช้โฆษณาระหว่างบทความก่อน

ขั้นตอนที่ 1.
เข้าไปที่บล็อกที่เมนู 'รูปแบบ' แล้วสังเกตแกดเจ็ต 'บทความบล็อก' โดยกดที่ 'แก้ไข'
แล้วเลือกสั่งเปิดใช้ตัวเลือก 'แสดงโฆษณาระหว่างบทความ'

วิธีทำให้โฆษณาระหว่างบทความแสดงอยู่ในบทความด้วย

ขั้นตอนที่ 2. เข้าสู่บล็อกของคุณจากนั้นไปที่
'แม่แบบ > แก้ไข HTML > ดำเนินการ > ขยายเทมเพลตวิดเจ็ต'

ขั้นตอนที่ 3. โดยกด 'Ctrl + F' บนคีย์บอร์ดแล้วสั่งค้นหาคำว่า
 <b:if cond='data:post.hasJumpLink'>

โดยสังเกตตรงบริเวณจุดที่หาเจอนั้นเมื่อนับย้อนขึ้นมารวมทั้งหมด 5 บรรทัด จะพบว่ามีลักษณะเหมือนกับโค้ดข้างล่างนี้ ซึ่งเป็นเป้าหมายในการแก้ไขของเรา
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

 <b:if cond='data:post.hasJumpLink'>

ขั้นตอนที่ 4. เลือกรูปแบบการแสดงโฆษณาว่าต้องการวางไว้เหนือหรือใต้เนื้อหาบทความ
โดยเลือกให้แทนที่ โค้ดทั้ง 5 บรรทัดซึ่งเป็นเป้าหมายที่หาพบในขั้นตอนที่แล้วด้วยโค้ดแบบใดแบบหนึ่งด้านล่างนี้

แบบที่ 4.1. แสดงโฆษณาไว้เหนือเนื้อหาบทความ
<!-- Placing Ads Top Post Start-->
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <b:if cond='data:post.includeAd'>
          <b:if cond='data:post.isFirstPost'>
            <data:defaultAdEnd/>
          <b:else/>
            <data:adEnd/>
          </b:if>
          <div class='inline-ad'>
            <data:adCode/>
          </div>
          <data:adStart/>
        </b:if>
      </b:if>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
<!-- Placing Ads Top Post End-->
<b:if cond='data:post.hasJumpLink'>

แบบที่ 4.2. แสดงโฆษณาอยู่ใต้เนื้อหาบทความ
<!-- Placing Ads Bottom Post Start-->
      <data:post.body/>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <b:if cond='data:post.includeAd'>
          <b:if cond='data:post.isFirstPost'>
            <data:defaultAdEnd/>
          <b:else/>
            <data:adEnd/>
          </b:if>
          <div class='inline-ad'>
            <data:adCode/>
          </div>
          <data:adStart/>
        </b:if>
      </b:if>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
<!-- Placing Ads Bottom Post End-->
<b:if cond='data:post.hasJumpLink'>

แบบที่ 4.3. แสดงโฆษณาพร้อมกันทั้งเหนือและใต้เนื้อหาบทความ
<!-- Placing Ads Top and Bottom Post Start-->
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <b:if cond='data:post.includeAd'>
          <b:if cond='data:post.isFirstPost'>
            <data:defaultAdEnd/>
          <b:else/>
            <data:adEnd/>
          </b:if>
          <div class='inline-ad'>
            <data:adCode/>
          </div>
          <data:adStart/>
        </b:if>
      </b:if>
      <data:post.body/>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <b:if cond='data:post.includeAd'>
          <b:if cond='data:post.isFirstPost'>
            <data:defaultAdEnd/>
          <b:else/>
            <data:adEnd/>
          </b:if>
          <div class='inline-ad'>
            <data:adCode/>
          </div>
          <data:adStart/>
        </b:if>
      </b:if>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
<!-- Placing Ads Top and Bottom Post End-->
<b:if cond='data:post.hasJumpLink'>

ขั้นตอนที่ 5. เลือกที่ 'บันทึกเทมเพลต' จากนั้นลองเปิดบล็อกดูผลลัพธ์
read more

การใส่รายการบทความที่เกี่ยวข้องกัน (Related Posts)

การใส่รายการบทความที่เกี่ยวข้องกัน (Related Posts) กับบทความที่กำลังถูกเปิดอยู่ จะช่วยให้ผู้อ่านบล็อกเข้าชมเนื่อหาที่มีความเกี่ยวข้องกันได้ง่ายขึ้นโดยทำได้ดังนี้ 

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่ 'การออกแบบ > แก้ไข HTML > ขยายแม่แบบเครื่องมือ'

ขั้นตอนที่ 2.  จัดวางรูปแบบลักษณะสไตล์
โดยกด 'Ctrl + F' บนคีย์บอร์ดแล้วสั่งค้นหาคำว่า
]]></b:skin>

จากนั้นให้แทนที่โค้ดที่หาเจอนั้นด้วยโค้ดข้างล่างนี้
<!--Related Posts Style Start-->
#related-posts {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

#related-posts-box {
  background: #ffffff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjybbtAQt_i3DJV_RjJ6XqAyRY3q5Ye35vEXPlBoeNPoTxxhRnG__rol4z-tHf97gZN_qqLyEBKW-79evPiwLBsKizZNVYUaYUNPfDPVgrlXDSQlDO73cDI_T-H-MHHJQWAc-epZzuuzeA/') repeat-x scroll top left;
  border: solid 1px #cccccc;
  margin: 10px 0 10px;
  padding: 0 10px 5px;
}

#related-posts-title {
  background: transparent  url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVtEaFkISW6UiRMqIGRdQ4OeZgdDizvViOekXLKNQoA5NdANhc2ivCAVfqRuSofNigJ86x0VJ-_amsvla4EIdO8v-4Rg17Y8iJM_cvlkkKEiKHvLX4KnXe8uzZgi2XjEo17JCdw-uC_SQ/') no-repeat 0px 5px;
  color: #2d4247;
  border-bottom: solid 1px #cccccc;;
  padding : 14px 0 0 38px;
}

#related-posts-title h2 {
  font-size: 120%;
}

#related-posts a {
  background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga3YyvQnxJgqAF1La89R9NXhKma4YbOGTu-ol13Gd777V_SYNnSJgYfRASzbDNkbWPPbg24HsCiCWcGLnJLDLG0LWPbHJtnJbelu656p_9F-3MJUGI-WPxpnwUODJOukODDxoj_yDYu8c/') no-repeat 10px 50%;
  color: #303843;
  padding: 9px 0 9px 40px;
  display: block;
  border: none;
}

#related-posts ul li {
  list-style: none;
  border: none;
  margin: 0 0 0 -15px;
  padding: 0px;
}

#related-posts ul li a:hover {
  background: #f9f7f0 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzLfellMRa8__UMfCqo7h4DHy1B2Wr4wnITe5ya8Idbqlce_N2F3aybA-eIasd4_YLnBztpHVJh9S9yGKXukBuVDgJf-7G9d5DJLMB-aLRWvxKYFuqlC1Dt2PnGXKSr8c8RhkzF8_V3zA/') no-repeat 10px 50%;
  color: #303843;
  border: none;
  display: block;
  padding: 9px 0 9px 40px;
}
<!--Related Posts Style End-->

]]></b:skin>

ขั้นตอนที่ 3. วางสคริปต์
โดยกด 'Ctrl + F' บนคีย์บอร์ดแล้วสั่งค้นหาคำว่า
   <b:template-skin>

จากนั้นให้แทนที่โค้ดที่หาเจอนั้นด้วยโค้ดข้างล่างนี้
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

    <b:template-skin>

ขั้นตอนที่ 4. วางตำแหน่งของกล่องแสดงบทความที่เกี่ยวข้อง
โดยกด 'Ctrl + F' บนคีย์บอร์ดแล้วสั่งค้นหาคำว่า
<b:includable id='status-message'>
ซึ่งสังเกตว่าจะพบโค้ดเหมือนกับสองบรรทัดด้านล่างนี้ซึ่งเป็นเป้าหมายการแก้ไขโค้ดในขั้นตอนนี้
</b:includable>
<b:includable id='status-message'>

จากนั้นให้แทนที่โค้ดทั้งสองบรรทัดซึ่งเป็นเป้าหมายนั้นด้วยโค้ดข้างล่างนี้
<!--RELATED-POSTS-BOX-STARTS-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<div id='related-posts-box'>
<div id='related-posts-title'>
<h2>Related Posts:</h2>
</div>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'/><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div></div></b:if>
<!--RELATED-POSTS-BOX-STOPS-->

</b:includable>
<b:includable id='status-message'>

ขั้นตอนที่ 5. เลือกที่ 'บันทึกแม่แบบ' จากนั้นลองเปิดบล็อกดูผลลัพธ์

อธิบายเพิ่มเติม
จำนวนในการแสดงหัวข้อบทความที่มีความเกี่ยวข้องกันนั้นจะถูกกำหนดจาก
โค้ดในขั้นตอนที่ 4 ในส่วนของ
<!--RELATED-POSTS-BOX-STARTS-->
ซึ่งในตัวอย่างนี้ได้ถูกเขียนกำหนดเอาไว้ว่า
max-results=5
ซึ่งจะส่งผลให้หัวข้อบทความที่มีความเกี่ยวข้องกันถูกแสดงออกมา 5 อัน
โดยสามารถกำหนดจำนวนหัวข้อที่ถูกแสดงออกมาโดยเปลี่ยนจากเลข 5 ให้เป็นเลขที่ต้องการได้เลยครับ

นอกจากนี้หากต้องการแก้ไขรูปภาพ สี หรือลักษณะสไตล์ต่างๆ ของกล่องบทความที่เกี่ยวข้องอันนี้ ให้ไปแก้ไขในขั้นตอนที่ 2 ตั้งแต่ที่เขียนว่า <!--Related Posts Style Start--> ไปจนถึง <!--Related Posts Style End--> ให้เป็นแบบที่ชอบได้เลย
read more

การแสดงบทความล่าสุดของบล็อกด้วยฟีด

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่ 'การออกแบบ > องค์ประกอบของหน้า'

ขั้นตอนที่ 2. เลือก 'เพิ่ม Gadget' โดยให้เลือกใช้เครื่องมือ 'ฟีด'
 
ขั้นตอนที่ 3. จะพบว่ามีเมนู 'ตั้งค่าฟีด' โผล่ออกมา โดยให้ใส่ค่าในช่อง 'URL ฟีด' ดังนี้
http://[YourURL]/feeds/posts/summary?max-results=5
โดยให้เอา URL ในบล็อกของคุณ (Blog URL) ใส่แทนที่คำว่า [YourURL] เหมือนตัวอย่างข้างล่างนี้
หรือถ้ามีโดเมนเนมของตัวเอง (Custom Domain) อยู่แล้วก็สามารถใส่ลงไปได้เช่นกัน

ขั้นตอนที่ 4. จากนั้นก็ตั้งชื่อเครื่องมือนี้ให้ผู้อ่านบล็อกเห็นเช่น 'บทความล่าสุด' หรือ 'Recent Posts' ก็ได้

ขั้นตอนที่ 5. เลือกที่ 'บันทึกแม่แบบ' จากนั้นลองเปิดบล็อกดูผลลัพธ์
read more

การสมัครใช้และติดตั้ง Google Custom Search Engine



Google Custom Search คุณสามารถเพิ่มช่องค้นหาในหน้าแรกเพื่อช่วยให้ผู้คนค้นพบสิ่งที่ต้องการในเว็บไซต์ของคุณได้

วิธีสร้างเครื่องมือค้นหาข้อมูลด้วย Google Custom Search

ขั้นตอนที่ 1. เริ่มแรกให้ไปที่ http://www.google.com/cse/ แล้วกดปุ่ม 'สร้่าง Google Custom Search' แล้วก็ใส่ข้อมูลของเครื่องมือค้นหาที่ต้องการลงไปตามขั้นตอนด้านล่าง โดยข้อมูลที่ใส่ลงไปนี้ส่วนใหญ่จะสามารถแก้ไขได้ในภายหลังเมื่อเข้าไปเลือกที่ 'แผงควบคุม'

ขั้นตอนที่ 2. ตั้งชื่อให้เครื่องมือค้นหา

ขั้นตอนที่ 3. ช่องสำหรับคำอธิบายของเครื่องมือค้นหา (จะไม่ใส่ก็ได้)

ขั้นตอนที่ 4. ใส่ URL เว็บไซต์ที่จะให้ถูกรวมอยู่ในผลการค้นหาของเครื่องมือนี้

อธิบายเพิ่มเติม
นอกจากนี้สามารถอ่านรายละเอียดเกี่ยวกับรูปแบบ URL ของ google custom search ได้ที่
https://www.google.com/cse/create/new

ขั้นตอนที่ 5. เลือก 'ยอมรับข้อกำหนดในการให้บริการ'

ขั้นตอนที่ 6. กดที่ 'ถัดไป'

ขั้นตอนที่ 7. กดที่ 'เสร็จสิ้น'

ขั้นตอนที่ 8. จะมีชื่อเครื่องมือค้นหาที่ทำขึ้นแสดงอยู่ในรายการด้านล่าง โดยเราสามารถเข้าไปจัดการปรับแต่งเครื่องมือนี้ด้วยการเลือกที่ 'แผงควบคุม'

ขั้นตอนที่ 9. จะเข้าสู่หน้า 'ข้อมูลเบื้องต้น' โดยจะพบว่ามีข้อมูลต่างๆ ของที่ใส่ลงไปแสดงไว้อยู่ ซึ่งเราสามารถเปลี่ยนแปลงใหม่ได้ตามต้องการ

ขั้นตอนที่ 10. ถ้าหากลองกดปุ่ม 'รับโค้ด' ที่เมนูทางซ้ายมือ จะพบโค้ดของเครื่องมือค้นหาอันนี้แสดงอยู่

ซึ่งในตอนนี้ถ้านำโค้ดไปใช้เลยก็จะได้เครื่องมือค้นหาเป็นแบบ 'Search Element' ที่ผลการค้นหาจะปรากฎออกมาในหน้าบล็อกหน้านั้นเลยตามแบบภาพข้างล่างนี้

แต่อาจมีบางคนที่ชอบเครื่องมือค้นหาแบบ 'หน้าเว็บที่โฮสต์โดย Google' ซึ่งจะแสดงผลการค้นหาเหมือนในภาพข้างล่างนี้มากกว่า โดยเราสามารถเปลี่ยนวิธีแสดงผลการค้นหาได้ตามวิธีในขั้นตอนต่อจากนี้ (ส่วนคนที่ชอบแบบ 'Search Element' ที่แสดงผลในหน้านั้นเลยก็ให้ข้ามขั้นตอนที่ 11-14 ไปแล้วทำต่อในขั้นตอนที่ 15-18 ได้เลย)


ขั้นตอนที่ 11. เลือก 'รูปลักษณ์และความรู้สึก' ในเมนูข้่างซ้ายมือ

ขั้นตอนที่ 12. เปลี่ยนตัวเลือกการโฮสต์จาก 'Search Element' ให้กลายเป็น 'หน้าเว็บที่โฮสต์โดย Google'

ขั้นตอนที่ 13. จากนั้นกดที่ปุ่ม 'บันทึก'

ขั้นตอนที่ 14. หลังจากนั้นก็ให้กดเลือกที่ 'รับโค้ด' ทางซ้ายมืออีกครั้งจะพบว่าโค้ดในกรอบสี่เหลี่ยมจะเปลี่ยนไป โดยถ้าสั่งคัดลอกโค้ดในกรอบนี้ไปวางใส่ลงเว็บไซต์หรือบล็อกของเราก็จะมีช่องค้นหาปรากฎออกมา

ซึ่งโค้ดในกรอบที่เห็นตามภาพตัวอย่างนั้นจะมีลักษณะเหมือนกับด้านล่างนี้
<form action="http://www.google.com/cse" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="006897406992532767808:a51mzinfg5s" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="31" />
    <input type="submit" name="sa" value="ค้นหา" />
  </div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=th"></script>


ขั้นตอนที่ 15. วิธีนำโค้ดที่ได้มาไปใส่ลงบล็อกเริ่มโดยคัดลอกโค้ดจากช่อง 'รับโค้ด' ที่เลือกมาจากนั้นเข้าไปที่เมนูของบล็อกแล้วเลือกที่
การออกแบบ > องค์ประกอบของหน้า > เพิ่ม Gadget > HTML/จาวาสคริปต์

อธิบายเพิ่มเติม
อาจสงสัยว่าในเมื่อ Blogspot มันมีตัวเลือก 'Gadget ช่องค้นหา' เหมือนในรูปข้างล่างนี้ไว้ให้ใช้อยู่แล้ว แต่ทำไมต้องไปเอาโค้ดสร้าง Google Custom Search มาใส่อีก


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

ขั้นตอนที่ 16. วางโค้ดที่คัดลอกมาลงใส่ในช่องที่ปรากฎ

ขั้นตอนที่ 17. ตั้งชื่อ 'หัวข้อ' ของ Gadget นี้ (จะไม่ใส่ก็ได้)

ขั้นตอนที่ 18. กดที่ 'บันทึก' ก็เสร็จแล้ว หลังจากนั้นถ้าลองเข้าไปที่หน้าแรกของบล็อกก็จะเห็นเครื่องมือค้นหาแสดงไว้อยู่ โดยถ้าลองสั่งค้นหาดูก็จะได้ผลลัพธ์ออกมาตามการแสดงผลที่เราเลือกไว้

ภาพตัวอย่างเมื่อเลือกใช้การแสดงผลแบบ 'หน้าเว็บที่โฮสต์โดย Google'

อธิบายเพิ่มเติม
สำหรับผู้ที่ใช้การแสดงผลแบบ 'หน้าเว็บที่โฮสต์โดย Google' ถ้ารู้สึกว่าขนาดช่องค้นหาที่แสดงอยู่ในบล็อกมันสั้นหรือยาวมากไป ก็สามารถปรับขนาดได้ง่ายๆ
ด้วยการแก้ไขตัวเลขโค้ดจากขั้นตอนที่ 16 ในบรรทัดที่ 6 ซึ่งได้เขียนเอาไว้ว่า
<input type="text" name="q" size="31" />
โดยถ้าอยากให้ช่องสำหรับใส่คำค้นหามันสั้นลงก็ลดเลขให้น้อยกว่า 31 แต่ถ้าอยากให้ยาวขึ้นก็เพิ่มเลขให้มากกว่า 31 ดังที่แสดงในตัวอย่างตามภาพด้านล่างนี้


read more

การห้ามไม่ให้ผู้อ่านสามารถคลิกขวาในบล็อก


ขั้นตอนที่ 1.  เข้าสู่บล็อกแล้วเลือกที่
'การออกแบบ > องค์ประกอบของหน้า'

ขั้นตอนที่ 2.  ให้เลือกเพิ่ม Gadget แบบ 'HTML/จาวาสคริปต์'

ขั้นตอนที่ 3.  คัดลอกโค้ดด้านล่างนี้ใส่ลงไปในช่อง และกดบันทึกก็เสร็จแล้ว
<script language=javascript>
<!--
//Disable right mouse click Script
//By Being Geeks
//For full source code, visit http://www.beinggeeks.com
var message="http://anurak-it-health-beauty.blogspot.com";
///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false")
// -->
</script>
pearl<script language="JavaScript1.2" type="text/javascript">
function disableselect(e){
return false
}
function reEnable(){
return true
}
//if IE4+
document.onselectstart=new Function ("return false")
//if NS6
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>eus
<script language=javascript>
<!--
//Disable right mouse click Script
//By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com
var message="http://anurak-it-health-beauty.blogspot.com";
///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}</script>

จากนั้นเมื่อลองคลิกขวาบนหน้าบล็อกของท่านเลยครับ อิอิ ง่ายใช่ป่ะ

อย่าลืมแก้ ที่คำว่า http://anurak-it-health-beauty.blogspot.com
แก้เป็นคำที่ท่านต้องการให้ปรากฎ  จะมีอยู่ 2 จุดนะ
read more

การใช้ Gadget สำหรับแสดงบทความล่าสุดพร้อมภาพย่อ


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

ขั้นตอนที่ 1. ไปที่บล็อกแล้วเลือกที่ รูปแบบ > แก้ไข HTML > องค์ประกอบของหน้า

ขั้นตอนที่ 2. เลือกที่ เพิ่ม Gadget แล้วค้นหาด้วยคำว่า Recent Posts ในช่องด้านบน

ขั้นตอนที่ 3. เลือกไปที่ Gadget ชื่อว่า Recent Post Advanced แล้วกดเพิ่มลงไปในบล็อก

ขั้นตอนที่ 4. ตั้งค่าของเครื่องมือ Recent Post Advanced ที่เพิ่มลงไปโดยเปลี่ยนค่าในช่อง Blog Url ให้เป็น URL ของ Blogger ที่เป็นเป้าหมายลงไป แล้วกด อัปเดต จากนั้นค่อยเลือกที่ บันทึก

ขั้นตอนที่ 5. เลือกที่ บันทึก ในหน้าองค์ประกอบของหน้าอีกครั้ง ก็ใช้ได้แล้ว อิอิ

ไม่ยากอย่างที่คิดชิมิๆ 

read more

การแสดงบทความย่อพร้อมภาพตัวอย่างแบบอัตโนมัติ blogger


การให้ Blogger แสดงเนื้อหาบทความแบบย่อๆ พร้อมกับภาพประกอบขนาดเล็กแบบอัตโนมัติ (Automatic Read More With Thumbnail) เพื่อช่วยให้ผู้อ่านบล็อคของคุณเห็นตัวอย่างบทความนั้นว่าน่าสนใจเพียงใด ก่อนตัดสินใจจะอ่านต่อ สามารถทำได้ด้วยการแก้ไขแม่แบบ HTML ซึ่งมีวิธีการดังนี้


ขั้นตอนที่ 1.  เข้าสู่บล็อคของคุณจากนั้นไปที่
'แม่แบบ > แก้ไข HTML'

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

ขั้นตอนที่ 3.  คลิกเลือกที่ 'ขยายเทมเพลตวิดเจ็ต' เพือเปิดโค้ดแบบเต็มออกมา (ห้ามลืมนะ)

ขั้นตอนที่ 4.  กดปุ่ม <Ctrl + F> บนคีย์บอร์ด
เพื่อให้ฟังก์ชันช่องค้นหาคำของ Browser เปิดทำงาน ช่วยให้การค้นหาคำที่ต้องการในหน้าเว็บนั้นรวดเร็วยิ่งขึ้นโดยช่องนี้จะไปอยู่บริเวณไหนของหน้าจอขึ้นอยู่กับชนิด Browser ของคุณครับ

ขั้นตอนที่ 5.  พิมพ์ </head> ลงในช่องที่ปรากฏขึ้นมาเพื่อค้นหา แล้วคัดลอกโค้ดที่อยู่ข้างล่างนี้ไปวางไว้ที่ด้านบนของโค้ด </head> ซึ่งค้นหาเจอ
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}


//]]>
</script>

ขั้นตอนที่ 6.  เกี่ยวกับการแก้ไขโค้ดในขั้นตอนที่ 5 สำหรับผู้ที่ต้องการเปลี่ยนลักษณะของบทความย่อ
summary_noimg = 430; คือการตัดข้อความของบทความย่อเมื่อไม่มีภาพตัวอย่าง
summary_img = 340; คือการตัดข้อความของบทความย่อเมื่อมีภาพตัวอย่างอยู่ด้วย
img_thumb_height = 100; คือความสูงของภาพตัวอย่าง
img_thumb_width = 120; คือความกว้างของภาพตัวอย่าง

ขั้นตอนที่ 7.  ค้นหาโค้ด <data:post.body/> ด้วยวิธีเดิม
โดยในเทมเพลทของบล็อกเกอร์รุ่นใหม่ในปัจจุบันปี 2013 นี้เมื่อค้นหาแล้วจะพบโค้ดในขั้นตอนที่ 7 นี้แสดงอยู่ 3 จุดซึ่งตำแหน่งที่เราต้องเข้าไปแก้ไขคือจุดที่สองครับ โดยมีจุดสังเกตคือโค้ดเป้าหมายของเรานี้จะถูกเขียนอยู่ใต้
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
จากนั้นให้สั่งแทนที่ตัวโค้ด <data:post.body/> ที่หาเจอด้วย
<b:if cond='data:blog.pageType == "index"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>
<b:else/><data:post.body/></b:if>

ขั้นตอนที่ 8.  เลือกที่ 'บันทึกแม่แบบ' แล้วก็เป็นอันเสร็จ หลังจากนั้นก็ลองไปที่ 'ดูบล็อก' เพื่อชมผลงานของคุณได้เลยครับ

อธิบายเพิ่มเติม
สำหรับคนที่ตั้งชื่อบทความยาว ถ้าต้องการให้แสดงแค่คำว่า Read More สั้นๆ อย่างเดียวก็ให้เปลี่ยนโค้ดขั้นตอนที่ 7 เป็นดังนี้ครับ
<b:if cond='data:blog.pageType == "index"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>read more</a></span>
<b:else/><data:post.body/></b:if>
read more

การเริ่มต้นสร้างบล็อกของคุณ

ในการเริ่มใช้บล็อกเกอร์ เพียงลงชื่อเข้าใช้ด้วยบัญชี Google (ถ้าคุณใช้ Gmail,) ถ้าคุณยังไม่มีบัญชีผู้ใช้ Google Account คุณสามารถสร้างบัญชีใหม่ได้ทันที

ขั้นตอนที่ 1. เข้าไปที่ https://www.blogger.com/home แล้วใส่ชื่อบัญชีผู้ใช้และรหัส Gmail ของคุณลงไปจากนั้นกดที่ 'ลงชื่อเข้าใช้งาน'

ขั้นตอนที่ 2. ใส่ชื่อผู้เขียนบล็อกที่คุณต้องการแสดงให้ผู้อ่านเห็น แล้วเลือกที่ 'ดำเนินการต่อ'

ขั้นตอนที่ 3. ตั้งชื่อเว็บบล็อก และใส่ที่อยู่บล็อก (URL) จากนั้นเลือกที่ 'ดำเนินการต่อ'

ขั้นตอนที่ 4. เลือกแม่แบบหรือหน้าตาของบล็อกจากเมนู โดยสามารถเปลี่ยนหน้าตาใหม่ในภายหลังได้ แล้วก็เลือก 'ดำเนินการต่อ'

ขั้นตอนที่ 5. เลือก 'เริ่มต้นการเขียนบล็อก'

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

ขั้นตอนที่ 7. นอกจากนี้ยังสามารถดูรายการบล็อกทั้งหมดที่คุณสร้างไว้หรือเป็นผู้ร่วมเขียนได้โดยไปสู่แผงควบคุมบล็อกที่ http://www.blogger.com/home

read more