Cara Membuat Related Post Dengan Gambar - Hallo sahabat Mudahnya Belajar Youtube bagi Pemula , Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Related Post Dengan Gambar, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Artikel Terkait, Artikel Tutorial Blog, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Membuat Related Post Dengan Gambar
link : Cara Membuat Related Post Dengan Gambar

Cara Membuat Related Post Dengan Gambar

BOS TUTORIAL - Cara Membuat Related Post Dengan Gambar. Masih ingat tulisan sebelum postingan ini bukan, yaitu Cara Membuat Related Post Pada Blog. Jangan tanya lagi apa gunanya Related Post atau Artikel Terkait yah (heheheh... canda), soalnya disini sudah dibahas lebih detail. Kita langsung saja ke lokasi (kayak mau kemana aja nih...). Maksudnya langsung membuat tutorialnya, gitu loh....

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/AVvXsEgIRRcCrkiAasUCivhNsjW9OsKJu24U_2DIP42M6OYwJE_T-DO-PDoNJwSpfIr2SZRCa54ztzvbPD-5hMaC_rzmA-BzFYfex-pCYhkthv4t7YCaA2etd_OTz43ligd8ShnoGeIXVW1AEnP7/'};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 Dengan Gambar. Silahkan di coba yah. Semoga bermanfaat. Bila anda kendala silahkan bertanya di kolom komentar. Dan Salam Blogger.

Demikianlah Artikel Cara Membuat Related Post Dengan Gambar

Sekianlah artikel Cara Membuat Related Post Dengan Gambar kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Membuat Related Post Dengan Gambar dengan alamat link https://sembronojualan.blogspot.com/2013/02/cara-membuat-related-post-dengan-gambar.html

Tweet