Panduan lengkap Cara menyulap template Emporio blogger jadi premium!

Untuk template blogger default versi 3

ilustrasi desain template blog
ilustrasi desain template
Ini adalah panduan lengkap cara "mengoprek" template bawaan (default) blogger menjadi beda dan tampak premium. Ikuti secara seksama. Sisanya ada ditangan sobat sendiri...

Template adalah bagian terpenting dari sebuah blog tidak perduli sobat ngeblognya pakai platform Wordpress, Jimdo, Wix atau Blogspot dan lain lain. Tidak perduli sobat memakai template premium berbeli atau hanya sekedar memakai template yang telah tersedia secara default (bawaan) yang disediakan oleh masing masing platform blog. Intinya tanpa template pada saat ngeblog itu bagaimana ya? Pikirkan saja.

Dan template membuat blog menjadi sebuah halaman web yang interaktif, kemampuan sebuah tema yang satu dengan yang lain juga berbeda berbeda: Ada yang cepat loading, ada yang menarik dan mudah di akses, ada SEO friendly dsb.

Dan material material yang dipergunakan dalam pembuatan adalah:
  1. CSS
  2. HTML
  3. JavaScipt
  4. Php
Kuasai dasar dasar saja sobat sudah oke banget buat sekedar buat template apalagi jika:
  • Punya cita rasa seni, klo sobat suka corat coret dinding bikin kaligraf dan suka warna warni artinya sobat sudah punya lho, percaya deh ini tidak akan serumit yang sobat bayangkan. Orang bertalenta seni itu kebanyakan kreatif.
  • Mengerti sedikit saja trik desain, sama saja dengan diatas, tapi harus menggabungkan antara teknik dan seni.
  • Mengerti selera umum user atau pengguna (dikit faham UX atau User Eksperience, UI atau user interface) cukup dengan rajin lihat lihat saja dulu contoh contoh tampilan template milik para pembuat template yang populer. Tiru, modifikasi dan kelak akan menemukan style kita sendiri.

👉Kelebihan template default atau tema bawaan

Kita tidak akan membahas kelebihan template berbeli atau premium. Jelas template template tersebut dibuat oleh pakar koding dan menguasai semua prosedur dan trik web. Mari kita bahas kelebihan template bawaan blogger blogspot saja.

Kelebihan:
  1. Gratis, bebas dipergunakan tidak perlu beli atau membayar
  2. Full opsi Desainer Tema Blogger. 
  3. Bebas melakukan pengeditan walaupun terbatas (tanpa pengatahuan koding) dan tanpa batas (jika memiliki pengatahuan koding)
  4. Bisa di modifikasi melalui HTML editor
  5. Aman karena mengikuti standar yang sudah ditentukan oleh Google
  6. Template terbaru blogspot (Contempo, Emporio, Soho dan Terkemuka) telah memenuhi syarat sebagai template yang responsive dan mobile friendly jadi kita tinggal memodifikasinya saja lagi.

Catatan:

Masih banyak blogger yang melakukan kesalahan karena menggunakan template bawaan blogger model lama namun tidak di modifikasi agar menjadi responsive dan mobile friendly. Google sudah memperingatkan hal ini, bahwa para blogger harus menggunakan template yang responsive dan mobile friendly. Juga dianjurkan meyederhanakan template namun memenuhi kebutuhan blogging kita.

Oke mari lanjutkan. Jika sobat ingin memodifikasi tema melalui Desainer Tema blogger:
  1. Masuk ke pengaturan blogger
  2. Pilih Tema
  3. Pada bagian bawah tema yang muncul ada dua pilihan ("sesuaikan" dan "Edit HTML") pilih "sesuaikan"
  4. Klik dan akan muncul halaman Desainer Tema Blogger seperti gambar dibawah ini:
Designer Tema Blogger
Gambar desainer tema blogger
Kelemahan:
  1. Terlalu standar
  2. Tidak banyak pilihan kecuali mengeditnya melalui editor HTML yang tersedia namun diperlukan pengetahuan dasar script/koding.
  3. Menu navigasi, widget monoton, tidak ada related post secara default, tidak ada gagdet back to top. Dapat di modifikasi melalui halaman editor HTML tapi butuh pengetahuan koding dasar.
