Sobat Blogger kali ini admin Bursa Info kembali ingin share tips trik seputar Blogger yaitu Cara Membuat Artikel Dengan Gambar / Thumbnail Horizontal , Funsinya adalah untuk menampilkan Artikel Terkait sesuai dengan label yang kita posting , Trik ini berguna untuk meningkatkan jumlah page view halaman kita , perlu di ingat Umumnya pengunjung sering tertarik dengan gambar yang tampil . untuk contohnya bisa di lihat di akhir postingan saya ,itu juga artikel terkait Horizontal hanya kami gabung dengan random Post secara berdampingan....Atau bisa di lihat di bawah ini.
- Masuk ke akun blogger sobat lalu pilih Template ----> Edit HTML
- Cari Kode </head>Lalu Copy kode di bawah ini tepat di atas kode </head> tadi.. oiya sebelumnya back up dulu template sobat takut ada gagal...
<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 #222; background:#fff ; border:1px solid #ddd; margin:0 0 5px; padding:5px; height:125px; list-style:none}
#relpost_img_sum li:hover{background:#fff ; border:1px solid #ddd;}
#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:2px; border:solid 1px #ccc; width:60px; height:60px; background:#fff}
</style>
<script type='text/javascript'>//<!
[CDATA[ var relnum = 0;
var relmaxposts = 8;
var numchars = 150;
var morelink = "readmore";
eval(function(p,a,c,k,e,d){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--)d[e(c)]=k[c]||e(c);k=[function(e){return d[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 5=f g();2 4=f g();2 9=f g();2 b=f g();y R(S,10){2 7=S.1h("<");m(2 i=0;i<7.3;i++){8(7[i].N(">")!=-1){7[i]=7[i].13(7[i].N(">")+1,7[i].3)}}7=7.1g("");7=7.13(0,10-1);H 7}y 1o(J){m(2 i=0;i<J.Q.6.3;i++){2 6=J.Q.6[i];5[p]=6.u.$t;v="";8("T"K 6){v=6.T.$t}E 8("U"K 6){v=6.U.$t}9[p]=R(v,1j);8("1c$19"K 6){L=6.1c$19.1i}E{L="18://1l.1p.17/1m/1s/1t/1q/d/1f.1d"}b[p]=L;m(2 k=0;k<6.C.3;k++){8(6.C[k].M==\'1k\'){4[p]=6.C[k].q;G}}p++}}y P(a,e){m(2 j=0;j<a.3;j++)8(a[j]==e)H 1r;H 1n}y 1e(){2 l=f g(0);2 s=f g(0);2 o=f g(0);2 n=f g(0);m(2 i=0;i<4.3;i++){8(!P(l,4[i])){l.3+=1;l[l.3-1]=4[i];s.3+=1;s[s.3-1]=5[i];o.3+=1;o[o.3-1]=9[i];n.3+=1;n[n.3-1]=b[i]}}5=s;4=l;9=o;b=n;m(2 i=0;i<5.3;i++){2 c=w.W((5.3-1)*w.12());2 11=5[i];2 X=4[i];2 Y=9[i];2 V=b[i];5[i]=5[c];4[i]=4[c];9[i]=9[c];b[i]=b[c];5[c]=11;4[c]=X;9[c]=Y;b[c]=V}2 x=0;2 r=w.W((5.3-1)*w.12());2 14=r;2 h;2 O=D.1U;1T(x<15){8(4[r]!=O){h="<1a A=\'B-u 1W\'>";h+="<a q=\'"+4[r]+"\' M=\'1V\' z=\'F\' u=\'"+5[r]+"\'><1S 1P=\'"+b[r]+"\' /></a>";h+="<a q=\'"+4[r]+"\' z=\'F\'>"+5[r]+"</a>";h+="<1b A=\'B-I\'>"+9[r]+" ... <a q=\'"+4[r]+"\' z=\'F\'>"+1O+"</a><1b A=\'B-I\'>";h+="</1a>";D.16(h);x++;8(x==15){G}}8(r<5.3-1){r++}E{r=0}8(r==14){G}}D.16(\'<a q="18://24-1Y.1X.17/20/1Z/1N-1A-1C-1B-1y.1v" u="1u 1x 1w 1D 1K Z 1J 1M 1L 1I" 1E="1H-1G: 1F; 1z:#21; I-25:22;">Z 23 : 1Q 1R</a>\')}',62,130,'||var|length|relurls|reljudul|entry|cuplik|if|relcuplikan||relgambar|informasi|||new|Array|relhasil||||tmp|for|tmp4|tmp3|relnum|href||tmp2||title|postcontent|Math|rangkumanPosts|function|target|class|news|link|document|else|_top|break|return|text|json|in|postimg|rel|indexOf|dirURL|contains|feed|saringtags|suchas|content|summary|tempGambar|floor|tempUrls|tempCuplikan|Widget|panjang|tempJudul|random|substring|rini|relmaxposts|write|com|http|thumbnail|li|span|media|gif|relatpost|noimagethumb|join|split|url|numchars|alternate|lh3|_xcD4JK_dIjU|false|relpostimgthum|ggpht|hLjqmEbdtkw|true|SnamIh0KTCI|AAAAAAAADMA|Klik|html|sini|Di|dengan|color|membuat|terkait|artikel|untuk|style|8px|size|font|Gambar|Artikel|mendapatkan|Dengan|Terkait|cara|morelink|src|Bursa|Info|img|while|URL|nofollow|clearfix|blogspot|info|08|2014|999999|none|by|bursa|decoration'.split('|'),0,{}))
//]]></script> - Beberapa kode warna mngkin ingin di sesuaikan dengan warna tempate sobat ,kode warna yang harus di rubah adalah
- #fff silahkan ganti kode warna tersebut itu sesuai selera sobat untuk melihat kode warna bisa di lihat di blog kami klik di sini
- #ddditu adalah warna border silahkan ganti
- var relmaxposts = 8; jumlah artikel terkait yang ingin di tampilkan
- var numchars = 150; jumlah teks definisi yang ingin di tampilkan , untuk yang ini bila teks udah keluar dari kotak artikel terkait bisa di kurangi
- Belum selesai ya gan..sekarang agan cari lagi kode <data:post.body/> saran gunakan kontrol F untuk mencari kode tersebut , bila template sobat sudah menggunkan read more otomatis maka kode ini <data:post.body/> biasanya ada tiga , gunakan saja kode yang ketiga bila gagal ganti jadi kode yang kedua...heheh biasanya permasalah terjadi pada penempatan di kode <data:post.body/> ini tapi sabar saja di coba dan coba lagi
- Kemudian Copy kode di bawah ini
<b:if cond='data:blog.pageType == "item"'> <div id='related_posts' style='margin-top:35px;'> <h4 style='color:#fff; text-shadow:none; border-radius:5px; border:2px solid #ddd; background:#000;'>Artikel Yang Berhubungan</h4> </div>
<b:loop values='data:post.labels' var='label'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgthum&max-results=50"' type='text/javascript'/> </b:loop> <ul id='relpost_img_sum'> <script type='text/javascript'>relatpost();</script> </ul> <div id='relatedpostsjp'/> </b:if> - Save Template sobat
