CARA MEMINDAHKAN POSISI THUMBNAIL PADA TEMPLATE CONTEMPO

Sesuai dengan judul, yang harus kalian pilih adalah salah satu dari empat varian template blogger terbaru: Contempo. Contohnya contempo itu defaultnya (bawaan aslinya) memiliki snippet dengan thumbnail (gambar) disebelah kiri, supaya beda kita pindah saja thumbnailnya (gambar) tersebut ke sebelah kanan. Hal hal yang mudah dapat kalian lakukan sambil belajar memodifikasi template dan bahkan kelak bisa meningkat jadi pembuat template!

template contempo, emporio, soho dan notable

Beruntungnya desain layout versi ketiga bertumbu pada CSS, jadi empat varian template blogger terbaru seperti Contempo, Soho, Emporio dan Notable mengandung lebih 60% CSS. Asal kalian teliti, mengutak atik CSS tidak akan menjadi penyebab sakit kepala he he he...

Mari kita mulai...

MEROMBAK TAMPILAN HOMEPAGE: MEMINDAHKAN THUMBNAIL DARI KIRI KE KANAN SNIPPET.

Seperti yang telah kita singgung di atas, thumbnail pada homepage template contempo itu letaknya di sebelah kiri snippet. Thumbnail adalah gambar kecil pada tampilan awal blogger sebelum kita masuk ke halaman konten penuh sebuah web atau sebuah halaman blog. Sedangkan snippet adalah potongan keterangan isi konten sebelum kita membaca konten, artikel atau postingan penuh. Bagaimana kalau kita pindahkan thumbnail itu ke sebelah kanan snippet? Oke setuju.

Posisi thumbnail dari kiri ke kanan snippet template contempo

Masuk ke dasbor pengaturan blogger, pilih tema, lalu pilih Edit HTML. Kalian bisa melakukan hal ini baik pada pengaturan lama dasbor blogger, maupun pengaturan barunya.

Cari kode berikut dibawah:

.post-body .snippet-thumbnail {
float: $(startSide);
margin: 0;
margin-$endSide: 2em;
max-height: 128px;
max-width: 128px;
}

Perhatikan kode yang telah saya sorot kuning diatas, kalian harus merobah perintah $(startSide) menjadi: $(endSide). Atau lengkapnya sebagai berikut:

.post-body .snippet-thumbnail {
float: $(endSide);
margin: 0;
margin-$endSide: 2em;
max-height: 128px;
max-width: 128px;
}

Jadi sekarang kalian tahu: Sintaks pada CSS:float: $ startSide  adalah perintah untuk menempatkan thumbnail sebelum snippet. Sedangkan ketika perintah di rubah menjadi endSide, thumbnail berpindah tempat menjadi ke kanan snippet. Jadi percaya kalau template terbaru itu lebih CSS daripada template-template blogger versi kedua yang lebih tuaan bukan?

Di atas tadi hanya untuk tampilan PC desktop ya...bagaimana dengan tampilan homepage mobile? Nah untuk menghilangkan thumbnail pada tampilan hape dan yang tinggal hanya tampilan thumbnail featured post-nya, maka sekali lagi kalian harus masuk ke pengaturan dasbor blogger seperti pada cara pertam diatas dan pada halaman editor HTML cari kode berikut:

.post-body .snippet-thumbnail img {
height: 40vw;
width: 40vw;
max-height: 115;
max-width: 115;
}

Ganti nilai yang saya sorot kuning (berapapun nilai yang tercantum disana) menjadi 0 (Nol). Jadi akan tampak seperti berikut:

.post-body .snippet-thumbnail img {
height: 0vw;
width: 0vw;
max-height: 115;
max-width: 115;
}

Maka kini tampilan template contempo kalian hanya tinggal snippetnya saja pada tampilan hape! Ini akan membantu mempercepat loading template.

Kalian akan menemukan banyak trik baru merombak, memodifikasi dan merobah tampilan template template terbaru menjadi seperti tampilan yang kalian inginkan sendiri melalui halaman editblogtema, silahkan ketikan saja di pencarian, misalnya contempo, emporio, notable dan soho.

Ingin melihat contoh template contempo yang telah kami rombak habis? Kalian benar benar tidak akan menyangka itu sebagai template contempo lagi. Walaupun aliran dan gaya desainnya masih 'indie' templatenya benar benar sudah hidup dan berubah menjadi PREMIUM!

LIHAT DEMO

Jika kalian ingin mendownloadnya silahkan klik menu download pada navbar di atas blog ini.