Cara Membuat Efek Hover Blockquote Blinking Bulb

Cara Membuat Efek Hover Blockquote Blinking Bulb Pada Blog – Hello Pengunjung Tutorial Belajar Blog Pada Postingan kali ini membahas tentang Efek Hover Blockqoute, Sebenarnya tanpa Membuat Efek Hover Blockquote Blinking Bulb Pada Blog, 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 menarik 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.

Blockquote Sebelum Di sorot

Blockquote Setelah Di sorot

DEMO

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 berikut ini kemudian letakan tepat di atas atau sebelum kode ]]></b:skin>

/*blockquote oktri blog */
blockquote {
background: #000 url(http://i634.photobucket.com/albums/uu66/oktri_2009/blockquoteoktri.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(http://i634.photobucket.com/albums/uu66/oktri_2009/blockquoteoktrihover.jpg) no-repeat right bottom ;
color:#00ff00;
}
blockquote p {
margin: 0;
padding-top:10px;
}
blockquote p {
margin: 0;
padding-top:10px;
}

Ket :

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.

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:

Membuat Efek Hover Blockquote Blinking Bulb Pada Blog

Contoh Membuat Postingan Blockqoute

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 ttd Oktri darmadi</blockquote>