แต่ง Blogger จับ Related Post ใส่ลงใน Post
กลับมาอีกครั้งครับ หลังจากห่างายไปนานพอสมควร เนื่องจากเพิ่งจะกลับมาเริ่มทำงานประจำใหม่อีกครั้ง เลยต้องปรับตัว ปรับใจ ให้เข้ากับสถานที่และสภาพแวดล้อมของที่ทำงาน และปรับอย่างหนักในการทำตัวให้เข้ากับวัฒนธรรมแคะคนในองค์กร ซึ่งผมจะหาเวลาในการอัพเดท แชร์ในเรื่องเกี่ยวกับ Active Income ของผมให้ทุกๆท่านๆก้อ่านกันอีกนะครับ คงจะทำให้เพื่อนๆได้เห็นอะไรๆอีกหลายๆอย่างในการทำงานต่างประเทศของผม
มาเริ่มต้นกันดีกว่าครับ ว่าทำไมถึงคิดที่จะ แต่ง Blogger โดยการใส่ Related Post ลงใน post ก็เนื่องจากว่าผมเองมี blog เล็กๆ อยู่อีก 2-3 blog ที่ไม่ได้ใช้ Premium Template เหมือนอย่าง blog นี้ (อ่านเรื่องเกี่ยวกับ Premium Theme ที่ผมใช้ได้ที่นี่) ผมจึงได้พยายามที่จะค้นหาวิธีการที่จะ แต่ง Blogger ขั้นเทพ (555+ ดูเหมือนว่ากะแสเทพ มาแรง เลยขอสักหน่อยล่ะกัน) เพื่อให้ Blog ของเราดูดีขึ้นและช่วยอำนวยความสะดวกให้กับผู้ที่เข้ามาเยี่ยมชม Blog ของเรา สามารถหาอ่านเรื่องที่เกี่ยวข้องได้โดยง่าย และแน่นอน หากเราทำให้คนอยู่ใน blog ของเรานานๆ ย่อมส่งผลให้การจัดลำดับหรือการให้ความน่าเชื่อถือของ ฺฺBlog เราดีขึ้นไปด้วย นั่นคือการการ ทำ SEO ให้กับ Blogger นี่เอง
ขั้นตอนการแต่ง Blogger ขั้นเทพ โดยการใส่ Related Post ให้กับโฟสของเรา
ก่อนอื่นต้องบอกก่อนนะครับว่า ผมจะใช้ blog อื่นของผมที่มี เอามาใช้ในการทดลองทำ ด้วยเหตุผลที่แจ้งไปก่อนหน้านี้ครับ ว่า blog นี้ใช้ Premium Template เลยทำให้ไม่สามารถใช้เทคนนิค แต่ง Blogger ขั้นเทพ อันนี้ได้ ต้องขอโทษมา ณ ที่นี้ด้วย ที่หลังจากทำแล้วจะไม่ได้เห็นผล แต่ไม่อยากอะไร ขอให้เพื่อนๆ ลองทำตามกันดูนะครับขั้นตอนที่ 1 : ให้ท่าน login เข้าสู่ Blog ของท่าน
ขั้นตอนที่ 2 : ไปที่ Template เลือก Edit HTML อย่าลืมนะครับ เหมือนเช่นทุกครั้ง ก่อนจะแก้ไขอะไร แนะนำให้ทำการ backup template เก็บไว้ก่อนครับ เผื่อว่าหากมีการผิดพลาดใดๆ ขึ้นมา จะได้มีตัวแก้ไข
 |
