Cara Membuat Artikel Terkait SUPER SEO

Selamat Siang Bos kuh, di siang hari yang lumayan panas ini, saya akan membagikan tutorial tentang cara membuat artikel terkait Yang Lebih SEO Frindly.  Pada kesempatan lalu, saya telah menuliskan tentang cara membuat artikel terkait dengan scroll. Nah, artikel ini masih bersangkutan dengan artikel sebelum. Karena memberikan fungsi yang sama, akan tetapi tampilan dan kekuatannya berbeda.

Lah kang, bukan kah kemarin sudah membuat artikel related post yang responsive seo, ko sekarang buat lagi ? Iya, memang benar, beberapa hari lalu saya telah membuat related post yang responsive seo, dan kenapa saya membuat lagi pada artikel ini ? Sengaja saya pisahkan, karena artikel ini lebih dari sekedar SEO. Artinya artikel terkait ini memiliki kekuatan SUPER SEO, yang dimana dapat memenuhi kriteria dari 200 lebih google ranking factor. Itu artinya, semakin banyak kriteria google telah kita penuh, semakin memudahkan pula blog kita nongkrong di page one.

Yang dimana pada postingan ini saya akan memberikan 2 jenis widget related postPada postingan artikel kali ini kami akan membagikan 2 jenis widget related posts "blogger" yang responsive yang dapat anda terapkan di bawah postingan artikel atau konten yang anda buat,dan pastinya memiliki nilai "SEO friendly yang lebih" yang baik memenuhi kriteria "200+google rangking faktor" yang sangat mudah untuk di terapkan.

Oke, pada artikel ini saya akan membagikan related post super seo dengan tumbnail (gambar). Kenapa Harus dengan tumbnail ? Hal ini bertujuan jika kita memasang widget dengan tumbnal akan memberi sinyal kepada pengunjung untuk mengklik artikel kita. Bayangkan saja, ketika kita membuka artikel, mana yang menurut kita enak di baca ? Dengan gambar atau hanya teks saja ? pasti kita akan mengklik yang ada gambarnya. Karena memang hal tersebut enak dilihat ^_^

Baiklah, kita langsung saja yaa bos kuh. Pada tahap pertama ini, kita harus menyipkan struktur kode untuk membuat lahan bagi gambar tinggal. Caranya :
1. Buka dasbor blog bos kuh
2. Klik Tema
3. Pilih Edit HTML
4. Cari kode  ]]></b:skin> atau </style> (gunakan CTRL+F untuk memudahkan pencarian)
4. letakan kode dibawah ini tepat di atas kode ]]></b:skin> atau </style>

 /* Related Post */

#related-post {margin:0;padding:20px 0 0 0;}

#related-post h4{display:none;color:#30373c;border-bottom:1px solid rgba(0,0,0,0.05);border-top:1px solid rgba(0,0,0,0.05);padding:10px 0;font-size:20px;margin:0 0 20px 0;padding-left:8px;line-height:1em}

#related-post h4 span{padding:6px;display:inline-block;vertical-align:middle}

