Masih segar dengan related posts. Kalau masih, nih yang terbaru. Si Aneeshmenciptakan widget related posts with thumbnails yang mirip dengan related posts LinkWithin. Bedanya hanya cara pasangnya doank. Kita akan dihadapkan dengan kode script CSS yang ditambahkan pada template blog anda. Gambarnya seperti ini :


Gimana, pasti anda sudah pernah melihat widget seperti itu. Nah, anda bisa memasang widget ini dengan membaca tutorial si Aneesh di Blogger Widget. Tapi biar gampang saya buat juga di sini dalam versi bahasa indonesia. Oke, langsung saja ke intinya.

Pasang Related Posts with Thumbnails dari Aneesh

1. Login ke blogger dengan id anda
2. Tuju Layout
3. Pada tab menu pilih Edit HTML
4. Centang kotak kecil Expand Template Widget
5. Cari kode </head>
6. Kemudian ganti kode itu dengan kode di bawah ini :

   <!--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%;
   padding-top:5px;
   padding-left:5px;
   }
   
   #related-posts h2{
   font-size: 1.6em;
   font-weight: bold;
   color: black;
   font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
   margin-bottom: 0.75em;
   margin-top: 0em;
   padding-top: 0em;
   }
   #related-posts a{
   color:black;
   }
   #related-posts a:hover{
   color:black;
   }
   
   #related-posts  a:hover {
   background-color:#d4eaf2;
   }
   </style>
   <script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
   </b:if>
   <!--Related Posts with thumbnails Scripts and Styles End-->
   </head>

7. Kemudian cari lagi kode di bawah ini :

   <div class='post-footer-line post-footer-line-1'>

   Bila anda tidak menemukan kode di atas, carilah kode ini :

   <p class='post-footer-line post-footer-line-1'>

8. Bila sudah ketemu, masukkan kode berikut di bawah kode tadi :

   <!-- Related Posts with Thumbnails Code Start-->
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <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=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
   <script type='text/javascript'>
   var currentposturl=&quot;<data:post.url/>&quot;;
   var maxresults=5;
   var relatedpoststitle="Related Posts";
   removeRelatedDuplicates_thumbs();
   printRelatedLabels_thumbs();
   </script>
   </div><div style='clear:both'/>
   </b:if>
   <!-- Related Posts with Thumbnails Code End-->

9. Sekarang klik tombol SAVE TEMPLATE
10. Selesai

Atur jumlah related posts thumbnails yang ditampilkan pada kode ini :

var maxresults=5;

Anda juga bisa mengganti judul (title) widget pada kode ini :

var relatedpoststitle="Related Posts";

Jika tidak ada kesalahan, maka thumbnail related post ini akan muncul tepat di bawah posting anda. Contohnya seperti gambar di bawah ini :


Saat ini saya tidak memasang widget ini karena saya sudah pasang related posts fungsi scrolling. Oke, selamat mencoba dan semoga berhasil. Thanks Aneesh.

Mendaftar silahkan berkunjung ke www.co.cc.
Nah berikut Cara Daftar Domain .cu.cc :

1. Klik register untuk menuju halaman registrasi.
2. Masukan nama domain yang di inginkan kemudian check availabilty. Karena masih baru domain 5 digit dengan nama manis aja masih bisa, hehehe... dijual bisa gak ya :p
3. Pada domain option pilih register 2 years, kemudian Checkout4. Setelah itu sobat akan di bawah ke halaman input data registrasi. Isikan data-data sobat disana. Catatan: pada box street/number isikan alamat kurang dari 100 karakter tanpa tanda titik dan koma (. dan ,), jika semua sudah lengkap klik create account.
4. Kemudian akan dibawa ke halaman verification, cek di inbox / spam email sobat kemudian copas key verificationnya pada box tersebut, kemudian klik verify Action Key
5. Terakhir Finish Registration
6. Selesai

