share all free for you

Advertiser Here

Blockquote dengan Efek Hover

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

Title : Blockquote dengan Efek Hover
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.

Sudah ada [ 17 komentar ] bagaimana pendapat Anda,,?

  1. PERTAMAX dulu nie, hehehehehe ini kan blogckquote... Kok kayak artikel terkait.... ckckckckck Anyway this right.... :D

    ReplyDelete
    Replies
    1. weh selamat untuk pertamaxnya gan,, iya kan di kasih shadow

      Delete
  2. berkunjunga gan ^_^
    makasih tutorial blockquotenya :D

    ReplyDelete
  3. bagus sekali nih artikelnya, comment back ya :D

    #salam blogger dari Yousake NKRI

    ReplyDelete
  4. kka ntu cara bikin demonya gimana.... tolong jawab yah.. secepatnya...

    ReplyDelete
  5. Nice Post, izin nyoba ya

    Visit back : http://ardi007jr.blogspot.com/

    ReplyDelete
  6. cara ganti warna kotaknya itu bagaimana ya kira2 ??

    ReplyDelete
  7. gitu ya gan ? tapi berpengaruh ga sama postingan yang sudah ke indeks kalo backrounnya ditambah efek hover ?

    ReplyDelete
  8. saya langsung pake gan, bolehkan gan ? :)

    ReplyDelete
  9. terima ksaih kakak untuk tutorialnya :D

    ReplyDelete
  10. Saya sangat setuju sekali dengan adanya artikel yang menyajikan informasi yang merupakan artikel pengetahuan seperti artikel ini. terimasih telah berbagi info yah..

    ReplyDelete
  11. www.indobet77.com

    Master Agen Bola , Casino , Tangkas , Togel Terbesar
    dan Terpercaya Pilihan Para Bettor

    Promo Terbaru :
    - Bonus  10% New Member Sportsbook
    - Bonus 5% New Member Casino Online
    - Bonus 10% Setiap Hari Bola Tangkas
    - CASHBACK untuk Member
    - BONUS REFERRAL 5% + 1% Seumur Hidup

    untuk Informasi lebih jelasnya silahkan hubungi CS kami :
    - YM : indobet77_sb2@yahoo.com
    - EMAIL : indobet77@gmail.com
    - WHATSAPP : +63 905 213 7238
    - WECHAT : indobet77
    - SMS CENTER : +63 905 213 7238
    - PIN BB : 2B65A547 / 24CC5D0F

    Salam Admin ,
    http://indobet77.com/

    ReplyDelete
  12. Pengen yang lebih seru ...
    Ayo kunjungi wwwasianbet77com
    Buktikan sendiri ..

    Real Play = Real Money

    - Referal 5 + 1 % ( seumur hidup ) .
    - Cash Back up to 10 % .
    - Bonus Royalty Rewards setiap bulan .

    untuk Informasi lebih jelasnya silahkan hubungi CS kami :
    - YM : op1_asianbet77@yahoo.com
    - EMAIL : asianbet77@yahoo.com
    - WHATSAPP : +63 905 213 7234
    - WECHAT : asianbet_77
    - SMS CENTER : +63 905 209 8162
    - PIN BB : 2B4BB06A / 28339A41

    Salam Admin ,
    http://asianbet77.com/

    ReplyDelete
  13. to fight and pray to make a better result? thank you very helpful information.

    http://obattradisionaldarahtinggi.jellygamatluxor.biz/pengobatan-alternatif-asam-urat-secara-tradisional/
    http://obattradisionalkencingmanis.com/obat-alami-penyakit-stroke-paling-ampuh/
    http://obattradisionaldarahtinggi.jellygamatluxor.biz/pengobatan-alternatif-kista-payudara-secara-tradisional/
    http://obattradisionalkencingmanis.com/obat-alami-sesak-nafas-paling-ampuh/

    ReplyDelete

Untuk menyisipkan kode,gunakan tag
[code]KODE ANDA[/code]
Untuk menyisipkan quote,gunakan tag
[blockquote]KATA-KATA ANDA[/blockquote]
Untuk menyisipkan gambar,gunakan tag
[img]URL GAMBAR ANDA[/img]
Untuk menyisipkan video,gunakan tag
[youtube]URL VIDEO ANDA[/youtube]
Anda juga bisa menggunakan emoticon seperti biasa.

Pasang Iklan Anda Disini

 
Copyright © 2011 Blogcunayz Template Design By Rizky Wardiansyah