Documentation

Siapa di sini yang hobi gonta-ganti template blogger? Oh, tentu saja saya! 😁 Oleh sebab itu, seluruh peraturan atau konfigurasi template blogger yang pernah dilakukan, saya dokumentasikan lewat artikel yang sedang kalian baca sekarang.

Seluruh tutorial yang ada di sini boleh kalian implementasikan ke dalam template blog milik kalian. Gratis, tidak dipungut biaya sepeser pun. Anggaplah rejeki dari Allah untuk kalian tapi lewat dari blog manis ini.

Tag Program <kbd> Tombol Keyboard

Jika kalian mau tag <kbd> seperti gambar di atas, berikut kode CSS yang diperlukan:

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
}

Selengkapnya bisa dibaca di sini: Modifikasi Tag < kbd > Keren untuk Artikel Blogger.

Noto Sans JP sebagai Fonts Utama

Saya paling suka dengan Google Fonts yang bernama Noto Sans JP karena memang terlihat nyaman dibaca.

Script di bawah ini, disimpan 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>

Cara mengaktifkannya, gunakan variabel berikut:

body{background:#eaeced;font-family:"Noto Sans JP", sans-serif}

Coba cek template blogger. Jika masih ada kode @font-face, silakan dihapus karena tidak digunakan lagi.

Menu Navigasi yang Terstruktur agar Rapi

Agar navigasi menu terstruktur dan tampak lebih rapi, saya menggunakan kode berikut:

<li><a href="https://www.kage.my.id/search/label/Google%20AdSense?&max-results=6">Google AdSense</a></li>

Adanya kode ?&max-results=6 merupakan batas artikel dari masing-masing kategori atau label blog.

Praktisnya, tiap kategori hanya menampilkan 6 buah artikel. Jika mau lihat artikel lainnya, maka harus menekan tombol halaman selanjutnya, yang kita kenal sebagai Page Navigation Number. Biar tidak semrawut gitu, deh!

Gadget Blog Cuma Muncul di Homepage

Punya widget atau gadget tertentu tapi tidak ingin ditampilkan di halaman homepage? Gunakan saja kode perinta berikut:

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

Dan untuk kode penutupnya </b:if>

Tempatkan kode pertama di atas, di bawah kode:

<b:includable id='main'>

Sehingga nantinya menjadi seperti ini:

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

Dan untuk kode penutupnya, sudah ditandai, ya!

Terserah kalian mau menyembunyikan gadget atau widget yang mana. Pokoknya tidak muncul di Homepage. Begitu situasi pembacanya berada di dalam artikel atau postingan, baru muncul widgetnya. Begitulah cara kerjanya.

Gadget Recent Posts

Siapa di sini yang nama widget blognya menghilang? Pernah saya alami. Dan untuk mengakalinya, bisa dengan memanfaatkan kode berikut:

<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>

Cukup ditambahkan pada HTML/JavaScript pada tata letak (layout blog) masing-masing.

Apa bedanya dengan widget bawaan (Feed1) pada menu tambahkan gadget di tata letak (layout blog)? Script di atas memungkinkan kalian untuk menampilkan 10 artikel terbaru, sedangkan widget bawaannya (Feed1) hanya bisa menampilkan 5 artikel (maksimal).

Gadget Recent Comments

Punya blog yang banyak dikomentari? Sudah semestinya untuk menambahkan widget komentar terbaru.

<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://www.kage.my.id/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

Selain mempercantik tampilan blog, adanya gadget artikel terbaru juga turut "mengundang" para pembaca lainnya untuk ikut mengomentari artikel-artikel kalian.

Gadget Random Posts

Random Posts artinya adalah artikel random, sebuah widget yang bertugas untuk menampilkan postingan secara acak.

<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>

Penting engga, sih? 80% penting, karena yang dimunculkan adalah artikel-artikel random yang tidak pernah diniatkan untuk dibaca. Karena muncul begitu saja, didukung judulnya yang menarik, bisa saja kan pembaca tersebut membuka artikel yang ditampilkan oleh widget artikel acak ini?

Google Fonts: Google Sans

Dulunya pernah dipakai, tapi sekarang tidak. Kalau kalian mau pakai, silakan. Simpan kode berikut di atas kode </head>

<style>
@font-face{font-family:'Google Sans';font-style:normal;font-weight:400;src:local('Google Sans Regular'),local(GoogleSans-Regular),url(//fonts.gstatic.com/s/googlesans/v5/4UaGrENHsxJlGDuGo1OIlL3Kwp5MKg.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:400;src:local('Google Sans Regular'),local(GoogleSans-Regular),url(//fonts.gstatic.com/s/googlesans/v5/4UaGrENHsxJlGDuGo1OIlL3Nwp5MKg.woff2) format("woff2");unicode-range:U+0370-03FF}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:400;src:local('Google Sans Regular'),local(GoogleSans-Regular),url(//fonts.gstatic.com/s/googlesans/v5/4UaGrENHsxJlGDuGo1OIlL3Awp5MKg.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:400;src:local('Google Sans Regular'),local(GoogleSans-Regular),url(//fonts.gstatic.com/s/googlesans/v5/4UaGrENHsxJlGDuGo1OIlL3Owp4.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:500;src:local('Google Sans Medium'),local(GoogleSans-Medium),url(//fonts.gstatic.com/s/googlesans/v5/4UabrENHsxJlGDuGo1OIlLU94Yt3CwZ-Pw.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:500;src:local('Google Sans Medium'),local(GoogleSans-Medium),url(//fonts.gstatic.com/s/googlesans/v5/4UabrENHsxJlGDuGo1OIlLU94YtwCwZ-Pw.woff2) format("woff2");unicode-range:U+0370-03FF}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:500;src:local('Google Sans Medium'),local(GoogleSans-Medium),url(//fonts.gstatic.com/s/googlesans/v5/4UabrENHsxJlGDuGo1OIlLU94Yt9CwZ-Pw.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:500;src:local('Google Sans Medium'),local(GoogleSans-Medium),url(//fonts.gstatic.com/s/googlesans/v5/4UabrENHsxJlGDuGo1OIlLU94YtzCwY.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
</style>

Cara mengaktifkannya, gunakan variabel berikut:

... font-family: Google Sans, Sans Serif;}

Coba cek template blogger. Jika masih ada kode @font-face lainnya, silakan dihapus karena tidak digunakan lagi.

@font-face sebenarnya tidak direkomendasikan untuk digunakan karena sering bermasalah dengan kebanyakan browser default.

Google Fonts x Font Awesome

Karena saya menggunakan Font Awesome dan Google Fonts sekaligus, maka saya gabungkan saja. Betul, menghemat ruang.

<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 bertanya kenapa pemasangan kode Google Fonts-nya seperti di atas, sebenarnya script di atas dibuat untuk mengatasi render-blocking CSS files yang memberatkan kecepatan loading blog. Jadi, gunakan kode di atas, ya!

Itu dia dokumentasi kage blog, sebuah catatan informasi khusus dari apa yang pernah dilakukan oleh pemilik blog terhadap web blog yang dimilikinya.

Labels: Blogger,

Kalian baru saja membaca artikel Documentation. Bila dirasa bermanfaat, mohon bagikan artikelnya. Jazakumullah khairan.