Cara Membuat Artikel Terkait Blog Dengan Gambar
Cara Membuat Artikel Terkait Untuk Blog dengan gambar. Artikel terkait adalah salah satu artikel disalah satu halaman blog yang terletak dibagian bawah artikel dan manfaat artikel terkait ini adalah memberi informasi lanjutan yang relevan sebagai artikel yang menyangkut pada artikel suatu halaman diatasnya atau url yang sedang terbuka. Seorang Admin blog memodifikasi template bawaan blogger untuk memasang script artikel terkait karena agar dengan artikel terkaitnya maka memberi yang terbaik kepada pengunjung bisa betah lama-lama pada blognya.
Cara Membuat Artikel Terkait Untuk Blog Dengan Gambar. Sebagai faktor pelengkap artikel utama, artikel terkait ini bisa meningkatkan traffic ke halaman-halaman lainnya yang tidak pernah di temukan di SERP mesin pencari, mungkin karena kalah bersaing dengan pesaing judul artikel yang sama dari blog lain atau artikel baru dibuat maka artikel belum muncul SERP, maka artikel yang hilang di SERP google akan bisa terbuka dan ditampilkan otomatis dibawah artikel utama dengan label yang sama maka dengan itu sangat baik akan memberi sinyal ke mesin pencarian agar artikel terkait tadi bisa proses pada SERP mesin pencari google apabila ada yang mengunjungi URL Link halaman artikel terkait ini.
Bagaimana cara membuat artikel terkait di blog dengan gambar? dengan cara menyematkan javascript artikel terkait yang simpan atau diletakan pada template, maka blog kita sudah menyajikan suatu kepuasan terhadap pengunjung untuk memudahkan navigasi ke artikel lainnya, selain menambah traffic pengunjung ke halaman lainnya artikel dapat mengatasi dan menurunkan bounce yang tinggi, apabila bounce rate semakin kecil tandanya blog Anda disukai pembaca maka pentalan pengunjung ke blog lain berkurang.
Baca juga : 9 Cara Agar Blog Muncul Di SERP Google
Membuat artikel terkait tidaklah sulit, bila Anda ingin memoles template bawaan blogger, alangkah baiknya membuat related articel di blospot dengan cara berikut:
1). Login ke akun blogger
2). Masuk ke menu template > Edit HTML/Javascript
3). Kemudian cari kode : </]]></b:skin> atau </style>
3). Copy pastekan kode javascript dibawah ini tepat dibawah kode tadi hasil pencarian pada template.
#related-posts { float:center; width:100%; margin:0; padding-top:10px; }
#related-posts .judul { background:none; color:#333; font:16px Oswald; display:none;}
#related-posts .seocips_img { padding:0; margin:7px; width:180px !important; height:auto; position:relative; overflow:auto;border:4px double #ddd; }
#related-posts .seocips_img { height:130px; }
#related-posts .seocips_img:hover { opacity:.7; filter:alpha(opacity=70); -moz-opacity:.7; -khtml-opacity:.7; }
Catatan ukuran bisa anda ganti pada huruf yang ditandai warna merah.
4). Cari kode di bawah :
</head>
Silahkan pastekan kode berikut tepat di atas kode </head> bila sudah ada kode di bawah tidak usah dipasang
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
Masukan lagi kode di bawah ini masih di atas </head> :
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwJXpnWZ3f-NCZO4FV5xINjBRLJHBzjQF0GLmBSwn2TFLDMuADyY-33l0iWV6SA7jJtEWX8uV2utyKPXNmeG83xpqnhS3_q4g_wfkMq80aR17AZwaXn7k5WyK0XqrXec-89Rm7PWcejToO/s1600/no-video.gif'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<div class="judul">'+relatedpoststitle+'</div>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin: 5px;border:2px solid #ddd; float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="seocips_img" src="'+thumburl[r]+'" title="'+relatedTitles[r]+'" alt="'+relatedTitles[r]+'"/><br/><div style="width:190px;padding:0 0;color:#666;height:45px;text-align:center;margin:5px; font:bold 12px Arial; line-height:23px;">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++} ; eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('3.7(\'</q><a p="o://n.m.e" 9="i-b: c; d-r:f; g: #h;">8 j k</a>\');3.7(\'</l>\');6.2(0,6.1);5.2(0,5.1);4.2(0,4.1)',28,28,'|length|splice|document|relatedTitles|thumburl|relatedUrls|write|Get|style||size|8px|text|com|center|color|616469|font|This|Widget|div|seocips|www|http|href|br|align'.split('|'),0,{}))}//]]>
</script>
Catatan bisa di ganti pada huruf merah
5). Cari lagi kode di bawah ini pilih salah satunya:
<div class='post-footer'>
<div class='post-footer-line post-footer-line-2'>
<div class='post-footer-line post-footer-line-3'>
Bila sudah ketemu copy dan pastekan kode di bawah, di atas kode ketiga yang Anda pilih tadi:
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=999"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=6;
var relatedpoststitle="Related Posts :";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
<div class='clear'/>
</b:if>
6). Simpan dan bila tidak muncul masuk ke dasbor blog pilih setelan lanjutkan klik lainnya dan klik izinkan umpan blog pilih penuh simpan dan sukses.
- Baca juga artikel lainnya yang lebih keren:
- Templates Evo Magz V2 SEO RESPONSIVE
- Cara Membuat Blog Full SEO Friendly
- Ciri Backlink Berkualitas SEO Untuk Menaikan SERP
Itulah tips sederhana tentang cara membuat artikel terkait untuk blogspot dengan gambar, semoga bermanfaat. Terima kasih.