Membuat Related Post Bergambar (Artikel Terkait Bergambar)

Tips dan Trik Blogger, DH sengaja anda ke sana kemari, dan ketemu dengan Template yang berisi Related Post Bergambar (Artikel Terkait Bergambar) Pada bagian postingannya, saya pikir ini boleh juga buat bahan postingan INI biarpun mungkin sudah ada diposting sebelumnya oleh Blogger lain, apa salahnya bikin sendiri, buat blog bisa update postingan original gitu, heheheh,  udah tau belum maksudnya Judul diatas, tentunya sebagian udah tau bukan , klo yang belum tau DragonHacker jelaskan eh, itu lo, saat postingan kita di buka dan jika ada label yang sama dengan dengan label (kategory) yang pernah kita buat, maka disetiap bawah postingan akan tampil dengan Artikel lainnya dengan Category yang sama, ini hampir sama saja dengan postingan saya sebelumnya Membuat Artikel Terkait atau Related Post, hanya saja bedanya Artikel yang terkait ini akan berisi gambar seperti halnya kita menggunakan jasa luar seperti linkwithin yang umum dipakai oleh blogger, tapi sedikit berbeda dengan linkwithin karena linkwithin memakai system random post (atau artikel terkait secara rawak), kali kita akan menggunakan kode script dari pengembang blogger sendiri, Untuk Contohnya bisa anda lihat disalah satu blog saya yang Tempat Coba-Coba,  pada bagian bawah postingan akan terlihat Artikel Terkait (Related Post) berupa Gambar dan Judul (Jika pada postingan tidak ada gambar, maka akan tembil gambar yang bertuliskan no image), disarankan jika memakai Related Post ini bagi yang besiri gambar di postingannya). Ok, jika anda berminat untuk Membuat Related Post Bergambar (Artikel Terkait Bergambar) ini, silahkan ikuti langkah demi langkah di bawah ini, pelan-pelan saja ye, jangan buru-buru. hehhehe

sebelum mengikuti langkah-langkah untuk Membuat Related Post Bergambar (Artikel Terkait Bergambar), saya sarankan anda untuk membackup templet anda dulu, demi keamanan bersama.heheheh

1. Login ke Blogger
2. Design (Rancangan) ---->> Edit HTML --->  Centang Expand Widget Template
3.  Cari Kode tag </head> (cari dengan Ctrl+F)
4. Letakkan kode Script  Di dalam TEXT BOX di bawah ini tepat di atas kode tag </head> tadi

<!--Related Posts with thumbnails Scripts and Styles Start--> <b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #related-posts {float:center;text-transform:none;height:100%;min-height:100%;margin-top:10px;padding-top:5px;padding-bottom:5px} #related-posts h2{font-size:12px;color:#000;font-weight:400;margin-bottom:0.4em;margin-top:0em;padding-top:0em} #related-posts a{color:#000;text-align:center} #related-posts a:hover{color:#FFF;text-shadow:0 0 1px #222;text-align:center} #related-posts a:hover{background-color:#222;border:none} </style> <script type='text/javascript'> //<![CDATA[ //Script by Aneesh of www.bloggerplugins.org //Released on August 19th August 2009 var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); var thumburl = new Array(); function related_results_labels_thumbs(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; try {thumburl[relatedTitlesNum]=entry.media$thumbnail.url;} catch (error){ s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){ thumburl[relatedTitlesNum]=d;} else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_6fK59sWwkXAVdUzsnE3JZ6D54bh5VBr-DzYAjl2w6nxE1nBsPMIxJ1UtRxh13JdsnPuJaX-47L9qAgf6yQJEj3K8vBAv784oCuF0AaynrApRT5fPyTqnwMzpkKC5_GDFAZUY8myx5Lk/s400/noimage.png'; } if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"..."; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; } } } } function removeRelatedDuplicates_thumbs() { var tmp = new Array(0); var tmp2 = new Array(0); var tmp3 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains_thumbs(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp3.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i]; tmp3[tmp3.length - 1] = thumburl[i]; } } relatedTitles = tmp2; relatedUrls = tmp; thumburl=tmp3; } function contains_thumbs(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false; } function printRelatedLabels_thumbs() { for(var i = 0; i < relatedUrls.length; i++) { if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))) { relatedUrls.splice(i,1); relatedTitles.splice(i,1); thumburl.splice(i,1); i--; } } var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>'); document.write('<div style="clear: both;"/>'); while (i < relatedTitles.length && i < 20 && i<maxresults) { document.write('<a style="text-decoration:none;padding:5px;float:left;'); if(i!=0) document.write('border-left:solid 0.5px #d4eaf2;"'); else document.write('"'); document.write(' href="' + relatedUrls[r] + '"><img style="width:100px;height:85px;border:2px outset #EAEAEA" src="'+thumburl[r]+'"/><br/><div style="width:90px;padding-left:10px;height:25px;border:none;margin:3px 0px 0px;padding-top:5px;font-style:normal;font-variant:normal;font-weight:normal;font-size:11px;line-height:normal;font-size-adjust:none;font-stretch:normal;">'+relatedTitles[r]+'</div></a>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0; } i++; } document.write('</div>'); relatedUrls.splice(0,relatedUrls.length); thumburl.splice(0,thumburl.length); relatedTitles.splice(0,relatedTitles.length); } //]]> </script> </b:if> <!--Related Posts with thumbnails Scripts and Styles End-->
5. Kemudian Cari Kode Tag  <div class='post-footer'>
6. Masukkan Kode Script di bawah ini tepat diatas kode tag  <div class='post-footer'>

