membuat blockquote indah dengan efek hover

Hallo Pengunjung Learning Blog, pada postingan kali ini saya akan mengajarkan cara membuat blockquote indah dengan efek hover.akan aku jelaskan sedikit tentang blockquote.
blockquote adalah kutipan yang bisa digunakan  untuk mengutip perkataan orang lain atau menjelaskan intisari dari suatu bacaan.:
kalo ingin melihat demonya silhakan klik disini
dan ini hasil secreen shootnya bisa dilihat

CONTOH BLOCKQUOTE SEBELUM DI HOVER

 CONTOH BLOCKQUOTE SESUDAH DI HOVER
kalau anda tertarik anda bisa mencobanya.??
berikut langkah - langkah pembuatannya.
1. Login ke Akun Blogger anda masing - masing 
2. Klik Design atau Rancangan, kemudian pilih edit HTML
3. Centang Expand Widget Template (Dan saya anjurkan download dahulu template anda)
4. Cari kode : ]]></b:skin>
lalu letakkan kode CSS dibawah ini sebelum atau diatas kode ]]></b:skin>.

.post-body{margin:10px 5px;padding:0px}

.post-body blockquote {overflow:auto; height:220px; background-position:-10px -7px; border: 1px dashed #fff; margin: 10px; padding: 10px; background:#666; text-align: justify; line-height:1.4em;

opacity:0.9; filter:alpha(opacity=95); this.style.opacity=6;border-radius:15px; -moz-border-radius:5px; -webkit-border-radius:15px; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #33F; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #33F; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #33F}

.post-body blockquote:hover{color:#fff; font-size:15px; background:#000;

opacity:0.9; filter:alpha(opacity=95); this.style.opacity=6;border-radius:15px; -moz-border-radius:5px; -webkit-border-radius:15px; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #000000; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #000000; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #000000;}

.post blockquote{ margin:1em 15px}

.post blockquote p{ margin:.75em 0}

Sobat perhatikan kode CSS diatas, sobat dapat mengeditnya dengan mengganti teks yang berwarna merah.
5. Terakhir Save template, dan lihat hasilnya.....


cara penggunaanya adalah
masuk ke entri baru terus pilih edit html..
kalau sudah ketikan kode ini <blackquote>Teks </blackquote>
atau anda bisa masuk setelan pilih Templat Entri kalau sudah masukan code <blackquote>teks</blackquote>

good luck 

Related Post :)

blogger

• daftar isi 2
• daftar isi
• Cara Menambah Background di Posting Blog
• Cara membuat Floating Top Bar
• Artikel Tidak Bisa Di Block/ Tidak Bisa Di Copy
• foto berputar -putar saat di sentuh oleh mouse
• Mematikan Fungsi Pada Keyboard,Dan Anti Klik Kanan..???
• Cara Membuat Artikel Terkait (Related Post) dengan efek Animasi Miring
• Cara MerubahTampilan Kolom Komentar dengan Efek Bubble
• Javascript Disable Keybord
• Cara Membuat Cursor following menu
• Menghilangkan Tulisan &quot;Tampilkan Entri Lawas&quot;
• Membuat Link Berkedip Ala Pelangi
• Buat Judul Blog Pada Adress Bar Bergerak
• Cara Menambah Background Di Postingan Blog
• Cara Membuat Background Animasi pada Judul Posting
• membuat titel berjalan pada blog
• Membuat Fasilitas Print di Blog
• cara memberi al-quran online
• Supaya Tabel tidak Melorot
• Supaya Blog / Web TerIndex Google
• Menghilangkan Underline Pada Link
• Mengatasi Pemberitahuan Kesalahan pada Faltform Blogger
• Mendisable Klik Kanan

Posted in: blogger