วิธีใส่เครื่องเล่น MP3 แบบ Playlist ลงใน blogger

สำหรับคนที่มี Url ของไฟล์เสียง .mp3 แล้วอยากจะทำ Playlist เล่นเพลงในบล็อกของ blogger หรือ blogspot วันนี้ผมมีโค้ดง่ายๆ ให้ลองเอาไปใส่ในบล็อกเพื่อสร้างเครื่องเล่นเพลงเอาไว้ฟังกันดูครับ โดยปกติการใส่เครื่องเล่น MP3 ลงใน Blogger เราจะใช้โค้ดซึ่งเป็นตัวเล่นที่สามารถเล่นได้ทีละเพลงกันโดยส่วนใหญ่ แต่ถ้าอยากจะใส่เป็น Playlist เล่นได้ครั้งละหลายๆ เพลงก็สามารถทำได้เช่นกันครับ ซึ่งเมื่อก่อนจะมีของ Mixpod ซึ่งเป็นเว็บให้บริการสร้าง Playlist ให้เราเอาไฟล์นามสกุล Mp3 ไป Ad แล้ว Embed โค้ดมาใส่ในบล็อก แต่ปัจจุบัน Mixpod ยกเลิกการให้บริการไปแล้ว

สำหรับวิธีที่ผมจะนำมาบอกนี้ก็ไม่ยุ่งยากอะไรครับ เพราะจะมีโค้ดบังคับอยู่แค่ 2 ส่วน คือโค้ดในส่วนของการบังคับให้แสดงตัวเครื่องเล่น กับอีกส่วนคือโค้ดซึ่งเป็นตัวเครื่องเล่น Playlist หากใครสนใจก็ลองทำตามกันดูครับ

อันดับแรกให้เข้าไปที่หน้าแม่แบบแล้วคลิกที่แก้ไข HTML หาโค้ดคำว่า  </head>

สำหรับคนที่หาโค้ดไม่เจอก็ให้ลองทำตามวิธีนี้ดูกันครับ ให้เอาเม๊าท์ชี้ไปในช่องโค้ดแม่แบบแล้วคลิกซ้าย 1 ครั้ง เสร็จแล้วกด Ctrl กับ F จากแป้นพิมพ์ จากนั้นให้พิมพ์คำว่า </head> ลงไปในช่องแล้วกด Enter ก็จะเจอโค้ดครับ

• <link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'/> <link href="https://googledrive.com/host/0B0WJjcJEFNziLXFVNjE1Mms2VkU" rel="stylesheet"></link> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <script src="https://googledrive.com/host/0B0WJjcJEFNziYXRYUFZEVkRNaTA" type="text/javascript"></script>

หลังจากเจอโค้ดคำว่า </head> แล้วก็ให้ก็อปปี้โค้ดด้านบนนี้ไปวางไว้เหนือคำว่า </head> เสร็จแล้วให้กดบันทึกแม่แบบ

จากนั้นให้เข้าไปที่หน้าการออกแบบ แล้วเลือก Gadget แบบ HTML / จาวาสคิปต์ เสร็จแล้วก็อปปี้โค้ดตัวเล่น MP3 Playlist ด้านล่างนี้วางลงไป หรือใครอยากจะเอาไปใส่ในตัวบทความก็ได้ครับ โดยไปที่หน้าบทความแล้วกดที่ HTMlL ที่อยู่ตรงซ้ายมือแล้ววางโค้ดด้านบนลงไปในช่องเขียนบทความ

• <div class="mbl"> <div class="mbl_player" id="mnplp"> <div class="mbl_art_bg"> </div> <!--artist on background--> <img alt="" class="mbl_cover" src="" /><!--album cover--> <span class="mnpl_title"></span><!--song title--> <span class="mnpl_author"></span><!--artist--> <!--sound--> <br /> <div class="mnpl_volume_min"> </div> <div class="mnpl_volume"> </div> <div class="mbl_volume_max"> </div> <div class="mnpl_toolbar"> <div class="mnpl_tlb_prev"> </div> <div class="mnpl_tlb_stop"> </div> <div class="mnpl_tlb_next"> </div> <div class="mnpl_current"> </div> <div class="mnpl_long"> </div> <div class="mnpl_all"> </div> </div> <div class="mbl_playlist"> </div> </div> </div> <script type="text/javascript"> $(function(){ $('#mnplp').mnplp({ 'volume': 80, 'playlist':[ {"title":"ชื่อเพลง", "author":"ชื่อศิลปิน", "cover":"ใส่ URL ภาพปก", "background":"ใส่ URL ภาพพื้นหลัง", "mfile":"ใส่ URL เพลง mp3"}, {"title":"ชื่อเพลง", "author":"ชื่อศิลปิน", "cover":"ใส่ URL ภาพปก", "background":"ใส่ URL ภาพพื้นหลัง", "mfile":"ใส่ URL เพลง mp3"}, {"title":"ชื่อเพลง", "author":"ชื่อศิลปิน", "cover":"ใส่ URL ภาพปก", "background":"ใส่ URL ภาพพื้นหลัง", "mfile":"ใส่ URL เพลง mp3"}, {"title":"ชื่อเพลง", "author":"ชื่อศิลปิน", "cover":"ใส่ URL ภาพปก", "background":"ใส่ URL ภาพพื้นหลัง", "mfile":"ใส่ URL เพลง mp3"}, {"title":"ชื่อเพลง", "author":"ชื่อศิลปิน", "cover":"ใส่ URL ภาพปก", "background":"ใส่ URL ภาพพื้นหลัง", "mfile":"ใส่ URL เพลง mp3"} ] }); }); </script> <style> .mbl_player { width: 500px;} .mbl { float: left; width: 520px; border-top: 1px solid #d2d2d2; margin-bottom: 0px; padding: 0px; } .mbl_player .mnpl_current { padding: 2px!important; padding-left: 10px!important; } .mbl_player .mnpl_all, t { padding: 2px; }</style></div><div>
  
  

สำหรับตัวโค้ดเครื่องเล่น MP3 ต้องมีการปรับเปลี่ยนเล็กน้อยดังนี้
title ใส่ชื่อของเพลง
author ใส่ชื่อศิลปิน
cover ใส่ URL ภาพปกอัลบลั้ม เช่น https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXqc1245lpn95tDesZhAO2B38zB5DrZaKz-77jenEjbuc8x2GXeyOqYRE2Uxfb7taC8Z6bvWo6fWiWZgaL0qSmf275xsD500Lh0aMeOQ-_CeL9f9GPgtJBrHrfNNZyE8R9CJ-IX7VpMryE/s1600/Thumb1.jpg
background ใส่ URL ภาพพื้นหลัง เช่น https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVVb3s3vT85pYebh_FYQH0Rbap4FfTokB3VPbeVct401LsWjloippjZYNhsN4TXvo3GNBmkG8eEj-kAlmgzd8RV5Hw7d5lWscLFp8Nd2G8SsX-AeApsP8FMSQQc7KSR3jEH8Cl_ZGYfAUU/s1600/1.jpg
mfile ใส่ URL ไฟล์เสียงนามสกุล MP3 เช่น http://alex-shevchik.com.ua/player/files/music/1.mp3
ตรง width: 540 และ width: 540 สามารถแก้ไขนาดได้ตามชอบใจ

หมายเหตุ : หากต้องการเพิ่มเพลงก็ให้แทรกโค้ดด้านล่างลงไปอีกตามความต้องการแต่ไม่ควรเกิน 20 เพลงครับ

ดูตัวอย่างเครื่องเล่น Playlist ได้ที่นี่ครับ 

Recent Post การแสดงบทความล่าสุดพร้อมรูปภาพ

Recent Posts Blogger Widget with Thumbnails
เอามาให้แต่งบล็อกกันอีกครับกับ Widget หรือ Gadget ในการแสดงบทความล่าสุดพร้อมรูปภาพ ซึ่งในตัวนี้เวลาเราเอาเมาส์ไปชี้แล้วมันก็จะแสดงข้อความรายละเอียดเกี่ยวกับบทความนั้นๆ ด้วย มาดูตัวอย่างของจริงกันครับ

วิธีการก็ไปเริ่มกันที่หน้ารูปแบบ แล้วเลือก Gedget แบบ HTML/JavaScript เสร็จแล้วก็วางโค้ดด้านล่างลงไป

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
#post-gallery {width:100%; margin:0px auto;font:normal 11px Arial,Sans-Serif;color:##000000;padding:8px;}
#post-gallery .rp-item {float:left;display:inline;  position:relative;  margin:2px;  padding:0px 0px;  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifWw8GXlboR0OgycASIZ2LRakUdfFFgP-8JZCQ0rESs16DMespZ8VzDgwFJaOijtrD2zqxP3hmVC_99-FENCxGd50HPH2ORLdB6AmzJbxjFvxqSrICIVrX0927pWU2mqjBj7lHtC9iF4yC/s1600/LOAD+(66).gif') no-repeat 50% 50%;  width:79px;  height:79px;}
#post-gallery .rp-item img {  width:69px;  height:69px;  border:none !important;  margin:0px 0px !important;  padding:0px 0px !important;  background:transparent !important;  display:none;}
#post-gallery .rp-item img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}
#post-gallery .rp-item .rp-child {  position:relative;  top:10%!important;  left:10%!important;  z-index:1000;  width:200px;  background-color:white;  border-bottom:5px solid #1BA1E2;  -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  padding:10px 15px;  overflow:hidden;  word-wrap:break-word;  display:none;  opacity: 0.9;}
#post-gallery .rp-item .rp-child h4 {  font-size:12px;  margin:0px 0px 5px;  color:#1BA1E2;}
#post-gallery .rp-item:hover .hidden {display:block;}</style>
<script type="text/javascript">
var rpTitle     = "Recent Posts",       // Widget Title
    numposts    = 14,      // Number of Posts to show
    numchar     = 200,      // Number of Characters to be displayed
    rcFadeSpeed = 600,      // Speed
    pBlank      = "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",      // If No Image
    blogURL     = "http://ชื่อบล็อกของคุณ.blogspot.com/";       // Your Blog URL
</script>
<script src="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-recent-posts.js" type="text/javascript"></script>

เปลี่ยนตัวเลขตรง numposts เป็นจำนวนที่คุณต้องการให้แสดงบทความ
เปลี่ยนตรง blogURL เป็น url บล็อกของคุณ เสร็จแล้วกดบันทึกเป็นอันจบครับ

วิธีใส่ป้ายกำกับบทความแบบอนิเมชั่นเคลื่อนไหวได้

Flash Animated Label Cloud
เอามาอีกหนึ่งวิธีในการการทำป้ายกำกับบทความแบบ Frash Animation สวยๆ มาใส่ในบล็อก วิธีการก็ไม่ยุ่งยาก หรือต้องปรับแต่งแม่แบบแต่อย่างใดครับ แค่เพิ่ม Gedget แบบ  HTML/จาวาสคริปต์ เท่านั้นเอง

เริ่มวิธีทำกันเลยครับ เข้าไปที่หน้ารูปแบบ แล้วเพิ่ม Gedget แบบ  HTML/จาวาสคริปต์ แล้ววางโค้ดด้านล่างนี้ลงไป สำหรับป้ายกำกับบทความแบบ Frash Animation นี้ใช้ได้เฉพาะป้ายกำกับที่เราตั้งชื่อเป็นภาษาอังกฤษเท่านั้น ส่วนภาษาไทยจะไม่แสดงผลครับ

<div id="w2bFlashContent"><p style="display:none;">Flash Labels by <a href="http://www.way2blogging.org/">Way2Blogging</a></p></div>

<script type="text/javascript">

/*<![CDATA[*/

var w2bFlashLabelSettings = {

    blogurl        : "http://ใส่ชื่อบล็อกของคุณ.blogspot.com",

    color          : "000000",

    hoverColor     : "333333",

    backgroundColor: "FFFFFF",

    size           : 18,

    speed          : 100,

    width          : 280,

    height         : 200,

    transparency   : true

};

/*]]>*/

</script>

<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/w2b-new-flash-label-cloud.js"></script>

วิธีปรับเปลี่ยนตรง blogurl ให้แก้เป็น url บล็อกของคุณ

color ให้เปลี่ยนเป็นสีตัวหนังสือที่แสดงตามต้องการ

size           : 18, (ขนาดตัวหนังสือ)

speed          : 100, (ความเร็วในการแสดง)

width          : 280, (ความกว้าง)

height         : 200, (ความสูง)

วิธีแสดงบทความแยกตามป้ายกำกับพร้อมรูปภาพ

Recent Posts Categories With Thumbnails For  Blogger
ในบทความนี้จะมาแนะนำวิธีแสดงบทความตามป้ายกำกับพร้อมรูปภาพให้เอาไปลองทำกันดูครับ วิธีนี้จะช่วยให้เราสามารถแสดงโพสต์ล่าสุดแยกตามป้ายกำกับต่างๆ ออกจากกัน ช่วยให้บทความนั้นแยกเป็นหมวดหมู่ต่างๆ วิธีการก็ไม่ยุ่งยากลองทำกันดูเลยครับ

ลำดับแรกให้เข้าที่หน้าแม่แบบ แล้วค้นหาโค้ดคำว่า ]]></b:skin> เสร็จแล้วให้วางโค้ดด้านล่างไว้เหนือคำาว่า ]]></b:skin>

/* Recent posts by labels
--------------------------------- */ 
img.label_thumb{
float:left;
margin-right:10px !important;
height:65px; /* Thumbnail height */
width:65px; /* Thumbnail width */
border: 1px solid #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}

.label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}
ul.label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:0px;
border-bottom: 1px dotted #999999;
}

