.jpg)
Senin, 08 Juli 2013
Taretan Mania - Cara Membuat Efek Hover Blockquote Blinking Bulb Pada Blog - Apa kabar Pengunjung Taretan Mania Blog ,, Pada hari pertama bulan Ramadhan ini saya akan membuat Postingan yang 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
Cara Menambahkan ke 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;
}
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;
}
KETERANGAN :
- 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.
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:
Contoh membuat postingan Blockquote