Mengganti tulisan "Menampilkan entri terbaru dengan label ..... Tampilkan entri lawas". Kamu dapat mengikuti langkah-langkah berikut.

1. Login ke Blogger, klik Rancangan lalu klik Edit HTML

Langsung saja cara membuat related post / artikel terkait :

Masuk blogger > rancangan > edit html > centang expand template widget. cari kode </head> kemudian letakkan script di bawah ini tepat di atas kode </head>

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;}}}}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];}}
relatedTitles = tmp2;
relatedUrls = tmp;}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' +
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;}
i++;}
document.write('</ul>');}
//]]>
</script>

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<h4>Artikel Terkait</h4>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>

Membuat dan meletakkan Code Skript utuk Artikel Terkait Di Bawah Posts

1. Masuk ke Rancangan, pilih Edit HTML, centang Expand Widget Templates.
2. Cari kode ini </head>
3. Copy kode di bawah ini dan letakan sebelum kode di atas (</head>)

<style>#related-posts {float : left;width : 540px;margin-top:20px;margin-left : 5px;margin-bottom:20px;font : 11px Verdana;margin-bottom:10px;}#related-posts .widget {list-style-type : none;margin : 5px 0 5px 0;padding : 0;}#related-posts .widget h2, #related-posts h2 {color : #940f04;font-size : 20px;font-weight : normal;margin : 5px 7px 0;padding : 0 0 5px;}#related-posts a {color : #054474;font-size : 11px;text-decoration : none;}#related-posts a:hover {color : #054474;text-decoration : none;}#related-posts ul {border : medium none;margin : 10px;padding : 0;}#related-posts ul li {display : block;background : url("http://www.dogphilosophy.net/graphics/sample1.jpg") no-repeat 0 0;margin : 0;padding-top : 0;padding-right : 0;padding-bottom : 1px;padding-left : 16px;margin-bottom : 5px;line-height : 2em;border-bottom:1px dotted #cccccc;}</style><script type='text/javascript'>//<![CDATA[var relatedTitles = new Array();var relatedTitlesNum = 0;var relatedUrls = new Array();function related_results_labels(json) {for (var i = 0; i < json.feed.entry.length; i++) {var entry = json.feed.entry[i];relatedTitles[relatedTitlesNum] = entry.title.$t;for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {relatedUrls[relatedTitlesNum] = entry.link[k].href;relatedTitlesNum++;break;}}}}function removeRelatedDuplicates() {var tmp = new Array(0);var tmp2 = new Array(0);for(var i = 0; i < relatedUrls.length; i++) {if(!contains(tmp, relatedUrls[i])) {tmp.length += 1;tmp[tmp.length - 1] = relatedUrls[i];tmp2.length += 1;tmp2[tmp2.length - 1] = relatedTitles[i];}}relatedTitles = tmp2;relatedUrls = tmp;}function contains(a, e) {for(var j = 0; j < a.length; j++) if (a[j]==e) return true;return false;}function printRelatedLabels() {var r = Math.floor((relatedTitles.length - 1) * Math.random());var i = 0;document.write('<ul>');while (i < relatedTitles.length && i < 20) {document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');if (r < relatedTitles.length - 1) {r++;} else {r = 0;}i++;}document.write('</ul>');}//]]></script>

<b:if cond='data:blog.pageType == "item"'><div id="related-posts"><h2>Artikel Terkait dengan <b:loop values='data:post.labels' var='label'><data:label.name/><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&amp;max-results=10&quot;' type='text/javascript'/></b:if></b:loop> </h2><script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script></div></b:if>

Membuat Artikel Terkait Horizontal dengan Thumbnail. Disini kita hanya memerlukan sedikit langkah otak-atik HTML namun alangkah baiknya jika sebelumnya anda beckup dulu templatenya buat jaga-jaga

1. Jelas login ke blog
2. Rancangan - Edit HTML
3. Centang "Expand Template Widget"
4. Cari kode <data:post.body/> agar lebih mudah gunakan CTRL+F
5. Copy kode berikut tepat di bawah <data:post.body/>