Jika ingin mencoba mengedit tema melalui editor HTML blogger:
  1. Masuk ke pengaturan blogger
  2. Pilih Tema
  3. Pada bagian bawah tema yang muncul ada dua pilihan ("sesuaikan" dan "Edit HTML") pilih "Edit HTML"
  4. Klik dan akan muncul halaman editor HTML Tema Blogger seperti gambar dibawah ini:
Halaman editor HTML
Gambar Halama editor HTML blogger
Jadi setelah membaca uraian saya diatas, pada intinya kita bisa memodifikasi template blog bawaan (atau template default blogspot) menjadi premium, sobat boleh percaya dan tidak, banyak template template premium dibuat berdasarkan template bawaan, mereka telah memodifikasinya kalau sobat ingin melihat detailnya coba bandingkan elemen elemennya melalui inspect element pada browser akan terlihat banyak persamaan.

Ya memang, beberapa template terlihat jelas telah di modifikasi navigasinya sedemikian rupa lalu dijual seharga ratusan ribu rupiah. Well itu tidak salah, namanya juga usaha karena itu kita tetap harus menghargai payah dan karya seseorang.

👉Kelebihan Varian tema terbaru blogspot

Template default atau bawaan blogspot terbaru terdiri empat varian dan setiap jenis varian memiliki lima varian lagi dengan warna warna yang berbeda:
  1. Contempo. 5 varian
  2. Soho. 5 varian
  3. Emporio. 5 varian
  4. Terkemuka. 5 varian. (lihat gambar)
4 varian template terbaru blogspot
4 varian template terbaru blogspot
Template ini telah rilis sejak 2017 yang lalu, membawa banyak sekali perubahan, tampilannya yang fresh, responsive dan mobile friendly. Bukan hanya itu kelebihannya dibanding dengan template blogspot yang lebih tua dan klasik template template terbaru ini lebih SEO friendly. Kebanyakan desainer template blogger modern meniru dasar dasarnya. Termasuk template editblogtema yang saya buat  dan sedang saya pergunakan sekarang yang saya buat berdasarkan template urutan ketiga "Emporio". 

Tadinya saya menggunakan template buatan yang saya buat berbasis Contempo dengan sidebar disebelah kanannya, akan tetapi karena saya ingin homepage blog dengan tampilan grid, dan halaman konten menjadi full layaknya kecenderungan tema modern, maka saya akhirnya merombak template emporio berjam jama, pokoknya lama juga deh.

Sebelum itu saya sempat merombak template klasik menjadi menjadi responsive dan mobile friendly, saya pakaikan sementara ke editblogtema sambil menunggu emporio selesai dirombak total - namun tidak terlalu dinamis. Saya tidak kuatir gonta ganti template karena saya sendiri yang buat dan mengukur risiko dan akibatnya terhadap trafik blog.

Keuntungan menggunakan template emporio bagi blogger model tutorial yang sering menampilkan gambar demo besar seperti editblogtema benar benar saya manfaatkan dengan baik. Hasilnya setelah menggunakan template ini konten saya lebih cepat terindex oleh Google. Saya telah membandingkannya dengan template template populer premium  seperti viomag terbaru mas Sugeng (sengaja saya beli dan saya modifikasi sendiri) jujur emporio ini untuk jenis blog model editblogtema masih  menang banyak! Jadi kata siapa template bawaan blogspot itu tidak bagus?

Sekarang mari masuk ke cara merombak template Emporio:

1. Merombak heading agar menjadi lebih dinamis

Mari merombak header template emporio, struktur headernya tidak jauh beda dengan contempo.

