Category: Blogging

Sobat blogger mania yang saat ini masih berkutat dengan segala macam tampilan untuk mempercantik blog anda, tidak ada salahnya juga kan anda mencoba menyisipkan related post seperti gambar. dan aku rasa tampilannya oke banget dan terkesan inovatif banget kok sob, di samping pembuatannya juga relative sangat mudah banget.

Oke langsung saja agar tidak bertele-tele, karena semakin bertele-tele juga jari-jari ini semakin susah untuk di gerakkan. hehe

1. Silahkan masuk saja di blogger sobat => Template => Edit Html

(untuk pemula seperti saya) mohon kalau takut ada apa-apa templatenya di backup terlebih dahulu itu jauh lebih baik

2. Masukkan kode script ini pada template dimana tampilan related ini akan di tampilkan.

Silahkan fahami struktur dari template sobat, karena aku memang tidak terbiasa memberikan tutorial dengan langkah pakem. karena apa? itu disebabkan antara template yang satu dengan yang lainnya mempunyai perbedaan struktur. sekali lagi kenali struktur blog sobat, kalau ada pertanyaan isi aja komentar biar aku bantu. Kalau tidak ada yang nanya berarti langkahku benar bukan? memberikan tutorial yang singkat dan padat he.e. pis broo)

Tapi kalau menurut para ahli sih biasanya kode nya di taruh di atas kode <div class=’post-footer’> dan silahkan sobat find aja dengan tekan tombol ctrl+F.

Oke silahkan copy kan kode script di bawah ini dan sisipkan pada baris di mana tampilan related post ini akan sobat tampilkan.

<b:if cond=’data:blog.pageType == &quot;item&quot;’><style type=’text/css’>.related-post-title{font-size: 2em;padding: 0px 0px 15px;margin: 5px 0px;border-bottom: 1px dotted #000;} #related-posts {margin: 0px 0px 15px 0px;border-bottom: 1px dotted #000;padding-bottom: 10px; } #related-posts a { font-size: 1.2em; color: #525252; text-transform: capitalize; text-decoration: none; line-height: 20px;} #related-posts a:hover { text-decoration: none; color: #06c; } #related-posts ul { list-style-type: none; color: #000000; } #related-posts li { padding: 8px 2px; border-bottom: 1px solid #E2E2E2; clear: both; font-family: Helvetica; font-size: 12px; overflow: auto; border: 1px solid #CCC; margin: 5px 5px 8px 5px; border-radius: 4px; box-shadow: 0px 0px 5px #B6B6B6;background:#FAFAFA;} .image_left{ float: left; margin: 0px 10px 10px 2px; border: 1px solid #fff; padding: 0px; width: 80px; height: 56px; box-shadow: 0px 0px 4px #777; } #related_here{ float:left; width: 49%; padding: 0px; margin:0px; } #related_here2{ float:right; width: 49%; padding: 0px; margin:0px; } .related_all_ul{overflow: auto;}</style><script type=’text/javascript’>//<![CDATA[function related_results_labels(e){for(var l=0;l<e.feed.entry.length;l++){var t=e.feed.entry[l];relatedTitles[relatedTitlesNum]=t.title.$t;var r=e.feed.entry[l].media$thumbnail.url,a=r.replace(“/s72-c/”,”/s100/”);if(e.feed.entry[l].media$thumbnail)var r=e.feed.entry[l].media$thumbnail.url,a=r.replace(“/s72-c/”,”/s100/”);else if(null!=e.feed.entry[l].content.$t.match(/src=(.+?[.jpg|.gif|.png]”)/))var a=e.feed.entry[l].content.$t.match(/src=(.+?[.jpg|.gif|.png]”)/)[1];else var a=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8-B78dVD8f3agysV5ACSjg5AQt0jizNcJGQ9wgM4VTCOWeq5oT9CobpjTzeec9zNHMkHLGGB4DYZVY6aej6FIOYQW3gohomIixvO-y5FbsBViZxP1vIP_AxrNFn08GGN4x3xjaSx1Lmo/s250-Ic42/no-thumbnail.png”;relatedImage[relatedTitlesNum]=a;for(var n=0;n<t.link.length;n++)if(“alternate”==t.link[n].rel){relatedUrls[relatedTitlesNum]=t.link[n].href,relatedTitlesNum++;break}}}function removeRelatedDuplicates(){for(var e=new Array(0),l=new Array(0),t=new Array(0),r=0;r<relatedUrls.length;r++)contains(e,relatedUrls[r])||(e.length+=1,e[e.length-1]=relatedUrls[r],l.length+=1,l[l.length-1]=relatedTitles[r],t.length+=1,t[t.length-1]=relatedImage[r]);relatedTitles=l,relatedUrls=e,relatedImage=t}function contains(e,l){for(var t=0;t<e.length;t++)if(e[t]==l)return!0;return!1}function printRelatedLabels(e){for(var l=0;l<relatedUrls.length;l++)relatedUrls[l]==e&&(relatedUrls.splice(l,1),relatedTitles.splice(l,1),relatedImage.splice(l,1));var t=Math.floor((relatedTitles.length-1)*Math.random()),l=0;for(relatedTitles.length>1;l<relatedTitles.length&&20>l&&l<maxposts;)l%2==1?document.getElementById(“related_here2″).innerHTML+=”<li><img class=’image_left’ src=””+relatedImage[t]+’”><a href=”‘+relatedUrls[t]+’”>’+relatedTitles[t]+”</a></li>”:document.getElementById(“related_here”).innerHTML+=”<li><img class=’image_left’ src=””+relatedImage[t]+’”><a href=”‘+relatedUrls[t]+’”>’+relatedTitles[t]+”</a></li>”,t<relatedTitles.length-1?t++:t=0,l++;relatedUrls.splice(0,relatedUrls.length),relatedTitles.splice(0,relatedTitles.length),relatedImage.splice(0,relatedImage.length)}var relatedTitles=new Array,relatedImage=new Array,relatedTitlesNum=0,relatedUrls=new Array;//]]></script><div id=’related-posts’><h4 class=’related-post-title’>You may also like:</h4><div class=’related_all_ul’><ul id=’related_here’/><ul id=’related_here2’/><div style=”font-size: 7px;float: right; margin: 5px;”><a style=”font-size: 7px; text-decoration: none;” href=”http://goo.gl/URA0fN” rel=”nofollow”>get related posts widget</a></div></div><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&amp;max-results=7&quot;’ type=’text/javascript’/></b:loop><script type=’text/javascript’> var maxposts=6; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script></div><div style=’clear: both;’/></b:if>

Oke kelar sudah tutorial bagaimana caranya membuat related post seperti pada gambar. Semoga membantu dan bermanfaat.