Settingan Web Blog (Konfigurasi)

Kali ini, izinkan saya berbagi konfigurasi atau settingan web blog: https://www.ariefghozaly.web.id/. Postingan ini terdiri dari berbagai tutorial yang pernah saya terapkan di web blog ini. Dimulai dari cara penyetelan Google Sans, modifikasi tag <kbd> hingga pemasangan Syntax Highlighter.

Awal mula kenapa artikel ini saya publikasikan karena template blogger yang saya gunakan terus menerus mendapatkan update versi terbaru, sedangkan ada banyak modifikasi yang dilakukan di versi template blog yang sekarang. Alhasil, setelah update template blogger, saya harus menyetelnya ulang sebagaimana modifikasi pada template blog yang lama.

Bisa dibilang, artikel ini merupakan dokumentasi pribadi saya.

Teruntuk kawan-kawan yang paham bagaimana caranya memodifikasi tampilan web blog, sangat diperbolehkan untuk mencoba tutorial di bawah ini. Mana tahu, tampilan web blognya menjadi lebih bagus dan keren dibandingkan dengan yang sekarang.

Verifikasi Tag Meta Google, Bing & Yandex

1. Google:

<meta content='UKNSlmcv39MOMPJdVdDE2fJjhNjz_fzjlL8hBASoHH0' name='google-site-verification'/>

2. Bing:

<meta content='F2438FC1083A7DF6F61CB99929E69A08' name='msvalidate.01'/>

3. Yandex:

<meta content='ff9035522b9e9fac' name='yandex-verification'/>

Deskripsi Blog (Slogan)

Yang dimaksud di sini adalah deskripsi web blog singkat sobat mengenai apa. Nantinya, slogan ini akan muncul di halaman mesin pencari.

Belajar SEO, Blog, Komputer Dasar bagi Pemula 1% - 99%

Contohnya seperti ini:

Widget Tampil di Blog Kecuali di Homepage

Kode di bawah ini berfungsi memerintahkan widget agar selalu tampil di seluruh halaman web blog, kecuali di halaman utama (Homepage).

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

Dan kode:

</b:if>

Cara lengkapnya bisa dicoba di artikel ini: 8 Cara Menampilkan dan Menyembunyikan Widget Blog.

Widget Komentar Terbaru di Blog

Disebut juga Recent Comments, merupakan widget yang menampilkan daftar komentar terbaru yang masuk ke web blog sobat. Kodenya:

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

Ganti alamat web blog saya di atas dengan URL web sobat. Angka 5 merupakan jumlah daftar komentar yang ditampilkan. Disesuaikan :)

Membuat atau Memasang Random Posts

Disebut juga artikel acak, merupakan widget yang menampilkan daftar artikel secara random. Pemasangan widget ini sangat direkomendasikan bagi web blog bertemakan informasi atau berita.

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

Jangan lupa, ganti angka 5 di atas. Sama seperti Recent Comments di atas, angka 5 ini merupakan jumlah artikel yang akan ditampilkan nantinya.

Syntax Highlighter Warna Warni

Secara singkat, yang dimaksud Syntax Highlighter adalah kolom yang menampilkan kode HTML, CSS, JavaScript (Js) maupun kode lainnya. Kolom ini tidak akan berbenturan dengan teks artikel, artinya dia akan terpisah dengan bagian artikel, artikel terkait di tengah postingan web blog, gambar dan kutipan (quote).

Simpan kode di bawah ini, di atas kode </b:skin> atau ]]></b:skin>

