Blockquote dengan Hover
Assalamualaikum.wr.wb
Bagaimana sudah tahu yang namanya Hover ? Ok...langsung saja ke Topik permasalahan
Code 1:
Code 2:
Code 3:
Code 4:
Code 5:
Code 6:
Code 7:
Code 8:
Code 9:
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)
.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;
}
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;
}
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;
}
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;
}
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";
}
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;
}
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;
}
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;
}
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;
}
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;
}
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
kalau seandainya di CSS tidak aga kode itu apa yang harus di lakukan?
BalasHapuskeren sobb... saya malah gak bisa buat gitu.. dapet ilmu nih disini .. :)
BalasHapusbtw ta kasih KL3x sobb.. bales yaaCh... :D
Mantep nih 0m blockquotenya :D
BalasHapusboleh nih di coba gan . . thanks yak gan!
BalasHapusMantap nih sob tutornya,,,salam kenal,,,ni kunjungan perdana sy,,
BalasHapussya blogger Jogja s0b,,,
Mantap banget blockquotenya,tapi kalau membuat blockquote seperti blog ini gimana ya???tolong balas...
BalasHapusmantab" sob contoh blockquotenya.. :)
BalasHapus