Cara membuat Artikel Terkait otomatis Di Blog 100% Responsive

Untuk menaikkan Page Views anda bisa memakai cara artikel terkait/ Related post dalam postingan anda, Related post bisa dibilang terbagi dua yaitu Ditengah postingan Dan dibawah postingan.. Biasanya untuk yang ditengah postingan Ditandai Dengan Kata "Baca Juga"


memakai Teknik ini juga merupakan salah satu bentuk seo pada blog anda, Karena apa? Karena cara ini terbilang ampung untuk menigkatkan PageViews di blog anda.. 

Terlebih lagi bagi anda yang ingin mendaftar google adsense.. Sebab Google adsense sangat menyukai blog yang ramai (Tapi visitornya yang organik) .. Ya bisa dibilang teknik ini adalah teknik yang biasa disebut " Internal Link" .

Manfaat Dari menggunakan Artikel terkait

• Page Views di Blog menigkat
• Meningkatkan kualitas Internal Link

Oke tanpa berlama lama lagi kita akan langsung membuat internal link ini.. Seperti yang saya sebutkan internal link terbagi dua yaitu Ditengah Postingan Dan dibawah postingan Mari kita mulai dari Tengah Postingan

A. Internal link tengah Postingan

• Masuk ke blogger -> Template (tema) -> Edit HTML
• Cari kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; (Gunakan Tombol CTRL+F Agar mencarinya lebih cepat)
• Jika Sudah Ketemu Pastekan kode Ini tepat diatas kode </head> tadi

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var relatedSimply = new Array(); var relatedSimplyNum = 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]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; 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] = relatedSimply[i];}} relatedSimply = 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((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if>

Jika Sudah Silakan Pilih Salah satu Style Internal Link nya yang terdapat Dibawah ini..

Style 1

/* Related Post Style 1 */

.related-simplify{position:relative;padding:0;margin:15px auto;width:100%;}

.related-simplify h4{background:#3498db;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5}

.related-simplify ul{margin:0;padding:0}

.related-simplify ul li{background:#f6f6f6;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s}

.related-simplify ul li:nth-child(odd){background:#fefefe}

.related-simplify ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}

.related-simplify ul li:before{content:'f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#2ecc71;overflow:hidden;transition:all .3s}

.related-simplify ul li:hover:before{content:'f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}

.related-simplify a{color:#0383d9;font-size:13px;margin:0 0 0 30px;}

.related-simplify a:hover{color:#0383d9;text-decoration:underline}

.related-simplify ul li:nth-child(n+4) {display:none;}

@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}

@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

Style 2

/* Related Post Style 2 */

.related-simplify{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:93%;border:4px double rgba(0,0,0,0.2)}

.related-simplify h4{background:#fff;padding:8px 10px;position:absolute;margin:0;font-size:17px;font-weight:700;color:#000;top:-21px;left:2.5%}

.related-simplify ul{margin:0;padding:0}

.related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}

.related-simplify ul li:before{content:'f0c8';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(0,0,0,0.5);overflow:hidden;font-size:60%;left:10px;transition:all .3s}

.related-simplify ul li:hover:before{content:'f0c8';font-family:fontawesome;color:#0383d9;}

.related-simplify a{color:#000;font-size:14px;margin:0 0 0 30px;}

.related-simplify a:hover{color:#0383d9;}

.related-simplify ul li:nth-child(n+4) {display:none;}

@media only screen and (max-width:768px){

.related-simplify{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}

.related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}

.related-simplify a{font-size:14px;margin:0}.related-simplify a:hover{color:#e74c3c}

.related-simplify ul li{padding:5px 0}

.related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}}

Style 3

/* Related Post Style 3 */

.related-simplify{display:inline-block;background:#34495e;color:#fff;position:relative;padding:0;margin:20px auto;width:100%;border:6px double #fff;}

.related-simplify ul{background:rgba(38,62,87,0.8);margin:0;padding:20px}

.related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}

.related-simplify ul li:before{content:'f0c8';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(255,255,255,0.7);overflow:hidden;font-size:60%;left:10px;transition:all .3s}

.related-simplify ul li:hover:before{content:'f0c8';font-family:fontawesome;color:#f1c40f;}

.related-simplify a{color:#fff;font-size:17px;margin:0 0 0 30px;}

.related-simplify a:hover{color:#fff;text-decoration:underline}

.related-simplify ul li:nth-child(n+4) {display:none;}

@media only screen and (max-width:768px){

.related-simplify{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}

.related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}

.related-simplify a{font-size:14px;margin:0}.related-simplify a:hover{color:#e74c3c}

.related-simplify ul li{padding:5px 0}

.related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}}

Apabila anda sudah memilih Letakkan Kode yang anda pilih Tersebut Tepat diatas kode ]]></b:skin> atau </style>.

Lanjut Ke langkah terakhir untuk memunculkan artikel terkait/related post ke tengah postingan

-Cari Kode dan ubah kode <data:post.body/> dengan kode dibawah ini untuk menampilkannya ditengah postingan.

<div expr:id='&quot;post1&quot; + data:post.id'/>

<div class='related-simplify'>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<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=3&quot;' type='text/javascript'/>

</b:if>

</b:loop>

</b:if>

<h4>Baca Juga</h4>

<script type='text/javascript'>

removeRelatedDuplicates();

printRelatedLabels();

</script>

</div>

<div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div>

<script type='text/javascript'>

var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);

var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);

var s=obj1.innerHTML;

var t=s.substr(0,s.length/2);

var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);

if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}

</script>

Jika Sudah Klik Simpan.

Catatan !! 

Setiap template memiliki Jumlah <data:post.body/>  Yang berbeda beda, Jadi anda coba satu satu Hingga Artikel terkaitnya muncul Ditengah

Artikel Terkait Dibawah Postingan

Lanjut cara yang kedua yaitu dengan membuat artikel terkait dibawah blog.
Pertama Copy dan pastekan kode dibawah ini Tepat di atas Kode </style> atau ]]></b:skin>

/* Related Posts */ 
#related-post {margin:0 auto;padding:0;text-align:center;} 
#related-post h4{font-size:14px;margin:0 0 10px 0;background:#4f93c5;color:#fff;padding:15px 20px;font-weight:700;position:relative;text-align:left;text-transform:uppercase;overflow:hidden} 
#related-post h4:after{display:inline-block;content:"f02c";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;background-color:#4786b5;color:#fff;top:0;right:0;padding:16px 20px;position:absolute} 
.relhead {font-size:100%;font-weight:normal;line-height:150%;padding:0 0 10px 0;overflow:hidden;box-shadow:inset 0 0 0 1px #e9e9e9;} 
#relate-summary .news-text{display:block;text-align:left;font-weight:normal;color:#888;font-size:12px;margin-top:10px} 
ul#relate-summary{margin:0 auto;padding:0 10px;list-style:none;word-wrap:break-word} 
ul#relate-summary li{position:relative;list-style:none outside none;overflow:hidden;margin:0 10px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,0.12)} 
ul#relate-summary li:last-child{border:0} 
ul#relate-summary li a{display:block;} 
ul#relate-summary li img{background-color:#fafafa;display:block;width:100%;height:auto;max-width:90px;max-height:70px;vertical-align:middle;overflow:hidden;float:left;margin:0 10px 0 0;border:1px solid rgba(0,0,0,0.12);padding:3px;background:#fff;transition:all 1s ease-out} 
ul#relate-summary li:hover img {opacity:0.96;} 
ul#relate-summary li a.relinkjdulx{position:relative;color:#4c6fb8;display:block;font-weight:700;line-height:normal;overflow:hidden;text-align:left;text-transform:none} 
ul#relate-summary li a.relinkjdulx:hover{color:#f8695f;}

Jika sudah Sekarang Lanjut copy kode berikut ini Dan Letakkan Dibawah kode </article> atau yanng lainnya karena setiap template mungkin saja berbeda

<b:if cond="data:blog.pageType == &quot;item&quot;"> 
<script type="text/javascript"> 
//<![CDATA[ 
//Related Post 
var relnojudul = 0; var relmaxtampil = 5; var numchars = 120; var reljudul=new Array();var relurls=new Array();var relcuplikan=new Array();var relgambar=new Array();function saringtags(g,h){var e=g.split("<");for(var f=0;f<e.length;f++){if(e[f].indexOf(">")!=-1){e[f]=e[f].substring(e[f].indexOf(">")+1,e[f].length)}}e=e.join("");e=e.substring(0,h-1);return e}function relpostimgcuplik(h){for(var e=0;e<h.feed.entry.length;e++){var g=h.feed.entry[e];reljudul[relnojudul]=g.title.$t;postcontent="";if("content" in g){postcontent=g.content.$t}else{if("summary" in g){postcontent=g.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail" in g){postimg=g.media$thumbnail.url}else{postimg="http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF"}relgambar[relnojudul]=postimg;for(var f=0;f<g.link.length;f++){if(g.link[f].rel=="alternate"){relurls[relnojudul]=g.link[f].href;break}}relnojudul++}}function contains(a,e){for(var f=0;f<a.length;f++){if(a[f]==e){return true}}return false}function artikelterkait(){var v=new Array(0);var w=new Array(0);var x=new Array(0);var A=new Array(0);for(var u=0;u<relurls.length;u++){if(!contains(v,relurls[u])){v.length+=1;v[v.length-1]=relurls[u];w.length+=1;w[w.length-1]=reljudul[u];x.length+=1;x[x.length-1]=relcuplikan[u];A.length+=1;A[A.length-1]=relgambar[u]}}reljudul=w;relurls=v;relcuplikan=x;relgambar=A;for(var u=0;u<reljudul.length;u++){var B=Math.floor((reljudul.length-1)*Math.random());var i=reljudul[u];var s=relurls[u];var y=relcuplikan[u];var C=relgambar[u];reljudul[u]=reljudul[B];relurls[u]=relurls[B];relcuplikan[u]=relcuplikan[B];relgambar[u]=relgambar[B];reljudul[B]=i;relurls[B]=s;relcuplikan[B]=y;relgambar[B]=C}var r=0;var D=Math.floor((reljudul.length-1)*Math.random());var z=D;var q;var t=document.URL;while(r<relmaxtampil){if(relurls[D]!=t){q="
<li class='news-title clearfix'>";q+="<a href='"+relurls[D]+"' rel='nofollow' target='_top' title='"+reljudul[D]+"'><div class='overlayb'>
</div>
<img src='"+relgambar[D]+"' /></a>";q+="<a class='relinkjdulx' href='"+relurls[D]+"' target='_top'>"+reljudul[D]+"</a>";q+="<span class='news-text'>"+relcuplikan[D]+" ... </span>";q+="</li>
";document.write(q);r++;if(r==relmaxtampil){break}}if(D<reljudul.length-1){D++}else{D=0}if(D==z){break}}}; 
//]]> 
</script> 
<div id="related-post">
<div class="relhead">
<h4>
Artikel Terkait</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='relate-summary'> 
<script type='text/javascript'>artikelterkait();</script> 
</b:loop></div>
</div>
</div>
</b:if>

Anda bisa Mengganti angka 5 (yg saya tandai warna merah) dengan jumlah post yang kalian inginkan

Dan Yang terakhir Klik Save/ Simpan Template dan lihat Lah Hasilnya

Penutup

Terimakasih telah mengunjungi Website saya ini .. Semoga Artikel ini bisa bermanfaat.. Dann Jadilah Pengunjung yang baik dengan Meniggalkan Komentar Hehehe

BERITA LENGKAP DI HALAMAN BERIKUTNYA

Halaman Berikutnya

Subscribe to receive free email updates: