Langsung ke konten utama

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:

cara merombak tampilan template blogger terbaru

  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:

pengaturan soho

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:

Komentar

Populer

Cara memperbaiki add numbering dan add bullets yang tidak bisa tampil pada postingan blog

Hal ini terjadi pada tema editblogtema yang pada saat itu kami modifikasi untuk sementara berdasarkan tema sederhana bawaan blogger. Karena pada saat menuliskan beberapa item dalam bentuk daftar atau list ternyata tidak terlihat pada postingan padahal postingan sudah terlanjur di publish. Setelah saya cari di dasbor ada tool yang bernama "Add Numbering atau Numbered List dan Add Bullets atau Bulleted List" yang tidak bekerja. Sudah tentu ini pasti celah kelemahan template, jadi harus segera di perbaiki. Padahal kami tidak membuat template baru, lho. Hanya memodifikasi template tua bawaan dengan tajuk simple atau 'sederhana'. Ketika menulis pada dasbor blog dan di preview sepertinya tidak ada yang salah diatas tool "compose" terdapat add numbering dan add bullets tersebut dan pada saat dilakukan penulisan dalam bentuk list keduanya tampak berfungsi dengan baik, tapi apa yang terjadi pada saat artikel setelah di publish? Maksud menampilkan daftar atau li

PERIHAL GOOGLE PAGERANK dan ranking ALEXA

GOOGLE PAGERANK K alau dengan Google Pagerank jadi ingat saat membuka blogger tahun 2014 waktu itu Blog dengan Google Pagerank tinggi benar benar dijadikan "primadona"nya blogspot. Namun apa yang terjadi segalanya berubah. Google telah melakukan update algoritmanya secara besar besaran, dan kini walaupun pagerank masih penting namun telah berubah menjadi rahasia dapurnya Google. Selama bertahun tahun Google PageRank telah menjadi benchmark yang penting untuk menilai kualitas suatu website namun  pada April 2016 menjadi bulan yang penuh dengan kehebohan bagi komunitas pemasaran digital pada umumnya dan SEO (Search Engine Optimization) khususnya. Berbagai website dan blog terkemuka SEO sedunia banyak yang memberikan komentar mengenai hal tersebut. SearchEngineLand menyebutkan bahwa sejak Jumat, 15 April 2016, tiba tiba saja Google PageRank lenyap dari Google Toolbar! MASIH PENTINGKAH GOOGLE PAGERANK ITU? Ada yang berpendapat Google pagerank masih penting, tetapi tidak

JARINGAN INTERNET DAN TELEKOMUNIKASI TELKOMSEL RUSAK, PELANGGAN SANGAT DI RUGIKAN

Hey teman teman,  Aku di Indonesia sempat mau bikin konten tutorial dan itu seharusnya berjalan dengan baik, kalau tiba tiba saja jaringan internet tidak 'rusak'. Parahnya di tunggu berjam jam tidak juga aktif dari pukul satu atau pukul dua siang tadi. Mood aku buyar, karena ketika aku mendapatkan internet kembali draft aku sudah hilang separoh karena tidak ter-'save' pada saat internet hancur lebur tadi.  Sebagai gantinya aku menulis curhatan ini, maaf ya telkomsel, aku tidak menggunakan jaringan internetmu yang mahal, aku menulis sisi burukmu ini melalui jaringan internet Indosat. Kamu pasti mengerti mengapa aku marah. Karena jaringan internet terputus hingga sore tidak ada tanda tanda kehidupan. Awalnya aku menyangka karena quota internet sudah habis atau kartu halo belum bayar ya...eh gak mungkin! Tanya sama teman teman yang rata rata pengguna telkomsel. Yaaah sama. Mau tidak mau kalau masih terhubung harus beli kartu internet dari operator lain INDOSAT. Benar, dapa