Related Posts Vertikal with Thumbanil

Obachti 95

Blogger friendly sharing

Related Posts Vertikal with Thumbanil

Jane Doe By Jane Doe 22
Related posts atau artikel terkait yang biasanya berada di bawah postingan memliki fungsi yang besar untuk meningkatkan traffic maupun pageview blog. Sebenarnya menurut saya sendiri, related posts yang bagus adalah yang dapat memuat lebih banyak artikel. Thumbanil/foto itu sendiri tidak penting, begitu juga dengan ringkasan artikel pada related post. Disisi lain dari peningkatan view, ada baiknya kan kalau blog kita sendiri terlihat lebih bagus dengan widget yang lebih baik dilihat.

Kali ini saya mau share cara membuat related post dengan gaya vertikal yang memuat thumbanil dan sedikit ringkasan artikel terkait itu sendiri. Ada baiknya hasilnya dilihat lebih dulu.



Untuk cara mengaplikasikannya di blog, kurang lebih seperti ini:

  • Langkah pertama. Pada dasbor blog, masuk pada Editor HTML, salin kode di bawah ini dan letakkan sebelum/diatas tag penutup </head>, ingat! diatas/ sebelum tag </head>



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related_posts{}
#related_posts h4{ border-top:1px solid #ccc;  border-bottom:1px solid #ccc;  color:#fff;  font-size:14px;  letter-spacing:0;  line-height:20px;  margin:0 0 5px;  padding:5px 10px; background:#0274be url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhztefIwmj9shESpVX02hxxkpal3LjgEqtoutMvBOyAdvLBmHELQPbDm8XAC3hetxstkMw4Xj5FzDuYLDHO1tmD0I4fouHjqDmbiGY9KBcOWh-PxFYtFl04dCX6s_96pbVX905uMuyIYuer/s1600/nav.png) repeat-x;background-position: 0px -63px; }
#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:transparent; 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 = 200;
var morelink = "readmore";

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> 

  •  Selanjutnya, pada langkah kedua jika kamu mengerti sedikit coding. Akan lebih mudah memasangnya. Intinya kode berikut diletakkan dibawah posting. Namun, kita buat lebih mudah saja. Cari tag <data:post.body/>. Beberapa template umumnya memiliki tag ini lebih dari satu, jadi letakkan kode di bawah tepat sesudah tag <data:post.body/> yang kedua atau ketiga.


<div id='related_posts' style='margin-top:10px;'> 
<h4>Related Posts</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>

Kemudian save dan liha hasilnya, jika dirasa kurang pas dengan blog kamu. silhkan sesuaikan sendiri.

22 comments

  1. related post vertikalnya bagus tuh kang...buat tambahan pengetahuan okeh juga nih...;o)

    terimakasih udah pasang link desa di sidebar, tapi maaf...linknya baru bisa saya pasang di "Link EXCH"...maaf yah

    ReplyDelete
    Replies
    1. kalau sekiranya tidak berkenan, silahkan link saya dilepas lagi. tapi mohon konfirmasinya sebelumnya ya kang...
      salam sehat dan ceria selalu maaf lahir batin dan selamat berpuasa...bila menjalankannya

      Delete
  2. Asyiik jadi gak susah-susah bikin antar link posting
    thx mastah, ane coba ya

    ReplyDelete
  3. Lebih suka related post yang kesamping sih sob, lebih seo, hehe, terimakasih banyak sudah mau berbagi sobat

    ReplyDelete
  4. maaf .. ini buat blogcepot atau buat wordpress yaa

    ReplyDelete
  5. Makasi buah codenya..
    bagus ni dipasang di blogku.. :D

    ReplyDelete
  6. terima kasih kang,,

    sudah saya pakai kodenya dan berhasil (y)

    ReplyDelete
  7. Hello sir, your web site is lovingly serviced and saved as much as date. So it should be, thanks for sharing this with us.
    i also found some helpful sites like yours. Modicare Products
    Modicare-business-plan
    online-registration-for-modicare-consultant
    Modicare-success-story
    Modicare-achievers-list

    ReplyDelete

Post a Comment