PANDUAN SINGKAT MENGEDIT TEMPLATE BLOGGER NOTABLE: (bagian kedua)

Pada bagian pertama tutorial kustom template NOTABLE, saya telah menjanjikan akan melanjutkan sampai tuntas. Bagian ini akan mengupas:

1. Menambahkan Menu Navigasi "fixed" plus kotak pencarian
2. Menambahkan breadcrumbs 
3. Menambahkan Relatedposts
4. Menambahkan back to top

1. Menambahkan Menu Navigasi plus kota pencarian

Menu ini akan saling melengkapi dengan sistem header bawaan template NOTABLE. Menu ini fixed yakni tetap berada diatas konten saat dijalankan. Namun scroll ketika konten discroll dari bawah keatas, menu ini akan menghilang untuk digantikan oleh header bawaan dengan tombol sidebar di sebelah kanannya. Jika sobat telah mengikuti tutorial pada bagian pertama artikel ini, silahkan simak tutorial ini.

Tambahkan CSS

Masuk kepengaturan blogger>pilih tema atau theme>pilih edit HTML, cari kode </head> dan letakan kode berikut tepat diatasnya.

<style>
#editblogmenu{width:100%;margin:0 auto;height:50px;position: fixed; z-index:99; background:#3e95d6;}
#editblogmenu ul,#editblogmenu li{margin:0;padding:0;list-style:none;}
#editblogmenu ul{height:45px}
#editblogmenu li{float:left;display:inline;position:relative;font-family:&#39;trebuchet MS&#39;;font-size:16px;
font-weight:bold;}
#editblogmenu a{display:block;line-height:45px;padding:0 16px;text-decoration:none;color:#F5F5F5;}
#editblogmenup ul li:hover a{color:#666;}
#editblogmenup input{display:none;margin:0 0;padding:0 0;width:100%;height:40px;opacity:0;cursor:pointer}
#editblogmenu label{font-family:&#39;trebuchet MS&#39;;font-size:30px;font-weight:400;display:none;width:45px;height:40px;line-height:45px;text-align:center;}
#editblogmenu label span{font-size:13px;position:absolute;left:35px}
#editblogmenu ul li ul{height:auto;overflow:hidden;position:absolute;z-index:99;color:#919392}
#editblogmenu ul li ul li a{color:#919392;height:40px;line-height:40px;background:#fff;width:350px;}
#editblogmenu ul.menux{visibility:hidden;opacity:0;height:auto;overflow:hidden;background:#fff;position:absolute;z-index:99;color:#919392;box-shadow: 0px 2px 3px rgba(0,0,0,0.1);top:10px;transition:all 0.3s ease-in-out;}
#editblogmenu li:hover &gt; ul.menux{visibility:visible;opacity:1;top:55px;}
#editblogmenua.dutt{padding:0 27px 0 14px}
#editblogmenu a.dutt::after{content:&quot;\f0d7&quot;;font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}
#editblogmenu a.dutt:hover::after,#editblogmenu ul li:hover a.dutt::after{content:&quot;\f0d7&quot;;font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}
#editblogmenu ul.menux li a{background:#fff;color:#919392;}
#editblogmenu ul li ul li a:hover{background:#fcfcfc;color:#8493a0;}
#editblogmenu li.facebook {padding:0 5px;}
@media screen and (max-width:960px) {
#editblogmenu li:hover &gt; ul.menux{display:block;}
#editblogmenu ul{border:none;border-bottom:4px solid #e9e9e9;}
#editblogmenu{position:fixed;border:none;border-bottom:4px solid #e9e9e9;}
#editblogmenu ul{background:#5093C4;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
#editblogmenu ul.menux{width:100%;position:static;border:none}
#editblogmenu li{display:block;float:none;width:auto;text-align:left}
#editblogmenu li a{color:#fff}
#editblogmenu li a:hover{background:#f1f1f1;color:#f9f9f9}
#editblogmenu li:hover{background:#8493a0;color:#fff;}
#editblogmenu a.dutt{font-weight: bold;}
#editblogmenu li:hover &gt; a.dutt,#editblogmenu a.dutt:hover{background:#b1b1b1;color:#fff;}
#meditblogmenu input,#editblogmenu label{display:inline-block;position:absolute;right:0;top:0;}
#editblogmenu input:after,#editblogmenu label:after {content:&quot;\f00a&quot;;font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;font-size:30px;color:#fff;
display:inline-block;position:absolute;right:15px;top:25%;line-height:30px;}
#editblogmenu input{z-index:4;}
#editblogmenu input:checked + label{color:#666;font-weight:700}
#editblogmenu input:checked ~ ul{display:block}
#editblogmenu ul li ul li a{width:100%;color:#666;}
#editblogmenu ul li ul li a:hover{background:#8493a0;color:#666;}
#editblogmenu ul.menux a{background:#fff;color:#666;}
#editblogmenu ul.menux a:hover{background:#8493a0;color:#666;}
#editblogmenu ul.menux li{background:#fff;color:#666;}
#editblogmenu ul.menux li:hover{background:#8493a0;color:#fff;}
#editblogmenu ul.menux li a{background:#fff;color:#666;}
#editblogmenu ul.menux li a:hover{background:#f1f1f1;color:#8493a0;}</style>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Sambung dengan kode pembentuk kotak pencarian kotak pembesar dibawah ini, letakan saja tepat dibawah kode diatas.

