Media informasi Entertainment, Tutorial Blogger, Blogger Template, Fakta Unik, Teknologi, And More

Search This Blog

Cara Membuat Artikel Terkait Keren Vertikal Di Blogger

Cara Membuat Artikel Terkait Keren Vertikal Di Blogger - Assalamualaikum wr.wb, kali ini kita akan membahas mengenai cara membuat artikel terkait dengan style vertikal dan keren, untuk dipasang di blog sobat.

Manfaat dengan menambahkan Artikel Terkait di blog Anda sangat banyak, selain sebagai interlink antara artikel di blog juga sebagai menu navigasi artikel yang akan menampilkan posting yang terkait sehingga memudahkan pengunjung dalam menjalajahi blog Anda. Selain itu juga Artikel Terkait dapat meningkatkan lalu lintas di blog Anda dan mengurangi tingkat bouncing di blog sehingga hal ini akan menjadi nilai plus buat blog Anda. 


Artikel Terkait Vertikal


Langkah-langkah Membuat Widget Artikel Terkait :

Langkah 1 : Pergi ke Template, lalu Edit Template.

Langkah 2 : Cari kode </head> , Ctrl+F untuk mempermudah pencarian.

Langkah 3 : Salin kode berikut, diatas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style>

#related_posts{}

#related_posts h4{ border-top:1px solid #333; border-bottom:1px solid #333; color:#333; font-size:14px; letter-spacing:0; line-height:20px; margin:0 0 5px; padding:5px 10px; background:#03C}

#relpost_img_sum{/* height:320px; overflow:auto; */margin:0; padding:0px; line-height:16px}

#relpost_img_sum:hover{background:none}

#relpost_img_sum ul{list-style-type:none; margin:0; padding:0}

#relpost_img_sum li{border:1px solid #ccc; background:#fff; margin:0 0 5px; padding:5px; height:65px; list-style:none}

#relpost_img_sum .news-title{display:block; font-weight:bold !important}

#relpost_img_sum .news-text{display:block; text-align:justify; font-weight:normal; text-transform:none; color:#333}

#relpost_img_sum img{float:left; margin-right:5px; padding:4px; border:solid 1px #ccc; width:50px; height:50px; background:#fff}

</style>

<script type='text/javascript'>//<![CDATA[

var relnum = 0;

var relmaxposts = 5;

var numchars = 150;

var morelink = "selengkapnya";

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 4=f g();2 5=f g();2 9=f g();2 b=f g();s K(L,M){2 7=L.19("<");l(2 i=0;i<7.3;i++){8(7[i].N(">")!=-1){7[i]=7[i].O(7[i].N(">")+1,7[i].3)}}7=7.1a("");7=7.O(0,M-1);y 7}s 1b(z){l(2 i=0;i<z.P.6.3;i++){2 6=z.P.6[i];4[n]=6.A.$t;u="";8("Q"B 6){u=6.Q.$t}C 8("R"B 6){u=6.R.$t}9[n]=K(u,1c);8("S$T"B 6){D=6.S$T.1d}C{D="1e://1f.1g.1h/1i/1j/1k/1l/d/1m.1n"}b[n]=D;l(2 k=0;k<6.E.3;k++){8(6.E[k].U==\'1o\'){5[n]=6.E[k].v;F}}n++}}s V(a,e){l(2 j=0;j<a.3;j++)8(a[j]==e)y 1p;y 1q}s 1r(){2 m=f g(0);2 o=f g(0);2 p=f g(0);2 q=f g(0);l(2 i=0;i<5.3;i++){8(!V(m,5[i])){m.3+=1;m[m.3-1]=5[i];o.3+=1;o[o.3-1]=4[i];p.3+=1;p[p.3-1]=9[i];q.3+=1;q[q.3-1]=b[i]}}4=o;5=m;9=p;b=q;l(2 i=0;i<4.3;i++){2 c=w.W((4.3-1)*w.X());2 Y=4[i];2 Z=5[i];2 10=9[i];2 11=b[i];4[i]=4[c];5[i]=5[c];9[i]=9[c];b[i]=b[c];4[c]=Y;5[c]=Z;9[c]=10;b[c]=11}2 x=0;2 r=w.W((4.3-1)*w.X());2 12=r;2 h;2 13=14.1s;1t(x<15){8(5[r]!=13){h="<16 G=\'H-A 1u\'>";h+="<a v=\'"+5[r]+"\' U=\'1v\' I=\'J\' A=\'"+4[r]+"\'><1w 1x=\'"+b[r]+"\' /></a>";h+="<a v=\'"+5[r]+"\' I=\'J\'>"+4[r]+"</a>";h+="<17 G=\'H-18\'>"+9[r]+" ... <a v=\'"+5[r]+"\' I=\'J\'>"+1y+"</a><17 G=\'H-18\'>";h+="</16>";14.1z(h);x++;8(x==15){F}}8(r<4.3-1){r++}C{r=0}8(r==12){F}}}',62,98,'||var|length|reljudul|relurls|entry|cuplik|if|relcuplikan||relgambar|informasi|||new|Array|relhasil||||for|tmp|relnum|tmp2|tmp3|tmp4||function||postcontent|href|Math|rangkumanPosts|return|json|title|in|else|postimg|link|break|class|news|target|_top|saringtags|suchas|panjang|indexOf|substring|feed|content|summary|media|thumbnail|rel|contains|floor|random|tempJudul|tempUrls|tempCuplikan|tempGambar|rini|dirURL|document|relmaxposts|li|span|text|split|join|relpostimgthum|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|relatpost|URL|while|clearfix|nofollow|img|src|morelink|write'.split('|'),0,{}))

//]]></script>

</b:if>

Langkah 4 : Lalu cari kode <data:post.body/>

Langkah 5 : Kemudian salin kode berikut ini di bawah kode <data:post.body/> , biasanya kode ini ada 1-3 di template sobat, pilihlah diantara kode 2-3

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='related_posts' style='margin-top:35px;'>

<h4 style='color:#ffffff; text-shadow:none; border-radius:5px; border:2px
solid #ddd; background:#6fa8dc;'>Artikel Terkait</h4>

<b:loop values='data:post.labels' var='label'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; +
data:label.name +
&quot;?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=50&quot;'
type='text/javascript'/>

</b:loop>

<ul id='relpost_img_sum'>

<script type='text/javascript'>relatpost();</script>

</ul>

</div>

</b:if>



Langkah Terakhir : Simpan Template.

Sekian tutorial saya hari ini, semoga bermanfaat bagi sobat semua, postingan ini, saya dapat dari satu-delapan.blogspot.com, jika ada kekurangan saya mohon maaf, Wassalam.
Ditulis oleh: Pada :
Label : Tutorial Blogger

Post a Comment