.label_with_thumbs li{
list-style: none ;
padding-left:0px !important;
}

.label_with_thumbs a { text-transform: uppercase;}
.label_with_thumbs strong {padding-left:0px; }

เสร็จแล้วให้หาโค้ดคำว่า </head> แล้ววางโค้ดด้านล่างไว้เหนือคำว่า </head>

 <script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_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/AVvXsEihhyM8BlXPFsiuKL8jtq6Nuhyphenhyphen6tLcS3ERoQWYRl7FpJoorpiSUPAxbmyPphcvfiPpHRKjmGMwzCxvW4gjmrvQLo-LLbFH2Eu9GhAN3oyr9ZLbChgoDtAxao5d7gPJVkYNqS9t6VwRh5J0/s1600/picture_not_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]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><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('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');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('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

แล้วกลับมาที่หน้าการออกแบบ เลือก Gadget แบบ HTML/Javascript

เเล้ววางโค้ดด้านล่างนี้ลงไป

<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script> 
<script type="text/javascript" src="/feeds/posts/default/-/Name-of-the-label?published&alt=json-in-script&callback=labelthumbs"></script>

 ให้เปลี่ยนคำว่า Name-of-the-label เป็นป้ายกำกับที่คุณต้องการ แค่นี้เราก็จะมีเมนูบทความตามป้ายกำกับที่แยกหมวดหมู่ออกจากกัน

การแสดงบทความล่าสุดแบบอนิเมชั่น

Animated recent post blogger Widget

วิธีแสดงบทความล่าสุดแบบอนิเมชั่นเลื่อนได้สำหรับ blogger นอกจากสวยงามแล้วยังช่วยดึงดูดผู้อ่านให้คลิกที่บทความนั้นๆ แถมยังทำให้บล็อกดูน่าสนใจอีกด้วย

เข้าไปที่หน้าการจัดการรูปแบบ เลือก Gadget แบบ HTML / JavaScript แล้วก็อปปี้โค้ดด้านล่างลงไปวาง

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>



<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOY55i2SM61V3S8_wsuilnbUJ_wD18YcHEqWXQjkMYvTsW-wID_zfTJBu5M49ZYcx14oXHQOwm7_Pmj3mgRyR-BZA3CG7W45XNaBIuPNqsqC7lpDeeAoYra37u-RXAAnurfwhwAlNqKmPN/s1600/24work-blogspot-com.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
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;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->

</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script language='JavaScript'>

imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAgyTJ4pwMxDO0cV7oiC8nFxnD2VIHp6WEwneWRCMf7reXxeaJ6qLns05OOtpgdFz5yBljVwAAgO3mosRSkazKQR9WmwN-9mdF87R2m9mua0LlwlnGpRK1Ze6_V8zblD14U0b3J0cTyPvn/s1600/noimage.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAgyTJ4pwMxDO0cV7oiC8nFxnD2VIHp6WEwneWRCMf7reXxeaJ6qLns05OOtpgdFz5yBljVwAAgO3mosRSkazKQR9WmwN-9mdF87R2m9mua0LlwlnGpRK1Ze6_V8zblD14U0b3J0cTyPvn/s1600/noimage.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAgyTJ4pwMxDO0cV7oiC8nFxnD2VIHp6WEwneWRCMf7reXxeaJ6qLns05OOtpgdFz5yBljVwAAgO3mosRSkazKQR9WmwN-9mdF87R2m9mua0LlwlnGpRK1Ze6_V8zblD14U0b3J0cTyPvn/s1600/noimage.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAgyTJ4pwMxDO0cV7oiC8nFxnD2VIHp6WEwneWRCMf7reXxeaJ6qLns05OOtpgdFz5yBljVwAAgO3mosRSkazKQR9WmwN-9mdF87R2m9mua0LlwlnGpRK1Ze6_V8zblD14U0b3J0cTyPvn/s1600/noimage.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAgyTJ4pwMxDO0cV7oiC8nFxnD2VIHp6WEwneWRCMf7reXxeaJ6qLns05OOtpgdFz5yBljVwAAgO3mosRSkazKQR9WmwN-9mdF87R2m9mua0LlwlnGpRK1Ze6_V8zblD14U0b3J0cTyPvn/s1600/noimage.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;



home_page = "http://bdlab.blogspot.com/";



limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://24work.ucoz.com/24work-blogspot/recent-posts/animated-recent-posts-24work-blogspot-com.js' type='text/javascript'></script>

</div>

ถ้าบล็อกของคุณดีจริงก็อย่าไปกลัว Blogger จะลบ

ก็อย่างที่ทราบกันดีว่าช่วงนี้ Blogger เข้มงวดมากๆ เกี่ยวกับบรรดาบล็อกที่สร้างขึ้นมาใหม่ทั้งหลายไม่ว่าจะเป็นพวกที่ใช้ Blogger ทำ Amazon หรือพวกที่ทำบล็อกแนว 18 รวมถึงพวกละเมิดลิขสิทธิ์ต่างๆ ที่โดนกันหนักๆ ถูกลบรายวันหรือโดนแบนยกบัญชีก็พวกบล็อกปั่นทั้งหลาย สำหรับผมแล้วก็ได้รับผลกระทบบ้างเกี่ยวกับเรื่องนี้เพราะบล็อกในสังกัดก็โดนลบไปประมาณ 10 กว่าบล็อก ทั้งโดน DMCA แจ้งเรื่องละเมิดลิขสิทธิ์มายัง Blogger  รวมถึงบล็อกที่ไร้คุณภาพต่างๆ ซึ่งผมเองก็ไม่ซีเรียสอะไรในเรื่องนี้เพราะรู้อยู่แล้วว่าไม่ช้าหรือเร็วยังไงก็ต้องโดน

    แต่สำหรับใครที่ร้อนๆ หนาวๆ หรือกังวลใจว่าบล็อกที่ตัวเองทำอยู่แถมกำลังสร้างรายได้ให้กับเราจะโดนลบหรือเปล่า ผมว่าอย่างเพิ่งกังวลใจไปเลยครับหากบล็อกนั้นไม่ไดทำอะไรที่ผิดกฏของ Blogger เช่นมีเนื้อหาลามกอนาจาร ละเมิดลิขสิทธิ์ และอื่นๆ ผมว่า Blogger ก็คงไม่ใจดำลบบล็อกของเราไปง่ายๆ หรอกครับ ขอเพียงคุณทำบล็อกให้มีคุณภาพสร้างเนื้อหาให้มีความใหม่สด ไม่ก็อปปี้ใคร และไม่โหมโพสต์เนื้อหาในแต่ละวันให้มากจนเกินไปเชื่อได้เลยครับว่าบล็อกเกอร์ของฟรีก็ยังคงอยู่สร้างรายได้ให้กับคุณไปอีกนาน สำหรับเรื่อง Index หรือติด Search ของ Google ผมว่าก็ไม่ยากครับเพราะ Blogger มีความแรงในตัวอยู่แล้วเรียกว่าไม่ต้องทำ SEO อะไรให้มากก็ Index ได้ ซึ่งเมื่อก่อนอาจจะโพสต์แค่ 15-20 นาทีก็ Index แต่ปัจจุบันอาจจะใช้เวลามากกว่าเดิมนิดหน่อย แต่ไม่ต้องกลัวไปครับหากเนื้อหาของคุณใหม่สดมีคุณภาพไม่ซ้ำใครยังไงก็ติด Index แน่นอนครับ

    สำหรับผมเองโดยส่วนตัวคิดว่า Google Search และ Blogger ยังคงให้ความใส่ใจในเรื่องของ Unit Content เป็นอันดับแรกครับ ส่วนเรื่องที่จะติดอันดับต้นๆ ของ Google หรือไม่ก็อยู่ที่การเสริมในเรื่องของ SEO ดังนั้นเรามาลองมาทำบล็อกคุณภาพในสายตา Google และ Blogger กันคนละบล็อกสองบล็อกกันบ้างจะดีไหมครับ?

ทำบล็อกให้ถูกใจ Google และถูกหลัก SEO กันดีใหม

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

    เรามารู้จัก SEO กันก่อนครับว่ามันคืออะไร คำว่า SEO มาจากคำว่า Search Engine Optimization นั่นก็คือการทำเว็บหรือบล็อกเพื่อให้ติดอันดับต้นๆ ของ Search Engine หรือเครื่องมือค้นหาเว็บไซต์อย่าง Google, Bing หรือว่า Yahoo เป็นต้นครับ การที่จะทำให้บล็อกหรือเว็บของเราติดอันดับของ Search Engine ต่างๆ ได้ก็ต้องมีการปรับแต่งโครงสร้างในส่วนต่างๆ ที่สำคัญของบล็อกหรือเว็บรวมถึงการหาช่องทางในการโปรโมทบล็อกให้เป็นที่รู้จักของคนทั่วไปด้วย ซึ่งผลจากการทำ SEO จะช่วยทำให้ Search Engine ต่างๆ สามารถค้นหาและรวบรวมข้อมูลเว็บไซต์ของเราได้อย่างรวดเร็ว ทำให้บล็อกของเราสามารถติดอันดับต้นๆ ของ Google ทำให้คนทั่วไปมีโอกาสเข้าชมบล็อกของเราสูง ซึ่งจะทำให้เกิดช่องทางในการหารายได้ต่างๆ ที่จะตามมาในอนาคต

    ความสำคัญของการทำ SEO เราจะเห็นว่าในปัจจุบันคนส่วนใหญ่เวลาค้นหาข้อมูลต่างๆ ทางอินเตอร์เน็ตมักจะพิมพ์คำที่ต้องการค้นผ่านทาง Search ต่างๆ อย่าง Google เป็นต้น ซึ่งคำค้นต่างๆ นั้นก็คือ Keyword นั่นเอง หากบล็อกของเราติดอันดับคำค้นหรือ Keyword นั้นแล้วโอกาสที่จะมีผู้เข้าชมบล็อกของเราสูงย่อมด้วย ดังนั้นหากเราต้องการในบล็อกของเราติดอันดับต้นๆ ในคำค้นต่างๆ เราต้อง

    ทำ SEO ให้กับบล็อกของเราครับ สำหรับการทำ SEO แบบหลักๆ ทำได้ 2 ช่องทางคือ
1.การทำ On Page คือการปรับแต่งโครงสร้างต่างๆ ภายในบล็อกของเรา
2.การทำ Off Page คือการโปรโมทบล็อกเพื่อให้มีลิงค์จากบล็อกหรือเว็บภายนอกมาที่บล็อกของเรา
 
    วิธีทำ SEO On Page ให้กับ blogger แบบคร่าวๆ
1.การเขียน Title หรือชื่อบล็อกควรตั้งให้น่าสนใจและควรมีคีย์เวิร์คแทรกอยู่ในชื่อบล็อกด้วย สำหรับชื่อบล็อกควรมีความยาวไม่เกิน 65 คำครับ เพราะหากต้องชื่อบล็อกยาวเกินไป Google ก็จะแสดงชื่อบล็อกไม่หมดครับ
2.การเขียน Description หรือคำอธิบายรายละเอียดของบล็อกเป็นการบอกให้ทราบว่าเนื้อหาภายในบล็อกของเราเกี่ยวข้องกับอะไร สำหรับความยาวชองคำอธิบายบล็อกควรมีความยาวประมาณ 155 คำ และควรสอดแทรกคีย์เวิร์คที่เกี่ยวข้องด้วยครับ
3.บทความภายในบล็อก การเขียนบทความลงบล็อก ควรมีความยาวกำลังดีอย่างที่นิยมกันก็ประมาณ 350-650 คำ ควรแทรกคีย์เวิร์คตามส่วนต่างๆ ของบทความแต่ไม่ควรใส่ให้มากจนเกินไป รวมถึงการใส่คำอธิบายให้กับภาพประกอบบทความด้วย พยายามเพิ่มข้อมูลบทความใหม่ให้กับบล็อกวันละ 2-3 บทความ หรืออย่างน้อยๆ ก็ควรมีสัก 1 บทความใน 2-3 วันก็ยังดี เพราะการอัพเดตบทความใหม่ๆ อยู่เสมอๆ จะทำให้ Bot ของ Google ก็จะเข้ามาเก็บข้อมูลบ่อยๆ เช่นกันครับ สำหรับบทความภายในบล็อกไม่ควรมีลิงค์ออกไปยังเว็บไซต์ภายนอกโดยไม่จำเป็นแต่ควรมีลิงค์ออกไปยังบทความอื่นๆ ภายในบล็อกของเราเองแทนครับ หรืออ่านเขียนบทความอย่างไรให้ติดอันดับ Search Engine ได้ที่นี่ครับ

    วิธีทำ SEO Off Page ให้กับ blogger แบบคร่าวๆ
เป็นการหา Back Link หรือการหาลิงค์ที่เชื่อมโยงจากเว็บไซต์อื่นๆ มายังบล็อกของเรา ยิ่งมีมากเท่าไหร่ก็จะทำให้บล็อกของเรามีคุณค่าในสายตาของ Google มากเท่านั้นครับ การหา Back Link อาจมาจากการแลกลิงค์ การ Submit บล็อกตาม Web Directory ต่างๆ รวมถึงการลงประกาศฟรีและการเสียเงินติดลิงค์หรือติดแบนเนอร์ของเราตามเว็บต่างๆ เป็นต้นครับ

    ก็หวังว่าแนวทางการทำ SEO ให้กับบล็อกเพื่อเพิ่มโอกาสในการติดอันดับ Search Engine อย่าง Google คงจะเป็นประโยชน์ให้กับบล็อกเกอร์มือใหม่ไม่มากก็น้อย แล้วพบกันใหม่ในบทความต่อๆ ไปครับ

โค๊ดสีสำหรับแต่ง blogger

คลิ๊กที่ภาพเพื่อขยายขนาดครับ

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

ทำบล็อกเกอร์อย่างเดียวก็เลี้ยงตัวเอง (คนเดียว) ได้

ผมเริ่มหัดทำบล็อกครั้งแรกเมื่อปี 2549 โดยเริ่มต้นจาก blogger จนถึงช่วงยุคทองของบล็อกฟรีอย่าง WordPress ที่เปิดให้บริการกันดาลดาษในโลกอินเตอร์เน็ทหลายเจ้าหลายสำนักผมก็เข้าไปมีส่วนร่วมกับเขาแทบทุกที่ทั้งที่ idatablog สุมหัว blogka bloggoo blogthai (เขียนชื่อผิดไปบ้างหรือเปล่าไม่แน่ใจเพราะลืมๆ ไปแล้ว) ใส่มันทุกที่รวมถึงเว็บฟรีต่างๆ ผมก็ไปแจม แต่พิจารณาแล้ว WordPress กับเว็บฟรีนี่ผมไม่สันทัดจริงๆ ก็เลยหันกลับมาปักหลักกับ blogger อย่างเดิม ซึ่งช่วง 7-8 ปีที่แล้วรูปแบบของบล็อกเกอร์มันยังไม่มีอะไรน่าสนใจนักการปรับแต่งต่างๆ ยังมีข้อจำกัดเยอะ ทิปและเทคนิคต่างๆ ในการปรับแต่งก็ยังไม่ค่อยมีใครเขียน ฝรั่งก็ไม่ค่อยเขียนในส่วนนี้เท่าไรนัก Template ก็พื้นๆ จนกระทั่งพวกอินโดนีเซีย พวกอินเดีย นี่แหล๊ะที่รู้สึกว่าจะเป็นพวกแรกๆ ที่เขียน Tips and Tricks เกี่ยวกับบล็อกเกอร์ ผมก็เลยได้อาศัยองค์ความรู้จากการพยายามคุ้ยแคะแกะเกาภาษาอังกฤษ รวมถึงเว็บของคนไทยอย่าง HackuBlog.com และ BloggerBuild.BlogSpot.com ของคุณปรีดา ลิ้มนนทกุลซึ่งเป็นผู้ทุพพลภาพที่ถือว่าเป็นต้นแบบความรู้สำหรับ blogger มือใหม่และมือเก่า พอพวกอินโด พวกอินเดียเข้ามาวงการ blogger เริ่มมีสีสันขึ้น เรื่องความรู้เกี่ยวกับทิปและเทคนิคการปรับแต่ง Widget ต่างๆ ตลอดจน Template ใหม่ๆ ถูกนำมาเผยแพร่มากขึ้นรวมถึง blogger ก็มีการปรับเปลี่ยนรูปแบบตัวเองมากขึ้นทำให้บล็อกเกอร์ดูน่าเล่นและน่าสนใจ

ผมหากินกับบล็อกเกอร์อย่างไร Blogger. Give Me Money Please! อันดับแรกก็ Adsense ครับ เมื่อก่อนใครจะสมัคร Adsense ต้องใช้เว็บหรือบล็อกเป็นภาษาอังกฤษสมัครครับมันถึงจะผ่านผมเลยเขียนบทความภาษาไทยใช้ภาษาเขียนแบบง่ายๆ ประมาณ 10-15 บทความแล้วเอาไปให้ google แปลเป็นอังกฤษได้บทความใหม่สดไม่ซ้ำใครแต่อ่านแล้วฝรั่งคงจะงงแต่ผมไม่สนใจครับว่าใครจะอ่านรู้เรื่องหรือเปล่าขอแค่ให้บล็อกเป็นภาษาอังกฤษและสมัคร Adsense ได้ก็พอ ปรับแต่งรูปร่างหน้าตาบล็อกสักกหน่อยแล้วยื่นเรื่องสมัครช่วงนั้นประมาณ 7-15 วันครับ Adsense แจ้งกลับมาว่าบล็อกผมผ่านเกณฑ์ได้ติด Adsense สมใจ ผมก็ติดครับแต่มันยังไม่มีรายได้อะไรเพราะคนเข้าบล็อกแทบไม่มี ไปโพสต์หมดครับทั้งพวกประกาศฟรี โปรโมทฟรี แต่ก็ไม่เป็นผล ได้เงินจาก Adsense วันหนึ่งยังไม่ถึง 5 บาทเลย พอลองพิจารณาเนื้อหาในบล็อกตัวเองแล้วรู้แจ้งเลยครับว่าเนื่อหาในบล็อกเรามันฉับฉ่ายยูไนเต็ดจริงๆ ไร้สิ้นความน่าสนใจ ผมจึงต้องปรับแผนใหม่ใช้บล็อกเดิมเขียนบทความภาษาไทย เขียนเรื่องเฉพาะกลุ่มที่ผมมีความรู้และมีผู้สนใจ (อันนี้ผมใช้วิธีลองดูปริมาณการค้นหาจาก google) เขียนแล้วก็เขียนไม่เคยโปรโมท ไม่ทำ SEO ใดโดยทั้งสิ้นเพราะช่วงนั้นไม่รู้จัก SEO ครับ นับว่าโชคดีครับบล็อกนี้มีคนเข้ามาโดยส่วนใหญ่จะเป็นคนไทยที่อยู่ในต่างแดนเข้ามาอ่านรายได้จาก Adsense ก็พลอยขยับตามปัจจุบันบล็อกนี้ก็ยังคงอยู่ด้วยอาขัยยาวนานกว่า 5 ปี รายได้หลักจาก Adsene ก็มาจากบล็อกนี้

ทำบล็อกเกอร์ขาย ผมเริ่มทำ blogger ขายมาเมื่อปี 2555 นี่เองครับ แรกๆ ทำบล็อกสำหรับคนที่ต้องการสมัคร Adsense ขายครับโดยบล็อกที่ทำขายผมจะทำให้ทุกอย่างตั้งแต่สมัคร gmail สมัคร blogger สร้างบล็อกปรับแต่ง ลงบทความ ยื่นเรื่องสมัคร Adsense ผลกว่า 20 บล็อกที่ผมทำยังไม่เคยพลาดหรือถูกแบนเฉพาะใน ThaiSeoBoard ก็มีหลายคนที่ได้บัญชี Adsense จากบริการของผม ผมจะเขียนบทความเรื่องทั่วๆ ไปไม่เน้นคีย์เวิร์ด เอาแค่ให้สมัครผ่านส่วนการเมคมันนี่คนที่ได้บัญชี Adsense ไปต้องไปหาแนวทางกันเอาเองผมแค่ช่วยอำนวยความสะดวกให้เท่านั้นเอง พอทำนานๆ สมองเริ่มตันไม่รู้จะเขียนเรื่องอะไรดีก็เลยเลิกทำบล็อกสมัคร Adsense ขาย เลยหันมารับสั่งทำบล็อกเกอร์ตาม Concept ของผู้จ้าง ซึ่งปัจจุบันนี้ผมก็มีงานเข้ามาเรื่อยๆ ยังไม่รวมพวกบล็อกดูหนัง บล็อกสิบแปดบวกที่ผมไม่ต้องใช้อะไรมากมายแค่ส่งออกและนำเข้าบล็อกเท่านั้นเองก็เลยทำถูกๆ แค่บล็อกละ 100 – 200 ได้

Affiliate Programe นายหน้าขายสินค้าออนไลน์ ส่วนใหญ่ที่ทำๆ กันก็ Amazon ใช่ครับผมก็ไปแจม ทำบล็อก Amazon มา 2 ปี ไม่เคยโดนแบนหรือโดนลบบล็อกแต่ไม่เคยได้เงินครับ เคยได้ออร์เดอร์กางเกงมวยไทย 24 ตัว กับน้ำมวย 3 โหลแต่ฝรั่งมันดันทะลึ่งคืนของเลยอดกินไป หันมาเล่นของไทยได้น้อยแต่ได้แน่กับ Aff สิบแปดบวกดูออนไลน์ ไม่รู้เป็นไงขายได้ทุกวันกระสันเสียตังค์กันจริงๆ แต่ก็ดีครับยิ่งกระสันกันมากผมก็ยิ่งได้เงินมาก ปัจจุบันผมทำ Aff แนวนี้ที่เดียวและตัวเดียวเท่านั้น

ครอบลิ๊งค์ linkbucks กับ Adf.ly ผมใส่หมดเก็บเบี้ยเล็กเบี้ยน้อยนับเงินเหรียญเงินเซ็นต์ เดือนหนึ่งเบิกทีก็ได้หลายพันอยู่ครับอย่าได้ดูถูกไป ทำบล็อกตัวเองทั้งออนไลน์ ทั้งดาวน์โหลด Content นอก ห้าหกบล็อกรวมกันคนเข้ารวมวันละเป็นหมื่น เพจวิวเหยียบแสนแต่โทษทีรายได้ไม่ได้มากมายอะไรเพราะคนไทยเข้าเพียบเลยได้ยอดถูกๆ ปัจจุบันผมก็ยังได้เงินอยู่คงยังไม่เลิกทำจนกว่าจะถูกแบน

หยอดท้ายนิดสำหรับคนคิดหากินกับ blogger ไม่มี gmail ก็รีบไปสมัครซ๊ะ แล้วจัดการเปิดบัญชี blogger เลือก Template ให้ถูกใจ ใส่ Widget ที่คิดว่าจำเป็นให้พร้อม แล้วลงมือเขียนแล้วก็เขียนในเรื่องที่เราสนใจและมีความรู้ ปลูกฝังความรักและผูกพันในบล็อกที่เราสร้างแล้วตั้งจิตอธิษฐานว่าเราจะดูแลซึ่งกันและกันไม่ทอดทิ้งหนีหายให้ฝ่ายหนึ่งฝ่ายใดต้องว้าเหว่เดียวดาย เราจะหมั่นอัพเดตข้อมูลบล็อก และบล็อกต้องหมั่นอัพเดตตังค์ให้เรา หากทำได้ก็แฮปปี้กันทั้งคนทั้งบล็อกครับ

อ่านแล้วก็ไม่ต้องคิดอะไรมากครับ ผมไม่รู้จักงานประจำมา 2 ปีแล้วก็เลยเขียนมาให้อ่านกันเล่นๆ เพราะถ้าไม่สู้ ถ้าไม่คิด ถ้าไม่ทำเดี๋ยวมันก็จะอดตายก็เท่านั้นเอง ย้ำเลยครับทำบล็อกเกอร์อย่างเดียวก็เลี้ยงตัวเอง (คนเดียว) ได้ แต่ถ้ามีลูกมีเมียผมว่าอย่าเสี่ยงครับเดี๋ยวพวกเขาจะต้องมารับกรรมพลอยอดตายไปกับเราด้วย!

ทำป้ายกำกับบทความสวยๆ ให้กับ blogger

วันนี้จะมาสอนการทำป้ายกำกับบทให้กับ blogger ความด้วย Css3 ครับ ซึ่งเมื่อทำเสร็จแล้วคุณจะได้ป้ายกำกับบบทความที่สวยงามแปลกตา วิธีการทำก็ไม่ยุ่งยากแค่แก้ไขแม่แบบแค่จุดเดียวก็เรียบร้อยแล้ว

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

เสร็จแล้วก็ให้กดบันทึก

ทีนี้ก็มาถึงขั้นตอนการใส่ Css3 Widget ในแม่แบบครับ ให้คุณล็อกอินแล้วเข้าไปที่หน้าแก้ไขแม่แบบ แล้วกด Ctrl กับ F จากแป้นพิมพ์แล้วหาโค๊ด ]]></b:skin>

