Halo Sahabat Share4rt .
.
Kali ini Share4rt akan Share Cara Membuat Artikel Terkait Keren dengan Gambar dibawah Postingan . Membuat Artikel Terkait dibawah Postingan itu sangat penting bagi suatu blog . Pembaca akan lebih lama di blog kita untuk membaca artikel artikel yang lainnya . Berikut adalah Cara Membuatnya .
Langsung saja :
- Buka akun Blogger sobat
- Masuk ke Menu Template dan jangan lupa centang Expand Template Widget sobat
- Cari kode dibawah ini :
]]></b:skin>
4. Diatasnya pastekan kode dibawah ini :
#related-posts{float:left;height:160px;margin-bottom:10px; outline: 1px solid #fff;border: 1px solid #ddd;background: #f9fafb;}
#related-posts h3{font-family: Francois One;font-size:20px;font-weight:400;color: #222222;margin-bottom: 0.5em;margin-top: 0.5em;margin-left: 0.5em;padding-top: 0em;}
#related-posts ul{margin:5px;width:613px;padding-left:17px;list-style:none;display:block;}
#related-posts ul li{list-style:none;position:relative;float:left;border:0 none;margin-right:11px;padding:2px;width:86px;}
#related-posts ul li:hover{z-index:100}
#related-posts ul li:hover img{border:3px solid #BBB}
#related-posts ul li:hover div{font-size:7px;text-transform:capitalize;position:absolute;top:20px;left:-15px;margin-left:0;width:130px}
#related-posts ul li img{border:3px solid #DDD;width:80px;height:80px;background:#FFF;display:block;}
#related-posts ul li div{position:absolute;z-index:99;margin-left:-999em}
#related-posts ul li .title{text-align:center;border:1px dotted #CCC;background:#fff;padding:5px 10px}
5. Cari kode dibawah ini :
<data:post.body/>
Keterangan :
- Pada beberpa template mungkin kode diatas ada 3-4, jadi sobat yang menentukan <data:post.body/> keberapa yang hanya menampilkan widget di postingan saja. ( Kalau saya yang ke 3 )
6. Pastekan kode dibawah ini pada kode diatas :
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<script type='text/javascript'>var ry='<h3>Artikel Terkait :</h3>';rn='<h3>No Related Posts </h3>';rcomment='Comment';rdisable='Comments off';commentYN='yes';</script>
<script type='text/javascript'>
//<![CDATA[
var nothumb='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png';dw='';titles=new Array();titlesNum=0;urls=new Array();time=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;time[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]=nothumb};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]=time[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;time=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){for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.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+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+thumb[c]+'"/></a><div class="title"><a href="'+urls[c]+'" rel="nofollow"><h2>'+titles[c]+'</h2></a><span>'+time[c].substring(8,10)+'/'+time[c].substring(5,7)+'/'+time[c].substring(0,4)+comments[c]+'</span></div></li>';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='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>
</div>
<div style='clear both'/>
</b:if>
7. Perhatikan baik-baik kode diatas dan lakukan perubahan pada kode yang diwarnai sesuai dengan keinginan sobat.
Demikianlah Cara Membuat Artikel Terkait Keren dengan Gambar dibawah Postingan, Semoga Bermanfaat .
Sumber : http://d-copy.blogspot.com/2012/10/cara-buat-artikel-terkait-keren-dengan-gambar-di-blogger.html
Salam Share4rt
Anda baru saja membaca artikel yang berkategori Tips Trik Blogger
dengan judul Cara Membuat Artikel Terkait Keren dengan Gambar dibawah Postingan. Anda bisa bookmark halaman ini dengan URL https://digoogledi.blogspot.com/2012/12/cara-membuat-artikel-terkait-keren.html. Terima kasih!
Belum ada komentar untuk "Cara Membuat Artikel Terkait Keren dengan Gambar dibawah Postingan"
Post a Comment