Pengaturan Template Blog Main Blog SEO

Seperti blog lainnya, Main Blog SEO juga menggunakan beberapa pengaturan template blogger agar tampilannya semakin enak dipandang oleh pengunjung dan pembaca blog setia.

Pengaturan template di bawah ini bisa banget dicontoh atau dipraktikkan oleh teman2 semua. Caranya juga gampang.

Navigasi Menu yang Terstruktur agar Rapi

Agar navigasi menu blog bisa menampilkan artikel dalam jumlah tertentu (dari masing2 kategori), kita bisa membatasinya.

Yang kita butuhkan adalah kode max-results=6

<li><a href="https://mainblogseo.blogspot.com/search/label/Blogger%20SEO?&max-results=6">Blogger SEO</a></li>

Dengan adanya kode ?&max-results=6, artinya kategori tersebut hanya menampilkan 6 buah postingan saja. Jika ingin melihat lainnya, harus tekan tombol halaman selanjutnya.

Banyak gak tahu, faktanya cara di atas bisa meningkatkan kualitas SEO blog kita karena para pembaca akan terus menerus menjelajahi blog kita, dan ini bagus di "mata" mesin pencari Google.

Pakai Noto Sans Japanese untuk Font Blog

Sejauh ini, font terbaik dan rekomendasi dari saya tetap Noto Sans Japanese yang bisa kalian dapatkan di Google Fonts.

Kalian cuma perlu tambahkan kode di bawah ini, di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700");
//]]>
</script>

Bisa juga digabungkan dengan Font Awesome, contohnya:

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700");loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]>
</script>

Buat yang gak tahu, Font Awesome berfungsi untuk menampilkan logo atau ikon di dalam web blog.

Cara Menyembunyikan Widget Blog

Salah satu widget blog yang tidak perlu muncul di halaman depan blog (homepage) adalah widget artikel terbaru. Meski begitu, widgetnya juga harus tetap terpasang, ya!

Kita hilangkan di homepage, dan hanya ditampilkan di dalam postingan blog (single post).

1. Theme > Edit HTML > Jump to Widget > HTML1

2. Tambahkan kode pembukanya:

<b:if cond='data:blog.url != data:blog.homepageUrl'>

3. Tambahkan kode penutupnya: </b:if>

Begini tampilannya:

Widget artikel terbaru sebaiknya memang terpasang di blog. Tapi hanya ditampilkan di dalam artikel (ketika dibuka/dibaca), bukan di homepage. Gunanya untuk menghindari Duplicate Content.

Widget Recent Posts (Artikel Terbaru)

Secara default, kita bisa menambahkannya secara otomatis di tata letak blogger.com. Contohnya:

https://mainblogseo.blogspot.com/feeds/posts/default

Cuma cara di atas menyebabkan judul atau nama widget menghilang di tampilan blog. Jadi untuk mengatasinya, kita perlu memasang kode yang manual.

1. Layout > Add a Gadget > HTML/JavaScript

2. Masukkan nama widget, tambahkan kodenya

Kode widget Recent Posts:

<script type="text/javascript">
function recentpostslist(json) {
document.write('<ul>');
for (var i = 0; i < json.feed.entry.length; i++)
{
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_top">' + entryTitle + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="/feeds/posts/summary?max-results=5&alt=json-in-script&callback=recentpostslist"></script>

Recent Posts adalah kode widget yang berfungsi menampilkan artikel terbaru yang baru saja diterbitkan oleh blog.

Widget Recent Comments (Komentar Terbaru Blog)

Blog kalian punya banyak komentar tapi gak dipublikasikan? Rugi banget, dong! Dengan adanya widget komentar terbaru, bisa saja hal tersebut menarik orang2 lainnya untuk mau meninggalkan komentarnya di blog kita.

Caranya sama seperti di atas, tapi kodenya berbeda. Berikut kode widget komentar terbaru di blog:

<script type='text/javascript'>
//<![CDATA[
function showrecentcomments(json){for(var i=0;i<a_rc;i++){var b_rc=json.feed.entry[i];var c_rc;if(i==json.feed.entry.length)break;for(var k=0;k<b_rc.link.length;k++){if(b_rc.link[k].rel=='alternate'){c_rc=b_rc.link[k].href;break;}}c_rc=c_rc.replace("#","#comment-");var d_rc=c_rc.split("#");d_rc=d_rc[0];var e_rc=d_rc.split("/");e_rc=e_rc[5];e_rc=e_rc.split(".html");e_rc=e_rc[0];var f_rc=e_rc.replace(/-/g," ");f_rc=f_rc.link(d_rc);var g_rc=b_rc.published.$t;var h_rc=g_rc.substring(0,4);var i_rc=g_rc.substring(5,7);var j_rc=g_rc.substring(8,10);var k_rc=new Array();k_rc[1]="Jan";k_rc[2]="Feb";k_rc[3]="Mar";k_rc[4]="Apr";k_rc[5]="May";k_rc[6]="Jun";k_rc[7]="Jul";k_rc[8]="Aug";k_rc[9]="Sep";k_rc[10]="Oct";k_rc[11]="Nov";k_rc[12]="Dec";if("content" in b_rc){var l_rc=b_rc.content.$t;}else if("summary" in b_rc){var l_rc=b_rc.summary.$t;}else var l_rc="";var re=/<\S[^>]*>/g;l_rc=l_rc.replace(re,"");if(m_rc==true)document.write('On '+k_rc[parseInt(i_rc,10)]+' '+j_rc+' ');document.write('<a href="'+c_rc+'">'+b_rc.author[0].name.$t+'</a> commented');if(n_rc==true)document.write(' on '+f_rc);document.write(': ');if(l_rc.length<o_rc){document.write('<i>&#8220;');document.write(l_rc);document.write('&#8221;</i><br/><br/>');}else{document.write('<i>&#8220;');l_rc=l_rc.substring(0,o_rc);var p_rc=l_rc.lastIndexOf(" ");l_rc=l_rc.substring(0,p_rc);document.write(l_rc+'&hellip;&#8221;</i>');document.write('<br/><br/>');}}}
//]]>
</script>
<script>var a_rc = 5; var m_rc = false; var n_rc = true; var o_rc = 100;</script>
<script src="https://mainblogseo.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

Widget Random Posts (Artikel Random)

Random Posts artinya widget artikel acak yang ditampilkan kepada para pembaca atau pengunjung blog.

Berikut kodenya:

<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=5;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&
callback=randomposts" type="text/javascript"></script>

Karena postingannya random, apalagi dengan judul yang memikat, kemungkinan besar para pembaca akan membuka artikel tersebut.

Dibilang bagus untuk SEO, ya bagus banget malah. Kalau dibilang jelek, tergantung. Kalau blognya sudah lambat, lebih baik jangan dipasang 😉 Karena blog cepat (fast loading) lebih diutamakan dibandingkan blog dengan beragam widget.

Tag Program <kbd> Bergaya Tombol Keyboard

Untuk blog-blog yang membahas pemrograman seperti HTML, CSS, JavaScript, dan lainnya; kalian perlu mengubah tampilan tag kbd biar lebih enak dipandang.

kbd{
   background-color: #eee;
   border-radius: 3px;
   border: 1px solid #b4b4b4;
   box-shadow: 0 1px 1px rgba(0,0,0,.2),0 2px 0 0 rgba(255,255,255,.7)inset;
   color: #333;
   display: inline-block;
   padding: 2px 2px 1px;
   line-height: 1.5em
}

Silakan hapus kode tampilan tag kbd yang sudah ada di template blogger, ganti dengan kode di atas.