Posted by Aak
Aak-share.com Updated at: 2:10:00 PM

Membuat Relate Post Thumbnail Vertikal

No comments:
Membuata Relate Post Thumbnail Vertikal - Sebelum nya saya menuliskan cara membuat Relate Post Thumbnail Horizontal, pada kesempatan kali ini saya akan menulisakan cara membuat relate post Thumbnail Vertikal.

Relate Post Vertikal tentunya sama manfaatnya dengan relate post Horizontal, dengan menggunakan relate pots vertikal juga bisa meningkatkan visitor. Perbedaanya yaitu letaknya mendatar dan menurun. Relate post vertikal tentunya menurun kebawah, untuk penempatannya tentunya sama dibawah postingan.


Relate post vertikal berikut ini menampilkan thumbnail disebelah kiri dan sedikit keterangan disamping kanan, dan juga menampilkan read more otomatia, dengan menggunakan relate post vertikal pastinya menambah tampialn menarik dan cantik diblog anda. Jika anda tertarik ingin menerapkan relate post atau disebut artikel terkait vertikal berikut langkah-langkahnya :

Membuat Relate Post Thumbnail Vertikal

Pertama anda buka Editor template selanjutnya anda cari kode </head> , apabila sudah ditemukan anda copy kode berikut ini dan pastekan sebelum kode </head> atau tepat diatasnya.

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<style>
#main-wrapper {width: 810px;}
.post {border-bottom: 1px solid #ddd;}
  }
</style>
</b:if>
<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:420px; 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:75px; 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>

Keterangan :
Kode warna merah adalah ukuran post body, saya menggunakan ukura 810px; silahkan anda rubah sesuai ukuran post body anda.


Selanjutnya anda cari kode <div class='post-footer'> , kodenya kira-kira sebagai berikut :

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'/>
<div class='post-footer-line post-footer-line-2'/>
<div class='post-footer-line post-footer-line-3'/>
</div>
</div>

apabila sudah ditemukan silahkan anda copy kode dibawah ini dan terapak dibawah
<div class='post-footer-line post-footer-line-1'/>, jika tidak berhasil silahkan terapkan dikode berikutnya.

<div id='related_posts' style='margin-top:35px;'> 
<h4 style='color:#fff; text-shadow:none; border-radius:5px; border:2px solid #ddd; background:#2A11E5;'>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>  

Keterangan :
Kode warna merah adalah warna background silahkan anda ganti sesuaikan dengan warna background
Kode warna hitam bisa anda ganti dengan Artikel terkait atau sesuai dengan yang anda inginkan.
Kode warna orange merupakan jumlah artikel yang dimunculkan.
Jika masih belum berhasil juga anda bisa terapkan kode diatas dibawah kode <data:post.body/>

Langkah berikutnya anda simpan template dan lihat hasilnya, sekarang anda memiliki relate post thumbnail vertikal yang akan menambah page view.
Cukup sekian dari saya membuat Relate Post Thumbnail Vertikal, mohon maaf jika ada kekurangan, semoga bermanfaat!


Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments