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 {
     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

4. setelah selesai semua kita untuk menampilkannya seperti itu setiap mau posting lakukan langkah berikut 

<blockquote><span class="fullpost">Teks Anda</span></blockquote>

Note :
Tempatkan Teks atau apapun di Teks Anda lalu publiskan


Selesai Lihat Hasilnya







 Selamat mencoba dan semoga bermanfaat

Sobat sedang membaca artikel tentang Cara Membuat Blockquote Dengan Efek Hover dan sobat bisa menemukan artikel Cara Membuat Blockquote Dengan Efek Hover ini dengan url http://teckno8.blogspot.com/2013/01/cara-membuat-blockquote-dengan-efek_13.html, sobat boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat Blockquote Dengan Efek Hover ini sangat bermanfaat bagi temanteman sobat, namun jangan lupa untuk meletakkan link Cara Membuat Blockquote Dengan Efek Hover sumbernya.

Related Post: