Blockquote dengan Efek Hover

Posted by Letjen Latief On Kamis, 23 Agustus 2012 2 komentar

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

Lihat Demonya

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 {
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');
}

3. Simpan Template

Catatan :

Jika sobat sudah memiliki style blockquote default hapus semua kode "blockquote" di dalam template sobat

Sekian tutorial cara membuat blockquote dengan efek hover dari saya semoga dapat bermanfaat bagi sobat bogger semua.

Ditulis Oleh : Letjen Latief ~ Deskripsi Blog Anda

Artikel Blockquote dengan Efek Hover ini diposting oleh Letjen Latief pada hari Kamis, 23 Agustus 2012. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar.

:: Get this widget ! ::

2 komentar:

Unknown mengatakan...: Nampak banget copasnya nih, gk pake sumber pula lagi..
Gak boleh kayak gitu..; 1 September 2012 pukul 04.19
Letjen Latief mengatakan...: hehe iya bang sory . ini waktu itu masih uji coba template :D; 14 Oktober 2012 pukul 06.16