เมื่อเจอแล้วก็ให้ก็อปปี้โค๊ดด้านล่างนี้ไปวางไว้เหนือคำว่า ]]></b:skin> ครับ

.label-size a {
    display: inline-block;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    padding: 4px 7px;
    font-family: 'Helvetica Neue', helvetica, sans-serif;
    font-size: 12px;
    line-height: 14px;
    height: 14px;
    vertical-align: middle;
    margin-bottom: 6px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
    -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
}
.label-size a {
    color: #996633;
    border: 1px solid #DDA13C;
    background: rgb(238,177,75);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlYjE0YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjYzkxMmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  rgba(238,177,75,1) 0%, rgba(204,145,45,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,177,75,1)), color-stop(100%,rgba(204,145,45,1)));
    background: -webkit-linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    background: -o-linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    background: -ms-linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    background: linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeb14b', endColorstr='#cc912d',GradientType=0 );
}
.label-size a:before  {
    content: '\2022';
    color: #FFFFFF;
    margin-right: 4px;
    font-size: 15px;
    line-height: 13px;
    height: 13px;
    vertical-align: text-top;
    text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);
}
.label-size a:hover {
    text-decoration: none;
    background: rgb(240,183,86);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjc1NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmEwNDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  rgba(240,183,86,1) 0%, rgba(214,160,68,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,183,86,1)), color-stop(100%,rgba(214,160,68,1)));
    background: -webkit-linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    background: -o-linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    background: -ms-linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    background: linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b756', endColorstr='#d6a044',GradientType=0 );
}

แล้วลองกดดูตัวอย่างแม่แบบหากถูกใจก็กดบันทึกแม่แบบ คุณก็จะได้ป้ายกำกับหมวดหมู่บทความสวยๆ ให้กับ blogger ของคุณแล้วครับ

blogger มือใหม่ต้องไปที่นี่...

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

ที่แรกที่ขอแนะนำก็ที่นี่เลยครับกับ BloggerBuild.Blogspot.Com
bloggerbuild เป็นบล็อกของคุณปรีดา ลิ้มนนทกุล ซึ่งเป็นผู้ทุพพลภาพแต่มากความสามรถครับ คุณปรีดาเขียนเกี่ยวกับ blogger ขั้นพื้นฐานไว้หมดครับเรียงตามลำดับขั้นตอนอ่านเข้าใจง่ายเรียกว่าคนที่ไม่เคยสัมผัส blogger มาก่อนเข้าไปอ่านแล้วรับรองทำ blogger ได้สบายๆ

อีกที่ก็ต้อง Hackublog.Com ที่นี่ก็มีความรู้ตั้งแต่ขั้นพื้นฐานจนถึงขั้นสูง เรียกว่าสอนตั้งแต่สมัคร blogger จนถึงการปรับแต่งและโมดิฟายด์ มีหมดครับทั้งเทคนิคการทำ SEO และอื่นๆ เรียกว่าสมบูรณ์แบบที่สุดในเมืองไทยในเรื่องของ blogger ก็ว่าได้ ยังไงลองเข้าไปหาความรู้กันได้