<!--Related Posts with thumbnails Scripts and Styles Start--> <b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #related-posts {float:center;text-transform:none;height:100%;min-height:100%;margin-top:10px;padding-top:5px;padding-bottom:5px} #related-posts h2{font-size:12px;color:#000;font-weight:400;margin-bottom:0.4em;margin-top:0em;padding-top:0em} #related-posts a{color:#000;text-align:center} #related-posts a:hover{color:#FFF;text-shadow:0 0 1px #222;text-align:center} #related-posts a:hover{background-color:#222;border:none} </style> <b:if cond='data:blog.pageType == &quot;item&quot;'> <!-- Related Posts with Thumbnails Code Start--> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=8&quot;' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=8; var relatedpoststitle=&quot;<b>Related Posts :</b>&quot;; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div><div style='clear:both'/> </b:if> <!-- Related Posts with Thumbnails Code End-->

7. Save Template

pada kode var maxresults=8; diatas, angka 8 bisa anda ganti sesuai dengan yang anda mau.

Semoga bermanfaat bagi kita semua untuk cara Membuat Related Post Bergambar (Artikel Terkait Bergambar)

Selesai dah.

Read more: DragonHackers Blogspot | Tutorial Blogger | Tutorial Internet | Tutorial Computer http://dragonhackthis.blogspot.com/ Under Creative Commons License: Attribution

