7 langkah menyulap tema sederhana jadi premium (bagian pertama)

Untuk template blogger default versi 2

Yang sedang kita bicarakan adalah cara memodifikasi template bawaan blogspot versi ke-2. Sebagai catatan semenjak tahun 2017 Google telah merilis 4 varian template terbaru yang mendukung atau support versi ke-3 yakni: Contempo, Emporio, Soho dan Terkemuka (Namanya berbeda dalam bahasa Inggris) Saya juga telah memberikan tutorial cara memodifikasinya panjang lebar di dalam blog ini.

1. Menyembunyikan Navbar. 

Pertama masuk ke - Dasbor blog - Tataletak-lalu pilih navbar - buka konfigurasi lalu pilih opsi: OFF.

2. Buang gambar obeng atau "quick edit" pada templat. 

Masuk ke menu pengaturan langsung saja pilih opsi "edit HTML" tekan ctrl+F pada kotak pencarian pastekan kode dibawah ini:

<b:include name='quickedit'/>

Pada tema sederhana akan terjadi hal ini, dimana lambang obeng itu jumlahnya ada beberapa buah sesuai dengan jumlah widget yang terpasang pada tema. Misalnya popular posts, feature, bahkan atribusi. Pokoknya hapus saja semua dengan menekan enter berkali kali pada kotak pencarian. Itu hanya sebagai pedoman bagi blogger pemula untuk mengedit widget mereka, tapi merusak penampilan bagi blogger yang sudah terbiasa ngeblog karena tampak "menganggu, dan tidak profesional".

3. Buat Read more 

Dengan gambar dan snippet (rangkaian kata kata) pada homepage blogger. Homepage adalah tampilan awal atau halaman awal sebuah blog. Tema bawaan sederhana tidak memiliki read more, tema blog secara default menampilkan artikel apa adanya.

Masuk ke pengaturan blogger langsung saja ke "edit HTML" cari kode: </head>

lalu letakan kode dibawah ini diatasnya:

<script type='text/javascript'> var thumbnail_mode = &quot;float&quot; ; summary_noimg = 150; summary_img = 150; img_thumb_height = 80; img_thumb_width = 120; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c}; //]]> </script>

Selanjutnya cari kode <data:post.body/> pilih yang ke-2 kemudian hapus kode tersebut dan ganti dengan kode dibawah ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script> <span class='rmlink' style='float:left'> <a expr:href='data:post.url'><b>Readmore</b> &#8594; <data:post.title/></a></span> </b:if></b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <data:post.body/> </b:if> <b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Preview dulu menggunakan tool HTML editor, jika tidak ada error SAVE.
Sampai disini homepage tema sederhana sudah berubah, namun kita masih membutuhkan menu navigasi yang sederhana, responsive dan ringan.

4. Membuat Menu navigasi responsive.  

Menu responsive dapat menyesuaikan diri baik ketika tampil di desktop maupun pada saat tampil di hape. Kita langsung saja:
Masuk ke pengaturan blogger langsung saja ke menu "edit HTML" cari kode : 
<div class='header-wrapper'>. Pada tema sederhana kode tersebut tidak terlihat walaupun kita telah "mengexpand" semua kode dalam html editor. Jadi cukup letakan saja kode di bawah ini  di atas kode </head> 

