Cara Menciptakan Artikel Terkait Otomatis Di Blog 100% Responsive
May 07, 2018
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 sanggup dibilang teknik ini ialah teknik yang biasa disebut " Internal Link" .
Manfaat Dari menggunakan Artikel terkait
- Page Views di Blog menigkat
- Meningkatkan kualitas Internal Link
Oke tanpa berlama usang lagi kita akan pribadi menciptakan internal link ini.. Seperti yang aku 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 </head><!--<head/>--> (Gunakan Tombol CTRL+F Agar mencarinya lebih cepat)
- Jika Sudah Ketemu Pastekan isyarat Ini sempurna diatas isyarat </head> tadi
<b:if cond='data:blog.pageType == "item"'> <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>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)}} /* 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}} Lanjut Ke langkah terakhir untuk memunculkan artikel terkait/related post ke tengah postingan
-Cari Kode dan ubah kode <data:post.body/> dengan isyarat dibawah ini untuk menampilkannya ditengah postingan.
<div expr:id='"post1" + 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 == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=3"' type='text/javascript'/> </b:if> </b:loop> </b:if> <h4>Baca Juga</h4> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div> <div expr:id='"post2" + data:post.id'><p><data:post.body/></p></div> <script type='text/javascript'> var obj0=document.getElementById("post1<data:post.id/>"); var obj1=document.getElementById("post2<data:post.id/>"); var s=obj1.innerHTML; var t=s.substr(0,s.length/2); var r=t.lastIndexOf("<br>"); if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);} </script>Catatan !!
Setiap template mempunyai Jumlah <data:post.body/> Yang berbeda beda, Kaprikornus anda coba satu satu Hingga Artikel terkaitnya muncul Ditengah
Artikel Terkait Dibawah Postingan
Pertama Copy dan pastekan isyarat 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 isyarat berikut ini Dan Letakkan Dibawah kode </article> atau yanng lainnya alasannya ialah setiap template mungkin saja berbeda
<b:if cond="data:blog.pageType == "item""> <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=""/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50"" type="text/javascript"> </b:loop> <ul id='relate-summary'> <script type='text/javascript'>artikelterkait();</script> </b:loop></div> </div> </div> </b:if>Anda sanggup Mengganti angka 5 (yg aku 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 aku ini .. Semoga Artikel ini sanggup bermanfaat.. Dann Jadilah Pengunjung yang baik dengan Meniggalkan Komentar Hehehe