Web dan Grafis Desain
Author
Sharing is Beautiful.
Kp. Bumi Godean RT.01 RW.06
Wonosobo , Jawa Tengah
56311
Indonesia
alfirous@yahoo.com
081215880929
DOB: 09/03/----
Maaf web sedang dalam perbaikan setelah vakum dalam waktu yang lama.

Blockquote dengan Hover

Assalamualaikum.wr.wb

Ternyata kecintaan saya terhadap CSS belum berakhir malam ini setelah tadi saya memposting Cara Modifikasi Form Komentar sekarang saya akan menulis Tutorial Blockquote dengan Hover. Apa itu Hover ? hover adalah ... apa ya ?? saya juga nggak bisa menjelaskan panjang lebar, sebaiknya liat contohnya saja.


Sorot Kursor Ke sini


Bagaimana sudah tahu yang namanya Hover ? Ok...langsung saja ke Topik permasalahan

  • Masuk ke Edit HTML -> Checklist Expand Template Widget
  • Cari kode .post blockquote (Tip : Gunakan F3 atau Ctrl F agar mudah)
 Jika anda belum mengganti Blockquote anda maka akan muncul kode kurang lebih seperti di bawah :

.post blockquote {
color:#666666;
font-family:'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, sans-serif;
font-style:italic;
margin:1em 20px;
}
.post blockquote p {
margin:0.75em 0;
}

  • Ganti kode merah di atas dengan kode di bawah ini, pilihlah sesukamu :

Code 1:
.post blockquote {
margin : 0 20px; padding: 60px 30px 40px 20px;
background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJzar53iwKRduFmtArxhOWvJD-ymMOHRT86_ahGxEgToMfpi_TTm3GBWF4kGwiPrFzPnHAGZ9yDQ9ylOW6Wb27LIzAzVS4X4OSYFytDwOO3NcGVDn1qptqrljZRsJKWyo7COob7DcXp9w/s400/owl.png) no-repeat 350px 5px;
font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif;
color : #000; border-left: 8px dotted #DAB547;
}

Code 2:
.post blockquote {
margin : 0 20px; padding: 70px 20px 20px 40px;
background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMNLpGnx0NeGaqelyoymDc9eoqNEsOpDE9SYVPNyDDIwX2bvvUVN5b7bOUI6yW6ogMnSXMrQe_0MMRmUhghwf_3441VbHpwYhtc71MIKgb_uMCGrqWoOu2xgVtI1LwOGsCTc9iFXPnzDw/s400/angular-purple.gif) no-repeat top left;
font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
color : #000; border-bottom : 5px solid #435388;
}

Code 3:
.post blockquote {
margin : 0 20px; padding: 10px 20px 25px 20px;
background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjktEJN8V9aRz-7Rz2hb4D9255swtEVCu9aq2Vf5L0V9Kn9_a80lk179UJOtgqszKInKoX-haN28KilmcBsRW24fdNUNkIDyoahQjx3vQ3_HJQRgZd840uhZpXMS5qq_RaZ87TaERLjUPU/s1600/block22.gif) no-repeat right bottom;
font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia;
color : #484848;
border: 5px dashed #fff;
}

Code 4:
.post blockquote {
background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipdYZGTvEdV1Tud1nsSkV9pmXhtienjQTS6yD2icvpKewhMDEWt4TSo3mexWYtST45YV4TRxZWHo7vXIudrS0SvT-BJ8zNFopRLG7Qlg66Spvt__7Gm_j_aJQVFxLVfUlvB9ivwnmx5Hs/s1600/comma-side-orange1.gif);
background-position:; background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 10px 45px; font-size: 0.9em;
font: italic 1.2em Georgia, "Times New Roman", Times, serif;
}

Code 5:
.post blockquote {
background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgj0uuWdhtxPy2BujGvudoG4gZBkLnHv_mmnHPVVTk7I7D8CA2-ymANn16s_pGpy6iXarHhoJnju0i3i79Cw-YpBlClHgh7dp8gIt9o4FlPnyZ1w5q-NFFfDIEXAfvPsyNFwEHeNs80lg/s1600/green-black-side.gif) ;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 20px 50px; color:#C7CACF;
font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman";
}


Code 6:
.post blockquote {
margin : 0 20px; padding: 20px 60px 80px 20px;
background : #FEE4E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc09gJEAqm55TUGMTwcga47OJ3_r9B_jop8MiabgqHylNJfOnWriazYZDXUxMS2NLqv14vyClwnFJ6ed3-kNKSBk7MWG7zhygefe-mWbqH9znWo-fBGG-zvGdvQdklWojl5_zYJWI6Wco/s400/angular-right.gif) no-repeat bottom right;
font: bold italic 1em Georgia, verdana, Helvetica, "Times New Roman", Times, serif;
color : #000; border: 1px solid #DDD;
}

Code 7:
.post blockquote {
margin : 0 20px; padding: 70px 20px 30px 20px;
background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzsT6VRm3W3Jyg9Zca8PqBNoWG5FGCQW7do7B9leEEelhbZ11iEkWzvS96W4nd5U2Fm9jtgCN5dfaPznY5_pam6mwzKhs7uH8KypHMrQ0YmthGtLYG223uG5F58NQQWrqfcr_JedYn-NU/s400/block3331.gif) no-repeat top;
font: bold .9em Helvetica, "comic sans ms",Courier,"Times New Roman", Times, serif;
color : #343434;
border-left : 7px solid #FF7802;
border-right : 7px solid #FF7802;
border-bottom : 7px solid #FF7802;
}

Code 8:
.post blockquote {
background-position:-10px -7px;
border: 1px dashed #FFC600;
margin: 20px 10; padding: 0 20px 0 50px;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYxdJgDH9IfuAxs5DOr5yZNCdYhEj0S90fUspT8U56dilR5hwCgOE6lqbiD0RdHc9S9MoNEQHWB9qF6jE6nmtx3gkvcUdnBgyqKVWNXyZtVn-sCkMiZXf1XBgKYr5mAFlN1ItfDmrAJxXB/s1600/quote.png") 5% no-repeat #FFF8DD;
}

Code 9:
.post blockquote {
padding-left:30px;
padding-right:5px;
background:url(http://www.darkfalltournament.com/images/blockquote.png) no-repeat 0 .0em;
color:#444;
font-style:italic;
text-align:left;
margin:1em 20px;
}
 Code 10:
.post blockquote {
background-color: #666;
color: #fff;
font-weight: bold;
padding: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
Terima kasih Sobat Shinobi untuk Kumpulan Kode Blockquote keren ini :D . Sampai di mana tadi ya ? hehehe sampai lupa.

  • Misal saya pilih kode No 8 , maka seperti ini jadinya (taruh di atas kode yang berwarna hijau)
 .post blockquote {
background-position:-10px -7px;
border: 1px dashed #FFC600;
margin: 20px 10; padding: 0 20px 0 50px;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYxdJgDH9IfuAxs5DOr5yZNCdYhEj0S90fUspT8U56dilR5hwCgOE6lqbiD0RdHc9S9MoNEQHWB9qF6jE6nmtx3gkvcUdnBgyqKVWNXyZtVn-sCkMiZXf1XBgKYr5mAFlN1ItfDmrAJxXB/s1600/quote.png") 5% no-repeat #FFF8DD;
}
 .post blockquote p {
margin:0.75em 0;
}

  • Setelah semua lengkap maka tinggal sisipkan kode Hovernya di antara kode hitam dan hijau ( pilih dulu kode Blockquote di atas untuk di jadikan Hovernya dan ganti .post blockquote dengan .post blockquote:hover ).Contoh saya pilih No 10, kode Hovernya saya beri warna biru



 .post blockquote {
background-position:-10px -7px;
border: 1px dashed #FFC600;
margin: 20px 10; padding: 0 20px 0 50px;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYxdJgDH9IfuAxs5DOr5yZNCdYhEj0S90fUspT8U56dilR5hwCgOE6lqbiD0RdHc9S9MoNEQHWB9qF6jE6nmtx3gkvcUdnBgyqKVWNXyZtVn-sCkMiZXf1XBgKYr5mAFlN1ItfDmrAJxXB/s1600/quote.png") 5% no-repeat #FFF8DD;
}


.post blockquote:hover{
background-color: #666;
color: #fff;
font-weight: bold;
padding: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

 .post blockquote p {
margin:0.75em 0;
}


  • Silahkan sesuaikan ukuran sesuka anda :D 
  • Simpan Template dan Lihat hasilnya
Selamat Mencoba - Happy Blogging

    7 komentar :

    1. kalau seandainya di CSS tidak aga kode itu apa yang harus di lakukan?

      BalasHapus
    2. keren sobb... saya malah gak bisa buat gitu.. dapet ilmu nih disini .. :)

      btw ta kasih KL3x sobb.. bales yaaCh... :D

      BalasHapus
    3. boleh nih di coba gan . . thanks yak gan!

      BalasHapus
    4. Mantap nih sob tutornya,,,salam kenal,,,ni kunjungan perdana sy,,

      sya blogger Jogja s0b,,,

      BalasHapus
    5. Mantap banget blockquotenya,tapi kalau membuat blockquote seperti blog ini gimana ya???tolong balas...

      BalasHapus
    6. mantab" sob contoh blockquotenya.. :)

      BalasHapus

    Anda dapat berkomentar terkait artikel diatas dan isi komentar sepenuhnya menjadi tanggung jawab komentator.

    Dilarang berkomentar dengan tidak sopan, kasar, berisi fitnah, berbau SARA, SPAM dan OOT. Setiap komentar yang masuk akan dimoderasi dan akan diterbitkan jika sesuai dengan ketentuan yang berlaku.