pre{margin:1.3em 0;white-space:pre;word-wrap:normal;overflow:auto;color:#84999b}
code{font-family:Monospace,Consolas,Monaco,'Andale Mono','Courier New',Courier;line-height:1.6em;color:#009688;font-size:12px}
pre code{display:block;padding:.5em;color:#839496}
::selection{background:#1066b9;color:white}
::-moz-selection{background:#1066b9;color:white}
.centered{text-align:center}
.highlight{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}
.hljs{display:block;overflow-x:auto;padding:15px;background:#f9fcfc;color:black}
.xml .hljs-meta{color:#c0c0c0}
.hljs-comment,.hljs-quote{color:#007400}
.hljs-tag,.hljs-attribute,.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-name{color:#aa0d91}
.hljs-variable,.hljs-template-variable{color:#3F6E74}
.hljs-code,.hljs-string,.hljs-meta-string{color:#c41a16}
.hljs-regexp,.hljs-link{color:#0E0EFF}
.hljs-title,.hljs-symbol,.hljs-bullet,.hljs-number{color:#1c00cf}
.hljs-section,.hljs-meta{color:#643820}
.hljs-class .hljs-title,.hljs-type,.hljs-built_in,.hljs-builtin-name,.hljs-params{color:#5c2699}
.hljs-attr{color:#836C28}
.hljs-subst{color:#000}
.hljs-formula{background-color:#eee;font-style:italic}
.hljs-addition{background-color:#baeeba}
.hljs-deletion{background-color:#ffc8bd}
.hljs-selector-id,.hljs-selector-class{color:#9b703f}
.hljs-doctag,.hljs-strong{font-weight:bold}
.hljs-emphasis{font-style:italic}

Selanjutnya, simpan kode di bawah ini di atas kode</body>

<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
hljs.initHighlightingOnLoad();
hljs.configure({
useBR: false
});
$("div.code").each(function(e, t) {
hljs.highlightBlock(t)
});
//]]>
</script>

Klik tombol Simpan. OK selesai.

Mengenai cara penggunaannya yakni dengan bantuan tag <pre><code> dan </code></pre>

Apabila bingung, silakan ikuti tutorial yang pernah ditulis: Cara Mempercantik Kolom Script dengan Syntax Highlighter.

Google Sans

Google Sans merupakan salah satu gaya huruf yang paling saya sukai karena bentuknya yang berkelas. Bagi yang ingin menggunakannya, boleh dan gratis.

Simpan kode di bawah ini, 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>

Selanjutnya, cari kode body#layout{ atau <Group description="Teks Halaman" selector="body"> atau html{font:$(body.font)}body{

Ganti gaya huruf yang sudah terpasang, dengan kode berikut:

font-family: Google Sans, Sans Serif

Simpan perubahan template blogger. OK selesai.

Google Fonts

Google Fonts merupakan sebuah web blog yang menyediakan berbagai gaya atau jenis huruf yang bisa dipasangkan di template blogger. Kode yang dibutuhkan:

<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=Open+Sans:400,700");
//]]>
</script>

Karena caranya yang tergolong rumit, saya sarankan bagi sobat untuk baca tutorial lengkapnya di sini: Cara Mengubah Jenis Huruf (Google Fonts) di Blogger.

Program Bagi Hasil LinkMagz (Afiliasi)

Sampai detik ini saya masih mengikuti program afiliasi template blogger LinkMagz. Kalau laku melalui LINK saya, saya mendapatkan sedikit komisi. Insya Allah.

<a href="https://sugeng.id/?ref=311" title="Template Blogger Terbaik Rekomendasi"><img src="https://sugeng.id/wp-content/uploads/2019/12/banner-template-blogger-blue2.png" alt="Template Blogger Terbaik Rekomendasi" style="width: 100%; height: auto"/></a>

Bagi kawan-kawan yang juga mengikuti program afiliasi ini, silakan salin kode di atas. Sudah saya modifikasi sedikit agar tampilannya lebih bagus dan rapi. Ganti juga kode 311 yang ditandai.

Follow Blog

Yang dimaksud Follow Blog di sini adalah LINK untuk mengikuti (follow) blog, disebut juga berlangganan artikel. Alternatif bagi yang tidak ingin memasang widget box subscribers di web blog.

https://www.blogger.com/follow.g?blogID=7470227408757290814

Blog ID di atas bisa didapatkan di https://draft.blogger.com/ masing-masing akun blogger.

Percantik Tag <kbd> dengan CSS

Mau tag <kbd> yang dimiliki dipercantik?

kbd{color: #fff; background: #263238; border-radius: 3px; padding: 2px 5px; box-shadow: 2px 2px 3px rgb(0 0 0 / 75%)}

Begini tampilannya di web blog:

Saya sudah posting tutorialnya di sini: Cara Modifikasi HTML tag <kbd> di Blogger.

Cara Menghilangkan Garis di Bawah URL

Template blogger yang saya gunakan menggunakan garis bawah (underline) pada anchor text yang dipasangkan. Karena saya risih, saya hilangkan.

.post-body a:link{text-decoration:underline}

Ganti kode underline dengan none, seperti ini:

.post-body a:link{text-decoration:none}

Itulah dokumentasi pribadi saya mengenai konfigurasi di blog https://www.ariefghozaly.web.id/. Mau coba juga? Boleh! Mau salin kodenya? Silakan, gratis!