Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Membuat Efek Hover Blockquote Blinking Bulb Pada Blog

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://lh5.googleusercontent.com/-CtoXp4WgJXU/UdBl2qfD7pI/AAAAAAAAFZM/6c55iUG2GGY/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://lh5.googleusercontent.com/-t9LKzAttLsk/UdBl21qifMI/AAAAAAAAFZQ/Qn2QNBN_Y3E/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:
Membuat Efek Hover Blockquote Blinking Bulb Pada Blog
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.

Berlangganan artikel via email

15 Response to "Membuat Efek Hover Blockquote Blinking Bulb Pada Blog"

Keren'an blockquote nya blog sobat deh kayaknya..hehe :D
Simple tapi menarik, saya suka yang sederhana soalnya :)

Balas

Woowww.....ijin praktek ya sob.

Balas

sepertinya memang perlu dicoba kawan
Infonya sangat bergua sekali
terima kasih

Balas

hehe makasih pujiannya ya sob.. tapi kan masing2 orang berbeda selera sob, jadi mungkin aja bisa beranfaat buat yang lain :)

Balas

silahkan sob di coba.. :D

Balas

sangat saya persilahkan kawan..
trimakasih kunjungannya

Balas

Wuihhh..sip banget bang tutornya patut dicoba tuh...hahahhayy

Balas

lebih sip lagi kalo sambil nyantae di tambah kopi+rokok sob :) hehe

Balas

jadi kangen ama desain grafisnya mas andi nih :) hehehe

Balas

mantap ni turtorialnya bro ^^

Balas

Menarik sekali info Efek Hover Blockquote Blinking Bulbnya... makasih sob udah share :)

Balas

Lumayan juga buat ngehias blog , tank very much bro ..

follow back > http://ahmad-manarul.blogspot.com/

Balas

apik banget modelnya mas..
ijin pake masbroo

Balas

mantap,, kkeren sob..
thank's infonya.

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Membuat Efek Hover Blockquote Blinking Bulb Pada Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode