Ini adalah tutorial bagian ke tiga trik dasar merombak tampilan sekaligus meningkatkan performa empat varian template blogger terbaru. Empat varian terbaru template blogger (2017-sampai sekarang) adalah:
- Contempo
- Soho
- Emporio
- Notable
Sedangkan 7 varian template blogger lama (2008-2017) adalah:
- Simple
- Dinamic
- Picture window
- Awesome inc.
- Watermark
- Ethereal
- Travel
Perbedaan:
- Template versi baru responsif dan mobile friendly - template lama tidak, kecuali jika di desain ulang.
- Template terbaru sudah mengusung gaya desain aliran tertentu misal: contempo beraliran indie, soho beraliran fancy, emporio menganut aliran vegea, dan notable mengikuti aliran desain bergaya rockpool.
- 4 varian Template terbaru sudah dilengkapi dengan ikon svg bawaan yang walau terbatas namun cepat tidak menghambat kecepatan loading halaman web. Misalnya menuIcon, shareIcon, closeIcon dll. Sedangkan template lama tidak.
Trik mudah merobah tampilan template Emporio
Template ini cantik jika di beri menu navigasi fixed, yakni navigasi menu blog yang tetap berada di atas header pada saat homepage maupun konten blog di scroll ke bawah dan ke atas.
a.) Merombak atau memperbaiki tampilan mobile featured post
Tampilan featured post template emporio untuk layar hape (mobile) berbeda dengan tampilan pada layar desktop dan laptop yang lebih lebar. Pada tampilan mobile gambar atau thumbnail pada homepage seperti tertutup oleh snippet, nah agar gambar tidak tertutup, kita harus menggeser snippetnya ke bawah melalui cara:
- Masuk ke pengaturan blogger
- Pilih tema
- Pilih Edit HTML dan cari kode css berikut pada halaman editor HTML blogger kalian:
.feed-view .hero.post-wrapper{Pengaturan CSS diatas membuat sebagian Judul Featured post hilang tersembunyi ke dalam header bagian atas. Kalian robah angka 416 menjadi 650, 750, 850, menurut kalian rasa cocok saja.
background-color:$(posts.link.color);
border-radius:0;
height:416px
}
Dengan cara di atas tampilan gambar featured post akan tampil lebih dominan pada sat di buka melalui layar ponsel.
Save template.
b.) Menambahkan Navigasi kustom fixed sekaligus menu pencarian kustom full
Template Emporio juga sangat cocok jika dilengkapi dengan menu navigasi kustom fixed plus menu pencarian. Melalui tutorial ini akan kami tunjukan cara membuat dan menerapkannya, hitung hitung buat latihan koding web mengapa tidak, ya kan.
Caranya:
- Masuk ke pengaturan blogger
- Pilih Tema
- Lalu klik menu titik tiga akan keluar lima menu pilih Edit HTML
1. Tambahkan kode CSS style
Setelah masuk ke halaman editor HTML blogger cari kode </head> dan pastekan kode CSS style berikut tepat di atasnya:
<style> <style type='text/css'>body {margin:0;font-family:IM Fell English}.topnav {position: fixed;z-index: 99;width: 100%;overflow: hidden;background-color:#08088A;}.topnav a {float: left;display: block;color: red; display: block;color: white;text-align: center;padding: 16px 18px;text-decoration: none;font-size: 16px;}.active {background-color:#08088A;font-size 18px;}.topnav .icon {display: none;}.dropdown {float: left;overflow: hidden;}.dropdown .dropbtn {font-size: 16px;outline: 10px;border:none;color: white;padding: 16px 16px;background-color: inherit;font-family: inherit;margin: 0;}.dropdown-content {display: none;position: fixed;background-color: white;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.2);}.dropdown-content a {float: none;color: black;padding: 12px 16px;text-decoration: none;display: block;text-align: left;border: none;}.topnav a:hover, .dropdown:hover .dropbtn {background-color: #555;color: gold;}.dropdown-content a:hover {background-color: #ddd;color: black;}.dropdown:hover .dropdown-content {display: block;}@media screen and (max-width: 800px) {.topnav a:not(:first-child), .dropdown .dropbtn {display: none;}.topnav a.icon {float: right;display: block;}}@media screen and (max-width: 800px) {.topnav.responsive {position: relative;}.topnav.responsive .icon {position: absolute;right: 0;top: 0;}.topnav.responsive a {float: none;display: block;text-align: left;}.topnav.responsive .dropdown {float:none;}.topnav.responsive .dropdown-content {position: relative;}.topnav.responsive .dropdown .dropbtn {display: block;width: 100%;text-align: left;}}body {font-family: Arial;}* {box-sizing: border-box;}.openBtn {background: transparent;border: none;padding: 10px 15px;font-size: 16px;cursor: pointer;position: fixed;z-index: 99;top: 24px;left:70%;}.openBtn:hover {background: #bbb;}.overlay {height: 100%;width: 100%;display: none;position: fixed;z-index: 101;top: 0;left: 0;background-color: rgb(105, 105, 105);background-color: rgb(105, 105, 105, 0.9);}.overlay-content {position: relative;top: 46%;width: 100%;text-align: center;margin-top: 30px;margin: auto;}.overlay .closebtn {position: fixed;top: 1%;left: 86%;font-size: 60px;cursor: pointer;color: white;z-index: 999;}.overlay .closebtn:hover {color: gold;}.overlay input[type=text] {padding: 19px;font-size: 17px;border-bottom: double;border-bottom-color: yellow;border-top: double;border-top-color: yellow;border-left: none;border-right: none;float: center;width: 80%;background: transparent;}.overlay input[type=text]:hover {background: #f1f1f1;position: center:}.overlay button:hover {background: #bbb;}</style>
2. Langkah selanjutnya Tambahkan HTML berikut dan letakan di bawah kode </head>:
<div class='topnav' id='myTopnav'><h1><a class='active' href='/'><b><font color='white'><font face='Arial' size='4'><data:blog.title/></font></font></b></a></h1><a href='https://www.editblogtema.net/search/label/desain'>Desain</a><a href='https://www.editblogtema.net/search/label/panduan'>Panduan</a><div class='dropdown'><button class='dropbtn'>Moreˇ</button><div class='dropdown-content'><a href='https://www.editblogtema.net/search/label/paradox'>Paradox</a><a href='https://www.editblogtema.net/search/label/panduan'>Panduan memodifikasi template</a><a href='https://www.editblogtema.net/search/label/merombak'>Trik dasar merombak template Notable</a><a href='https://www.editblogtema.net/search/label/panduan%20mobile'>Trik mengedit template via mobile</a><a href='https://www.editblogtema.net/search/label/programmer'>Programmer</a><a href='https://www.editblogtema.net/search/label/A.I.'>A.I</a><a href='https://www.editblogtema.net/search/label/kebijkan'> Baca kebijakan halaman</a><a href='/'>Hubungi : adelinasasa@gmail.com</a><a href='https://www.editblogtema.net/search/label/download%20template%20terbaru'>DOWNLOAD TEMPLATE</a></div></div><a class='icon' href='javascript:void(0);' onclick='myFunction()' style='font-size:15px;'><b>☰</b></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...' size='25' type='text'/></form></div></div><button class='openBtn' onclick='openSearch()'><svg style='width:28px;height:28px' viewBox='0 0 24 24'><path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z' fill='white'/></svg></button>
3. Tambahkan Javascritpt
Masih di halaman editor HTML blogger, cari kode </body> dan masukan kode Javascript berikut tepat di atasnya:
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
function openSearch() {
document.getElementById("myOverlay").style.display = "block";
}
function closeSearch() {
document.getElementById("myOverlay").style.display = "none";
}
</script>
Save template.
Sampai disini template emporio Kalian telah berbuah drastis tampilannya, lihat saja Demonya!. Agar tulisan menu terlihat robah warna latar sidebar menjadi gelap atau hitam melalui dasbor blogger. Jika kalian ingin agar tampilan avatar kalian atau avatar penulis tamu secara otomatis tampil di pojok kiri atas setiap postingan, silahkan ikuti postingan kami yang berjudul:
Pada tutorial selanjutnya saya akan menunjukan trik yang lebih seru tentang bagaimana:
- Trik mudah merombak tampilan dan meningkatkan performa template notable
- Trik memasang related post ringan, breadcrum valid HTML dan footer berikut credit yang dapat di terapkan pada ke empat template terbaru blogger.
- Trik merombak tampilan ikon svg bawaan template blogger terbaru
- dll
Trik trik tersebut dapat dengan mudah di terapkan pada template template terbaru blogger dan tentu saja dapat di terapkan ke template blogger yang lebih lama dengan sedikit memodifikasi pengaturan dan penulisan kode kodenya.
(Bersambung...)
Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini!
Share: