Bermula dari ketertarikan saat melihat adanya bentuk kotak persegi panjang warna merah pada matched content Google Adsense Auto Ads yang membuat saya kemudian bisa menemukan cara menampilkan bentuk kotak dengan CSS pada Blogger.
Keberadaan kotak persegi warna merah pada matched content itu saya pikir cukup efektif untuk menarik perhatian pembaca, dan selanjutnya membuat mereka meneruskan membaca kalimat yang ada di belakangnya. Hal yang memang diharapkan.
Tanpa adanya kotak merah itu saya kira akan jauh lebih banyak pengunjung yang melewatkan begitu saja informasi yang ada di sana, oleh sebab format tulisannya g memanmenyatu dengan format yang ada pada tulisan lainnya. Tidak menonjol, dan tidak ada kontras yang mencolok mata.
Oleh karena saya memilih untuk memasang matched content secara manual, tidak dengan menggunakan Auto Ads, maka saya perlu membuat CSS yang akan menampilkan kotak merah dengan bentuk yang kurang lebih akan terlihat sama seperti kotak matched content pada Auto Ads.
Untuk menampilkan bentuk kotak dengan CSS pada Blogger, lakukan langkah sebagai berikut:
Warna merah atau warna mencolok lainnya lebih disukai ketimbang warna hitam misalnya, oleh sebab tujuan dimunculkannya kotak adalah untuk menarik perhatian pembaca, dan warna mencolok akan memberi hasil yang lebih memuaskan.
Keberadaan kotak persegi warna merah pada matched content itu saya pikir cukup efektif untuk menarik perhatian pembaca, dan selanjutnya membuat mereka meneruskan membaca kalimat yang ada di belakangnya. Hal yang memang diharapkan.
Tanpa adanya kotak merah itu saya kira akan jauh lebih banyak pengunjung yang melewatkan begitu saja informasi yang ada di sana, oleh sebab format tulisannya g memanmenyatu dengan format yang ada pada tulisan lainnya. Tidak menonjol, dan tidak ada kontras yang mencolok mata.
Oleh karena saya memilih untuk memasang matched content secara manual, tidak dengan menggunakan Auto Ads, maka saya perlu membuat CSS yang akan menampilkan kotak merah dengan bentuk yang kurang lebih akan terlihat sama seperti kotak matched content pada Auto Ads.
Untuk menampilkan bentuk kotak dengan CSS pada Blogger, lakukan langkah sebagai berikut:
- Login ke Blogger > Theme > Edit HTML. Back up Theme sebelum melakukan perubahan.
- Cari atau scroll ke bawah sampai menemukan
]]></b:skin> - Salin dan lekatkan css berikut tepat sebelum
]]></b:skin>
#kotak{width: 7px;height:13px;background: red;margin: 15px 5px 0;display:inline-block}
Ganti angka pada width dan height untuk menampilkan bentuk yang dikehendaki. - Tepat di depan kalimat yang hendak ditampilkan bentuk kotak, sisipkan kode berikut ini :
<div id='kotak'/> atau <div id='kotak'></div>
Bentuk yang akan muncul adalah seperti ini : - Save
Warna merah atau warna mencolok lainnya lebih disukai ketimbang warna hitam misalnya, oleh sebab tujuan dimunculkannya kotak adalah untuk menarik perhatian pembaca, dan warna mencolok akan memberi hasil yang lebih memuaskan.
Sponsored Link
Sponsored Link
Sponsored Link
Bagikan ke:
Facebook, Twitter, WhatsApp, Telegram, Email. Print!.