<style>
body {
font-family: Arial;
}
* {
box-sizing: border-box;
}
.openBtn {
background: transparent;
border: none;
padding: 10px 15px;
font-size: 20px;
cursor: pointer;
position: fixed;
z-index: 100;
top: 1px;
right:10%;
}
.openBtn:hover {
background: transparent;
}
.overlay {
height: 100%;
width: 100%;
display: none;
position: fixed;
z-index: 150;
top: 0;
left: 10;
background-color: none;
}
.overlay-content {
position: relative;
top: 0%;
width: 100%;
text-align: center;
margin-top: 30px;
margin: auto;
}
.overlay .closebtn {
position: absolute;
top: -2px;
left: 92%;
font-size: 40px;
cursor: pointer;
color: blue;
z-index:101;
}
.overlay .closebtn:hover {
color: #000;
}
.overlay input[type=text] {
padding: 15px;
font-size: 17px;
border: none;
float: left;
width: 80%;
background: #c0c0c0;
}
.overlay input[type=text]:hover {
background: #f1f1f1;
}
.overlay button {
float: left;
width: 20%;
padding: 15px;
background: #c0c0c0;
font-size: 17px;
border: none;
cursor: pointer;
}
.overlay button:hover {
background: #f1f1f1;
}
</style>

Sambung lagi dengan kode modifikasi blogquote dibawah ini:

<style>
blockquote {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
color: #0000FF;
font-style: Courier;
margin: 10px;
padding: 10px;
text-align: left;
font-size: 15px;
}
</style>

 Tambahkan HTML

Masih didalam kotak editor HTML dibawah kode </head> letakan kode berikut:

<nav id='editblogmenu'>
<input type='checkbox'/>
<label/>
<ul>
<li>
<a href='/' title='Beranda'><h1> <large><a expr:href='data:blog.homepageUrl'><data:blog.title/></a></large></h1></a>
</li>
<li>
<a class='dutt' href='#'>Blogging</a>
<ul class='menux'>
<li><a href='https://www.editblogtema.net/search/label/blogger'>Triks/Tips</a>
</li>
<li><a href='https://www.editblogtema.net/search/label/english'>English Posts</a>
</li>
<li><a href='https://www.editblogtema.net/search/label/fakta'>fakta</a>
</li>
<li><a href='https://www.editblogtema.net/search/label/kotak%20pencarian'>Pencarian</a>
</li>
<li><a href='https://www.editblogtema.net/search/label/navigasi'>Navigasi</a>
</li>
<li><a href='https://www.editblogtema.net/search/label/tutorialKhusus'>Spesial</a>
</li>
<li><a href='https://www.editblogtema.net/p/blog-page_30.html'>sitemap</a>
</li>
</ul>
</li>
<li>
<a class='dutt' href='#'>Download</a>
<ul class='menux'>
<li><a href='https://www.editblogtema.net/p/var-blogid-3332982328556887724var.html'>e-mail Form</a>
</li>
<li><a href='https://www.editblogtema.net/2018/10/moslem-theme-for-free.html'>Tema Islami</a>
</li>
<li><a href='https://www.editblogtema.net/p/blog-page_7.html'>EB-themes</a>
</li>
<li><a href='https://www.editblogtema.net/2018/12/apakah-template-contempo-hybrid-itu.html#'>Tentang Kami</a>
</li>
</ul>
</li>
<li>
<a href='https://www.editblogtema.net/2018/11/contempo-hibrida.html'>Try this hybrid theme<span class='sr-only'/>
</a>
</li>
<li><a href='https://www.editblogtema.net/p/daftar-isi.html'>sitemap</a>
</li>
</ul>
</nav>
<div class='overlay' id='myOverlay'>
<span class='closebtn' onclick='closeSearch()' title='Close Overlay'>&#215;</span>
<div class='overlay-content'>
<form action='/search' id='searchthis' method='get' style='display:inline;'><input id='search-box' name='q' placeholder='cari...' size='25' type='text'/>
<button type='submit'><i class='fa fa-search' style='color:transparent;'/></button>
</form>
</div></div>
<button class='openBtn' onclick='openSearch()'><i class='fa fa-search' style='color:red;'/></button>
<body class='container'>
<button id='myBtn' onclick='topFunction()' title='Go to top'><i class='fa fa-chevron-circle-up fa-2x'/></button>

Tambahkan JavaScript
Masih didalam opsi editor HTML cari kode </body> lalu letakan kode berikut tepat diatasnya:

