Alterasi Template Blogger VioMagz Terbaru (Mas Sugeng)
Alterasi yang dimaksud pada artikel kali ini ialah mengubah isi dari pada template blogger VioMagz karya Sugeng Blog menjadi lebih baik lagi dari sisi penampilan. Betul... biar lebih menawan. Enak untuk dipandang π
Banyak bagian yang telah saya ubah, dan melalui postingan kali ini, semua kode-kode template blogger yang telah diubah atau diganti akan didokumentasikan sebagai pengingat bagi saya sendiri. Boleh dicoba bagi blogger yang ingin mencobanya. Mana tahu selera kita sama!
Setidaknya ada tiga cara bagaimana caranya memasang huruf Google Fonts di template blogger. Jika tidak ada yang terpasang, yang akan ditampilkan secara otomatis oleh sistem Blogger.com adalah huruf standar seperti Arial atau Sans-serif. Tiga cara yang dimaksud, yakni:
Pemasangan Google Fonts di blog seringkali menimbulkan masalah Blocking Render CSS yang menghambat proses kecepatan loading blog. Jadi, untuk mengatasi masalah tersebut, silakan pasang JavaScript Google Fonts dengan kode di bawah ini.
Persoalan ini pernah dibahas di artikel setelahnya yang berjudul: Cara Memasang Google Fonts di Template Blogger (Render Blocking CSS).
Table of Content adalah daftar isi postingan dari Tag Heading yang ada di dalam artikel yang sedang dibaca. TOC begitu penting karena dianggap memudahkan pencarian poin-poin dari isi artikel sekaligus memicu ditampilkannya Sitelink di halaman penelusuran Google.
Jika ingin menggunakan kode di bawah ini, pastikan template blog yang digunakan sudah menggunakan Google Fonts: Raleway.
Menurut para pakar dan ahli SEO, indeks artikel (disebut juga: Sitemap) merupakan bagian dari SEO di mana isi konten yang ditampilkan ialah seluruh postingan yang telah diterbitkan.
Praktisnya, widget blog yang sudah terpasang bisa ditampilkan atau disembunyikan sesuai keinginan kita dengan cara memanfaatkan kode tag yang ada di bawah ini.
Widget yang menampilkan daftar artikel terbaru yang telah dipublikasikan.
Widget yang menampilkan komentar terbaru yang telah dipublikasikan.
Widget yang menampilkan daftar artikel secara acak yang telah dipublikasikan.
Kotak HTML, CSS, JavaScript, dan jQuery pada postingan blog.
Cuma itu saja? Sebenarnya ada banyak. Jika kawan-kawan memahami dasar-dasar dari sebuah kode template blogger, cukup arahkan Pointer Mouse ke titik yang diinginkan, klik kanan, dan pilih Inspect Element. Selanjutnya tinggal tekan tombol kombinasi CTRL dan U secara bersamaan untuk melihat langsung kode yang terpasang yang saling berhubungan dengan kode yang telah diinspeksi tadi.
Kalau kawan-kawan kebingungan, silakan tanya lewat kolom komentar. Siap dibantu...
Alterasi... diambil dari persamaan kata (sinonim): modifikasi, arti kata alterasi adalah mengubah.
Banyak bagian yang telah saya ubah, dan melalui postingan kali ini, semua kode-kode template blogger yang telah diubah atau diganti akan didokumentasikan sebagai pengingat bagi saya sendiri. Boleh dicoba bagi blogger yang ingin mencobanya. Mana tahu selera kita sama!
 |
