Cara Membuat Related Post Keren Disertai Gambar Dan Tooltips

Membaca judul postingan di atas kamu pasti akan langsung tertarik. Iya memang pada kesempatan kali ini aku akan membagikan tutorial untuk membuat related post atau yang sering juga disebut dengan artikel terkait yang keren.

Kenapa kok bisa keren? Karena related post yang satu ini tampil dengan hanya gambar postingan dengan disertai tooltips. Penasaran bagaimana jadinya nanti jika sudah selesai untuk membuatnya? Kalau mau ngintip jadinya nanti seperti apa silahkan lihat gambar di bawah ini :

Dengan menambahkan artikel terkait pada blog, kita bisa mengurangi tingkat bounce rate di blog kita. Dan tentunya membuat pengunjung di blog kita betah untuk membaca artikel-artikel kita yang lainnya. Biar artikel yang sudah kita buat susah-susah di blog kita ada yang baca.

Cara Membuat Related Post Keren

Langkah 1 : Masuk ke akun Blogger >> Dashboard

Langkah 2 : Pilih Template >> Edit HTML ( Centang Expand Widget Template )

Langkah 3 : Cari kode di bawah ini  (Gunakan CTRL + F untuk mempermudah):

]]></b:skin>

Jika sudah ketemu kode di atas, kemudian masukkan kode CSS di bawah ini tepat di atas kode ]]></b:skin>

/* Related Post Dengan Tooltips Membuat Blog Keren --- */
.related-post .post-thumbnail {
z-index: 1; position: relative;
width: 108px;
height: 108px;
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;}

Langkah 4 : Carilah kode yang kira kira seperti yang ada di bawah ini :

<div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'/>
      <div class='post-footer-line post-footer-line-2'/>
      <div class='post-footer-line post-footer-line-3'/>
    </div>
  </div

Langkah 5 : Kemudian kalau sudah ketemu kode seperti di atas masukkan kode HTML di bawah ini di bawah <div class='post-footer-line post-footer-line-1'/> atau di bawah  <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/AVvXsEj_kiFiz-mr21jkjyv-Bt4yqYq9nxN8orinUm7YmmpGFvM0RS8Hqk0YnLgeRBemFUMRYRvD-00N6isluJPPtlnsrxuFRHsgVpmm_RUgF-crV1puBYzwYvQrhdETHyL5D1rIXhGCKhLb3GX9/'};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'/>

Untuk mengeditnya baca keterangan di bawah ini :

• Untuk menampilkan jumlah artikel yang terkait, kita cukup untuk mengganti angka 5 pada maxresults=5 dengan jumlah yang kita inginkan.
• Untuk mengganti tinggi dan lebar dari gambar yang muncul cukup ganti 108px dengan lebar atau tinggi yang kita inginkan

Nah, itu saja sudah selesai. Sekarang silahkan klik "Save Template" kemudian lihat hasilnya. Bagaimana sobat? Apa kamu ada kesulitan?

Tags: widget → widget artikel terkait

Cara Membuat Related Post Keren Disertai Gambar Dan Tooltips

By Unknown →

Membuat Widget Artikel Terkait Keren Di Blogger

Salah satu hal yang bisa untuk menurunkan bounce rates adalah dengan ditambahkannya widget artikel terkait di bawah setiap postingan blog kamu. Karena mungkin pengunjung blogkamu akan tertarik dengan artikel lain dengan topik yang sama di blog kamu.

Oleh karena itu, pada kesempatan kali  ini saya akan berbagi cara untuk membuat atau menambahkan widget artikel terkait atau yang sering juga disebut dengan related posts atau apa lah tergantung dengan orang yang memberikan nama kepadanya.

Namun yang perlu diingat bahwa widget ini tidak disertai thumbmail, namun dilengkapi dengan effek yang bagus sehingga bisa menarik pembaca blog kamu untuk membaca tulisan kamu yang lainnya. So, nggak usah lama-lama mari kita mulai tutorialnya.

Cara Membuat Artikel Terkait Keren Di Blogger

Ikuti langkah demi langkah yang akan saya berikan di bawah ini. Namun saya sarankan untuk setiap mengedit template blog kamu, untuk selalu membackup template blog kamu supaya ketika nanti terjadi kesalahan dalam editing bisa kamu kembalikan lagi seperti semula.

Rekomendasi :
#Cara untuk membackup template blogger
#Cara untuk restore/install xml template blogger

Kalau sudah berikut langkah-langkahnya :