<div style="text-align: justify;"> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis035YEl9jcpWYGLBnR6wJ29evZezSFS-8cSo_uP-RaiOgmsz6eluzht77xXzVr8ft9RplHKYaa_fTtz6QK36mbFlLrigmXIPT5nVuFHbgQlLadtq2ijcMALeMLKtunqzdSy-yBaOb2bhY/s1600/related+post+bergambar.PNG" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis035YEl9jcpWYGLBnR6wJ29evZezSFS-8cSo_uP-RaiOgmsz6eluzht77xXzVr8ft9RplHKYaa_fTtz6QK36mbFlLrigmXIPT5nVuFHbgQlLadtq2ijcMALeMLKtunqzdSy-yBaOb2bhY/s320/related+post+bergambar.PNG" width="320" /></a></div><b>Tips dan Trik Blogger</b>, DH sengaja anda ke sana kemari, dan ketemu dengan Template yang berisi <b>Related Post Bergambar (Artikel Terkait Bergambar</b>) Pada bagian postingannya, saya pikir ini boleh juga buat bahan postingan INI biarpun mungkin sudah ada diposting sebelumnya oleh Blogger lain, apa salahnya bikin sendiri, buat blog bisa update postingan original gitu, heheheh,  udah tau belum maksudnya Judul diatas, tentunya sebagian udah tau bukan , klo yang belum tau DragonHacker jelaskan eh, itu lo, saat postingan kita di buka dan jika ada label yang sama dengan dengan label (kategory) yang pernah kita buat, maka disetiap bawah postingan akan tampil dengan Artikel lainnya dengan Category yang sama, ini hampir sama saja dengan postingan saya sebelumnya <b><a href="http://www.ainisastra.com/2010/11/membuat-artikel-terkait-atau-related.html" target="new">Membuat Artikel Terkait atau Related Post</a>, </b>hanya saja bedanya <b>Artikel yang terkait</b> ini akan berisi gambar seperti halnya kita menggunakan jasa luar seperti <b>linkwithin</b> yang umum dipakai oleh blogger, tapi sedikit berbeda dengan <b>linkwithin</b> karena <b>linkwithin</b> memakai system random post (atau artikel terkait secara rawak), kali kita akan menggunakan kode script dari pengembang blogger sendiri, Untuk Contohnya bisa anda lihat disalah satu blog saya yang <b><a href="http://templatesastra.blogspot.com/2011/06/green-lantern.html">Tempat Coba-Coba</a>, </b> pada bagian bawah postingan akan terlihat Artikel Terkait (Related Post) berupa Gambar dan Judul (Jika pada postingan tidak ada gambar, maka akan tembil gambar yang bertuliskan no image), disarankan jika memakai Related Post ini bagi yang besiri gambar di postingannya). Ok, jika anda berminat untuk <b>Membuat Related Post Bergambar (Artikel Terkait Bergambar) </b>ini, silahkan ikuti langkah demi langkah di bawah ini, pelan-pelan saja ye, jangan buru-buru. hehhehe</div><div style="text-align: justify;"> sebelum mengikuti langkah-langkah untuk <b>Membuat Related Post Bergambar (Artikel Terkait Bergambar)</b>, saya sarankan anda untuk membackup templet anda dulu, demi keamanan bersama.heheheh</div><div style="text-align: justify;"> <a name='more'></a></div><b>1.</b> Login ke Blogger<br /> <b>2</b>.<b> Design</b> (Rancangan) ---->><b> Edit HTML </b>--->  Centang <b>Expand Widget Template</b><br /> <b>3</b>.  Cari Kode tag <b></head></b> (cari dengan Ctrl+F)<br /> <b>4</b>. Letakkan kode Script  Di dalam <b>TEXT BOX</b> di bawah ini tepat di atas kode tag <b></head> </b>tadi<br /> <br /> <textarea cols="70" name="txt" readonly="readonly" rows="10" style="background: none repeat scroll 0% 0% rgb(245, 245, 245); border: 1px solid rgb(0, 0, 0); color: black; line-height: 1.5em; padding: 5px;"> <!--Related Posts with thumbnails Scripts and Styles Start--> <b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #related-posts {float:center;text-transform:none;height:100%;min-height:100%;margin-top:10px;padding-top:5px;padding-bottom:5px} #related-posts h2{font-size:12px;color:#000;font-weight:400;margin-bottom:0.4em;margin-top:0em;padding-top:0em} #related-posts a{color:#000;text-align:center} #related-posts a:hover{color:#FFF;text-shadow:0 0 1px #222;text-align:center} #related-posts a:hover{background-color:#222;border:none} </style> <script type='text/javascript'> //<![CDATA[ //Script by Aneesh of www.bloggerplugins.org //Released on August 19th August 2009 var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); var thumburl = new Array(); function related_results_labels_thumbs(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; try {thumburl[relatedTitlesNum]=entry.media$thumbnail.url;} catch (error){ s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){ thumburl[relatedTitlesNum]=d;} else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_6fK59sWwkXAVdUzsnE3JZ6D54bh5VBr-DzYAjl2w6nxE1nBsPMIxJ1UtRxh13JdsnPuJaX-47L9qAgf6yQJEj3K8vBAv784oCuF0AaynrApRT5fPyTqnwMzpkKC5_GDFAZUY8myx5Lk/s400/noimage.png'; } if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"..."; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; } } } } function removeRelatedDuplicates_thumbs() { var tmp = new Array(0); var tmp2 = new Array(0); var tmp3 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains_thumbs(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp3.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i]; tmp3[tmp3.length - 1] = thumburl[i]; } } relatedTitles = tmp2; relatedUrls = tmp; thumburl=tmp3; } function contains_thumbs(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false; } function printRelatedLabels_thumbs() { for(var i = 0; i < relatedUrls.length; i++) { if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))) { relatedUrls.splice(i,1); relatedTitles.splice(i,1); thumburl.splice(i,1); i--; } } var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>'); document.write('<div style="clear: both;"/>'); while (i < relatedTitles.length && i < 20 && i<maxresults) { document.write('<a style="text-decoration:none;padding:5px;float:left;'); if(i!=0) document.write('border-left:solid 0.5px #d4eaf2;"'); else document.write('"'); document.write(' href="' + relatedUrls[r] + '"><img style="width:100px;height:85px;border:2px outset #EAEAEA" src="'+thumburl[r]+'"/><br/><div style="width:90px;padding-left:10px;height:25px;border:none;margin:3px 0px 0px;padding-top:5px;font-style:normal;font-variant:normal;font-weight:normal;font-size:11px;line-height:normal;font-size-adjust:none;font-stretch:normal;">'+relatedTitles[r]+'</div></a>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0; } i++; } document.write('</div>'); relatedUrls.splice(0,relatedUrls.length); thumburl.splice(0,thumburl.length); relatedTitles.splice(0,relatedTitles.length); } //]]> </script> </b:if> <!--Related Posts with thumbnails Scripts and Styles End-->
5. Kemudian Cari Kode Tag  <div class='post-footer'>
6. Masukkan Kode Script di bawah ini tepat diatas kode tag  <div class='post-footer'>

<!--Related Posts with thumbnails Scripts and Styles Start--> <b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #related-posts {float:center;text-transform:none;height:100%;min-height:100%;margin-top:10px;padding-top:5px;padding-bottom:5px} #related-posts h2{font-size:12px;color:#000;font-weight:400;margin-bottom:0.4em;margin-top:0em;padding-top:0em} #related-posts a{color:#000;text-align:center} #related-posts a:hover{color:#FFF;text-shadow:0 0 1px #222;text-align:center} #related-posts a:hover{background-color:#222;border:none} </style> <b:if cond='data:blog.pageType == &quot;item&quot;'> <!-- Related Posts with Thumbnails Code Start--> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=8&quot;' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=8; var relatedpoststitle=&quot;<b>Related Posts :</b>&quot;; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div><div style='clear:both'/> </b:if> <!-- Related Posts with Thumbnails Code End-->

7. Save Template

pada kode var maxresults=8; diatas, angka 8 bisa anda ganti sesuai dengan yang anda mau.

Semoga bermanfaat bagi kita semua untuk cara Membuat Related Post Bergambar (Artikel Terkait Bergambar)

Selesai dah.

Sumber: Dragon Hack