Coba sobat cari widget ini dalam struktur header, gunakan saja CTR+F dan kopi-pastekan saja sebagian kode dibawah ini misalnya kopi <b:includable id='title'>, kemudian kenali:
<b:includable id='title'>
<div>
<b:class cond='data:this.imagePlacement == &quot;REPLACE&quot;' name='replaced'/>
<b:include name='super.title'/>
</div>
</b:includable>
Jika sudah ketemu hapus semua kode diatas dan ganti dengan kode dibawah ini:
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:include name='super.title'/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
Selanjutnya cari kode dibawah ini untuk merobah heading pada postingan:
<b:includable id='postTitle' var='post'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title != &quot;&quot;'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
<a expr:href='data:post.link ?: data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
</b:includable>
Hapus dan ganti dengan kode dibawah ini:
<b:includable id='postTitle' var='post'>
<a expr:name='data:post.id'/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
</b:includable>
Sekarang heading blog sudah tampak dinamis, tapi belum cukup untuk membuatnya stabil kita membutuhkan kode css yang harus diletakan di atas ]]></b:skin> berikut kodenya:
.header-widget a, .widget.Header h1 { color: #ffffff; font: bold 45px Roboto, sans-serif; line-height: normal; margin: 0 0 13px; text-align: center; width: 100%; } .item-view .Header a, .sticky .Header h1, .sticky .Header a { font-size: 24px; line-height: 24px; margin: 0; text-align: left; } .item-view .header-widget { text-align: left; margin: 0; } .header-widget { text-align: center; margin: 0; } .centered-top-container.sticky .widget.Header h1 a, .centered-top-container.sticky .header-widget a:visited, .centered-top-container.sticky .header-widget a:hover { color: #757575; } .sticky .Header h1 { color: #757575; } @media screen and (max-width: 800px){ body.collapsed-header .centered-top-container .widget.Header h1, .header-widget, .item-view .header-widget { text-align: center;} body.item-view .widget.Header, body.item-view #header { margin: auto; }}

Anda masih bisa melanjutkan merombak template blogger emporio ini dengan memasang Breadcrump, cari kode dibawah ini:
<b:includable id='main'>
Letaknya biasanya pada widget ID blog 1, bersambung diantara tag atau >....<, untuk mengenalinya tekan titik titik tersebut, hapus saja kode tersebut dan ganti dengan kode dibawah ini:
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span> &#187; <b:loop values='data:post.labels' var='label'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span><b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if> </b:loop> &#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>Uncategories</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>Archive for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.searchQuery'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>All post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>
Lalu gunakan kode berikut untuk merapikan breadcrumb, dan letakan atau di pastekan diatas ]]></b:skin>
.breadcrumbs {
padding-top: 40px;
padding-bottom: 0px;
margin-left: 0px;
padding-left: 40px;
padding-right: 40px;
color: #757575;
background: white;
}
.breadcrumbs a {
color: #757575;
}
@media screen and (max-width:800px) {
.breadcrumbs {
margin-left: 0px;
padding-left: 20px;
padding-bottom: 15px;
padding-right: 20px;
color: inherit;
}
}
.breadcrumbs a:hover {
color: #21b0f7;
}

Pengeditan selesai.

👉MEMASANG RELATED POST

Related post tampak memang penting dan juga mungkin tidak terlalu penting bagi sebuah blog tergantung selera, namun jika sobat ingin memasangnya pada tema emporio, sobat dapat mengikuti langkah berikut, pastekan kode berikut tepat di bawah <data:post.body/>:
<br/><br/><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_
results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
Lalu paste-kan kode dibawah ini tepat di atas </head>:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i];}} relatedTitles = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedTitles.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if>
Bagian ini selesai, sekarang mari kita lanjutkan ke inti tutorial ini yakni cara memasang Menu Navigasi Mega Dropdown buatan editblogtema:

👉Memasang Menu Navigasi (dengan style mega menu)

Nah kalau menu navigasi yang style itu penting agar template blog terlihat premium, menarik dan yang paling penting adalah memudahkan pengunjung menavigasi seluruh konten blog. Tujuannya untuk menuntun pembaca kepada fitur fitur blog yang kita tawarkan.

Sebenarnya saya telah membuat dua jenis menu navigasi:
  1. Navigasi menu dengan opsi dropdown sub-menu plus kotak pencarian
  2. Navigasi dengan MEGA MENU plus kotak pencarian 
Namun mari kita pilih opsi nomor 2 yakni memasang Navigasi MEGAMENU SAJA. Perhatikan proses pembuatannya pada gambar, saya memang memanfaatkan halaman editor W3School untuk menuliskan kode kode sekaligus menguji hasilnya  melalui display pada sebelah kanannya.
function openSearch() { document.getElementById(&quot;myOverlay&quot;).style.display = &quot;block&quot;; }  function closeSearch() { document.getElementById(&quot;myOverlay&quot;).style.display = &quot;none&quot;; }
Saya membuat dan mengedit Mega Menu ini melalui editor online w3school
Contoh atau Demonya adalah blog editblogtema ini sendiri.

