Cara merombak tampilan awal kolom komentar untuk template terbaru blogspot murni CSS

Ingat varian terbaru template blogger terbaru adalah: contempo, emporio, soho, notable dan essential. Setiap varian induk masing masing memiliki 5 anak variasi yang dibedakan dengan warna. Kecuali essential, dia adalah template dasar, tanpa di ikuti oleh varian lain. Ia yatim piatu.

Trik merombak tampilan awal antar muka kolom komentar dari keempat template default terbaru adalah, lagi lagi hanya dengan mengandalkan pengaturan CSS.

Trik ini murni hanya dengan CSS. Jadi tidak memberatkan loading, namun ia dapat menampilkan efek animasi warna pada saat di sentuh.

Kodenya adalah:

 <style type='text/css'>

.comment-form iframe{

background:#ffffff; no-repeat bottom right;

border:7px double #CCCCFF;

padding:5px; font:normal 12pt &quot;ms sans serif&quot;, Arial; color:#7EB2AC; width:100%; }

.comment-form iframe:hover{

background:transparent; border:7px solid #FFCCFF;

};no-repeat bottom right; border:7px solid #FFCCFF;

}

.comment-form a{

color:#7EB2AC;</style>

Letakan kode tersebut di atas kode </head>.

Kalian dapat merubah warna dengan mengganti kode kode warna merah. Hal yang akan berubah adalah:

1. Warna latar
2. Warna pembatas (border)
3. Warna pembatas animasi (border)

Jangan lupa SAVE template. Selesai.

Darimana sumber kode ini?

Sumber kode ini berasal dari para blogger lama, mereka telah memasangnya sejak tahun 2008 yang lampau 13 tahun sebelum postingan ini saya tulis dan pada waktu itu di terapkan ke dalam template versi lama pada waktu itu karena saya baru berusia 6 tahun belum mengerti apa apa, (saya lahir tahun 2002). 

Cara pemasangannya juga ribet, tidak se simpel sekarang. 

Saya rombak sedikit pengaturan CSSnya, membuang link latar gambarnya dengan pertimbangan memberatkan loading, dan saya mengabaikan modifikasi pada bagian HTMLnya. Sehingga cara ini menjadi murni hanya dengan pemasangan CSS diatas.

Untuk menambah wawasan teman teman baik juga jika saya beberkan cara pemasangan model lama tersebut, saya berharap hal ini bisa jadi referensi kalian buat belajar trik CSS.

Saya membacanya pada halaman yang sudah cukup tua: 'Mybloggertricks'. Postingan ini telah dirilis tahun 2007 atau pada tahun 2008 yang telah silam.

Pembuat postingannya meminta kita meletakan kode CSS tersebut kedalam halaman editor HTML template blogger tepatnya di atas kode ]]></b:skin:

#mbt-form iframe{
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV8pCA_2QqHXaPMPW3IGdvovTDj0cX2zBknUD3mcYJbg_hT-HYYz9xErYHcbkZkcCZ-gvQxy5IrVhjDvHuAYF-Jnk5JoUjF6dgTguUo-RFwC8J-ywSiCAIZ1-WITm0d8sXMB_ei8gQrJu3/s400/plz-do-not-spam1.gif) no-repeat bottom right;
border:7px solid #C7C7C7;
padding:5px; font:normal 12pt "ms sans serif", Arial; color:#7EB2AC; width:450px; }
#mbt-form iframe:hover{
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGaJbG9r90lpe2QjOLNrjdwGHdP5N9b6jYNUagbWvzyM2jDFkv-X4oG4AnpPnCuVxmHs4kgfc2PzfSkefcNW-84jyVGlgEqL2fdqOqnsfPTk9FiqHWOU3Ttb3kkZUXim1gvJQzTUi-sQ6U/s400/plz-do-not-spam2.gif) no-repeat bottom right; border:7px solid #7EB2AC;
}
#mbt-form a{
color:#7EB2AC;
}

Lalu kita disuruh mencari kode:

<div class='comment-form'>

Tentu saja ada satu pada template versi lama, namun kalian akan mendapatkan 2 kode yang sama pada template baru. Dia menyuruh kita menghapus kode bawaan template tersebut dan menggantinya dengan kode buatannya sendiri:

<div id='mbt-form'> <-----> Perhatikan pengaturan CSS-nya: #mbt-form iframe{

Kalian harus berpikir begini: untuk apa membuat ID baru di dalam HTML, jika class yang ada bisa berinteraksi dengan pengaturan CSS?

Jadi saya merobah deklarasi CSS menjadi begini:

.comment-form iframe{ <-----> Perhatikan CSS yang saya sesuaikan dengan class/ID HTML yang telah ada: <div class='comment-form'>. Bukankah itu sangat worth untuk menghemat pekerjaan?

Kecuali jika pada masa itu mungkin librari HTML tidak sekaya sekarang dan mereka menemukan kendala dalam membuat sebuah deklarasi yang dapat di interaksikan langsung ke dalam HTML? Saya rasa tidak. Tahun berapa CSS3 di rilis? 

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