Hallo Semua, Setelah saya lama tidak post kira-kira 1 tahun kali ini saya akan memberikan tutorial cara membuat blockquote keren v.1 dipostingan, yang pastinya lebih keren dan agar pengunjung menjadi betah diblog sobat, selain keren blockquote ini memiliki efek hover dan perubahan warna saat mouse menyentuh blockquotenya. cara membuatnya tidak susah dan gampang untuk ditiru. Untuk melihat demonya nih saya ksih: Contohnya Seperti ini:
Gimana?? Berminat dan tertarik? Oke, langsung saja saya kasih tahu caranya:
- Login Blogger
- Template >> Edit Html
- Lalu, Kita Masukkan Kode CSSnya Dahulu, Cari Kode ]]>
.post blockquote { font-size: 15px;font-family: georgia;font-weight: normal; background-color: #000000; color: #FFFFFF; margin: 5px 10px; padding: 20px 20px 20px 20px; border: 2px dotted lightgrey; border-radius: 10px; box-shadow: -1px -1px 12px 4px blue; transition: background-color .777s; -webkit-transition: background-color .777s; -moz-transition: background-color .777s; -o-transition: background-color .777s; -ms-transition: background-color .777s; } .post blockquote:active { background-color: white ; color: #000; } .post blockquote { background: black; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 10px 45px; font-size: 0.9em; font: italic 1.2em Georgia, "Times New Roman", Times, serif; } .post blockquote p { margin: 0; padding-top: 10px; }
Keterangan:
- Jika Sobat ingin mengganti warnanya bisa diganti pada kode background-color: white ; color: #000;
- Jika Sobat ingin menambahkan Efek Hovernya Silahkan Letakkan Kode dibawah ini diatas .post blockquote:active
.post blockquote:hover { background-color: darkgreen ; color: #fff; }
Terakhir, Simpan.
Silahkan Lihat Hasilnya Sendiri... Demikian Artikel yang dapat saya sampaikan, jika ingin shared artikel ini silahkan Tulis Sumbernya XD Jika ada yang ingin ditanyakan silahkan komentar.
