Blockquote dengan Efek Hover

Selamat pagi sob, langsung aja ya sob pada kesempatan pagi hari ini saya mau post nih tentang 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, silahkan lihat demonya

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 Templatenya

Catatan :

    Jika sobat sudah memiliki style blockquote default hapus semua kode "blockquote" di dalam template sobat
Ook deh sob, mungkin sampai di sini dulu tutorial cara membuat blockquote dengan efek hover dari saya semoga dapat bermanfaat bagi sobat bogger semua. trimakasih