Blogger วิธีส่งออกและนำเข้าบล็อก

การส่งออกและนำเข้าบล็อกก็คือการโคลนบล็อกหรือก็อปปีบทความจากบล็อกหนึ่งไปสู่อีกบล็อกหนึ่ง วิธีนี้เป็นวิธีที่พวกนักทำบล็อกดูหนังออนไลน์ หรือพวกทำบล็อกขายสินค้า Amazon นิยมทำกัน เรียกว่ายกบทความมาทั้งหมดจากบล็อกหนึ่งมาสู่อีกบล็อกหนึ่งที่ง่ายและรวดเร็วที่สุด ซึ่งวิธีนี้เราจะได้แต่บทความหรือเนื้อเรื่อง พวก Template หรือการปรับแต่งต่างๆ เราต้องไปทำใหม่เอาเองครับ

มาเริ่มทำกันเลยครับสมมุติว่าเราจะเอาข้อมูลจากบล็อก A มาสู่บล็อก B
ให้เข้าสู่เมนูการตั้งค่าของบล็อก A แล้วเลือก อื่นๆ เสร็จแล้วให้คลิ๊กที่ ส่งออกบล็อก

กดดาวน์โหลดบล็อก

เสร็จแล้วให้เข้าไป Document หรือโฟลเดอร์ที่เก็บไฟล์ในเครื่องคอมของเราก็จะเจอไฟล์บทความทั้งหมดจากบล็อก A ถูกส่งออกมาเก็บไว้แล้ว 

ที่นี้ก็มาถึงวิธีเอาบทความจากบล็อก A ที่ส่งออกมาลงในบล็อก B วิธีการก็เข้าหน้าจัดการของบล็อก B เลือกที่เมนูการตั้งค่าแล้วเลือก อื่นๆ เสร็จแล้วให้คลิ๊กที่ นำเข้าบล็อก

ก็ให้เราเลือกไฟล์ที่เราส่งออกจากบล็อก A มาแล้วกรอกรายละเอียดต่างๆ ให้ครบแล้วกดนำเข้าบล็อกก็เป็นอันเสร็จวิธี

สำหรับวิธีโพสต์บทความที่นำเข้าก็ให้ติ๊กที่หน้าชื่อบทความแล้วกดเผยแพร่

วิธีใส่ Window Popup ใน Blogger

บทความนี้ผมจะมาแนะนำการสร้างหน้าต่าง Window Popup ให้พ่อแม่พี่น้องได้ลองทำกันดูครับ Window Popup มันคืออะไร? อธิบายง่ายๆ เลยครับเวลาที่คุณคลิ๊กลิ๊งค์ใดๆ ภายในบล็อกเวลาเปิดหน้าบล็อกขึ้นมาใหม่มันก็มีมีหน้าต่าง Popup หน้าเว็บที่คุณตั้งแทรกขึ้นมาด้วยครับ
วิธีการไม่ยุ่งยาก เริ่มต้นให้ล็อกอินเข้าสู่บัญชี blogger เลือกที่รูปแบบ เพิ่ม Gadget แบบ  HTML/JavaScript เสร็จแล้วให้เอาโค๊ดด้านล่างใส่ลงไป

<script type="text/javascript">

document.body.onclick= function(){

window.open('http://yourdomain.com', 'poppage', 'toolbars=0, scrollbars=1, location=0, statusbars=0, menubars=0, resizable=1, width=980, height=650, left = 300, top = 50');

}</script>

ให้แก้ http://yourdomain.com เป็น url เว็บที่ต้องการให้แสดง สามารถแก้ไขความกว้างความสูงได้ตามต้องการ ลองทำดูครับ

วิธีใส่แบนเนอร์ขนาด 125x125 ให้กับ blogger

เข้าไปที่หน้ารูปแบบเเล้วเลือก Gadget แบบ HTML/Javascript แล้ววางโค๊ดด้านล่างลงไป

<style>

    .ads {

    display: block;

    width: 280px;

    }

    .ads a {

    width: 125px;

    }

    .ads a img {

    padding: 0;

    }

    .ads a em {

    font-style: normal;

    }

    .ads a {

    color: #888888;

    display: block;

    float: left;

    font-family: verdana,sans-serif;

    font-size: 11px;

    margin: 0 7px 7px 0;

    overflow: hidden;

    text-align: center;

    text-decoration: none;

    }

    .ads img {

    border: 0 none;

    clear: right;

    }

    .ads a.image {

    background: none repeat scroll 0 0 #E7E7E7;

    border: 1px solid #666666;

    color: #666666;

    font-size: 12px;

    font-weight: bold;

    text-align: center;

    }

    .ads a.image:hover {

    background: none repeat scroll 0 0 #DDDDDD;

    border: 1px solid #999999;

    color: #333333;

    }

    .ads a {

    line-height: 100%;

    }

    .ads a.image {

    height: 125px;

    line-height: 1000%;

    width: 125px;

    }

    html > body .ads a.image {

    height: 123px;

    width: 123px;

    }

    </style>

    <div id="advert">

    <div class="ads">

<a href="http://yourdomain.com" class="image"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrOaLp-EQgDcNBtHlo_BH0MIf-upTCdvnMHiSlrvzrnyQ_-tWvt3B_6twYOTza-cgD6LZGnr3jneQXcNfc8KN9n8TrbpHx51EjJtMkgeC9HmuLBdTOxN2sWMoISfFs5HEBBieCGmGAERg/s1600/banner125.gif " /></a>

<a href="http://yourdomain.com" class="image"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrOaLp-EQgDcNBtHlo_BH0MIf-upTCdvnMHiSlrvzrnyQ_-tWvt3B_6twYOTza-cgD6LZGnr3jneQXcNfc8KN9n8TrbpHx51EjJtMkgeC9HmuLBdTOxN2sWMoISfFs5HEBBieCGmGAERg/s1600/banner125.gif " /></a>