Yang pertama kali harus kamu lakukan adalah : Masuk ke blogger >> Dashboard >> Template

Setelah masuk ke submenu template kemudian kamu pilih Edit Html kemudian Lanjutkan (jangan lupa untuk mencentang expand widget template)

Temukan kode di bawah ini di template blogger kamu :

</head>

Kamu bisa menggunakan CRTL + F untuk menampilkan search box atau kalau mau yang repot ya kamu telusuri satu per satu kode yang ada pada template blog kamu.

Nah taruh kode yang ada di bawah ini tepat di atas </head>

<!--Related Posts 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;
margin-top: 20px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;
}
#related-posts .widget h2, #related-posts h2{
font-size: 17px;
font-weight: normal;
color: black;
font-family: Arial Narrow;
margin-bottom: 0.75em;
padding-top: 0em;
}
#related-posts a{
font-size:16px;
color: #000000;
font-variant:small-caps;
}
#related-posts a:hover{
text-decoration: none;
color: #ffffff;
font-weight: bold;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:none;
text-color:#000000
}
#related-posts ul li{
list-style-type: none;
border-left: 2px solid #1399CF;
border-bottom: 1px dotted #1399CF;
margin-bottom: 3px;
padding-left: 30px;
padding-top:0px;
}
&nbsp;
#related-posts ul li:hover{
background-color: #b0520e;
border-left: 2px solid #B3CA3D;
border-bottom: 1px dotted #B3CA3D;
}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src=' http://onenaijablog.googlecode.com/files/related post widget.js' type='text/javascript'/>
<!--Remove--></b:if>
<!--Related Posts Scripts and Styles End-->

Sudahkah kamu menyelesaikannya? nah kalau sudah kita teruskan. Kemudian lanjutkan dengan mencari kode di bawah ini (Gunakan CTRL + F)

<div class='post-footer'>

Sudahkan kamu menemukannya? biasanya kode ini ada dua. Letakkan kode di bawah ini di bawah kedua kode <div class='post-footer'>.

<!-- Related Posts 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> <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=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script> </div> <!--Remove--></b:if> <!-- Related Posts Code End--> 

Setelah itu, coba lihat pratinjaunya dulu. Jika blog kamu bisa dimuat dan tidak ada eror maka baru kamu simpan. Dan sudah selesai tinggal kamu melihat hasilnya kawan. Jangan lupa juga untuk melihat widget lainnya : Membuat recent posts yang keren !

Semoga bisa bermanfaat dan bisa menbantu kamu untuk membuat blog kamu jadi lebih keren.

Tags: widget → widget artikel terkait

Membuat Widget Artikel Terkait Keren Di Blogger

By Unknown →

Cara Membuat Artikel Terkait | Related post pada blog

Kali ini aku pengen berbagi cara untuk membuat artikel terkait ke setiap postingan blog kamu. Saya menggunakan blogger untuk membuat artikel terkait ini.

Kenapa harus memasang artikel terkait? Jawabannya simple kok “Agar pengunjung blog kamu betah untuk jalan-jalan dan membaca postingan-postingan di blog kamu. Sebelumnya aku akan menunjukkan penampakan artikel terkait pada blog cofee-mix.blogspot.com




Gimana sobat? apa ini yang kamu maksud dengan artikel terkait di bawah postingan blog?
Nah, kalau memang itu yang ingin kamu buat, ikutilah beberapa langkah di bawah ini.

1. Buka blogger.com > Klik opsi Lain > Template [Lihat gambar di bawah ini]



2. Kemudian klik Edit HTML



3. Kemudian klik lanjutkan



4. Kemudian centang Expand Template Widget



5. Cari kode </head> (kalau kamu kesulitan tekan ctrl + f) paste </head> di kotak pencarian

6. Kalau sudah, letakkan JavaScript dibawah tepat sebelum [diatas] </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>

---

7. Nah setelah itu cari lagi JavaScript <data:post.body/> , letakkan JavaScript dibawah ini tepat dibawah <data:post.body/>

---

<script type="text/javascript"><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&callback=related_results_labels&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>

---

8. Klik simpan template

9. Selesai

Nah, sekarang buka postingan di blog kamu. Gimana hasilnya? Mudah bukan?
Kalau kamu merasa artikel ini bermanfaat, silahkan share dengan temanmu melalui facebook atau twitter.

Tags: Tutorial Blogspot → widget artikel terkait

Cara Membuat Artikel Terkait | Related post pada blog

By Unknown →