TUTORIAL : Scroll bar Hover

now una nak buat tuto scrollbar , tak tahu ape tuh scrollbar ? cube korunk p dekat scroll una ? hahh ! aikk , dia tukar warna lahh ! dari pink tukar pada soft brown ? kann ? hahha :D una pernah buat tuto SCROLLBAR jugak dulu tapi yang biasa punya , nie yang ade hover pulak , soo , itu lah yang kite nka buat , senangg je okeyy ! soo , let we start :

First go to your Dashboard > Design > Edit HTML *tick expand widget then search this code :
/* Header
okeyy ! jumpaa dahh ? korunk copy code bawah nie & paste kan di atas code yang dekat atas nie :
 ::-webkit-scrollbar {
height:10px;
width: 10px;
background: #FFFFFF;
}
::-webkit-scrollbar-thumb {
background: #FDC0C0;
-moz-border-radius: 5px;
border-radius: 5px;
}
::-webkit-scrollbar:hover {
background: #FFFFFF;
}
::-webkit-scrollbar-thumb:hover {
filter:alpha(opacity= 70);
-moz-opacity:0.70;
opacity:0.70;
background: #cec7ab;
}

yang una wrnakan tuh korunk boleh tukar warna dia dekat SINI . jadii ! selamat mencuba :)
Hai! Selamat membaca. Jangan lupa tinggal komen ya?
12 comments:

TUTORIAL : Main wrapper & Sidebar wrapper terpisah

hahh , dah tengok gambar niee kann ? dah tahu ape dia . let we start ^^ 

First go to your Dashboard > Design > Edit HTML then *tick expand widget . lepas tuh sila click ctrl + F and find code nie -->
.post {
dah jumpaa ? noww sila copy paste code yang una bagi nie dekat bawah code di atas :

yang ade main background :
margin:1em;
padding:10px;
font-size: 95%;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNogtDxr44aApgv1RoLpBUn8-wW-IJHsdxH_9CXsxpgg36WuA5XFZxjQGom1AT49egwzA-emMjD-w8HgyToFMhW18CfizvUgCGp8mo-VXhUYKyK_mIiOAdK37mfYjjQDlgHLyfiGx6mU-N/s1600/backgroundbody+%25282%2529.gif);
border-radius:5px;
border: 1px solid #000000;
line-height:1.9em;
}

yang putih je background dia :
margin:1em;
padding:10px;
font-size: 95%;
background:#FFFFFF;
border-radius:5px;
border: 1px solid #000000;
line-height:1.9em;
}

then korunk click ctrl + F lagi sekali & search pulak code nie :
 .sidebar .widget {
then korunk copy paste code bawah nie dekat bawah code yang dekat atas nie tauu ?

yang ade main background :
margin:1em;
padding:10px;
font-size: 95%;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNogtDxr44aApgv1RoLpBUn8-wW-IJHsdxH_9CXsxpgg36WuA5XFZxjQGom1AT49egwzA-emMjD-w8HgyToFMhW18CfizvUgCGp8mo-VXhUYKyK_mIiOAdK37mfYjjQDlgHLyfiGx6mU-N/s1600/backgroundbody+%25282%2529.gif);
border-radius:5px;
border: 1px solid #000000;
line-height:1.9em;
}
 yang putih je background dia :
margin:1em;
padding:10px;
font-size: 95%;
background:#FFFFFF;
border-radius:5px;
border: 1px solid #000000;
line-height:1.9em;
}
ouhhh , terkejutt tengok blogg eikk  ? hahah :D dia jadi mcm niee kann :

jangan risauuu ! ade penyelesaian nyaaa ! mehh ikut tuto bawah nie pulak -->

click ctrl + F then find this code :
#content-wrapper {
then korunk change code background yang ade dekat situ pada code nie :
 background :transparent;
soo nowww , its donee ! kan dah jadii :) hopeee korunk paham kayyy ?
Hai! Selamat membaca. Jangan lupa tinggal komen ya?
23 comments:

FREEBIES : Code for your cute Blockquote

hyee :) salam semuanya :) hari nie una nak share dengan korunk code untuk korunk letak dalam bahagian code blocquote. una dah tweak kan code2 dia semua , dan una dah letakkan gambar mcm mana rupanya sebelum & selepas cursor menyentuh :) colour , background & etc korunk boleh tweak sendiri ikut citarasa korunk kay ? tak tahu nak guna kan ? boleh ikut tutorial ini --> About Blockquote :)

BLOCKQUOTE LIP LAP


.post blockquote {
background:#FFC6C6;
-webkit-transition-duration: 3s;
padding: 12px;
margin: 2px 2px;
color: #ffffff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.post blockquote:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpOlaXhfFu87nkHWkT67UAWn5yC6lxw5532vzB-pQeYxFDuO81arAVXpUNyuBtLWTMCloBH4FJjjY-_jPg8dQydqVUlLtb9eq051ASaGiXJH07WDtSE1kAfkdesZZ5xigka4ju6e4a9ny9/s1600/pinkgrain.png);
color: #000000;
-webkit-transition: 3s;
}

BLOCKQUOTE BORDER SOLID TURN DASHED
.post blockquote {
background:#FFC6C6;
Border:2px solid #DEB1B1;
-webkit-transition-duration: 3s;
padding: 12px;
margin: 2px 2px;
color: #ffffff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.post blockquote:hover {
Border:2px dashed #DEB1B1;
color: #000000;
-webkit-transition: 3s;
}

BLOCKQUOTE SWINGING 360deg
.post blockquote {
background:#FFC6C6;
-webkit-transition-duration: 3s;
padding: 12px;
margin: 2px 2px;
color: #ffffff;
border:2px solid #FF9696;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}
.post blockquote:hover {
color: #000000;
-webkit-transition: 3s;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
background-color: transperant;
-webkit-transition-duration: 2s;
border:2px dashed  #FF9696;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}

BLOCKQUOTE ADA ICON CHOMEL

.post blockquote {
background:#FFC6C6;
-webkit-transition-duration: 3s;
padding: 12px;
margin: 2px 2px;
color: #ffffff;
border-left: 6px solid #DAB0B0;
border-right: 2px dashed #FFFFFF;
border-bottom: 2px dashed #FFFFFF;
border-top: 2px dashed #FFFFFF;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.post blockquote:hover {
color: #000000;
-webkit-transition: 3s;
background-image:url(http://i257.photobucket.com/albums/hh205/xoxojays/smilies/minidocomo/pic009demoji_11848475decoojp.gif);
background-position:bottom right;
background-repeat:
no-repeat;
}

BLOCKQUOTE ICON CHOMEL TEMBAK
 .post blockquote {
background:#FFC6C6;
-webkit-transition-duration: 2s;
padding: 12px;
margin: 2px 2px;
color: #ffffff;
border-right: 6px solid #DAB0B0;
border-left: 2px dashed #FFFFFF;
border-bottom: 2px dashed #FFFFFF;
border-top: 2px dashed #FFFFFF;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.post blockquote:hover {
color: #000000;
-webkit-transition: 2s;
border-left:20px double #DAB0B0;
background-image:url(http://i257.photobucket.com/albums/hh205/xoxojays/smilies/minidocomo/pic009demoji_11848475decoojp.gif);
background-position:bottom right;
background-repeat:
no-repeat;
}


BLOCKQUOTE BORDER SQUARE TURN TO RADIUS 

.post blockquote {
background:#FFC6C6;
-webkit-transition-duration: 3s;
padding: 12px;
margin: 2px 2px;
color: #ffffff;
border:2px solid #FF9696;
}
.post blockquote:hover {
color: #000000;
-webkit-transition: 3s;
border:2px solid #E8BEFF;
border-radius:10px
}

NOTA BIT BOTT :
penat una tweak kan satu-satu :) harap korunk minta permission dari una if nak re-freebies okey ? una tak kan marah punyer ^^ and please credit me if you use this :) kalau tak pun comment okey ? una takkan marah punyer , thanks yupp sebab guna :) kalau korunk nak masuk kan code nie korunk preview dulu okey ? then tengok hasil yang sepenuhnya , gambar tuh takut korunk blurr plak kan ? sooo ,  kalau cantik baru save ^^ soo , semoga berjaya korunk !
Hai! Selamat membaca. Jangan lupa tinggal komen ya?
179 comments: