Membuat Efek Hover Blockquote Blinking Bulb Pada Blog

Membuat Efek Hover Blockquote Blinking Bulb Pada Blog – blockquote sangat diperlukan jika pada sebuah blog yang dikelola tersebut berisi artikel-artikel yang memuat khususnya tentang HTML atau bisa juga untuk teks yang lainnya. Sebenarnya tanpa Membuat Efek Hover Blockquote Blinking Bulb Pada Blog, sesungguhnya juga pada blog yang masih menggunakan template standar atau template asli bawaan blogger juga sudah terdapat fasilitas blockquote. 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. Maka dari itu, untuk membuat efek hover pada blockquote di postingan blog agar lebih terlihat cantik dan rapi maka dibawah ini merupakan tutorial 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. 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 > Lanjutkan lalu centang pada Expands Widget Template.

3. Selanjutnya cari kode ]]></b:skin> gunakan CTRL+F untuk mempermudah pencarian.

4. Setelah ketemu, copy kode berikut ini kemudian letakan tepat di atas atau sebelum kode ]]></b:skin>

blockquote {
background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXswyMri2t42TQfR-dMX9UxygSKyXXI4_aj2VgbjdrN9rPrt_5vLrIbvj5RNW-60OTPuKgcSR7Pq6ThL2GZnTLAgtlbI2S7HaW8dJ04N7eT6hCoCs8TpN-F4ZLEHYLfo6w6FY4Wlwx14IA/w476-h236-no/Faceblog+Evolutions+%25281%2529.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/AVvXsEgHNIPYJo_iNIVV9xyYdQVvcSovemm8ulnZb5V38ygjeIK27Yu1eeQ2Yvz7HrL2w4H3O5FAXVCqtFlRDnaaDMWcCutc6Iq_ATpHVrIUMgRaWg02id-6_9hjFCP0Q1Nl3LW11HquKI2qbddQ/w476-h236-no/Faceblog+Evolutions+%25282%2529.jpg) no-repeat right bottom ;
color:#00ff00;
}

blockquote p {
margin: 0;
padding-top:10px;
}

5. Simpan Template.

Untuk melihat hasil dari blockquote tersebut anda dapat langsung mencoba dengan membuat postingan baru atau bisa juga dengan mengedit postingan lama, kemudian pada teks yang ingin di jadikan kedalam blockquote tinggal di block saja teks tersebut kemudian klik tombol Quote pada bagian toolbar kolom posting selanjutnya tekan tombol Preview maka akan terlihat hasil dari Blockquote Blinking Bulb, untuk cara lebih jelasnya seperti pada gambar berikut ini:

Atau bisa juga jika posting menggunakan mode Compose maka tinggal tuliskan saja <blockquote> sebelum teks dan </blockquote> sesudah teks, sebagai contoh seperti dibawah ini:

<blockquote>Cara Membuat Efek Hover Blockquote Blinking Bulb Pada Blog, agar blockquote pada postingan blog lebih keren dan rapi. Semoga bermanfaat dan selamat mencoba, happy blogging</blockquote>

Maka akan terlihat hasilnya seperti pada demo dibawah ini:

Jika warna Blockquote diatas 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. Bagian pertama dalam kode CSS di atas yaitu blockquote {bla bla bla} merupakan efek pada tampilan normal dan kode kedua yaitu blockquote: hover {bla bla bla} adalah efek hover. 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.