Salam
NEWBIE, buat sahabat newbie yang suka utak - atik template blog. Atikel kali
ini tentang Cara Membuat Artikel Terkait dibawah Posting Blog. Memasang
artikel terkait di blog mampu meningkatkan jumlah page view pada blog Sobat ,
karena dengan adanya related post , pengunjung akan tertarik dengan artikel
yang berkaitan dengan artikel yang sedang dibaca oleh pengunjung Blog Sobat.
Widget
artikel terkait ini di lengkapi dengan gambar berukuran 72 pixel dan di
lengkapi dengan post snippet . Tertarik untuk memasang di Blog Sobat ?
Ikuti
langkah langkahnya berikut ini :
Cara Membuat Artikel Terkait dibawah posting Blog
1.
Silahkan masuk akun Blogger >>
Template ke halaman Edit HTML
2.
Masukkan kode css berikut , tepat diatas kode
]]></b:skin>
/* ==== Widget Artikel Terkait Firanewbie ==== */
.related-post{margin:15px 0 0;border-top:1px solid
#f0f0f0;padding:15px 0 0}
.related-post h4{font-size:14px;margin:0 0
.5em;text-transform:uppercase}
.related-post-style-2{margin:0 0 0 0!important;padding:0 0 0
0!important;list-style:none}
.related-post-style-2 li{margin:0 0 0 0;padding:0 0 0 0}
.related-post-style-2 li{padding:5px 0!important;border-top:1px
solid #eee;overflow:hidden}
.related-post-style-2 li:first-child{border-top:none}
.related-post-style-2
.related-post-item-thumbnail{width:60px;height:60px;max-width:none;max-height:none;background-color:transparent;border:none;padding:0;float:left;margin:2px
8px
0 0}
.related-post-style-2 .related-post-item-title{font:normal
normal 16px Fjalla One,Helvetica,Arial,sans-serif}
.related-post-style-2
.related-post-item-summary{display:block;overflow:hidden}
.related-post-style-2 .related-post-item-more{}
3.
Cari kode </body>
, dan pasang kode dibawah ini diatas kode </body> tersebut
<div class='related-post' id='related-post'></div>
<script type='text/javascript'>
var labelArray = [
"Smartphone"
];
var relatedPostConfig
= {
homePage: "http://Nama-Blog-Sobat.blogspot.com/",
widgetTitle:
"<h4>Related Posts :</h4>",
numPosts: 5,
summaryLength: 140,
titleLength:
"auto",
thumbnailSize: 60,
noImage:
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ_3p-7EF5J-ZUXmP1cW_Luy2XkIB0VJrPhA3ydA9iHZYZKATasW0-iW81rq2S8ej_LlnTaiOaBZ04pX3GAPhD35bKiMW_Utt89MiotFUS7aqutQKDKNUllkNU5I_eGLpzlsYFkCpRG6DE/w60-c-h60/no-image.png",
containerId:
"related-post",
newTabLink: false,
moreText: "Read
More...",
widgetStyle: 2,
callBack: function()
{}
};
</script><script type='text/javascript'>
//<![CDATA[
/*! Widget Artikel Terkait untuk Blogger oleh FIRANEWBIE */
var
randomRelatedIndex,showRelatedPost;(function(n,m,k){var
d={widgetTitle:"<h4>Artikel
Terkait:</h4>",widgetStyle:1,homePage:"http://www.dte.web.id",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca
Selengkapnya",callBack:function(){}};for(var
f in
relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var
j=function(a){var
b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return
Math.floor(Math.random()*(a-b+1))+b},l=function(a){var
p=a.length,c,b;if(p===0){return
false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return
a},e=(typeof
labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var
c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var
s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul
class="related-post-style-'+A+'">',b=d.newTabLink?'
target="_blank"':"",y='<span
style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var
q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"…":t;r=("media$thumbnail"
in
x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize+"-c"):d.noImage;u=("summary"
in
x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br
?\/?>/g,"
").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"…":"";for(var
p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img
alt=""
class="related-post-item-thumbnail"
src="'+r+'" width="'+d.thumbnailSize+'"
height="'+d.thumbnailSize+'"><a
class="related-post-item-title" title="'+t+'"
href="'+v+'"'+b+">"+w+'</a><span
class="related-post-item-summary"><span
class="related-post-item-summary-text">'+u+'</span> <a
href="'+v+'"
class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li
class="related-post-item"
tabindex="0"><a
class="related-post-item-title"
href="'+v+'"'+b+'><img alt=""
class="related-post-item-thumbnail" src="'+r+'"
width="'+d.thumbnailSize+'"
height="'+d.thumbnailSize+'"></a><div
class="related-post-item-tooltip"><a
class="related-post-item-title"
title="'+t+'"
href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li
class="related-post-item"
tabindex="0"><a
class="related-post-item-wrapper" href="'+v+'"
title="'+t+'"'+b+'><img alt=""
class="related-post-item-thumbnail" src="'+r+'"
width="'+d.thumbnailSize+'"
height="'+d.thumbnailSize+'"><span
class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a
class="related-post-item-title"
title="'+t+'"
href="'+v+'"'+b+">"+w+'</a><div
class="related-post-item-tooltip"><img
alt="" class="related-post-item-thumbnail"
src="'+r+'" width="'+d.thumbnailSize+'"
height="'+d.thumbnailSize+'"><span
class="related-post-item-summary"><span
class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a
title="'+t+'"
href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);
//]]>
</script>
4.
Klik save dan lihat hasilnya ( Selesai )
Saya akan lebih senang jika sobat blogger newbie berkenan memberikan komentar, saran, dan tambahan informasi juga pertanyaan seputar artikel Cara Membuat Artikel Terkait dibawah Posting Blog. Terima kasih dan semoga bermanfaat…..
