4 varianTemplate terbaru milik blogspot blogger memiliki banyak sekali kelebihan: Kemudahan mengedit dan memkustomisasi template, kaya dengan style dan warna. Cobalah!
Ini adalah panduan lengkap cara "mengoprek" template bawaan (default) blogger menjadi beda dan tampak premium. Ikuti secara seksama. Sisanya ada ditangan sobat sendiri...
Bagian Isi:
Kelebihan template bawaan blogger
Kelebihan varian terbaru template blogger
Merombak heading blogger agar dinamis
Memasang related post
Memasang menu navigasi
Menambahkan CSS
Menambahkan HTML
Menambahkan Javascript Langkah merubah Desain Template blogger:
(Menggunakan HTML untuk mengubah desain blog)
Login ke Blogger.
Pilih blog untuk diperbarui.
Di menu sebelah kiri, klik Tema.
Di sebelah kanan agak keatas ada ikon tiga titik klik dan, klik Edit HTML.
Buat perubahan yang Kalian inginkan.
Klik Simpan tema.
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 "peralatan" yang dipergunakan dalam pengeditan atau pembuatan adalah:
CSS (wajib)
HTML (wajib)
JavaScipt (bisa wajib dan bisa opsional)
Php (opsional)
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:
Gratis, bebas dipergunakan tidak perlu beli atau membayar
Full opsi Desainer Tema Blogger.
Bebas melakukan pengeditan walaupun terbatas (tanpa pengatahuan koding) dan tanpa batas (jika memiliki pengatahuan koding)
Bisa di modifikasi melalui HTML editor
Aman karena mengikuti standar yang sudah ditentukan oleh Google
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:
Masuk ke pengaturan blogger
Pilih Tema
Pada bagian bawah tema yang muncul ada dua pilihan ("sesuaikan" dan "Edit HTML") pilih "sesuaikan"
Klik dan akan muncul halaman Desainer Tema Blogger seperti gambar dibawah ini:
Kelemahan:
Terlalu standar
Tidak banyak pilihan kecuali mengeditnya melalui editor HTML yang tersedia namun diperlukan pengetahuan dasar script/koding.
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:
Masuk ke pengaturan blogger
Pilih Tema
Pada bagian bawah tema yang muncul ada dua pilihan ("sesuaikan" dan "Edit HTML") pilih "Edit HTML"
Klik dan akan muncul halaman editor HTML Tema Blogger seperti gambar dibawah ini:
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:
Contempo. 5 varian
Soho. 5 varian
Emporio. 5 varian
Terkemuka. 5 varian. (lihat gambar)
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:
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 == "REPLACE"' 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 != ""'>
<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 != "item"'>
<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 == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span><data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<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> » <b:loop values='data:post.labels' var='label'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + "?&max-results=8"' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span><b:if cond='data:label.isLast != "true"'> » </b:if> </b:loop> » <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span>Uncategories</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <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> » <span><data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span>All post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <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 == "item"'>
<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 != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_
results_labels&max-results=5"' 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 == "item"'>
<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:
Navigasi menu dengan opsi dropdown sub-menu plus kotak pencarian
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.
BLOGSPOT MEGA MENU SOLUSI TRIKS
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:
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:
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: "";
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'>×</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:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/
v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4Ztiqrq
D80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s
/" crossorigin="anonymous"/>
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.
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?
Modern dan dinamis,
Tampilan Bergaya muda dan enerjik. Tampilan Grid.
Dapat mudah diatur melalui opsi Desainer tema blogger.
Sangat responsive dan mobile meskipun tanpa di edit.
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.
Aman karena secara default mengikuti sertifikat standard Google yang ketat.
Halaman kontennya penuh sehingga nyaman buat menampilkan gambar ukuran besar. Kebanyakan blogger ternama dunia cenderung menggunakan style atau gaya ini.
Dan banyak lagi
Oke jangan lupa SAVE tema.
Lebih Lengkap jika mengikuti panduan kami:
Cara mengedit template solapink
Cara mengedit Template contempo
Cara mengedit template emporio (Panduan lengkap)
Cara mengedit template simpel (akan kami sediakan) Ingin mencoba Template Mega Emporio?
Silahkan download melalui Link dibawah ini:
Ini adalah panduan lengkap cara "mengoprek" template bawaan (default) blogger menjadi beda dan tampak premium. Ikuti secara seksama. Sisanya ada ditangan sobat sendiri...
Bagian Isi:
Kelebihan template bawaan blogger
Kelebihan varian terbaru template blogger
Merombak heading blogger agar dinamis
Memasang related post
Memasang menu navigasi
Menambahkan CSS
Menambahkan HTML
Menambahkan Javascript Langkah merubah Desain Template blogger:
(Menggunakan HTML untuk mengubah desain blog)
Login ke Blogger.
Pilih blog untuk diperbarui.
Di menu sebelah kiri, klik Tema.
Di sebelah kanan agak keatas ada ikon tiga titik klik dan, klik Edit HTML.
Buat perubahan yang Kalian inginkan.
Klik Simpan tema.
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 "peralatan" yang dipergunakan dalam pengeditan atau pembuatan adalah:
CSS (wajib)
HTML (wajib)
JavaScipt (bisa wajib dan bisa opsional)
Php (opsional)
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:
Gratis, bebas dipergunakan tidak perlu beli atau membayar
Full opsi Desainer Tema Blogger.
Bebas melakukan pengeditan walaupun terbatas (tanpa pengatahuan koding) dan tanpa batas (jika memiliki pengatahuan koding)
Bisa di modifikasi melalui HTML editor
Aman karena mengikuti standar yang sudah ditentukan oleh Google
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:
Masuk ke pengaturan blogger
Pilih Tema
Pada bagian bawah tema yang muncul ada dua pilihan ("sesuaikan" dan "Edit HTML") pilih "sesuaikan"
Klik dan akan muncul halaman Desainer Tema Blogger seperti gambar dibawah ini:
Kelemahan:
Terlalu standar
Tidak banyak pilihan kecuali mengeditnya melalui editor HTML yang tersedia namun diperlukan pengetahuan dasar script/koding.
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:
Masuk ke pengaturan blogger
Pilih Tema
Pada bagian bawah tema yang muncul ada dua pilihan ("sesuaikan" dan "Edit HTML") pilih "Edit HTML"
Klik dan akan muncul halaman editor HTML Tema Blogger seperti gambar dibawah ini:
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:
Contempo. 5 varian
Soho. 5 varian
Emporio. 5 varian
Terkemuka. 5 varian. (lihat gambar)
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:
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 == "REPLACE"' 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 != ""'>
<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 != "item"'>
<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 == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span><data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<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> » <b:loop values='data:post.labels' var='label'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + "?&max-results=8"' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span><b:if cond='data:label.isLast != "true"'> » </b:if> </b:loop> » <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span>Uncategories</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <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> » <span><data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span>All post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <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 == "item"'>
<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 != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_
results_labels&max-results=5"' 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 == "item"'>
<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:
Navigasi menu dengan opsi dropdown sub-menu plus kotak pencarian
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.
BLOGSPOT MEGA MENU SOLUSI TRIKS
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:
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:
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: "";
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'>×</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:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/
v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4Ztiqrq
D80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s
/" crossorigin="anonymous"/>
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.
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?
Modern dan dinamis,
Tampilan Bergaya muda dan enerjik. Tampilan Grid.
Dapat mudah diatur melalui opsi Desainer tema blogger.
Sangat responsive dan mobile meskipun tanpa di edit.
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.
Aman karena secara default mengikuti sertifikat standard Google yang ketat.
Halaman kontennya penuh sehingga nyaman buat menampilkan gambar ukuran besar. Kebanyakan blogger ternama dunia cenderung menggunakan style atau gaya ini.
Dan banyak lagi
Oke jangan lupa SAVE tema.
Lebih Lengkap jika mengikuti panduan kami:
Cara mengedit template solapink
Cara mengedit Template contempo
Cara mengedit template emporio (Panduan lengkap)
Cara mengedit template simpel (akan kami sediakan) Ingin mencoba Template Mega Emporio?
Silahkan download melalui Link dibawah ini:
A great post!!
BalasHapusMinal aidin wal faizin
Thank you!
HapusEid Mubarok, Minal Aidzin Walfaidzin..😊
kereeennn, lengkap banget.
BalasHapusTapi 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
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)
HapusGoogle suka artikel panjang kata Neil Patel. Tapi klo menurut aku sih capek juga bacanya..
BalasHapusWah ini lengkap bngt. Mungkin nanti dicoba sendiri dr fitur blogger dehh
BalasHapusYa hasilnya kalau kreatif bisa lebih keren, mas :)
HapusWaaah ini mantap, saya penggemar template bawaan yang di modif 😁
BalasHapusSaya 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
BalasHapussaya 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.
HapusArtikelnya 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...
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
BalasHapussaya 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
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.
HapusJingling 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...
Terima kasih mas atas sarannya
BalasHapuswaduh kok pusing sendiri. ngeblog adsense udah setahun tapi masih blm bisa koding, jadi malu sendiri saya baca artikel ini... serasa bagai lagit dan bumi....
BalasHapuspengn belajar koding tapi mau mulai dari mana ya.. hhhh
Terima kasih atas ilmunya
BalasHapusKeren banget ulasannya 👌👍
BalasHapusInformasinya lengkap disertai kelebihan dan kekurangan template.
Kalau sering berganti2 template, apakah dapat mempengaruhi performa blog, mas ?
Masalahnya adalah: Jika template yang dipakai lebih buruk tentu akan berpengaruh buruk pada halaman blog. Namun jika template yang dipergunakan lebih baik tentu akan membuat halaman blog juga menjadi lebih baik daripada sebelumnya: :)
Hapuslama ga utak atik theme. pas kemarin baca2 dan temen2 blog ada yang bilang, kalo ganti rumah DA turun, lahh jadi bingung kan saya mau ganti theme
BalasHapusTidak selalu benar, mbak. Aku mengganti template blog ini dengan Notable covid19 hasil buatan sendiri (yagn telah di optimasi) DA naik setingkat dari sebelumnya.
HapusArtinya tergantung kualitas template itu. Kalau kualitasnya buruk performa blog pasti akan turun..
Maksih infonya mas
BalasHapusIzin bertanya min, kenapa setiap sya simpan tambahkan kode di tamplete selalu muncul kalimat:
BalasHapus"The widget settings in widget with id AdSense1 is not valid. An internal error occurred. Please try again."
di dalam template ada dua widget adsense yang harus di hapus yakni Adsense1 dan Adsense2
HapusKode widget Adsense1 adalah:
<b:section ads='true' class='vertical-ad-container' id='ads' name='Ads' showaddelement='false'>
<b:widget id='AdSense1' locked='true' title='' type='AdSense' visible='false'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:adCode'>
<data:adCode/>
<b:else/>
<b:include name='defaultAdUnit'/>
</b:if>
</div>
</b:includable>
<b:includable id='defaultAdUnit'>
<b:comment>Clear out style (needs to be a non-empty string)</b:comment>
<b:with value='"/* Done in css. */"' var='style'>
<b:include name='super.defaultAdUnit'/>
</b:with>
</b:includable>
</b:widget>
<b:widget id='AdSense2' locked='true' title='' type='AdSense' visible='false'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:adCode'>
<data:adCode/>
<b:else/>
<b:include name='defaultAdUnit'/>
</b:if>
</div>
</b:includable>
<b:includable id='defaultAdUnit'>
<b:comment>Clear out style (needs to be a non-empty string)</b:comment>
<b:with value='"/* Done in css. */"' var='style'>
<b:include name='super.defaultAdUnit'/>
</b:with>
</b:includable>
</b:widget>
</b:section>
Itu harus di hapus, demikian juga dengan kode Adsense2
bang cek blog gua yang outpezbuk.blogspot.com menampilkan semua postingan
BalasHapusSudah liat, baca yang a atar
HapusTerima kasih banyak, Mas Sofyan tutornya. Sangat bermanfaat. Mungkin
BalasHapusbisa ada tips agar related post, new post dan populer post di emporio bisa
"open in new window" Saya nyari kode dan caranya belum ketemu. Kebetulan
saya pakai emporio. mungkin bisa bantu pencerahannya mas Sofyan. Terima
kasih, dan sukses selalu..
Aduh, mas Boed kayaknya harus sama sama kita cari nih. Mungkin triknya begini: buat dua halaman blog halaman yang satunya benar benar anya utnuk menampilkan widget widget tertentu yang kita inginkan. Homepage halaman blog utama hanya di beri link berikut thumbnail FeaturedPost.
HapusSelain ringan, trik ini dapat mempercepat loading halaman utama...he he he becanda.
Maaf saya belum tahu caranya.
Baik Mas Sofyan, nggak apa-apa, nti tak carinya lagi. Terima kasih, sukses selalu.
HapusPagi Pak,
BalasHapusMau tanya gimana caranya agar huruf judul artikel di theme emporio ini tidak kapital semua? Karena saya bingung editnya di bagian "Sesuaikan" tidak ada untuk mengubahnya.
Terima kasih
Wah seharusnya (normalnya) artikel dapat di atur huruf besar dan huruf kecil, jika terjadi hal tersebut berarti ada masalah pada sumber kode template bisa masuk ke bagian tema-edit HTML dan reset pengaturan? Jika ragu melakukannya bisa minta bantuan teman.
HapusTentu saja saya tidak yakin karena memang harus melihat langsung templatenya
Mana bang link download nya kok ga ada
BalasHapussudah di hapus Google
BalasHapus