Dokumentasi Template Blog

Rabu, Mei 29, 2024 Posting Komentar

5 hari yang lalu, saya sempat menuliskan artikel dengan judul: Saat yang Tepat Membeli Template Blogger Premium.

Inti yang dibahas yaitu waktu yang tepat membeli template blog ialah 3 bulan setelah template itu dirilis. Alasannya karena untuk menghindari update secara berskala karena pada dasarnya, template blog tersebut belum siap untuk dirilis (dijual).

Lewat artikel ini, saya ingin mendokumentasikan seluruh modifikasi template blogger yang sudah dilakukan. Tujuannya agar mudah dioprek sebagaimana sebelumnya.

Jika kalian mengerti dengan apa yang saya posting di sini, silakan diikuti. Tanyakan bila ada hal yang membingungkan.

Daftar Blog - Meta Tags

Simpan di bawah kode <head>

<meta content='wzsrmMocn5ZXpSvBYPs6Jhok5zSbe7otHeFoCsAsWIc' name='google-site-verification'/>
<meta content='3809D345690A0F6454366890896EEF9C' name='msvalidate.01'/>
<meta content='43532fe4bb439407' name='yandex-verification'/>

Tag HTML kbd

Simpan di atas kode atau sebelum kode ]]></b:skin>

.post-body 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.4em;font-size:14px}

Referensi or Sumber Artikel

Simpan di atas kode atau sebelum kode ]]></b:skin>

.post_sumber_artikel {font-size:14px;opacity:.7;margin:0}

Untuk memangggilnya, gunakan kode berikut:

<p class="post_sumber_artikel">Referensi:<br /> di sini linknya  </p>

Jika terdiri dari banyak sumber link artikel, maka gunakan kode <br /> seperti berikut:

<p class="post_sumber_artikel">Referensi:<br /> di sini linknya 1 <br /> di sini linknya 2 <br /> di sini linknya 3 </p>

Reddit Sans Google Fonts

Reddit Sans merupakan salah satu dari sekian banyaknya Google Fonts yang tersedia saat ini, dan font ini merupakan yang paling saya sukai.

Simpan di atas kode atau sebelum 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=Reddit+Sans:400,500,700")
//]]>
</script>

Dengan variabel yang digunakan:

"Reddit Sans", sans-serif

...yang bisa diletakkan -- tergantung masing-masing template blogger yang digunakan.

Kalau saya seperti ini:

font-family:"Reddit Sans", sans-serif;font-size:18px;font-size:1.125rem;line-height:1.4;padding:0;margin:0;overflow-y:scroll;position:relative}

Jika ingin digabungkan dengan Font Awesome, begini kira-kira hasilnya:

<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=Reddit+Sans:400,500,700");loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]>
</script>

Struktur Navigasi Menu

Agar struktur navigasi menu terlihat rapi, gunakan kode di bawah ini:

https://www.ariefghozaly.web.id/search/label/Blog?&max-results=6

Digunakannya kode: ?&max-results=6 merupakan batas artikel yang ditampilkan di dalam satu halaman -- dari masing-masing kategori atau label blog.

Tag Kondisional untuk Widget

Beberapa widget atau gadget yang ditambahkan di blog, biasanya dimunculkan atau disembunyikan dalam keadaan tertentu.

Contoh, ketika pembaca sedang berada di homepage. Bisa saja widget tersebut disembunyikan. Ketika dia masuk ke dalam artikel, widgetnya ditampilkan secara otomatis. Maka, agar bisa begitu, gunakan kode tag kondisional di bawah ini.

Jika widget hanya muncul di homepage:

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

Atau versi terbarunya:

<b:if cond='data:view.isHomepage'>

Jika widget hanya muncul di blogposting:

<b:if cond='data:blog.pageType == "item"'>

Atau versi terbarunya:

<b:if cond='data:view.isPost'>

Keduanya ditutup dengan kode tag </b:if>

Widget Artikel Terbaru (Recent Post)

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

Silakan ubah angka 5 yang sudah ditandai dengan jumlah artikel yang ingin ditampilkan.

Widget Komentar Terbaru (Recent Comments)

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

Silakan ganti angka 5 yang sudah ditandai dengan jumlah komentar terbaru yang ingin ditampilkan. Jangan lupa ganti alamat blog saya dengan alamat blog kalian.

Widget Artikel Acak (Random Posts)

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

Silakan ganti angka 5 yang sudah ditandai dengan jumlah artikel acak (random) yang ingin ditampilkan.

Mengatur Font Tag Heading di Single Post

Agar teks pada tag heading tampil rapi dan tidak terlalu besar, gunakan di bawah ini:

.post-body h2,.post-body h3,post-body h4{margin:0;font-size:20px}

Saya menggunakannya pada template blog LinkMagz yang sedang digunakan sekarang.

Arief Ghozaly Blogger sejak 2014 - Suka Menulis, Membaca, SEO, Berbagi Cerita, Pengalaman, Eksplorasi, dan Kopi.