Membuat Efek Hover Blockquote Blinking Bulb di Blog

Sebenarnya sih,Blockquote di blogger sendiri sudah ada pada blog yang masih menggunakan template standar atau template asli bawaan blogger. Namun blockquote pada template yang masih default blogger tersebut hanya mamberikan fasilitas blockquote yang masih murni atau bisa dikatakan blockquote sederhana, karena masih standar dan belum memiliki efek apapun pada blockquote tersebut.dan kali ini saya  Untuk lebih jelasnya, berikut adalah bagaimana Cara Membuat Efek Hover Blockquote Blinking Bulb Pada Blog :

1. Login ke blogger.
2. Kemudian klik Template >> Edit HTML
3. Selanjutnya cari kode ]]></b:skin> gunakan CTRL+F untuk mempermudah pencarian.
4. Setelah ketemu, copy kode dibawah ini kemudian letakkan tepat di atas atau sebelum kode ]]></b:skin>

blockquote { background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEIZDQHdD_2kCRycBrQHHmOYjxxGjPOr86SL8NazyXt38NZ1mexRlWxFGn5GWz0t_rK6hHg3uCx5RoCbEeu9-l2JIuoCsRsFJHGyaxCgfCPt8cirbdR-WX4cJo_c1GlJv4icaSXcu6kCU/s1600/Blockquote-wahyu-only-gelap.jpg) no-repeat right bottom ; margin: 0 20px; padding: 20px 70px 20px 20px; color:#595959; font:Courier new; border:1px solid #DDD; } blockquote:hover { background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1DS-_XUfhhd8AsYUWF-_MmQbqKmWrS8Dun6Yc4mmIjadWajvrS3eiq8TAN9T2-nskNzNOTxHddTEPmZ3-8nw8w6cTRg5IifM6pLni8bwPEgy1Z4uXCdbjoVmEkEmBmzh51rtcXGHMhyphenhyphenM/s1600/Blockquote-wahyu-only-terang.jpg) no-repeat right bottom ; color:#00ff00; } blockquote p { margin: 0; padding-top:10px; }

  5. Simpan Template.
Tutorial diatas Adalah untuk membuat efek pada blockquote akan menyala saat di sorot mouse layaknya seperti lampu didalam ruangan dan akan terlihat gelap jika mouse diarahkan menjauh dari blockquote.
dan untuk memunculkan pada teks yang ingin di jadikan kedalam blockquote tinggal di block saja teks tersebut kemudian klik tombol Quote pada bagian toolbar kolom posting.

Apabila warna blockquot tersebut kurang sesuai dengan warna blog yang anda gunakan, maka silahkan custom sendiri. Anda dapat menggunakan efek yang sama dengan mengubah background, warna font atau warna border, dll.

Jadi Anda dapat dengan mudah menyesuaikan jenis font dan warna border serta warna background untuk menciptakan mouse efek hover. Anda dapat merubah menggunakan background lain jika anda inginkan dengan cara mengganti kedua link background, Background di link berwarna merah muncul pada mouse hover dan background kedua di link biru muncul ketika mouse menjauh dari blockquote tersebut.

Nah, Mudah bukan sobat,, Demikian ulasan saya tentang Cara Membuat Efek Hover Blockquote Blinking Bulb di Blog, silahkan dicoba di Blog sobat,Tapi sebelum itu Tinggalkan Jejak dulu ya...