Selamat sore bos kuh, welcome back to Programmer SEO.. hehe so bahasa Inggris yaa. Oke bos kuh pada kesempatan kali ini saya akan membagikan 3 tutorial, cara membuat artikel terkait keren di bawah postingan dan di dalam postingan blog, serta di tengah postingan yang pastingan sangat responsive dan berSEO friendly.
artikel terkait atau recent post merupakan hal yang sangat di anjurkan oleh Google sebagai bentuk layanan mereka kepada pengunjung agar memudahkan dalam mencari artikel. Sehingga dengan adanya artikel terkait pada blog kita, dapat menarik pengunjung untuk membuka artikel lain di blog kita, hal ini berefek pada bertambahnya waktu kunjungan seseorang. Dan tentunya sangat baik bagi keberlangsungan hidup blog kita, (kayak binatang aja ada keberlangsungan hidup.. hehe)
baiklah, langsung saja ya bos kuh. Di bawah ini telah saya sediakan beberapa jenis tampilan artikel terkait ada yang menggunakan tumbnail (gambar) ada juga yang simpel (tanpa gambar). Silahkan bos kuh pilih sesuai selera. Tapi terlebih dahulu, sbelum bos kuh menerapkannya pada blog bos kuh, pahami dulu langkah-langkahnya.
1. SIlahkan Log in ke akun bos kuh
2. Klik Tata Letak
3, Tambahkan Gadget
4. Pilih Javascript/HTML
5. Pastekan script dibawah ini pada kolom Javascript/HTML
<style scoped='' type="text/css">
ul#recent-posts{list-style:none;margin:0;padding:0}li.recent-posts{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;}
li.recent-posts:last-child{border-bottom:0;}
li.recent-posts a{color:#444;}li.recent-posts a:hover{color:#444;text-decoration:underline}
</style>
<ul id="recent-posts"></ul>
<script>
//<![CDATA[
var homePage = "https://www.Belajarseokompleks.blogspot.com",
numPosts = 10;
function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="'+title+'" target="_blank" rel="nofollow">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
//]]>
</script> Nah kemudian, dibawah ini adalah Related Post dengan Thumbnail atau Gambar. Jika bos kuh lebih tertarik pada yang ini, silahkan copy kan kodenya dan letakan sebagaimana tutorial yang ada di atas.
#2. Membuat Related Post dengan Thumbnail (Gambar)
Apa keutamaan artikel terkait dengan thumbnail ? Keutamaan artikel terkait dengan gambar yaitu dapat memikiat daya tarik pengunjung. Jadi ketika seseorang berkunjung ke blog kita, jika melihat gambarnya, maka secara otomatis memiliki daya tarik tersendiri. Dan secara tanpa sadar, ia ingin mengklik artikel kita.
Oke bos kuh, langsung saja copy kan kode di bawah ini :
<style scoped='' type='text/css'>#recent-posts{color:#999;font-size:12px}#recent-posts img{background:#fafafa;float:left;height:60px;margin-right:8px;width:60px;border-radius:4px}#recent-posts ul{margin:0;padding:0}#recent-posts ul li{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px solid rgba(0,0,0,0.1)}#recent-posts ul li:last-child{border-bottom:0}#recent-posts ul li a{display:block;color:#222;font-weight:700;text-decoration:none;font-size:14px;margin:0 0 10px 0;line-height:normal}</style><div id='recent-posts'><script type='text/javaScript'>var rcp_numposts=5;var rcp_snippet_length=150;var rcp_info='yes';var rcp_comment='Comments';var rcp_disable='T?t Nh?n xét';function recent_posts(json){var dw='';a=location.href;y=a.indexOf('?m=0');dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"…";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;if(y!=-1){rcp_posturl=rcp_posturl+'?m=0'}var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZIKOJ66KMtAsztIn8-xSGthc9Jg2Jec4vdknVfKe2qVmY16HbJ_IoukN_yv6mRIFbas8UHwwvUJFdlZB6eVdJjnRT70E4Ryk5q6mWRLPhleq50SqiihF67pT4WPc539mpOiKyqfgEQapU/"};}};dw+='<li>';dw+='<img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="'+rcp_snippet+'">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts"></script>');</script></div> #3. Membuat Artikel Terkait Di Dalam Postingan
Nah, adapun cara ini berbeda dengan cara sebelumnya. Jika pada kedua kode di atas, kita memasukannya pada tata letak, akan tetapi struktur kode artikel terkait kali ini menyimpannya pada Edit HTML. Langkahnya yaitu :
1. Silahkan klik TEMA pada dasbor blog bos kuh
2. Klik Edit HTML
3. Cari kode </head> (Untuk memudahkan pencarian silahkan tekan CTRL+F, maka akan muncul kolom pencarian. Lalu ketik kode </head> setelah ketemu
4. Letakan kode dibawah ini tepat di atas kode </head>
<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>
3. Selanjutnya, masukan kode di bawah ini tepat di atas </style>
/* 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)}}
* K e t e r a n g a n : Pada sebuah templete biasanya terdapat 4-5 code <data:post.body/>, maka pilih kode kedua.6. Jika ketemu, ganti kode <data:post.body/> dengan struktur kode di bawah ini
<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>
Itulah cara membuat artikel terkait keren pada blogspot. Jika ada hal yang perlu ditanyakan, silahkan isi kolom komentar atau Klik Menu Navigasi => Hubungi Author.
Baca juga : Cara Membuat Related Post Dengan Scroll
1 komentar so far
nah ini yang ditunggu seo untuk recent post
EmoticonEmoticon