<a href="http://yourdomain.com" class="image"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrOaLp-EQgDcNBtHlo_BH0MIf-upTCdvnMHiSlrvzrnyQ_-tWvt3B_6twYOTza-cgD6LZGnr3jneQXcNfc8KN9n8TrbpHx51EjJtMkgeC9HmuLBdTOxN2sWMoISfFs5HEBBieCGmGAERg/s1600/banner125.gif " /></a>

<a href="http://yourdomain.com" class="image"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrOaLp-EQgDcNBtHlo_BH0MIf-upTCdvnMHiSlrvzrnyQ_-tWvt3B_6twYOTza-cgD6LZGnr3jneQXcNfc8KN9n8TrbpHx51EjJtMkgeC9HmuLBdTOxN2sWMoISfFs5HEBBieCGmGAERg/s1600/banner125.gif" /></a>

</div></div>

ให้แก้ http://yourdomain.com เป็น url ที่ต้องการให้ไปเวลาคลิ๊กที่รูปภาพ
ให้แก้ url รูปภาพสีน้ำเงินเป็น url ของรูปภาพแบนเนอร์ของคุณเอง

Blogger กับวิธีป้องกันการก็อปปี้บทความในบล็อก

ล็อกอินเข้าสู่บัญชี blogger เลือกเมนูแม่แบบ แล้วเลือกแก้ไข HTML ติ๊กที่ขยายแทมเพลต
กด Ctrl กับ F จากแป้นพิมพ์แล้วหาโค๊ด </head> จากแม่แบบ เสร็จแล้วให้วางโค๊ดด้านล่างไว้เหนือคำว่า </head>

<!-- Disable Copy and Paste-->
<script language='JavaScript1.2'>
function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function (&quot;return false&quot;)
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>

เสร็จแล้วให้กดบันทึกแม่แบบ สำหรับวิธีการนี้สามารถป้องกันการก็อปปี้บทความได้แต่ไม่สามารถป้องกันการ Save รูป หรือวิวโค๊ดน๊ะครับ
หรืออีกแบบหนึ่งคือ ล็อกอินเข้าสู่บัญชี blogger เลือกเมนูแม่แบบ แล้วเลือกแก้ไข HTML กด Ctrl กับ F จากแป้นพิมพ์แล้วหาโค๊ด <body> จากแม่แบบ เสร็จแล้วให้ลบโค๊ด <body> ออกแล้ววางโค๊ดด้านล่างลงไปแทน

 <body onmousedown="return false" oncontextmenu="return false" onselectstart="return false">

เสร็จแล้วกดบันทึกแม่แบบ สำหรับวิธีที่สองนี้สามารถป้องกันได้หมด แต่อาจทำให้ VDO ที่คุณนำมาจาก Tube ต่างไม่เล่นก็ได้น๊ะครับ ยังไงก็ลองเลือกใช้กันดู

แสดงบทความยอดนิยมแบบสไลด์อนิเมชั่น 3D

แจ่มๆ ครับกับการแสดงบทความยอดนิยมหรือ Poppular Post สำหรับ blogger ในรูปแบบสไลด์อนิเมชั่น 3D  วิธีการทำก็ไม่ยุ่งยากไม่ต้องแต่งแม่แบบอะไรครับแค่เพิ่มโค๊ดแบบ HTML/Javascript เท่านั้นเอง
มาเริ่มใส่ Poppular Post แบบ Slide Animation 3D กันเลยครับ

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

เสร็จแล้วให้ตั้งค่า Gadget อีกครั้งโดยเลือก Gadget แบบ HTML/Javascript

แล้ววางโค๊ดด้านล่างลงไป

<style type="text/css">
.cube { width: 200px; height: 200px;}
a img { border: none; }
#linksCube img { width: 100%; height: 100%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/jqueryimagecube.js"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').abupopularcube();
});

</script>
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/popularcube.js"></script>

ในส่วนสีแดงตรง width (ความกว้าง) และ height (ความสูง) สามารถปรับขนาดรูปภาพที่ต้องการให้แสดงได้ตามชอบใจ เสร็จแล้วกดบันทึก
ง่ายๆ ไม่กี่ขั้นตอนบล็อกของคุณก็จะดูดีมีชาติตระกูลกับระบบแสดงบทความยอดนิยมแบบสไลด์อนิเมชั่นสุดแจ่ม ลองทำกันดูน๊ะครับ

วิธีใส่หิมะตก และใบไม้ร่วงให้กับ blogger

วิธีใส่ดอกหิมะตกขนาดใหญ่ในบล็อกเกอร์
เข้าสู่เมนูรูปแบบแล้วเลือก Gadget แบบ HTML/JavaScript แล้ววางโค๊ดด้านล่างนี้ลงไปเสร็จแล้วกดบันทึก

<script language="JavaScript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/falling_snowflakes.js">
</script>

สำหรับอีกแบบหนึ่งจะเป็นหิมะเม็ดเล็กๆ วิธีการก็เหมือนเดิม เลือก Gadget แบบ HTML/JavaScript แล้ววางโค๊ดด้านล่างนี้ลงไปเสร็จแล้วกดบันทึกครับ

<script type="text/javascript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/snowstorm.js" /></script>

สำหรับวิธีใส่ใบไม้ร่วงก็ใช้โค๊ดนี้ครับ

<script language="JavaScript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/falling_leaves.js">
</script>

วิธีใส่แบนเนอร์โฆษณา 468x60 แบบสุ่มแสดง

สำหรับคนที่ต้องการจะให้แบนเนอร์โฆษณาสุ่มแสดงเวลาเปิดหน้าบล็อกขึ้นมาใหม่ บทความนี้ผมจะมาแนะนำวิธีใส่ Widget แบนเนอร์แบบสุ่มแสดงในหน้าบล็อกของคุณ วิธีการก็ไม่ยากครับเข้าไปที่หน้ารูปแบบแล้วเลือก Gadget แบบ HTML / JavaScript เสร็จแล้ววางโค๊ดด้านล่างลงไป

<script language="JavaScript">

images = new Array(3);

images[0] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-1' border='0' height='60px' width='468px' alt='AD DESCRIPTION'></a>";

images[1] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-2' border='0' height='60px' width='468px' alt='AD DESCRIPTION'></a>";

images[2] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-3' border='0' height='60px' width='468px' alt='AD DESCRIPTION'></a>";

index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>

URL OF ADVERTISER ให้เปลี่ยนเป็น link ปลายทางของโฆษณา
URL OF BANNER’S IMAGE-1-3 ให้เปลี่ยนเป็น link ของภาพแบนเนอร์
AD DESCRIPTION ให้เปลี่ยนเป็นรายละเอียดข้อความของโฆษณา

แค่นี้เองครับ หากต้องการเปลี่ยนขนาดของแบนเนอร์ก็ให้แก้ความกว้างจาก 468 เป็นขนาดที่ต้องการแทนเช่น 125 หรือ 728 เป็นต้นครับ