Halo semua... Setelah lama tidak update, kali ini Bangiz mau berbagi tips dan trik blogging. Yang akan kita bahas kali ini adalah tentang blockquote. Blockquote ini biasanya digunakan untuk memblok kata-kata atau kalimat yang dianggap penting yang mana akan terpisah dari kata lain yang tidak menggunakan blockquote. Untuk contohnya bisa dilihat di bawah ini:
Jika dulu saya membuat tutorial dengan judul diatas, untuk kali ini adalah cara membuat blockquote dengan hover background. Caranya mudah saja, tinggal ikuti cara berikut ini:
1. Masuk Dasbor Blogger > Template > Edit HTML
2. Cari kode ]]></b:skin> (gunakan Ctrl+F) kalau belum tahu letaknya
3. Copy kode berikut dan Paste sebelum/diatas kode ]]></b:skin>
.post blockquote{max-height:350px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ3-uVbr_4lQROXfrwTsEJydUkQzMMlxDHD7zFrVEFn0JQnmWhoF8X28AxO9Q1C_uRYhIJZ1q4duuSvv8rOqVcJ7T889hrfT0_dJGlLlmZ3ko7I4D0iK0HENcULjQn2N2ykqeE4DC-DiA/s1600/1.jpg);
border-top: 2px solid #000000;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
border-radius: 5px;
margin:1em 20px;
padding: 5px;
}
.post blockquote:hover {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4PiJwV4JTrZol3gutpDmYwaxx6DuT_kxnPo7B7PF1Kom0PlahvRcpiLhTmST9fuVRj3AQNU_xANPT_kA1Po2-KpxArfcr08tk3Rd1o6hFUimtEBFrxvYAAt5EpDYMqVVCKyMZthkvGug/s1600/4.jpg);
background-position:center;
background-repeat:repeat;
-moz-box-shadow: 0 0 10px #ff55cc;
-webkit-box-shadow: 0 0 18px #ff55cc;
}
Keterangan:
-> Warna merah adalah URL gambar silahkan ganti dengan URL gambar yang Anda inginkan
-> Warna biru adalah kode warna, untuk kode yang lain bisa lihat disini atau disini
4. Simpan Template dan lihat hasilnya
Selesai, happy blogging.
Judul : Blockquote Hover Background
Deskripsi : Halo semua... Setelah lama tidak update, kali ini Bangiz mau berbagi tips dan trik blogging. Yang akan kita bahas kali ini adalah tenta...
keyword :
Blockquote Hover Background,
blogging,
Tips dan Trik