Sekali lagi trik ini saya temukan ketika asik mengutak atik mega menu di w3school, lalu saya rombak dan kombinasikan dengan tombol pencarian yang telah saya buat sebelumnya. Mungkin menjadi solusi yang bagus untuk teman teman dan sobat sobat semua dalam pembuatan megamenu. Alasannya adalah:

Pertama: Megamenu ini telah saya buat agar bisa diterapkan ke hampir semua template bawaan (default) blogspot dengan mudah. Saya menerapkannya pada template contempo, template klasik, awsome. sederhana, perjalanan dan emporio.

Kedua: Tidak memerlukan tambahan JavaScript. (Kecuali untuk menu pencariannya)

Ketiga: Kodenya sederhana dan mudah diterapkan murni HTML CSS

Keempat: Navigasinya adalah "Fixed" artinya tetap berada diatas header walaupun halaman atau konten blog di scroll kebawah dan keatas.
Menarik, bukan?

Kelima: Berbeda dengan Tips MegaMenu yang saya tulis sebelumnya, Trik kali ini sudah dapat dan mudah diterapkan langsung ke blog sobat karena sudah saya buat responsive dan mobile friendly.

Gambar dibawah ini ketika megamenu ini saya terapkan ke template Emporio. Tempat Emporio ini bagus karena tampilannya hompagenya adalah grid pada tampilan layar laptop dan desktop:
Mega Menu editblogtema
DEMO
Baiklah kita masuk ke tutorial atau triknya:

1. Tambahakan CSS

  • Masuk ke pengaturan blogspot
  • Pilih Tema/theme
  • Pilih edit HTML
  • Cari kode </head> Kalau sobat masih baru belajar mengedit HTML cobalah berlatih memanfaatkan ctrl+F pada keyboard nanti akan muncul kota dialog diatas sebelah kanan halaman editorial HTML:
