Cara Mudah Dapat Uang di Internet Lewat Blog, Twitter, Facebook
» » Cara Buat Artikel Terkait Keren Dengan Gambar di Blogger

Cara Buat Artikel Terkait Keren Dengan Gambar di Blogger


D-Copy Blog | Seperti pada gaya artikel terkait sebelumnya kali ini dengan tampilan berbeda pula. Traffic adalah salah satu hal yang paling penting bagi setiap blogger dan kami mencoba segala cara yang mungkin untuk meningkatkan traffic blog kita dan pengunjung, tetapi apa yang akan Anda lakukan setelah mendapatkan traffic yang baik dan pengunjung. Sebuah cara sederhana untuk menjaga pengunjung Anda untuk waktu yang lama di blog Anda adalah untuk menambahkan daftar link ke posting terkait di bagian bawah setiap posting blog Anda. Dengan menambahkan link posting terkait di akhir setiap entri blog membuat pembaca Anda untuk dengan mudah menavigasi dan membaca topik terkait lainnya jika mereka tertarik juga. Dengan cara ini Anda dapat meningkatkan lalu lintas blog Anda dan pengunjung. Salah satu cara terbaik untuk mencapai ini dengan menambahkan daftar posting terkait dengan thumbnail. Jadi, di sini saya memperkenalkan sebuah widget baru Posting terkait yang akan menampilkan setiap thumbnail posting bersama dengan Judul dan jumlah Komentar yang diterima pada posting itu. Maksudku ketika Anda mengarahkan mouse hover pada posting terkait akan menampilkan baik judul dan jumlah komentar ke posting. Silakan lihat screenshot dari widget posting terkait di bawah ini.

Related Post
Langsung saja :
  1. Buka akun Blogger Anda
  2. Masuk ke Menu Template dan jangan lupa centang Expand Template Widget Anda
  3. 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 Anda yang menentukan <data:post.body/> keberapa yang hanya menampilkan widget di postingan saja
    6.  Pastekan kode dibawah ini pada kode diatas :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<script type='text/javascript'>var ry=&#39;<h3>Artikel Terkait :</h3>&#39;;rn=&#39;<h3>No Related Posts </h3>&#39;;rcomment=&#39;Comment&#39;;rdisable=&#39;Comments off&#39;;commentYN=&#39;yes&#39;;</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='&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=6;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</div>
<div style='clear both'/>
</b:if>
     7.  Perhatikan baik-baik kode diatas dan lakukan perubahan pada kode yang diwarnai sesuai dengan keinginan Anda.

Terima kasih, semoga bermanfaat.
Odii Siitohang
Judul: Cara Buat Artikel Terkait Keren Dengan Gambar di Blogger;
Ditulis oleh: Anonymous;
Rating Blog: 5 dari 5





Anda sedang membaca Artikel tentang Cara Buat Artikel Terkait Keren Dengan Gambar di Blogger dengan url http://d-copy.blogspot.com/2012/10/cara-buat-artikel-terkait-keren-dengan-gambar-di-blogger.html, jika Anda menyukai Artikel di blog ini, silahkan masukkan email Anda dibawah ini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel baru.
D-Copy Reader DMCA
[12] Komentar untuk Cara Buat Artikel Terkait Keren Dengan Gambar di Blogger:
  1. terimaksih, sudah saya praktekkan dan berhasil

    ReplyDelete
  2. berhasil sob . thanks ya

    ReplyDelete
  3. sob izin share ulang ya :)

    ReplyDelete
  4. woow., mantab.,
    nih punya gue
    www.kangimamweb.blogspot.com

    ReplyDelete
  5. ijin mempraktekkan gan, terima kasih banyak...

    ReplyDelete
  6. mantaps..
    salam kenal dan silahturahmi..
    gan..untuk menjalin silahturahmi..tukar link yuk..jika agan bersedia.silahkan konfirmasi dg komentar di blog sya..
    setelah itu baru kita saling pasang blog kita..terima kasih..
    http://kumpulantipshebat.blogspot.com/

    ReplyDelete
  7. Tidak Bisa Gan...
    Petunjuknya Donk...

    http://kamusanime.blogspot.com

    ReplyDelete
    Replies
    1. Coba perhatikan baik-baik pada kode langkah 5 sobat...

      Sobat sala penempatan kode.

      Delete
  8. makasih infonya ya gan,sekalian mau permisi nyocoba dulu.

    ReplyDelete
  9. Wah mantab gan, terima kasih infonya

    ReplyDelete
  10. mantappp... langsung praktek...

    ReplyDelete

Beberapa panduan dalam berkomentar :
Untuk menyisipkan kode[code]KODE ANDA[/code]
Untuk menyisipkan quote[blockquote]QUOTE ANDA[/blockquote]
Untuk menyisipkan gambar[img]URL Gambar[/img]
Untuk menyisipkan video[youtube]URL Video[/youtube]
Anda bisa mengekspresikan komentar Anda dengan emoticon
Klik subscribe by email agar Anda segera tahu balasan komentar Anda

 
D-Copy Blog © 2013 - All Rights Reserved Design : Creating Website Published : Mas Template