| kemdikbud.go.id |
JavaScript Google Fonts
Setidaknya ada tiga cara bagaimana caranya memasang huruf Google Fonts di template blogger. Jika tidak ada yang terpasang, yang akan ditampilkan secara otomatis oleh sistem Blogger.com adalah huruf standar seperti Arial atau Sans-serif. Tiga cara yang dimaksud, yakni:
- Link Format
- Font-Face @font-face
- JavaScript
Pemasangan Google Fonts di blog seringkali menimbulkan masalah Blocking Render CSS yang menghambat proses kecepatan loading blog. Jadi, untuk mengatasi masalah tersebut, silakan pasang JavaScript Google Fonts dengan kode di bawah ini.
<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|Raleway:400,700");loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>CSS Rules to Specify Families
font-family: 'Noto Sans JP', sans-serif;
font-family: 'Raleway', sans-serif;Persoalan ini pernah dibahas di artikel setelahnya yang berjudul: Cara Memasang Google Fonts di Template Blogger (Render Blocking CSS).
Table of Content (TOC)
Table of Content adalah daftar isi postingan dari Tag Heading yang ada di dalam artikel yang sedang dibaca. TOC begitu penting karena dianggap memudahkan pencarian poin-poin dari isi artikel sekaligus memicu ditampilkannya Sitelink di halaman penelusuran Google.
.toc-auto {display: table;position: relative;border-radius: 3px;background-color: var(--widget-bg,#f6f9fc);padding: 1rem 1rem.85rem;margin: 0 0 1.5rem}
.toc-auto a {transition: .3s ease-in;text-decoration:none}
.toc-auto a:hover, .toc-auto .current {text-decoration: underline !important;color: var(--a-hover,#fe8f04)}
.toc-auto input[type="checkbox"] {display: none}
.toc-title {font-weight: 700 !important;margin-top: 5px}
.toc-title:after {content: '-';background-color: var(--text-secondary,#a6e6e5);border-radius: 3px;clear: both;float: right;margin-left: 1rem;cursor: pointer;font-weight: 400 !important;display: flex;justify-content: center;align-items: center;width: 25px;height: 25px;transition: .3s ease-in}
.toc-title:after:hover {background-color: var(--main-color,#028271);color: #fff}
.toc-auto .toc {max-height: 100%;max-width: 500px;opacity: 1;overflow: hidden;transition: max-height .1s ease,max-width 0s ease,margin-top .3s linear,opacity .3s linear,visibility .3s linear;visibility: visible}
.toc-auto ul li,ol li {margin-bottom: 0 !important}
#toc-sh:checked~.toc-title:after {content: '+'}
#toc-sh:checked ~ .toc {margin-top: 0;max-height: 0;max-width: 0;opacity: 0;transition: max-height 0s ease,max-width 0s ease,margin-top .3s linear,opacity .3s linear,visibility .3s linear;visibility: hidden}Table of Content (Script)
<script>
//<![CDATA[
// var contentContainer = document.querySelectorAll(".post-body")[0].id = "toc-container";
var contentContainer = document.querySelectorAll(".post-body")[0];
const dataTracking = contentContainer.setAttribute("data-tracking-container", "true");
var headings = contentContainer.querySelectorAll("h1,h2,h3,h4,h5,h6");
var showtoc = contentContainer.querySelectorAll(".post-body h1,.post-body h2,.post-body h3,.post-body h4,.post-body h5,.post-body h6");
if (headings.length > 2) {
for (i = 0; i <= showtoc.length - 1; i++) {
var tocauto = showtoc[i];
tocauto.insertAdjacentHTML('beforebegin','<div class="toc-auto"><input id="toc-sh" type="checkbox"><label class="toc-title" for="toc-sh">Table of Contents</label><div class="toc" id="toc"></div></div>');
tocatr = document.querySelectorAll(".toc-auto")[0];
tocatr.setAttribute('data-tracking-container', 'true');
var toptoc = document.querySelectorAll(".toc-auto");
[].filter.call(toptoc, function(tocselection) {
return ![].some.call(tocselection.attributes, function(attr) {
return /^data-tracking-container/i.test(attr.name);
});
}).forEach(function(tocselection) {
tocselection.parentNode.removeChild(tocselection);
});};}
class TableOfContents {
constructor({ from, to }) {
this.fromElement = from;
this.toElement = to;
// Get all the ordered headings.
this.headingElements = this.fromElement.querySelectorAll("h1, h2, h3, h4, h5, h6");
this.tocElement = document.createElement("div");
}
getMostImportantHeadingLevel() {
let mostImportantHeadingLevel = 6;
for (let i = 0; i < this.headingElements.length; i++) {
let headingLevel = TableOfContents.getHeadingLevel(this.headingElements[i]);
mostImportantHeadingLevel = (headingLevel < mostImportantHeadingLevel) ?
headingLevel : mostImportantHeadingLevel;
}
return mostImportantHeadingLevel;
}
static generateId(headingElement) {
return headingElement.textContent.toLowerCase().replace(/ /g,"_").replace(/\//g,"_").replace(/</g,"").replace(/>/g,"").replace(/&/g,"").replace(/&nbsp;/g,"").replace(/ /g,"").replace(/\xA0/g,"").replace(/[\n\r\f]+/g, "").replace(/[.,\#!$%\^&\*;:{}=\-@`~()<>?"'“+”]/g,"");
}
static getHeadingLevel(headingElement) {
switch (headingElement.tagName.toLowerCase()) {
case "h1": return 1;
case "h2": return 2;
case "h3": return 3;
case "h4": return 4;
case "h5": return 5;
case "h6": return 6;
default: return 1;
}
}
generateToc() {
let currentLevel = this.getMostImportantHeadingLevel() - 1,
currentElement = this.tocElement;
for (let i = 0; i < this.headingElements.length; i++) {
let headingElement = this.headingElements[i],
headingLevel = TableOfContents.getHeadingLevel(headingElement),
headingLevelDifference = headingLevel - currentLevel,
linkElement = document.createElement("a");
if (!headingElement.id) {
headingElement.id = TableOfContents.generateId(headingElement);
}
linkElement.href = `#${headingElement.id}`;
linkElement.textContent = headingElement.textContent;
if (headingLevelDifference > 0) {
for (let j = 0; j < headingLevelDifference; j++) {
let listElement = document.createElement("ul"),
listItemElement = document.createElement("li");
listElement.appendChild(listItemElement);
currentElement.appendChild(listElement);
currentElement = listItemElement;
}
currentElement.appendChild(linkElement);
} else {
for (let j = 0; j < -headingLevelDifference; j++) {
currentElement = currentElement.parentNode.parentNode;
}
let listItemElement = document.createElement("li");
listItemElement.appendChild(linkElement);
currentElement.parentNode.appendChild(listItemElement);
currentElement = listItemElement;
}
currentLevel = headingLevel;
}
this.toElement.appendChild(this.tocElement.firstChild);
}
}
document.addEventListener("DOMContentLoaded", () =>
new TableOfContents({
from: document.querySelector(".post-body"),
to: document.querySelector(".toc")
}).generateToc()
);
//]]>
</script>Alterasi Heading Tag
Jika ingin menggunakan kode di bawah ini, pastikan template blog yang digunakan sudah menggunakan Google Fonts: Raleway.
.post-body h2,h3,h4{font-family:'Raleway', sans-serif;font-size: 22px;margin: 0}Sitemap Blog
Menurut para pakar dan ahli SEO, indeks artikel (disebut juga: Sitemap) merupakan bagian dari SEO di mana isi konten yang ditampilkan ialah seluruh postingan yang telah diterbitkan.
#sitemap3 .judul {font-size:150%; background-color:#008c5f; color:#fff; font-weight:600; text-align:center; margin-bottom:20px; padding:15px;}
#sitemap3 a {color:#666; text-decoration:none; transition:all .3s ease;}
#sitemap3 a:hover {color:#000;}
#sitemap3 ol {margin:0px; padding:0px;}
#sitemap3 ol li {color:#666; font-weight:400; list-style-type:decimal; margin:0px; padding:10px; line-height:1.5em; -webkit-margin-start:40px !important;}Postingan HTML
<div id="sitemap3">Loading....</div>
<script> //<![CDATA[
/* Blogger Sitemap Simple Title Only */
var start=1;var max=150;var sitemap3Arr=new Array();function runSitemap3(){var scpt=document.createElement('script');scpt.src='/feeds/posts/summary?alt=json&callback=sitemap3&start-index='+start+'&max-results='+max;document.body.appendChild(scpt)} function sitemap3(root){var elem=document.getElementById('sitemap3');if(!elem)return;elem.innerHTML='';var feed=root.feed;if(feed.entry.length>0){for(var i=0;i<feed.entry.length;i++){var entry=feed.entry[i];var title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=="alternate"){var url=entry.link[j].href;if(url&&url.length>0&&title&&title.length>0){sitemap3Arr.push({'url':url,'judul':title})} break}}} if(feed.entry.length>=max){start+=max;runSitemap3()} else{var print='';for(var x=0;x<sitemap3Arr.length;x++){print+='<li><a href=\"'+sitemap3Arr[x].url+'\" title=\"'+sitemap3Arr[x].judul+'\">'+sitemap3Arr[x].judul+'</a></li>'}
elem.innerHTML='<div class=\"judul\">Total Post: '+sitemap3Arr.length+'</div><ol>'+print+'</ol>'}}} runSitemap3();
//]]> </script>Gadget/Widget Muncul Kecuali di Homepage
Praktisnya, widget blog yang sudah terpasang bisa ditampilkan atau disembunyikan sesuai keinginan kita dengan cara memanfaatkan kode tag yang ada di bawah ini.
<!-- tag pembuka -->
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<!-- tag penutup -->
</b:if>Gadget or Widget Recent Posts
Widget yang menampilkan daftar artikel terbaru yang telah dipublikasikan.
<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>Gadget or Widget Recent Comments
Widget yang menampilkan komentar terbaru yang telah dipublikasikan.
<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>“');document.write(l_rc);document.write('”</i><br/><br/>');}else{document.write('<i>“');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+'…”</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://blogmengetik.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>Gadget or Widget Random Posts
Widget yang menampilkan daftar artikel secara acak yang telah dipublikasikan.
<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>Syntax Highlighter Warna Warni
Kotak HTML, CSS, JavaScript, dan jQuery pada postingan blog.
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}Script - Syntax Highlighter
<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>Cuma itu saja? Sebenarnya ada banyak. Jika kawan-kawan memahami dasar-dasar dari sebuah kode template blogger, cukup arahkan Pointer Mouse ke titik yang diinginkan, klik kanan, dan pilih Inspect Element. Selanjutnya tinggal tekan tombol kombinasi CTRL dan U secara bersamaan untuk melihat langsung kode yang terpasang yang saling berhubungan dengan kode yang telah diinspeksi tadi.
Kalau kawan-kawan kebingungan, silakan tanya lewat kolom komentar. Siap dibantu...
Posting Komentar untuk "Alterasi Template Blogger VioMagz Terbaru (Mas Sugeng)"
Silakan tinggalkan komentar terbaikmu.