Telolet Apps

Cara Membuat Artikel Terkait Vertikal Dengan Thumbnail di Bawah Postingan Blog

Artikel Terkait/Related Post salah satu widget yang wajjib dipasang di Blog. Artikel Terkait letaknya biasanya dibawah postingan Blog, Artikel Terkait juga biasanya sudah terpasang otomats saat menggunakan Template karya para master, baik secara gratis ataupun berbayar.

Widget Artikel Terkait yang saya share kali ini menggunakan Thumbnail, apa itu Thumbnail? Thumbnail adalah gambar kecil yang ada pada homepage postingan. Dan Widget Artikel Terkait yang saya share kali ini bukanlah versi simple/Sederhana, meskipun tidak simple/sederhana tetapi tetap Responsive.

Berikut Cara Memasang Artikel Terkait Vertikal Dengan Thumbnail di Bawah Postingan Blog dibawah ini:

- Login ke akun Blogger.com

- Selanjutnya langsung menuju Template/Edit HTML, cari kode </head> (gunakan CTRL F)

- Copy kode dibawah ini, pastekan diatas kode </head>

<if cond=data:blog.pageType == "item"><br /><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><br /><script type=text/javascript>// var relnum = 0; var relmaxposts = 5; var numchars = 150; var morelink = "Read More"; 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(){returnw+};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+="<1w 1x="+b[r]+" />";h+=""+4[r]+"";h+="<17 G=H-18>"+9[r]+" ... "+1y+"<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><br /></if>

- Kemudian cari kode <data:post.body/> (gunakan CTRL F)

- Copy kode dibawah ini, pastekan dibawah kode <data:post.body/>

<if cond=data:blog.pageType == "item"><br /><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><loop values=data:post.labels var=label><br /><script expr_src="/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgthum&max-results=50" type=text/javascript/></loop><ul id=relpost_img_sum><script type=text/javascript>relatpost();</script><br /></ul></div></if>

- Biasanya kode <data:post.body/> lebih dari satu, jadi silahkan coba satu persatu, mana yang paling cocok.

Available link for download

Cara Submit URL Postingan ke Google Dan Bing

Pastikan Blog yang akan di submit url postingan atau artikelnya sudah terdaftar dan terverifikasi di Google dan Bing Webmaster Tools, belum tahu caranya? Baca Cara Daftar Dan Verifikasi Blog ke Google Webmaster Tools dan Cara Daftar Dan Verifikasi Blog ke Bing Webmaster Tools.

Setelah selesai Daftar dan Verifikasi Blog ke Google Webmaster Tools dan Bing Webmaster Tools, langsung menuju link dibawah ini:

- Submit URL ke Google

- Submit URL ke Bing

Setelah itu masukan alamat postingan yang akan di submit.

Available link for download

Cara Cepat Mengatasi Gambar Thumbnail Postingan Buram di Homepage Blog

Banyak cara dilakukan saat gambar Thumbnail postingan Blog tiba-tiba buram atau blur alias pecah di halaman depan. Sebabnya bermacam-macam, misalnya karena bawaan awal Template Blog, contoh seperti kasus Blog k0k0h yang sempat mengalami gambar Thumbnail postingan pecah di halaman depan.

Coba mencari ke mesin pencari Google, banyak tutorial yang saya temui, tetapi tidak ada yang cocok pada Template saya, kemudian saya coba utak-atik sendiri, karena sudah lumayan prustasi mencari di mbah Google.

Pada akhirnya saya menemukan solusinya dan gambar Thumbnail di halaman depan pada postingan saya pun tidak lagi seperti kaca pecah. Berikut ini tampilan ketika gambar Thumbnail postingan pecah di halaman depan Blog k0k0h dan sebaliknya.


Berikut Cara Cepat Mengatasi Gambar Thumnail Postingan Buram di Halaman Depan Blog dibawah ini:

- Login ke akun Blogger.com

- Selanjutnya langsung menuju Template/Edit HTML.

- Cari kode .post-thumbnail (gunakan CTRL F)

- Kemudian ganti ukuran lebar dan tinggi-nya
Contohnya:
.post-thumbnail img{float:left;margin:0 15px 0 0;background:#fff;width:150px!important;height:150px!important;padding:0;border:4px solid #f1f1f1;box-shadow:none}
(disarankan menggunakan width:100px dan height:100px)

- Terakhir klik Simpan Template

Available link for download