Selamat sore bos kuh, welcome back to .. hehe so bahasa Inggris yaa. Oke bos kuh pada kesempatan kali ini saya akan membagikan 3 tutorial, cara menciptakan 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 semoga memudahkan dalam mencari artikel. Sehingga dengan adanya artikel terkait pada blog kita, sanggup 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 hewan aja ada keberlangsungan hidup.. hehe)
baiklah, eksklusif saja ya bos kuh. Di bawah ini telah saya sediakan beberapa jenis tampilan artikel terkait ada yang memakai 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="Cara Membuat Artikel Terkait Keren RESPONSIVE SEO FRENDLY" 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 ialah 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 sanggup memikiat daya tarik pengunjung. Makara dikala seseorang berkunjung ke blog kita, jikalau melihat gambarnya, maka secara otomatis mempunyai daya tarik tersendiri. Dan secara tanpa sadar, ia ingin mengklik artikel kita.
Oke bos kuh, eksklusif saja copy kan instruksi 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/j4vaScript'>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/AVvXsEj5upL3M3DdMo8ccFWVDEMBylBdjtIp9MTNvcP3cYvHFKf0px6Hr38Rv8FcdCanD9thAKsN9-30TPkowiniCRhccnMjitmTdgz-8Brodix0xjLQEFAO_TDXx1RDEZGW6wn9IWgI7bSEBjGb/"};}};dw+='<li>';dw+='<img alt="Cara Membuat Artikel Terkait Keren Resposive SEO Frindly Cara Membuat Artikel Terkait Keren RESPONSIVE SEO FRENDLY" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="Cara Membuat Artikel Terkait Keren RESPONSIVE SEO FRENDLY">'+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/j4vascript" 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 instruksi di atas, kita memasukannya pada tata letak, akan tetapi struktur instruksi 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 instruksi </head> (Untuk memudahkan pencarian silahkan tekan CTRL+F, maka akan muncul kolom pencarian. Lalu ketik instruksi </head> sesudah ketemu
4. Letakan instruksi dibawah ini sempurna di atas kode </head>
<b:if cond='data:blog.pageType == "item"'> <script type='text/j4vascript'> //<![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 instruksi 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 instruksi kedua.6. Jika ketemu, ganti kode <data:post.body/> dengan struktur instruksi 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/j4vascript'/></b:if></b:loop></b:if><h4>Baca Juga</h4><script type='text/j4vascript'>removeRelatedDuplicates();printRelatedLabels();</script></div><div expr:id='"post2" + data:post.id'><p><data:post.body/></p></div><script type='text/j4vascript'>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 menciptakan 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