.relhead {background:#fff;font-size:100%;font-weight:normal;line-height:150%;overflow:hidden;padding:0;}

ul#related-summary {margin:0;padding:0 15px;}

ul#related-summary li{position:relative;float:left;list-style:none outside none;margin:0 5px 15px 5px;padding:0;overflow:hidden;height:180px;width:31.6%}

ul#related-summary li img{background-color:#f1f1f1;width:100%;height:auto;max-width:100%;margin:0 auto;vertical-align:middle;}

ul#related-summary li a.relinkjdulx{color:#30373c;display:block;font-size:14px;font-weight:400;line-height:normal;overflow:hidden;text-align:center;padding:10px 10px 10px 0}

ul#related-summary li a.relinkjdulx:hover{color:#30373c;}

.overlayb {position:relative;max-height:140px;overflow:hidden;}

.overlayb:before{content:'';background-color:rgba(0,0,0,0.2);position:absolute;text-align:center;top:0;left:0;right:0;bottom:0;z-index:2;opacity:0;visibility:hidden;transition:all 0.4s linear}

.overlayb:after{content:'\f002';font-family:fontawesome;font-size:1.3rem;color:rgba(255,255,255,1);position:absolute;top:45%;left:45%;text-align:center;z-index:2;opacity:0;visibility:hidden;transition:all 0.20s linear}
.overlayb:hover:before,.overlayb:hover:after {opacity:1;visibility:visible;}  

5. lalu, letakan JavaScript di bawah ini di atas kode </head>

 <script type='text/javascript'>/*<![CDATA[*/function saringtags(r,l){for(var e=r.split("<"),n=0;n<e.length;n++)-1!=e[n].indexOf(">")    (e[n]=e[n].substring(e[n].indexOf(">")+1,e[n].length));return e=e.join(""),e=e.substring(0,l-1)}function relpostimgcuplik(r){for(var l=0;l<r.feed.entry.length;l++){var e=r.feed.entry[l];reljudul[relnojudul]=e.title.$t,postcontent="","content"in e?postcontent=e.content.$t:"summary"in e    (postcontent=e.summary.$t),relcuplikan[relnojudul]=saringtags(postcontent,numchars),"media$thumbnail"in e?postimg=e.media$thumbnail.url:postimg="http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF",relgambar[relnojudul]=postimg;for(var n=0;n<e.link.length;n++)if("alternate"==e.link[n].rel){relurls[relnojudul]=e.link[n].href;break}relnojudul++}}function contains(r,l){for(var e=0;e<r.length;e++)if(r[e]==l)return!0;return!1}function artikelterkait(){for(var r=new Array(0),l=new Array(0),e=new Array(0),n=new Array(0),t=0;t<relurls.length;t++)contains(r,relurls[t])||(r.length+=1,r[r.length-1]=relurls[t],l.length+=1,l[l.length-1]=reljudul[t],e.length+=1,e[e.length-1]=relcuplikan[t],n.length+=1,n[n.length-1]=relgambar[t]);reljudul=l,relurls=r,relcuplikan=e,relgambar=n;for(var t=0;t<reljudul.length;t++){var a=Math.floor((reljudul.length-1)*Math.random()),u=reljudul[t],i=relurls[t],o=relcuplikan[t],s=relgambar[t];reljudul[t]=reljudul[a],relurls[t]=relurls[a],relcuplikan[t]=relcuplikan[a],relgambar[t]=relgambar[a],reljudul[a]=u,relurls[a]=i,relcuplikan[a]=o,relgambar[a]=s}for(var g,m=0,d=Math.floor((reljudul.length-1)*Math.random()),c=d,h=document.URL;relmaxtampil>m    (relurls[d]==h||(g="<li class='news-title clearfix'>",g+="<a href='"+relurls[d]+"' rel='nofollow' target='_top' title='"+reljudul[d]+"'><div class='overlayb'><img src='"+relgambar[d]+"' /></div></a>",g+="<div class='overlaytext'><a class='relinkjdulx' href='"+relurls[d]+"' target='_top'>"+reljudul[d]+"</a></div>",g+="<span class='news-text'>"+relcuplikan[d]+"</span>",g+="</li>",document.write(g),m++,m!=relmaxtampil))    (d<reljudul.length-1?d++:d=0,d!=c););}var relnojudul=0,relmaxtampil=6,numchars=90,reljudul=new Array,relurls=new Array,relcuplikan=new Array,relgambar=new Array;/*]]>*/</script> 

6. Kemudian letakan kode dibawah ini sebelum kode <div class="post-footer"> 
PERHATIAN ! Biasanya dalam satu tema terdapat lebih dari 1 kode  <div class="post-footer">, maka letakan kode dibawah ini pada kode  <div class="post-footer">  yang ke dua.

 <div id='related-post'>


<div class='relhead'>

  <h4><span>Artikel Terkait</span></h4>

<div class='clear'/>

          <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;amp;callback=relpostimgcuplik&amp;amp;max-results=50&quot;' type='text/javascript'/>

          </b:loop>

          <ul id='related-summary'>

               <script type='text/javascript'>artikelterkait();</script>

          </ul>

     </div>
</div> 

7. Klik Simpan
8. Lihat hasilnya

Selamat, karena sekarang bos kuh sudah berhasil membuat related post keren yang super seo. Terima kasih sudah berkunjung pada blog ini, semoga bermanfaat ^_^

Baca Juga:

Cara Membuat Artikel Terkait Sesuai Yang Kita Inginkan