PANDUAN MEROMBAK TEMPLATE BLOGGER SOHO

SOHO adalah template terbaru, template ini dapat di rombak dengan mudah karena memiliki pengaturan CSS yang melimpah.

Dalam kesempatan ini saya akan memberikan 6 trik merobah tampilan template Soho, yakni:

ilustrasi template blogger soho redesain

1. Menambahkan photo profile penulis di atas setiap postingan
2. Merobah tampilan ikon menu pencarian menjadi kaca pembesar pada semua ukuran layar. Secara default ikon kaca pembesar hanya tampil pada layar ponsel, sedangkan pada ukuran layar PC laptop apalagi desktop tampilannya akan menjadi kata: 'Search'
3. Mengatur margin konten, lebar konten, dan lebar sidebar
4. Merobah tombol 'Subscribe' atau 'Langganan' menjadi berbentuk ikon Amplop Surat.
5. Cara menghilangkan background gambar kucing pada bagian header template.
6. Cara menghilangkan Judul Recent Posts

Tiga hal diatas cukup signifikan dapat merobah tampilan template SOHO kita menjadi lebih berwibawa dan berkarakter! Mari kita mulai.

1. MENAMBAHKAN PHOTO PROFILE DI BAGIAN ATAS SETIAP HALAMAN POSTINGAN

Ini cocok untuk halaman blog pribadi (personal). Profile yang di sertai nama dan gambar penulis di atas setiap postingan akan meningkatkan kredibilitas sebuah halaman. Seperti yang kalian ketahui, diantara 4 template terbaru yang benar benar memiliki fitur image atau gambar profile penulis di atas setiap postingan hanyalah template notable seperti yang sedang dipakai oleh editblogtema sekarang, dan dengan sedikit pengaturan pada bagian CSS maka gambar profile penulisnya tampil di bagian atas dalam bingkai bulat!

Tiga template lainnya seperti contempo, soho dan emporio tidak memiliki fitur tersebut. Jadi kita harus menyiasatinya. Sekarang kita mencobanya pada template SOHO. 

Gunakan blog percobaan kalian dan masuk kepengaturan blogger:

• Pilih tema
• Klik titik tiga
• Pada menu yang muncul, pilih Edit HTML
  

Langkah pertama: Tambahkan CSS:

(jika kesulitan gunakan kuncipada keyboard dengan cara tekan CTRL+F secara bersamaan dan ketikan kode yang di cari pada kotak pencarian yang muncul):

Perhatikan gambar di atas. Pada halaman editor HTML blogger cari kode </head> dan tambahkan kode CSS berikut tepat di atasnya.

<style> .avatar {
vertical-align: middle;
width: 35px;
height: 35px;
border-radius: 50%;
}
</style>

Kalian dapat merobah dimensi atau ukuran gambar dengan  merobah angka atau nilai pada bagian kode yang saya merahkan, misal: 

width: 35px;

height: 35px;

Maka ukuran gambar avatar kalian akan membesar seukuran itu. 

Langkah Kedua: Tambahkan HTML:

Masih pada halaman editor HTML blogger, dan dengan cara yang sama cari kode berikut:

<span class='fn'>

Pada template SOHO ada terdapat tiga kode yang sama kalian pilih kode yang kedua, karena kode kedua ini berada beberapa baris diatas kode  <data:post.body/> yang hanya satu satunya di dalam template SOHO, lihat posisinya pada gambar berikut:

posisi kode pada halaman editor HTML blogger

Tambahkan kode berikut tepat di bawah kode <span class='fn'> tadi:

 <img alt='#' style='width:30px'/>  

Untuk menampilkan gambar di atas postingan tersebut kalian harus mengunjungi profile blogger diri kalian sendiri seperti contoh :DISINI.

1. Klik 'Tampilkan Ukuran penuh'
2. Setelah di klik akan muncul jendela baru gambar ukuran penuh dengan dominasi latar hitam, copy URL pada bar di atas jendela halaman tersebut. Perhatikan gambar:

cara mengambil URL gambar profile blogger sendiri

Lalu kembali ke kode <img alt='#' style='width:30px'/>   di atas, hapus tanda pagar merah yang di kurung oleh '' (koma) dan pastekan kode yang kalian copy tadi untuk menggantikannya jadi bentuknya akan tampak sebagai berikut:

<img alt='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFAaj_z0DNuv3JCXQ95gixZYjSIGi_aT1wy4gA3PjbYOA-49o1AD9hcuqaxg0d0b37X5VbGsZDNglQhhT5wpTV6V2tpb-i218DU9xL_cv-QeusgFA9O7odU9jo6nXV4zGJEXS3jfHgHkY/s113/steward.jpg' style='width:30px'/>

Save template KLIK dan Lihat DEMO-nya 

2. CARA MENETAPKAN IKON KACA PEMBESAR UNTUK PENCARIAN DI SEGALA UKURAN LAYAR PERANGKAT.

Soho dan Notable memiliki dua tampilan menu pencarian pada setiap ukuan layar yang berbeda. Untuk ukuran layar hape ia tampil dengan ikon kaca pembesar, sedangkan untuk ukuran layar PC-Dekstop dan Laptop dia tampil dengan kata 'Search' agar ia tampil hanya dengan ikon kaca pembesar maka kita harus merobah pengaturan atau deklarasi bagian CSS-nya. Nah caranya sama dengan cara diatas, kalian harus masuk ke bagian editor HTML, cari kode CSS berikut:

.search-expand-text{

Di bawah kodenya ada perintah berikut:

.search-expand-text{
display: block
}

Ganti tulisan block menjadi: none.

Ada dua kode serupa:

.search-expand-text{
display:block
}

Jika kode dibawahnya mendeklarasikan block rubah menjadi none 

Save template.

3. MENGATUR MARGIN KONTEN

Walaupun pengaturannya mudah kaerna dapat dilakukan tanpa melalui halaman editor HTML blogger, namun banyan juga yang tidak mengerti bahwa margin penting agar tampilan halaman blog SOHO tidak kocar kacir pada ukuran layar yang berbeda beda. 

• Masuk ke pengaturan/Dasbor blogger
• Pilih Tema
• Klik Sesuaikan (atau Customize)
• Setelah masuk ke halaman Desainer Tema Blogger, pilih 'Lanjutan'
• Pilih lebar

Di sana akan tampil 3 pilihan pengaturan lebar:

1. Lebar sidebar (saya atur 284px)
2. Lebar konten (saya atur 990px)
3. Margin konten (saya atur maksimal 1000px)

Perhatikan petunjuk gambar berikut di bawah ini:

pengaturan lebar margin konten template soho

Setelah itu SAVE template. Selesai.

4. MERUBAH TOMBOL SUBSCRIBE BAWAAN MENJADI AMPLOP SURAT

Langkah pertama:

1. Masuk ke pengaturan blogger
2. Pilih Tema
3. Tekan tombol 'Sesuaikan'
4. Pilih 'Lanjutan'
5. Pada muncul yang dikanan scroll hingga ke bawah dan pilih 'Tambahkan CSS'

Kotak Blanko Tambahkan CSS

Setelah muncul kotak blanko kosong, lalu copy kode CSS berikut:

.subscribe-button{
background:none;
border:0;
margin:0;
outline:0;
padding:0;
color:white;
cursor:pointer;
display:inline-block;
font:$(body.action.font.small);
line-height:20px;
margin:0;
text-transform:uppercase;
word-break:normal
}

.subscribe-button{
border: 0;
margin:0;
outline:0;
padding:0;
color:white;
font:$(body.action.font.small);
line-height:20px;
margin: 1;
background: none;
}

Langkah kedua:

Masih di dalam halaman editor HTML cari kode berikut:

 <button class='subscribe-button'><b:eval expr='data:messages.subscribe'/></button>

Yang perlu kalian ketahui kode yang saya merahkan adalah adalah kode tombol yang akan muncul mempresentasikan 'Langganan' atau 'Subscribe' secara default. Kalian bisa menghapusnya dan menggantinya dengan kata kata, Misal: 'Kirim Email' dsb. Akan tetapi jika kalian ingin ia berbentuk ikon amplop,  maka kalian harus menghapusnya dan lalu menggantinya dengan kode ikon SVG berikut:

<svg style="width:34px;height:34px" viewBox="0 0 24 24">
<path fill="brown" d="M22 20H18V23L13 18.5L18 14V17H22V20M20 4H4A2 2 0 0 0 2 6V18A2 2 0 0 0 4 20H11.35A5.8 5.8 0 0 1 11 18A6 6 0 0 1 22 14.69V6A2 2 0 0 0 20 4M20 8L12 13L4 8V6L12 11L20 6Z" />
</svg>

Agar warna amplop sesuai dengan selera kalian, kalian dapat merobah deklarasi warna 'brown' menjadi yellow, red, black dst.

 5. TRIK MENYEMBUNYIKAN DAN ATAU MENGHAPUS BACKGROUND GAMBAR "KUCING" PADA HEADER TEMPLATE SOHO

1. Masuk kepengaturan blogger
2. Pilih tema/theme
3. Pilih "edit HTML"
4. cari kode berikut:

 body.homepage-view .hero-image.has-image{
background:$(body.background);
background-attachment:scroll;
background-color:$(body.background.color);
background-size:cover;
height:0vw;
max-height:65.5vh;
min-height:75px;
width:100%
}

Robah nilai yang saya merahkan menjadi 0 (nol) untuk menghilangkan space atau ruang tersisa yang meninggalkan jarak dari header ke konten. Namun jika ingin menghapus bukan menyembunyikannya maka setelah melalui langkah berikut anda harus masuk kembali kepengaturan blog:

1. Pilih tema/theme
2. Pilih "sesuaikan"
3. Pilih latar belakang atau background
4. Setelah muncul kotak gambar dibawahnya pilih "hapus background"
5. Save tema 

6. Menghilangkan Judul Recent Posts?

Judul ini tampil pada homepage dan menurut saya mengurangi kerapian tampilan blog pada pandangan pertama. Untuk menghilangkannya, masuk kepengaturan>pilih tema>pilih edit HTML, di dalam editor HTML blogger cari 2 buah  kode berikut :

Letaknya ada dibawah:

 <!-- Display title on homepage -->
<b:if cond='data:posts.any and data:view.isHomepage'>
<h3 class='title'><data:messages.latestPosts/></h3>

Hapus kode yang di merahkan ya...
Selanjutnya cari kode kedua yang sama, letaknya:

    <!-- Display title on homepage -->
          <b:if cond='data:posts.any and data:view.isHomepage'>
            <h3 class='title'><data:messages.latestPosts/></h3>

Hapus kode yang di warnai merah saja. Save tema.

Save template, sekali lagi lihat DEMO

Jika kalian masih ingin menambahkan related post, breadcrumbs dll kalian bisa mendapatkannya melalui blog ini...