<script async='async' src='https://www.gstatic.com/external_hosted/clipboardjs/clipboard.min.js'/>
<style>
body {
font-family: Arial;
}
* {
box-sizing: border-box;
}
.openBtn {
background: white;
border: none;
border-radius:50px;
border-color: transparent;
padding: 10px 15px;
font-size: 20px;
cursor: pointer;
position: fixed;
z-index: 99;
top: 6px;
right:9%;
}
.openBtn:hover {
background: Transparent;
}
.overlay {
height: 62px;
width: 100%;
display: none;
position: fixed;
z-index: 100;
top: 0;
left: 9;
background-color:#DDDDDD;
}
.overlay-content {
position: relative;
top: 4%;
width: 80%;
text-align: center;
margin-top: 10px;
margin: auto;
}
.overlay .closebtn {
position: absolute;
top: 8px;
right: 11%;
padding: 0px 0px 0px 0px;
z-index: 99;
font-size: 40px;
cursor: pointer;
color: #000;
}
.overlay .closebtn:hover {
color: red;
}
.overlay input[type=text] {
padding: 15px;
font-size: 17px;
border: solid;
border-color: transparent;
border-radius:30px;
float: left;
width: 100%;
background: #fff;
height: 56px;
}
.overlay input[type=text]:hover {
background: #fff;
}
.overlay button {
float: left;
width: 10%;
padding: 15px;
background: transparent;
font-size: 17px;
border: none;
cursor: pointer;
}
.overlay button:hover {
background: transparent;
}
</style>
<style>
#myBtn {
display: none;
position: fixed;
bottom: 0px;
right: 0px;
z-index: 99;
font-size: 18px;
outline: none;
background-color: transparent;
color: blue;
cursor: pointer;
padding: 10px;
}
</style><style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
position: fixed;
z-index:99;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: blue;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 99;
position: fixed;
}
.dropdown-content .header {
background: blue;
padding: 16px;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #f0f0f0;
height: 250px;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: &quot;&quot;;
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
height: auto;
}
}
</style>

2. Tambahkan HTML

Masih dalam opsi edit HTML, yakni:

• Masuk ke pengaturan blogspot 
• Pilih Tema/theme
• Pilih edit HTML
• Cari kode <body>

Lalu letakan kode berikut tepat dibawah body:

<div class='navbar'>
<a href='/'>Beranda</a>
<a href='https://www.editblogtema.net'>Blog</a>
<div class='dropdown'>
<button class='dropbtn'>MegaMenu
<i class='fa fa-caret-down'/>
</button>
<div class='dropdown-content'>
<div class='header'>
<h2>Kategori</h2>
</div>
<div class='row'>
<div class='column'>
<h3>Template</h3>
<a href='#'>CSS</a>
<a href='#'>HTML</a>
<a href='#'>JavaScript</a>
</div>
<div class='column'>
<h3>Kisah</h3>
<a href='#'>Separo Hati</a>
<a href='#'>Detak Waktu</a>
<a href='#'>Cerpen</a>
</div>
<div class='column'>
<h3>Tekno</h3>
<a href='#'>Sains</a>
<a href='#'>Teknologi</a>
<a href='#'>Blogging</a>
</div>
</div>
</div>
</div>
</div>
<div style='padding:16px'>
<a class='icon' href='javascript:void(0);' onclick='myFunction()'><i class='fa fa-bars'/></a></div><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...dan tekan enter' size='25' type='text'/></form></div></div>
<button class='openBtn' onclick='openSearch()'><i class='fa fa-search'/></button>

3. Tambahakan JavaScript

Langkah terakhir ini adalah untuk membuat fungsi klik pada tombol pencarian berfungsi dengan baik mau tidak mau saya terpaksa menyertakan JavaScript, kecuali jika sobat tidak menginginkan menu atau tombol pencarian pada ujung kanan Navigasi menu blog sobat, tapi para pembuat template template blog hebat dan premium selalu menertakan kotak dan tombol pencarian untuk melengkapi navigasi template mereka. 

Masih pada opsi edit HTML cari kode </body> dan letakan kode JavaScript berikut tepat diatasnya:

<script>
function openSearch() {
document.getElementById("myOverlay").style.display = "block";
}
function closeSearch() {
document.getElementById("myOverlay").style.display = "none";
}
</script>

Bagian ini selesai Save tema. Mari masuk ke cara menghiasi Navigasi Menu yang telah kita buat:

4. Cara menghiasi Menu Navigasi dengan font Awsome

Nah trik ini penting namun cara pembuatannya cukup sederhana, cukup hanya  menggunakan font awsome. Oleh karena secara default template bawaan blogspot tidak dipasang font awsome, maka harus memasangnya terlebih dahulu. Jadi masuk ke pengaturan blogger.

• Pilih tema
• Pilih edit HTML
• Pada halaman editor HTML yang telah terbuka cari kode </head> dan letakan kode font awsome berikut tepat diatasnya:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"/>

 Save tema.

5. Menambahkan atau memasang font awsome kedalam blog. 

Lihat langkah nomor 4 diatas

6. Gambar tema sederhana yang kami jadikan pilihan pengeditan (template default blogspot versi ke-2

tema sederhana

7 Bersambung ke bagian ke dua...