<!-- Related Posts with Thumbnails Code Start--><!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != &quot;true&quot;'></b:if><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=6&quot;' type='text/javascript'/></b:loop><script type='text/javascript'>removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);</script></div><div style='clear:both'/><!-- remove --></b:if><b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><a href='http://pisbon.blogspot.com/2012/03/widget-entri-terkait-trumbails.html'><img alt='Widget Artikel Terkait dengan Thumbnail' src='http://image.bloggerplugins.org/blogger-widgets.png' style='border: 0'/></a></b:if></b:if><!-- Related Posts with Thumbnails Code End-->

<!--Related Posts with thumbnails Scripts and Styles Start--><!-- remove --><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%;padding-top:5px;padding-left:5px;}
#related-posts h4{font-weight: bold;color: black;font:normal 14px Arial;text-transform:none;margin:0px;letter-spacing:.01em;line-height: 1.2em;color:#666;}margin-bottom: 0.75em;margin-top: 0em;padding-top: 0em;}#related-posts a{color:black;}#related-posts a:hover{color:black;}
#related-posts a:hover {background-color:#d4eaf2;}</style><script type='text/javascript'>var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja4OTvkLFQ0I8aHAKypyYa6qZl6J-Qfmr_f7qGIo7xPGp5EvVtxzNTiNpB22AxVJeSSFSrcDNC__qX7_Rv88qAq2rycdIMwDKQu4pE7rEo7qJgj7GKcGTNi2qzw-myM4ovnwT0k3Xu3ks/s400/noimage.png&quot;;var maxresults=6;var splittercolor=&quot;#d4eaf2&quot;;var relatedpoststitle=&quot;Artikel Lainnya&quot;;</script><script src='http://infonetmu.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/><!-- remove --></b:if><!--Related Posts with thumbnails Scripts and Styles End-->

Memasang Code HTML/Javascript Widget Related Post
Login ke dashboard blogspot kamu, pilih Rancangan »» Edit HTML, download template lengkap dulu untuk jaga-jaga kalau ada kesalahan. Beri tanda centang pada Expand Widget Template. Dan tempatkan script berikut di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>
<div class='widget-content'>
<h3>Related Posts by Categories</h3> <div id='data2007'/>
<script type='text/javascript'> var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 100; maxNumberOfLabels = 3; function listEntries10(json) { var ul = document.createElement(&#39;ul&#39;); var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i &lt; maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k &lt; entry.link.length; k++) { if (entry.link[k].rel == &#39;alternate&#39;) { alturl = entry.link[k].href; break; } } var li =document.createElement(&#39;li&#39;); var a =document.createElement(&#39;a&#39;); a.href = alturl; if(a.href!=location.href) { var txt =document.createTextNode(entry.title.$t); a.appendChild(txt); li.appendChild(a); ul.appendChild(li); } } for (var l = 0; l &lt; json.feed.link.length; l++) { if (json.feed.link[l].rel == &#39;alternate&#39;) { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;); var txt =document.createTextNode(label); var h =document.createElement(&#39;b&#39;); h.appendChild(txt); var div1 =document.createElement(&#39;div&#39;); div1.appendChild(h); div1.appendChild(ul);document.getElementById(&#39;data2007&#39;).appendChild(div1); } } } function search10(query, label) { var script =document.createElement(&#39;script&#39;);script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39; + label + &#39;?alt=json-in-script&amp;callback=listEntries10&#39;);script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);document.documentElement.firstChild.appendChild(script); } var labelArray = new Array(); var numLabel = 0; <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> textLabel = &quot;<data:label.name/>&quot;; var test = 0; for (var i = 0; i &lt; labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel &lt; maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop> </b:loop> </script> </div> </div> </b:if>

Menerapkan Code HTML Javascript untuk widget animasi popular Posts.