| ขั้นตอนนี้ยังขอให้ข้อมูลจาก Blog นี้ในการนำเสนอนะครับ |
ขั้นตอนที่ 4 : ให้ทำการ Copy โค๊ดข้างล่างนี้ เอาไปวางไว้ก่อน tag : </body>
<!-- START RELATED POSTS WIDGET BY BLOGSPOT YARD -->
<b:if cond='data:blog.pageType == "item"'>
<style>
.related-posts {
width: 100%;
margin: 2em 0;
float: left;
}
.related-posts ul li {
list-style: none;
margin: 0 5px;
float: left;
text-align: center;
border: none;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
//<![CDATA[
$(document).ready(function() {
//CODE OPTIONS
var maxSearched = 500;
var minimum = 3;
var maximum = 5;
var imageSize = 150;
var roundImages = false;
var relatedTitle = true;
var labelInTitle = true;
var relatedTitleText = "more posts about";
var defaultImage = "";
var campaignTracking = false;
var campaignSource = "";
var campaignMedium = "";
var campaignName = "";
var postLabels = $('.post-labels a');
var insertBefore = $('.post-footer');
//END CODE OPTIONS - DO NOT EDIT BELOW CODE
var labels=[];var label;var alternateLabel;var minposts=minimum-1;if(postLabels.length===1){label=postLabels.text().trim()}else if(postLabels.length>1){$(postLabels).each(function(){labels.push($(this).text().trim())});label=labels[Math.floor(labels.length*Math.random())];var labelLocation=labels.indexOf(label);if(labelLocation===labels.length-1){alternateLabel=labels[labelLocation-1]}else{alternateLabel=labels[labelLocation+1]}}if(label!==undefined){var title=$(".entry-title").text().trim();var labelCount=0;var alternateLabelCount=0;var matches=[];var url=$('link[rel="alternate"][title*="Atom"]').eq(0).attr("href");$.ajax({url:url,data:{"max-results":maxSearched,alt:"json-in-script"},dataType:"jsonp",success:function(e){$.each(e.feed.entry,function(t,n){if(e.feed.entry[t].category!==undefined){var r=[];for(var i=0;i<e.feed.entry[t].category.length;i++){r.push(e.feed.entry[t].category[i].term)}if($.inArray(label,r)!==-1){labelCount++}if($.inArray(alternateLabel,r)!==-1){alternateLabelCount++}}});if(labelCount<=minposts&&alternateLabelCount>=minposts){label=alternateLabel}$.each(e.feed.entry,function(t,n){if(e.feed.entry[t].category!==undefined){var r=[];for(var i=0;i<e.feed.entry[t].category.length;i++){r.push(e.feed.entry[t].category[i].term)}if($.inArray(label,r)!==-1){var s=e.feed.entry[t].title.$t.trim();if(s!==title){var o;for(var u=0;u<e.feed.entry[t].link.length;u++){if(e.feed.entry[t].link[u].rel==="alternate"){o=e.feed.entry[t].link[u].href}}var a;if(e.feed.entry[t].media$thumbnail!==undefined){a=e.feed.entry[t].media$thumbnail.url.split(/s72-c/).join("s"+imageSize+"-c")}else{a=defaultImage}if(matches.length<maxSearched&&campaignTracking===false){matches.push('<li><a href="'+o+'"><img src="'+a+'" alt="'+s+'" nopin="nopin">'+s+"</a></li>")}else if(matches.length<maxSearched&&campaignTracking===true){matches.push('<li><a href="'+o+"?utm_source="+campaignSource+"&utm_medium="+campaignMedium+"&utm_campaign="+campaignName+'"><img src="'+a+'" alt="'+s+'" nopin="nopin">'+s+"</a></li>")}}}}});if(matches.length>=minimum){if(relatedTitle===true&&labelInTitle===true){insertBefore.before('<div class="related-posts"><h5>'+relatedTitleText+' <span class="related-term">'+label+"</span></h5><ul></ul></div>")}else if(relatedTitle===true&&labelInTitle===false){insertBefore.before('<div class="related-posts"><h5>'+relatedTitleText+"</h5><ul></ul></div>")}else{insertBefore.before('<div class="related-posts"><ul></ul></div>')}matches.sort(function(){return.5-Math.random()});for(var t=0;t<maximum;t++){$(".related-posts ul").append(matches[t])}}insertBefore.css("clear","both");$(".related-posts ul li").css({"max-width":imageSize,"border":"none","padding":"0"});if(roundImages===true){$(".related-posts ul li img").css({"width":imageSize,"height":imageSize,"border-radius":"50%"})}else{$(".related-posts ul li img").css({"max-width":imageSize,"height":"auto"});}}})}
});
//]]>
</script>
</b:if>
<div style='display: none ! important;'><a href="http://www.blogspotyard.com" rel="dofollow">Blogger Widget</a></div>
<!-- END RELATED POSTS WIDGET BY BLOGSPOT YARD -->
ขั้นตอนที่ 5 : จากนั้นให้ทำการ Save Template เป็นอันเสร็จสิ้นการ
ลอง View Blog ดู เพื่อนๆจะเห็นในโฟสของท่านจะมี Related Post แสดงขึ้นมา ดังตัวอย่างจากภาพข้างล่างนี้ (ต้องขอโทษด้วยนะครับที่ต้องพ่นสีปิดปังอำพรางไว้นิดๆหน่อยๆ แต่เชื่อว่าเพื่อนๆ คงจะคลำทางเจอ blog นี้ของผมแน่ๆ 555+ ส่องได้ตามสบายครับ เพราะผมทำไว้มั่วๆ ยังไม่มีรายได้อะไรเลยมาจาก blog นี้หรือ blog อื่นๆ )
 |
| Related Post in Blog Post |
การปรับแต่ง Blogger ขั้นเทพ ในการใส่ Related Post
โค๊ดในการใส่ Related Post นี้สามารถปรับแต่งได้หลายอย่าง ซึ่งจะอยู่ใน //CODE OPTIONS บนส่วนหัวของโค๊ด และด้านล่างคือการปรับแต่งในแต่ละส่วนThumbnail Style:
var roundImages = false;
ค่าปกติคือ false จะแสดงรูป thumbnail เป็นแบบสี่เหลี่ยม หากจะให้มีมุมโค้งให้เปลี่ยนเป็น true
Related Posts Number:
var minimum = 3;
var maximum = 5;
ใช้แสดงจำนวนโฟสที่ต้องการว่าจะให้แสดงจำนวนกี่โฟส
Thumbnail Size:
var imageSize = 150;
ใช้กำหนดขนาดของรูป thumbnail
Widget Title:
var relatedTitleText = "more posts about";
เปลี่ยนข้อมความใน "xxx" เป็นข้อความที่อยากจะให้แสดงในรูปแบบของท่าน
var relatedTitle = true;
ถ้าไม่ต้องการให้แสดง title ให้เปลี่ยนค่านี้เป็น false
Label Title:
var labelInTitle = true;
จะเป็นการแสดง title ของ label โดยอัตโนมัติ (คือส่วนที่จะแสดงต่อจาก "more post about" + label title) แต่ถ้าหากไม่ต้องการให้แสดง Label Title ให้เปลี่ยนค่าจาก True เป็น False
หวังว่าบทความนี้จะช่วยให้เพื่อนๆ แต่ง Blogger ขั้นเทพ ได้ตามที่ต้องการนะครับ ไว้พบกันใหม่คราวหน้าครับ
เครดิต : blogspotyard.com สำหรับการ แต่ง Blogger ขั้นเทพ ในการใส่ Related Post