halaman editorial HTML blogspot
Gambar halaman editorial HTML blogger
Jadi perhatikan baik baik gambar diatas ya, sobat bisa melakukannya kok. Jangan takut salah, jika perlu back up dulu temanya sebelum menuju ke langkah berikut. Nah jika sudah ketemu kode </head>, copy dan lalu pastekan kode berikut diatasnya:
<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>
Silahkan sobat ganti tulisan yang telah saya sorot (highlight) dengan warna kuning dengan judul sobat sendiri sesuai dengan link atau label blog. Dan ganti tanda tagar (#) dengan link yang terkait dengan Judul yang sobat buat.

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:
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://use.fontawesome.com/releases/
v5.6.3/css/all.css&quot; integrity=&quot;sha384-UHRtZLI+pbxtHCWp1t77Bi1L4Ztiqrq
D80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s
/&quot; crossorigin=&quot;anonymous&quot;/&gt;
 Save tema.
Selanjutnya perhatikan kode HTML dibawah yang membentuk sub-menu Navigasi editblogtema sehingga memiliki ikon berwarna warni:
<button id='myBtn' onclick='topFunction()' title='Go to top'><large> 
👉<i class='fas fa-angle-double-up fa-2x' style='color:#87CEFA;'><!-- icon --></i></large></button>
<div class='navbar'>
<a href='/'>👉<i class='fas fa-hospital-symbol fa-2x' style='color:#FFB6C1;'><!-- icon --></i>ome</a><div class='dropdown'>
<button class='dropbtn'>👉<i class='fab fa-glide fa-2x' style='color:#FFD700;'><!-- icon --></i>uide</button>
<div class='dropdown-content'>
<div class='header'>
<small><h2>https://www.ediblogtema.net</h2></small>
</div>
Contohnya Font awsome yang membentuk ikon pada yang di tunjuk pertama adalah:
<i class='fas fa-angle-double-up fa-2x'></i> namun diberi kode warna style='color:#87CEFA;'><!-- icon --> untuk membentuk "go to the top" pada blog editblogtema ini dan warnanya biru langit muda. (coba scroll konten keatas dan lihat tanda panah yang muncul dibawah)

Contoh berikut adalah: <i class='fas fa-hospital-symbol fa-2x' style='color:#FFB6C1;'><!-- icon --></i>ome</a> yang membentuk Sub-Menu "Home" diatas menu navigasi blog editblogtema ini.  Dan seterusnya.

Lihat contoh sederhana penerapannya pada CodePen saya:
Atau jika ingin melihat demo hasilnya akan terlihat seperti pada display video:

Save tema. Kita lanjutkan ke bagian penutup:


5. Agar tampilan Youtube jadi full pada halaman konten
Secara default seluruh template blogspot hanya akan menampilkan display kecil untuk menayangkan Youtube, sehingga jika sobat bermaksud melengkapi tutorial sobat dengan video untuk memperjelasnya dengan contoh demo, maka hal tersebut harus di modifikasi.
Agar tampilan youtube proporsional dengan konten adalah dengan cara menambahkan JavaScript diatas tag </body> caranya sama saja yakni melalui halaman editor HTML blogspot:
  • Pilih tema
  • Pilih edit HTML
  • Pada halaman editor HTML yang telah terbuka cari kode </body> dan letakan kode JavaScript berikut tepat diatasnya:
var youtube = $('iframe[src*="youtube.com"]');
youtube.each(function() {
$(this).attr('aspectRatio', this.height / this.width).attr('style', 'width:100%');
});
$(window).resize(function() {
youtube.each(function() {
$(this).attr('height', $(this).width() * $(this).attr('aspectRatio'));
});
}).resize();
//]]>
Tidak usah membukanya dengan <script> dan menutupnya dengan </script> karena terlalu banyak tag akan menghambat render. Cukup "tumpangkan saja pada kode yang sudah ada, contoh:
<script>//<![CDATA[// Lazy Load//--kode lazyload yang telah ada sebelumnya--//........................................................................................var youtube = $('iframe[src*="youtube.com"]');
youtube.each(function() {
  $(this).attr('aspectRatio', this.height / this.width).attr('style', 'width:100%');
});
$(window).resize(function() {
  youtube.each(function() {
    $(this).attr('height', $(this).width() * $(this).attr('aspectRatio'));
  });
}).resize();
//]]>
</script>
 Save template.

6. Terakhir. Mengapa memilih emporio?

  1. Modern dan dinamis, 
  2. Tampilan Bergaya muda dan enerjik. Tampilan Grid.
  3. Dapat mudah diatur melalui opsi Desainer tema blogger. 
  4. Sangat responsive dan mobile meskipun tanpa di edit.
  5. Seo ready, ads ready meskipun tanpa diedit karena memang memenuhi ketentuan sisi server google secara default. Karuan dalam beberapa kasus mengalahkan template premium yang banyak dijual.
  6. Aman karena secara default mengikuti sertifikat standard Google yang ketat.
  7. Halaman kontennya penuh sehingga nyaman buat menampilkan gambar ukuran besar. Kebanyakan blogger ternama dunia cenderung menggunakan style atau gaya ini.
  8. Dan banyak lagi
Oke jangan lupa SAVE tema.

Lebih Lengkap jika mengikuti panduan kami:

Ingin mencoba Template Mega Emporio?
Silahkan download melalui Link dibawah ini:

Baca panduan pengeditan khusus: Mega Emporio Versi 1
Tampilannya akan persis seperti demo dibawah ini, sentuh (kalau menggunakan layar sentuh) atau arahkan kursor mouse (kalau menggunakan laptop) untuk menguji navigasi megamenu atau mega dropdownnya, saya membuatnya sampai begadang lho, dan percayalah itulah salah satu yang terbaik hasil pekerjaan yang dapa saya persembahkan kepada sobat semua - sambil saya melatih menulis HTML dan CSS pastinya:
DEMO TEMA1
Atau yang telah dipakai pada blog Anissa:
Navigasi bar dapat dipergunakan untuk mengiklankan situs, adsense sobat secara tidak kentara perhatikan apa yang dilakukan Anissa dengan memasukan gambar berikut link FB dan Instagramnya yang apabila Photonya di klik kita akan teralih ke halaman facebook dan instagramnya
DEMO TEMA2

Perhatian!!!
Jika terjadi error pada pemasangan, tolong jelaskan pada kolom komentar dibawah artikel agar kami dapat dengan segera memperbaikinya. Kami sangat berterimakasih atas segala masukan termasuk kritik yang membangun.

www.editblogtema.net


Comments

  1. A great post!!

    Minal aidin wal faizin

    ReplyDelete
    Replies
    1. Thank you!
      Eid Mubarok, Minal Aidzin Walfaidzin..😊

      Delete
  2. kereeennn, lengkap banget.
    Tapi sebenarnya kalau saya mending dibagi perbagian aja postingannya.
    Biar memudahkan yang baca dan juga menambah performa blog :)

    Saya juga make template bawaan blogger, tapi kayaknya yang simple atau apa ya itu, lupa hahaha

    ReplyDelete
    Replies
    1. Makasih @Reyne Raea (Rey), saya sudah membuat draft (project) agar tulisan bisa auto split jadi 1,2,3 atau halaman 1, halaman 2, halaman 3. Mau saya terapkan sih. Tinggal memastikan dampaknya terhadap SEO sedang menunggu jawaban dari komunitas (programming community)

      Delete
  3. Google suka artikel panjang kata Neil Patel. Tapi klo menurut aku sih capek juga bacanya..

    ReplyDelete
  4. Wah ini lengkap bngt. Mungkin nanti dicoba sendiri dr fitur blogger dehh

    ReplyDelete
    Replies
    1. Ya hasilnya kalau kreatif bisa lebih keren, mas :)

      Delete
  5. Waaah ini mantap, saya penggemar template bawaan yang di modif 😁

    ReplyDelete
  6. Saya banyak belajar nih dari blog ini tentang templete,..mantap mas sharingnya,....saya ingin bertanya mas, terkadang kita daftarkan goole webmaster yetapi kenapa judul artikelnya tidak muncul mas ya,..ha-ha, ada kejadian seperti itu sekali mungkin mas sebagai blogger profesional tahu penyebanya

    ReplyDelete
    Replies
    1. saya bukan blogger professional. Hanya "hobi" nulis, dan mudah-mudahan tidak sembarangan nulis. Menulis berdasarkan kemampuan saja. Kebetulan saya suka koding dan pekerjaan saya di dunia nyata sedikit banyaknya support itu.

      Artikelnya yang tidak muncul di webmaster atau "judulnya" saja? Karena jika artikel muncul tidak perduli tanpa judul artinya sudah terindex. Tapi langka sekali artikel ditulis tanpa judul.

      Jika artikel sebelumnya terindex, lalu artikel lain tidak itu hanyalah masalah "antrian" dan hanya butuh waktu sebelum terindex. Asalkan blog tidak mendapat masalah, ya tunggu saja...

      Delete
  7. blog saya kena jigling mas, jadi saya non aktifkan dulu kolom komentrnya dan semoga aja yang jigling dapat balasan yang setimpal ya,...kudoakan hidupnya enggak pernah berkah,..biarlah mereka menjigling dan biarkan karma mendatangi mereka dan say juga enggak akan bw lagi mungkin dan terima kasih kepada mas dan teman-teman yang selama ini sudah mau berkomentar di blog saya

    saya bukanlah orang yang baik tapi saya akan memberikan yang terbaik, jika mungkin ada kata-kata saya yang menyinggung perasaan dan hati, selama saya bw saya minta maaf dan saya akan tetap ngeblog

    dan bagi para pelaku jigling tunggulah karmanya

    ada tips atasi jigling tidak mas, trafik saya dijigling habis-habis sampai ribuan

    ReplyDelete
    Replies
    1. Jika stats blog di tampilkan sumber lalulintasnya misal yaitu pada sumber lalulintas ada dua jenis terhitung yakni URL perujuk dan situs perujuk: Jingling, maka kita tidak usah terlalu sakit kepala, karena artinya Google tahu dan memisahkan tipe dan kategori klik dan kunjungan. Tapi jika tidak, berarti bukan jingling, melainkan ada yang jahil menegebom dengan alami entah dengan tujuan apa.

      Jingling mudah diatasi karena bukan trit baru, misal dengan memasang script tertentu, kalau tidak salah saya pernah menulis di blog Anissa atau di blog ini lupa...

      Delete
  8. Terima kasih mas atas sarannya

    ReplyDelete

Post a Comment

Ajukan pertanyaan dan berikan detailnya.

Jika ingin komen dengan menyisipkan kode HTML, parse terlebih dahulu kodenya di :
Blogcrowds
Lalu hasil parse pastekan ke dalam kotak komentar. Terimakasih!

pilih pola label berikut:

Show more