<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://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); //]]> </script>
<script>function openSearch() {
document.getElementById(&quot;myOverlay&quot;).style.display = &quot;block&quot;;
}
function closeSearch() {
document.getElementById(&quot;myOverlay&quot;).style.display = &quot;none&quot;;
}
</script>
<script type='text/javascript'>
 var youtube = $(&#39;iframe[src*=&quot;youtube.com&quot;]&#39;);
youtube.each(function() {
$(this).attr(&#39;aspectRatio&#39;, this.height / this.width).attr(&#39;style&#39;, &#39;width:100%&#39;);
});
$(window).resize(function() {
youtube.each(function() {
$(this).attr(&#39;height&#39;, $(this).width() * $(this).attr(&#39;aspectRatio&#39;));
});
}).resize();
</script>
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop &gt; 20 || document.documentElement.scrollTop &gt; 20) {
document.getElementById(&quot;myBtn&quot;).style.display = &quot;block&quot;;
} else {
document.getElementById(&quot;myBtn&quot;).style.display = &quot;none&quot;;
}
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>

Kode JavaScript diatas adalah gabungan widget yang sebagian telah saya satukan dalam satu bundling ini penting untuk membentuk elemen dan widget selanjutnya. Sampai disini seharusnya menu navigasi, blockquote telah telah tampil...

2. Menambahkan breadcrumbs

Langkah ini saya ambil dari triknya bung Franky, salah seorang desainer template blogger yang sudah cukup kita kenal di tanah air. Saya ambil karena cocok untuk desain layout versi ke-3. walaupun memiliki kelemahan: Pada tema mobile atau layar yang lebih kecil breadcrumbs tidak dapat tampil seluruhnya alias terputus, tapi tetap saja menurut saya breadcrumbs ini "cool" untuk template NOTABLE.

Cari kode berikut di dalam halaman editor HTML blogger:

<b:defaultmarkup type='Common'>

Lalu letakan kode berikut dibawahnya:

<b:includable id='breadcrumb' var='post'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
<span itemscope='itemscope' itemtype='https://data-vocabulary.org/Breadcrumb'><a class='breadhomepost' expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><span itemprop='title'><svg class='icons post-HOME' viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#768187'/></svg> Home&amp;nbsp;</span></a></span>&amp;nbsp;&#8250;
<b:loop values='data:post.labels' var='label'>
<span itemscope='itemscope' itemtype='https://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?max-results=6&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a><b:if cond='data:label.isLast != &quot;true&quot;'> &#8250; </b:if></span>
</b:loop><span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:includable>

Selanjutnya letakan kode berikut dibawah kode: <article class='post-outer-container'>:

<b:if cond='data:view.isSingleItem'>
<b:include data='post' name='breadcrumb'/>
</b:if>

 Letakan kode dibawah ini di atas kode </head>

<style>.breadcrumbs {font-size:90%;overflow:hidden;color:#ccc;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;display:block;position:relative;margin:0 auto 20px}
.breadcrumbs .icons{position:absolute;top:0;left:0;width:16px;height:16px;vertical-align:center}
.breadcrumbs .breadhomepost{position:relative;padding:0 0 0 20px;overflow:hidden}
.breadcrumbs li{list-style-type:none;display:inline-block;float:left}
.breadcrumbs span a {color:#777;padding:0 3px;}
.breadcrumbs &gt;span:last-child {width:0;color:#999;font-weight:400;padding:0 0 0 3px}
.breadcrumbs span a:hover {color:#333;}
.breadcrumbs a:hover {color:#333;}</style>

SAVE template.

3. MENAMBAHKAN RELATED POST
Alih alih memasang related post buatan saya sendiri yang sangat sederhana, malahan related post ini saya dapatkan dari tutorial blogger Igniel, saya langsung jatuh cinta karena stylish banget kalau menurut saya. Pokoke makasih buat mbak Igniel.

Tambahkan CSS

Melalui halaman editor HTML cari kode </head> dan letakan kode berikut diatasnya:

#relatedposts{ display:block; margin:20px 0px; line-height:1.5em; } #relatedposts h3.title{ font-size:16px; font-weight:600; text-align:center; text-transform:uppercase; line-height:initial; } #relatedposts h3.title span{ background-color:#fff; padding:0px 15px; position:relative; z-index:1; } #relatedposts h3.title:before{ content: ''; display: block; position: relative; top:10px; width: 100%; border-top: 2px solid #cccccc; } #relatedposts ul{ margin:20px 0px 0px; padding:0px; display:flex; display:-webkit-flex; flex-wrap:wrap; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; } #relatedposts ul li{ list-style:none; width:calc((100% / 3) - 15px); text-align:center; margin-right:20px; margin-bottom:20px; padding:0px; -webkit-margin-start:0px !important; } #relatedposts ul li .thumb{ overflow:hidden; line-height:0px; border-radius:7px; } #relatedpostsul li:nth-of-type(3n){ margin-right:0px; } #relatedposts ul li a{ display:block; } #relatedposts ul li a.judul{ color:#000; /* Warna Huruf */ font-weight:600; margin-top:7px; } #relatedposts ul li a.judul:hover, #relatedposts ul li:hover a.judul{ color:#ff5722; /* Warna Huruf Ketika Disorot */ } #relatedposts ul li a img{ width:100%; max-height:143px; transition:all .3s ease; border:0px; margin:0px; } #relatedposts ul li a img:hover, #relatedposts ul li:hover img{ transform:scale(1.1) rotate(-5deg); filter: brightness(75%); -webkit-filter: brightness(75%); } #relatedposts .norelated{ text-align:center; font-weight:600; } @media screen and (max-width:480px){ #relatedposts ul li{ width: calc((100% / 2) - 7.5px); margin-right:15px; margin-bottom:15px; } #relatedposts ul li:nth-of-type(3n){ margin-right:15px; } #relatedposts ul li:nth-of-type(2n){ margin-right:0px; } }

Tambahkan JavaScript

Cari kode <data:post.body/> pada template NOTABLE ada terdapat dua letakan kode JavaScript berikut dibawah kode <data:post.body/> yang kedua :

 <b:if cond='data:view.isPost'> <div id='relatedposts'> <h3 class='title'><span>Related Posts</span></h3> <script>//<![CDATA[ var jumlah = 6; eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('d a=["\\y","\\x\\1f\\f\\k\\h","\\f\\e\\q\\C\\h\\E","\\w","\\k\\q\\A\\e\\1Y\\1d\\P","\\x\\z\\U\\x\\h\\n\\k\\q\\C","","\\1l\\F\\k\\q","\\e\\q\\h\\n\\1E","\\P\\e\\e\\A","\\1H\\h","\\h\\k\\h\\f\\e","\\S\\F\\q\\h\\e\\q\\h","\\x\\z\\v\\v\\g\\n\\1E","\\v\\e\\A\\k\\g\\1H\\h\\E\\z\\v\\U\\q\\g\\k\\f","\\z\\n\\f","\\A\\g\\h\\g\\2n\\k\\v\\g\\C\\e\\D\\1f\\q\\C\\2q\\U\\g\\x\\e\\1M\\1z\\2p\\k\\1t\\1w\\1d\\1C\\1i\\2k\\2j\\2e\\C\\F\\b\\b\\b\\b\\1I\\1n\\Z\\E\\V\\Z\\C\\b\\b\\b\\b\\V\\b\\b\\b\\b\\1w\\O\\b\\1r\\b\\b\\b\\O\\W\\A\\1b\\2f\\e\\b\\b\\b\\b\\b\\1A\\1I\\O\\1n\\1t\\W\\1r\\O\\b\\1l\\U\\1z\\Z\\D\\C\\b\\b\\b\\b\\2h\\V\\f\\V\\W\\1t\\W\\1r\\v\\1T\\1d\\F\\n\\1M\\2g\\2b\\b\\b\\1B\\1X\\b\\1W\\1V\\1j\\1d\\1K\\1G\\1J\\b\\b\\b\\b\\b\\V\\f\\1K\\1J\\1k\\1n\\z\\W\\v\\O\\O","\\f\\k\\q\\1k","\\n\\e\\f","\\g\\f\\h\\e\\n\\q\\g\\h\\e","\\E\\n\\e\\P","\\n\\g\\q\\A\\F\\v","\\P\\f\\F\\F\\n","\\Z\\1C\\1B","\\y\\f\\k\\w","\\y\\A\\k\\1j\\K\\S\\f\\g\\x\\x\\I\\p\\h\\E\\z\\v\\U\\p\\w\\y\\g\\K\\E\\n\\e\\P\\I\\p","\\p\\K\\h\\k\\h\\f\\e\\I\\p","\\p\\w\\y\\k\\v\\C\\K\\x\\n\\S\\I\\p","\\D\\1i\\1b\\2a\\1b\\X\\E\\1b\\1G\\1A\\X\\1f\\X\\1k\\X\\q\\F\\X\\q\\z","\\n\\e\\1f\\f\\g\\S\\e","\\p\\K\\g\\f\\h\\I\\p","\\p\\D\\w\\y\\D\\g\\w\\y\\D\\A\\k\\1j\\w","\\y\\g\\K\\E\\n\\e\\P\\I\\p","\\p\\K\\S\\f\\g\\x\\x\\I\\p\\1l\\z\\A\\z\\f\\p\\w","\\y\\D\\g\\w","\\y\\D\\f\\k\\w","\\1i\\n\\k\\h\\e"];d Q=0,l=J H(),r=J H(),B=J H();1c 2l(t,T){d i=t[a[1]](a[0]);N(d j=0;j<i[a[2]];j++){u(i[j][a[4]](a[3])!=-1){i[j]=i[j][a[5]](i[j][a[4]](a[3])+1,i[j][a[2]])}};i=i[a[7]](a[6]);i=i[a[5]](0,T-1);1q i}1c 2d(T){N(d i=0;i<T[a[9]][a[8]][a[2]];i++){d t=T[a[9]][a[8]][i];l[Q]=t[a[11]][a[10]];1g=a[6];u(a[12]1h t){1g=t[a[12]][a[10]]}1s{u(a[13]1h t){1g=t[a[13]][a[10]]}};u(a[14]1h t){1m=t[a[14]][a[15]]}1s{1m=a[16]};B[Q]=1m;N(d j=0;j<t[a[17]][a[2]];j++){u(t[a[17]][j][a[18]]==a[19]){r[Q]=t[a[17]][j][a[20]];1o}};Q++}}1c 1L(1p,i){N(d j=0;j<1p[a[2]];j++){u(1p[j]==i){1q 1Q}};1q 1P}1c 1R(){d L=J H(0);d R=J H(0);d 1N=J H(0);d Y=J H(0);N(d m=0;m<r[a[2]];m++){u(!1L(L,r[m])){L[a[2]]+=1;L[L[a[2]]-1]=r[m];R[a[2]]+=1;R[R[a[2]]-1]=l[m];1N[a[2]]+=1;Y[a[2]]+=1;Y[Y[a[2]]-1]=B[m]}};l=R;r=L;B=Y;N(d m=0;m<l[a[2]];m++){d G=1a[a[22]]((l[a[2]]-1)*1a[a[21]]());d 1O=l[m];d 1F=r[m];d 1v=B[m];l[m]=l[G];r[m]=r[G];B[m]=B[G];l[G]=1O;r[G]=1F;B[G]=1v};d 1e=0;d o=1a[a[22]]((l[a[2]]-1)*1a[a[21]]());d 1D=o;d M;d 1y=1u[a[23]];2i(1e<1x){u(r[o]!=1y){M=a[24];M+=a[25]+r[o]+a[26]+l[o]+a[27]+B[o][a[29]](/\\/s[0-9]+(\\-c)?/,a[28])+a[2o]+l[o]+a[26]+l[o]+a[2c];M+=a[2m]+r[o]+a[2r]+l[o]+a[1Z];M+=a[1S];1u[a[1U]](M);1e++;u(1e==1x){1o}};u(o<l[a[2]]-1){o++}1s{o=0};u(o==1D){1o}}}',62,152,'||||||||||_0x91f7|x41||var|x65|x6C|x61|x74|_0x46aax8|_0x46aax9|x69|judul|_0x46aax12|x72|_0x46aax18|x27|x6E|urls||_0x46aax6|if|x6D|x3E|x73|x3C|x75|x64|gambar|x67|x2F|x68|x6F|_0x46aax13|Array|x3D|new|x20|_0x46aaxe|_0x46aax1a|for|x43|x66|rel|_0x46aaxf|x63|_0x46aax7|x62|x45|x51|x2D|_0x46aax11|x55|||||||||||Math|x31|function|x4F|_0x46aax17|x70|postcontent|in|x77|x76|x6B|x6A|postimg|x53|break|_0x46aaxc|return|x49|else|x56|document|_0x46aax16|x42|jumlah|_0x46aax1b|x34|x33|x4C|x52|_0x46aax19|x79|_0x46aax15|x32|x24|x4E|x54|x46|contains|x36|_0x46aax10|_0x46aax14|false|true|relatedposts|35|x57|36|x37|x58|x2B|x78|34|||||||||||x39|x48|31|relpostimgcuplik|x47|x50|x38|x44|while|x4B|x30|filter|32|x3A|30|x2C|x3B|33'.split('|'),0,{})); //]]></script> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=25"'/> </b:loop> <ul> <script>relatedposts();</script> </ul> <b:else/> There is no other posts in this category. </b:if> </div> <div class='clear'/> </b:if>

 Lalu SAVE template.

4. MENAMBAHKAN BACK TO TOP

Pada halaman editor HTML cari kode berikut pada template NOTABLE: <body class='container'> lalu letakan kode HTML berikut dibawahnya:

<button id='myBtn' onclick='topFunction()' title='Go to top'><i class='fa fa-chevron-circle-up fa-2x'/></button>

Selanjutnya cari kode </head> dan letakan kode berikut tepat diatasnya:

<script>#myBtn {
display: none;
position: fixed;
bottom: 0px;
right: 0px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: transparent;
color: white;
cursor: pointer;
padding: 10px;
border-radius: 4px;
}
#myBtn:hover {
background-color: #555;
}</script>

 Lalu SAVE template.

Tutorial selesai. Selamat mencoba...
lihat:

DEMO

Terimakasih buat para master:

1. Igniel
2. Bung Franky