Cara Buat Blockquote Dengan Efek Hover

 

Cara Buat Blockquote Dengan Efek Hover Versi Blog Mas Rama 

Assalamualaikum wr wb. Halo Sobat Apa Kabar Siang Malam Gini Enaknya Ngapain ya ?? Hayo apa

oke pada kali ini saya akan mengeshare tentang  Cara Buat Blockquote Dengan Efek Hover tau gk blockquote untuk apa ?? Hayo apa

blockquote adalah kutipan artikel yang dianggap penting atau memiliki arti khusus. namun pada prakteknya ada juga yang menggunakan blockquote untuk menuliskan tag HTML,Kode CSS atau script pada artikel-artikel tips blogging. namun saya mencoba untuk mengedit nya dengan versi saya sendiri , dan dibawah inilah tutorialnya

Demo 

Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum rama rama rama rama rama mama blockquote blockquote blockquote blockquote

Tutorial

1. login di blogger

2. pergi ke dashboard 

3. klik template --> edit HTML

4. Cari kode ]]></b:skin>

5, masukkan kode dibawah ini diatas kode tersebut

blockquote{-webkit-transition:all .6s ease-out; -moz-transition:all .6s ease-out; -o-transition:all .6s ease-out;background: #000;border-left:8px solid #087ac3;border-top:1px solid #ccc;border-bottom:1px solid #ccc;border-right:1px solid #ccc;text-align:left;font-style:italic;margin:0 0 13px 13px;padding:10px 22px 10px 22px;border-radius:50px 100px 35px 100px;}blockquote:hover{-moz-box-shadow: 1px 1px 4px #067dae;-webkit-box-shadow: 1px 1px 4px #067dae;box-shadow:  1px 1px 4px #067dae;background:#fff;color:#000;text-shadow: 0px 0px 8px #067dae;border-radius: 20px 0px        20px 0px;}

6. simpan template

Cara menerapkanya di postingan

1. Buat Postingan
2. Pilih Mode HTML
3. Lalu masukkan kode dibawah ini

<blockquote> MASUKKAN KODE TERSERAH ANDA </blockquote>

4. publikasikan
5. liat di blog
6. selesai

demikian post  Cara Buat Blockquote Dengan Efek Hover Versi Blog Mas Ramasemoga bermanfaat bagi kita semua .
wassalamualaikum wr wb