Blockquote dengan Efek Hover - Hallo sobat blogger semua bertemu lagi dengan saya si ganteng kalem :p yang share cara membuat blockquote dengan efek hover. Blockquote atau kotak kode pada blog yang sering kita jumpai di blog yang membahas tutorial blog seperti blog saya ini, namun blockquote yang akan saya share sekarang bukanlah blockquote sembarangan tapi Blockquote dengan Efek Hover selain itu saya juga menambahkan efek shadow berikut Screenshotnya :
Sebelum |
Sesudah di Hover |
Berikut langkah - langkah untuk membuatnya :
1. Masuk Dasbor >> Template >> Edit HTML
2. Cari kode ]]></b:skin> atau </style> dan letakan kode berikut di atasnya :
.post-body blockquote {3. Simpan Template
font-family:Federant;
font-size:12px;
overflow:auto;
height:222px;
background-position:-10px -7px;
border: 1px dashed #fff;
margin: 10px;
padding: 10px;
background:#666;
text-align: justify;
line-height:1.4em;
opacity:0.5;
filter:alpha(opacity=40);
this.style.opacity=6;
border-radius:5px;
box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #F70000;
-moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #F70000;
-webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #F70000;
-o-transition:1s ease-out; -moz-transition:1s ease-out; -webkit-transition:1s ease-out
}
.post-body blockquote:hover{
color:#fff;
font-size:12px;
background:#666;
opacity:0.9;
filter:alpha(opacity=40);
this.style.opacity=6;
border-radius:5px;
box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F;
-moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F;
-webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F
}
.post blockquote{
margin:1em 15px
}
.post blockquote p{
margin:.75em 0
}
@font-face {font-family: 'Federant';
font-style: normal;
font-weight: 400;
src: local('Federant Medium'), local('Federant-Medium'), url('http://themes.googleusercontent.com/static/fonts/federant/v4/C109bUmZeyhh-vIXq9lNfvesZW2xOQ-xsNqO47m55DA.woff') format('woff');
}
Catatan :
- Jika sobat sudah memiliki style blockquote default hapus semua kode "blockquote" di dalam template sobat
- Cara Membuat Widget Label Dua Kolom
- Membuat Related Post dengan Efek Ceklis
- Membuat Breadcrumb Terindex Google
- Cara Membuat Buttons Keren dengan CSS
- Experiment with CSS3 - System Tatasurya
- Beberapa Efek Transisi Pada Gambar
- Load Page Blog Lebih Keren Dengan Keyframes
- Trik Mempercepat Loading Home Page Blog
- Cara Membuat Efek Rotate Miring Dengan CSS3
- Menyembunyikan Obyek Dengan Kode Overflow:hidden
- Pasang About Author Box dengan CSS
- Cara Memasang Facebook Like Otomatis di Posting
- @font-face CSS di Blogger Template
- Membuat Gambar Melayang di Blog
- memberi efek blur pada gambar
- Membuat Slide Headlines
- Membuat Menu Slide Show Tab View
- Comment Owner Berbeda dengan Pengunjung
- Mengubah Ukuran Template Blog
- Membuat Footer 3 Kolom dengan Background
- Membuat Link Berkedip Pada Saat Disorot Mouse
- Mengganti Tampilan Cursor (Mouse)
- Pasang Jam Animasi Colorfull With CSS & jQuery
URL : http://blogcunayz.blogspot.com/2012/06/blockquote-dengan-efek-hover.html
Anda boleh menyebar Luaskan atau Meng Copy-Paste Artikel ini bila dapat bermanfaat bagi teman-teman anda, Namun jangan lupa untuk meletakkan Link Blockquote dengan Efek Hover sebagai Sumbernya.
PERTAMAX dulu nie, hehehehehe ini kan blogckquote... Kok kayak artikel terkait.... ckckckckck Anyway this right....
ReplyDeleteweh selamat untuk pertamaxnya gan,, iya kan di kasih shadow
Deleteberkunjunga gan

ReplyDeletemakasih tutorial blockquotenya
bagus sekali nih artikelnya, comment back ya
ReplyDelete#salam blogger dari Yousake NKRI
kka ntu cara bikin demonya gimana.... tolong jawab yah.. secepatnya...
ReplyDeletecara ganti warna kotaknya itu bagaimana ya kira2 ??
ReplyDeletegitu ya gan ? tapi berpengaruh ga sama postingan yang sudah ke indeks kalo backrounnya ditambah efek hover ?
ReplyDeletekeren gan backroudnya
ReplyDeletesaya langsung pake gan, bolehkan gan ?
ReplyDeleteterima ksaih kakak untuk tutorialnya
ReplyDeleteefeknya keren sekali yah gan
ReplyDeletemantaps buat blockquote nya
ReplyDeleteSaya sangat setuju sekali dengan adanya artikel yang menyajikan informasi yang merupakan artikel pengetahuan seperti artikel ini. terimasih telah berbagi info yah..
ReplyDelete