Kode Breadcrumbs, Related Posts, Recent Post Simple untuk Blogger
Romeltea | Follow @romel_tea
Jika kita menggunakan template blog bawaan Blogger, khususnya template Sederhana (Simple), maka kita harus memasang sendiri tiga widget yang tidak tersedia.
Ketiga elemen penting itu adalah Breadcrumbs, Related Posts, dan Recent Post (Tulisan Terbaru).
Breadcrumbs adalah sebaris teks dan link berisi tulisan Home, Nama Label, dan Judul Posting yang biasa ada di atas judul tulisan. Fungsinya untuk menandai posisi halaman sekaligus navigasi dan internal link sebagaimana disarankan Google.
Related Post atau Artikel Terkait adalah daftar judul postingan yang satu label atau satu topik dengan tulisan yang sedang dibuka pengunjung. Posisinya biasa ada di bawah postingan. Fungsinya sama dengan breadcrumbs, plus meningkatkan pageviews.
Widget Recent Post atau Latest Post adalah daftar judul posting, biasanya dipasang di sidebar blog, berisi daftar artikel terbaru atau terupdate. Fungsinya sama dengan breadcrumbs dan related posts --sama-sama untuk SEO dan PageViews.
Selain ketiga elemen tersebut, pasang juga tombol back to top agar blog lebih ramah pengguna (user friendly).
Kode Breadcrumbs, Related Posts, Recent Post Simple untuk Blogger
Berikut ini Kode Breadcrumbs, Related Posts, Recent Post Simple dan cara memasangnya di blog.BREADCRUMBS
1. Di dashboard Blogger Anda, klik Tema > Edit HTML
2. Copas kode CSS breadcrumbs berikut ini di atas kode ]]></b:skin>
.breadcrumbs { font-size: 13px; color: #666; padding: 10px 0px; margin: 10px 0px 20px; border-bottom: 1px solid #ddd;}
3. Cari (Ctrl+F) kode <b:includable id='main' var='top'> dan copas kode berikut ini di bawahnya:
<b:include data='posts' name='breadcrumb'/>
4. Cari kode <b:includable id='comment-form' var='post'> dan copas kode berikut ini di atasnya:
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span><data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span> » <b:loop values='data:post.labels' var='label'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + "?&max-results=8"' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span><b:if cond='data:label.isLast != "true"'> » </b:if> </b:loop> » <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span>Uncategories</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span>Archive for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.searchQuery'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span><data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span>All post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
5. Save! Simpan template.
RELATED POST
1. Tema > Edit HTML
2. Copas kode berikut ini di atas kode </head>
<b:if cond='data:blog.pageType == "item"'>
<style>
#related-posts{float:left;width:100%;margin:10px;padding:1px 0 10px}
#related-posts .widget h2,#related-posts h3{font:18px Oswald;color:#000;text-transform:none;margin:0 0 10px;padding:0;font-weight:500}
#related-posts a{color:#0973CF;font:14px Arial,Sans-serif;}
#related-posts li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisxv3wgHn0XvJ45WP2izj8xLgZwPw6kkR_fYyHzMDpgPbHkg8UBHQRnzyGwkNcqOXz1OdI0UbIf53srXAoHBQSrmcLOpZ0gtj07TcYrONLsOeEN3pxUkDGv6BJTmRaf4nkuX7Txv56baI/s1600/bullet-list.gif) no-repeat 0 10px;text-indent:0;line-height:1.3em;border-bottom:1px dotted #ccc;margin:0;padding:3px 0 8px 12px}
#related-posts a:hover{color:#c00;text-decoration:none}
#related-posts .widget{margin:0;padding:0}
#related-posts ul{list-style:none;margin:0;padding:0}
</style>
<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = false;
var showpostdate = false;</script>
<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];relatedTitles[relatedTitlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){relatedUrls[relatedTitlesNum]=d.link[a].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);for(var a=0;a<relatedUrls.length;a++){if(!contains(b,relatedUrls[a])){b.length+=1;b[b.length-1]=relatedUrls[a];c.length+=1;c[c.length-1]=relatedTitles[a]}}relatedTitles=c;relatedUrls=b}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<relatedUrls.length;b++){if(relatedUrls[b]==a){relatedUrls.splice(b,1);relatedTitles.splice(b,1)}}var c=Math.floor((relatedTitles.length-1)*Math.random());var b=0;if(relatedTitles.length>1){document.write("<h3>"+relatedpoststitle+"</h3>")}document.write("<ul>");while(b<relatedTitles.length&&b<20&&b<maxresults){document.write('<li><a href="'+relatedUrls[c]+'">'+relatedTitles[c]+"</a></li>");if(c<relatedTitles.length-1){c++}else{c=0}b++}document.write("</ul>");relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length)};
//]]>
</script>
</b:if>
3.Copas kode berikut ini di bawah kode <div class='post-footer-line post-footer-line-3'> atau di bawah kode <data:post.body/> yang kedua.
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>");
</script>
</div>
<div class='clear'/>
</b:if>
4. Simpan Template!
RECENT POST / LATEST POST Simple
1. Klik Layout (Tata Letak)
2. Klik Add a Gadget > pilih Feed
3. Masukkan: https://namabloganda.blogspot.com/feeds/posts/default
4. Klik Continue > isi judul dengan Recent Post atau Terbaru
5. Save!
Itu dia Kode Breadcrumbs, Related Posts, Recent Post Simple dan cara memasangnya di blog.
Jika tidak mau repot memasang ketiga elemen penting di atas, gunakan saja Template Blog SEO Friendly yang sudah tinggal pakai. (blogromeltea.blogspot.com).*
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
Romeltea
Romeltea adalah onair dan online name Asep Syamsul M. Romli aka Kang Romel. Praktisi Media, Blogger, Trainer Komunikasi from Bandung, Indonesia. Follow me:
facebook
twitter
instagram
linkedin
youtube
No comments on Kode Breadcrumbs, Related Posts, Recent Post Simple untuk Blogger
Post a Comment
No Spam, Please!