Cara merombak tampilan template blogger soho 2

Ini adalah tutorial bagian ke dua trik dasar merombak tampilan sekaligus meningkatkan performa empat varian template blogger terbaru. Empat varian terbaru template blogger (2017-sampai sekarang)  adalah:

1. Contempo
2. Soho
3. Emporio
4. Notable

Sedangkan 7 varian template blogger lama  (2008-2017) adalah:

1. Simple
2.  Dinamic
3. Picture window
4. Awesome inc. 
5. Watermark
6. Ethereal
7. Travel

Perbedaan:

1. Template versi baru responsif dan mobile friendly - template lama tidak, kecuali jika di desain ulang. 
2. 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. 
3. 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 soho

Template Soho adalah template yang paling keren tampilan mobilenya (jika blog kalian di buka dari hape - mobile) Alih alih melengkapinya dengan menu atas menggunakan wdget pagelist, Saya menyarankan lebih baik membuat menu samping agar tampilan mobilnya lebih maksimal. Lihat Demo

a.) Header.

Template soho memiliki  header yang lebar dan tinggi dengan ciri khas gambar kucing pada varian pertamnya. Jika kalian tidak menyukai tampilan gambar pada header tersebut kita bisa menghapus atau menggantinya. Jika ingin menghapusnya cukup lakukan hal berikut:

1. Masuk kepengaturan blogger
2. Pilih tema
3. Pilih 'Sesuaikan'
4. Dan akan muncul pengaturan pada sebelah kiri dasbor pilih salah satu: Hapus atau Ganti Gambar.

Dengan asumsi kalian memilih hapus template menjadi lebih enteng dan lebih mudah mengatur halaman yang akan dijadikan navigasi menu blog:

b.) Menyamakan tampilan ikon pencarian (search icon) pada semua kuran layar gagdet

Template soho memiliki dua tampilan berbeda menu atau icon pencarian pada layar gagdet dengan ukuran yang berbeda.

 Pada ukuran layar hape menu pencarian tampil dengan ikon kaca pembesar (magnifier) sedangkan pada layar yang lebih lebar (laptop dan desktop) menu pencarian hanya menampilkan teks 'pencarian'.

Nah jika kalian tidak menyukainya dan ingin agar menu pencarian tampil dengan ikon yang sama baik di hape (mobile) maupun di laptop, kalian dapat merobahnya dengan mudah melalui cara:

1. Masuk ke pengaturan blogger
2. Pilih tema
3. Pilih sesuaikan

Setelah muncul pengaturan pada bagian kiri klik 'lanjutan' atau 'advance' dan pilih menu paling atas dengan arah mata panah kebawah klik dan scroll ke bawah sampai ketemu menu 'Tambahkan CSS' dan klik maka akan muncul blanko CSS kosong, copy kode CSS override yang kami buat di bawah ini:

.search-expand-text{

display:none

}

.search-expand-icon{

Dan lalu pastekan ke dalam blanko CSS kosong tadi. SAVE.

C. Menambahkan menu sidebar

1. Masuk ke pengaturan blogger
2. Pilih tataletak (layout)
3. Klik Pada layout kiri nomor dua dari atas
4. Tambahkan gagdet/widget
5. Pilih HTML/Javascript, beri judul navbar atau Navigasi Menu atau di kosongkan saja.

Pada blanko kosong HTML/Javascript yang keluar, copy dan pastekan kode berikut:

<style>
body {
margin: 0;
font-family: "Lato", sans-serif;
}
.sidebar {
margin: 0;
padding: 0;
width: 200px;
background-color: transparent;
position: relative;
height: auto;
overflow: auto;
}
.sidebar a {
display: block;
color: white;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: transparent;
color: white;
float: center;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 0px;
padding: 1px 16px;
height: 1000px;
}
@media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {float: center;}
div.content {margin-center: 0;}
}


@media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
</style>
<div class="sidebar">
<a class="active" href="#home">MENU</a>
<a href="#blog">Blog</a>
<a href="#download">Download</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>

Save tema. 

Agar tulisan menu terlihat robah warna latar sidebar menjadi gelap atau hitam melalui dasbor blogger.

Pada tutorial selanjutnya saya akan menunjukan trik yang lebih seru tentang bagaimana:

1. Trik mudah merombak tampilan dan meningkatkan performa template emporio
2. Trik mudah merombak tampilan dan meningkatkan performa template notable 
3. Trik memasang related post ringan, breadcrum valid HTML dan footer berikut credit yang dapat di terapkan pada ke empat template terbaru blogger.

(Bersambung....)

 Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share: