Share tutorial menarik dan tips unik seputar blogger.

Tuesday, 15 April 2014

Cara Membuat Related Post Mudah Dengan Gambar Di Blog

 Menaikkan Pengunjung Blog Dengan Cepat

Beginilah Cara Membuat Related Post Dengan Gambar
1. Tentunya anda harus buka akun blogger anda kawan.
2. Masuk Elemen Template - Lalu Klik Edit HTML
3. Carilah kode ]]></b:skin> (gunakan CTRL + F untuk mempermudah pencarian)
4 Apabila sudah ketemu, copylah kode di bawah ini lalu tempatkan persis di atas kode ]]></b:skin> tadi.


/* Related Post Dengan Tooltips Membuat Blog Keren --- */
.related-post .post-thumbnail {
z-index: 1; position: relative;
width: 100px;
height: 100px;
margin: 0; display: block;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 2px 2px 5px #444;
-moz-box-shadow: inset 2px 2px 5px #444;
box-shadow: inset 2px 2px 5px #555;
}
.related-post {
float: left; position: relative;
width: 108px;
height: 108px;
margin: 0 10px 10px 0;
background: #F6F6F6;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.related-post .related-post-title {
display: none;float: left; background: #00B366;
color: #fff;
text-shadow: none;
font-weight: bold;
padding: 10px;
position: absolute;
top: -20px;
left: 40px;
z-index: 2;
width: 200px;
-webkit-box-shadow: 0 0 2px #444;
-moz-box-shadow: 0 0 2px #444;
box-shadow: 0 0 2px #444;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.related-post:hover .related-post-title {display: block;}

5. Jangan beranjank dulu, masih ada yang harus di cari. Lihat kode selanjutnya di bawah ini, lalu cari kode <div class='post-footer-line post-footer-line-1'/> atau <div class='post-footer-line post-footer-line-2'/> (gunakan CTRL + F untuk mempermudah pencarian)

6. Apabila sudah ketemu dan anda yakin, copy kode di bawah ini dan pastekan tepat di bawah kode <div class='post-footer-line post-footer-line-1'/> atau <div class='post-footer-line post-footer-line-2'/>

<div id='related-posts'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>//<![CDATA[
var ry='<h3>Related Posts</h3>';rn='<h3>&nbsp;&nbsp;&nbsp;No related post available</h3>';rcomment='comments';rdisable='disable comments';commentYN='no';
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2sgwpjSsUW8ij41JvI8mkKH3XPPR_euZpev91SwJzlEq3xzkgmRmsUUKBHHdp4K8lFQMQXY40lx004j_YDA0OvDM3FjqHcs3q6BwvUliO6lXFx1spKu8ebI3QjO5GM-_Xw3eiAWfskfwz/'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<div class="clear"/></div><ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<div class="related-post"><div class="related-post-title">'+titles[c]+'</div><a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]></script>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=5;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</b:if>
</div>
<div class='clear'/>
7. Selesai
8. Simpan template blog anda kawan.

Catatan Yang harus anda perhatikan.
  • maxresults=5 adalah jumlah artikel yang anda tapilkan pada Related Post. Silahkan anda tambahi atau kurangi sesuai keingan anda.
  • 100px adalah ukuran gambar, baik tinggi maupun lebarnya. Silahkan anda ganti bila anda ingin memperkecil atau memperbesarnya.
  • Tulisan Related Post silahkan anda ganti dengan sesuka anda, misalnya jadi Artikel Terkait, atau Mungkin Ini Anda suka" dan lain-lain sesuka anda.
  • Bila gagal, coba ulangi lagi perlahan-lahan. Biasanya sih bisa.
Dah cuma segitu, tutorial mengenai Cara Membuat Related Post Mudah Dengan Gambar Di Blog. Silahkan di coba yah. Semoga bermanfaat.

Share on Facebook
Share on Twitter
Share on Google+

Related : Cara Membuat Related Post Mudah Dengan Gambar Di Blog

  • Bagaimana Menjadi Blogger Profesional? Bagaimana Menjadi Blogger Profesional? Kali ini saya akan membahas mengenai bagaimana menjadi blogger profesional. Apakah harus setiap hari ngeblog? Hehe. Berikut tip ...
  • Cara Memperbaiki Laptop Rusak Cara Memperbaiki Laptop Rusak - Bagi yang ingin menjadi Teknisi Laptop, mampu memperbaiki laptop dengan handal, pastinya wajib memiliki E book ini. Untuk menjad ...
  • Cara Memasang File .SWF di Blogger Pertama, untuk dapat memasang file .swf di Blogger, kita harus mengupload file swf di tempat hosting yang gratis, misalnya di : http://swfcabin.com/ . Beri nama pada Ti ...
  • Ebook : Membuat Aplikasi Android untuk Pemula Ebook “Membuat Aplikasi Android Sendiri , untuk Pemula” berisi materi mengenai cara membuat sendiri aplikasi Android dari nol sampai mahir. Ebook yang dibuat oleh ...
  • Yang Harus Diperhatikan Ketika Menulis Di Blog Ada kekeliruan kecil yang kerap dilakukan pemilik usaha kecil yang membuat blog. Kekeliruan ini adalah menganggap semua materi promosi di dunia nyata bisa langsung d ...

0 comments:

Post a Comment

Tidak boleh spam
tidak boleh ceplas ceplos

berkomentarlah dengan baik, karena kriteria orang bisa di nilai dari apayang dia komentari :)