Sabtu, 14 Jun 2014

border widget sidebar


1. Dashboard --0  Design  --0 Edit Html --0 tick Expand Widget Template.

2. Ctrl+f i untuk cari kod   h2 {

3. oke, kat sini korang pilih jenis border mana yang korang nak hokey ? 

JENIS SIMPLE 
text-align:center;
-moz-border-radius: 35px;border-radius: 35px;
text-shadow: 3px 3px 3px #D0A9F5;
border: 2px solid  #AC58FA;
background : #D0A9F5;
padding: 5px 0px 5px;
*klu xmau ada border,sila buang kod  border: 2px solid  #AC58FA; tu oke ? :)


JENIS BERBACKGROUND


text-align:center;
-moz-border-radius: 35px;border-radius: 35px;
text-shadow: 3px 3px 3px #D0A9F5;
border: 2px solid  #AC58FA;
background : url(url background);
padding: 5px 0px 5px;


*klu xmau ada border,sila buang kod  border: 2px solid  #AC58FA; tu oke ? :)

DOUBLE COLOURED LIKE MEE ;D

text-align:center;
-moz-border-radius: 35px;
border-radius: 35px;
text-shadow: 3px 3px 3px #D0A9F5;
border-bottom8px solid  #AC58FA;
background : #D0A9F5;
padding: 15px 10px 15px;



NOTA TAMBAHAN.

center; boleh ditukar kepada right/left
- tulisan kaler merah adalah kod untuk border . so korang boleh pilih nak border jenis mana. sebelum tu,
pastikan korang buangkan simbol { dekat kod jenis border tu okey .Klik sini untuk ambik kod jenis border yang korang loikee .
- tulisan kaler ijau adalah untuk bagi tulisan shadow, kalau xnak boleh buang.
#D0A9F5 kod kaler untuk shadow tersebut. klik sini untuk amik kod kaler
- tulisan purple boleh ubah nilai ketebalan border anda okey.
- perkataan solid boleh ditukar kepada dashed / dotted
#AC58FA kod kaler untuk border .
url background , gantikan dengan url gmbar background yang korang nak hokey ? :)

-border-bottom8px solid  #AC58FA; ini adalah kod untuk border bawah tu (rujuk gmbar double colour sidebar)

- kalau korang nak tukar font tittle untuk sidebar widget tu korang tengok tuto ni . klik sini .

4. Preview,klu xda error dan berpuas hati SAVE. pastu KLIK SINI please :) thnxbai.

kalau xpaham ker  apa ker tanya je okay . selamat mencubaa..byee :D


LOVE ; ♥ misluvcoklat ♥

title sidebar ada hover

1) Mula-mula dashboard->design->edit html->tick expan widget template(penting)
2) Lepas tu tekan ctrl+f and cari code ni
h2 {
3) Korang perhatikan bawah atau pun anak-anak code tu,yang tu ialah code sidebar korang,mestilah korang dah tawu kan:) contoh anak-anak code tu,tengok gambar kat bawah ni.
4) Lepas tu,copy code ni

h2:hover {
font-family: gergio;
margin: 0 0 1em 0;
font-size: 12px;
color: #000000;
text-align:center;
background:#66ccff;
border-left: 4px dashed #3399CC;
border-top: 2px solid #ccffff;
border-bottom: 2px solid #000000;
border-right: 4px dashed #3399CC;
-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px / 12px;
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
5) And paste dekat bawah code sidebar yang terakhir sekali. paham ?kalau tak paham,tengok gambar ni
-notepad-
6) Oke,dah siap. preview dulu .kalau tak ada error baru save ye.
NOTA KAKI:
  1. code dalam ni semua code template amy, so korang kene godek-godek sikit bersesuaian dengan code sidebar korang ye:)
  2. color ni untuk color tulisan title sidebar ketika hover.boleh cari dekat SINI.
  3. text align boleh center/left/right. ikut suka korang la ye.
  4. (-3deg) tu ialah berapa pusing senget korang punya title sidebar tu ketika hover.kalau lagi besar nombor,lagi senget. tapi paling besar 5 ja taw,kalau lebih-lebih berpusing-pusing korang punye title sidebar tu pulak . huhu.

shadow effect kat post title n sidebar

1.pergi dashboard=>design=>edit html

2 .untuk buad shadow post title ,  cari 
h3.post-title {

3.then , copy code yg wawa bagi ney kat bawah code h3 ..

text-shadow: 2px 2px 3px #FFFFFF;
4 . tukar warne tuh kat sini

5 .. untuk buad shadow sidebar plak , cari code ney ..

h2 {
6 . then copy code yg wawa bagi n paste macam tadi jugak ..

7 .preview , then save .. :)

border keliling blog

1.dashboard >design >edit HTML >tick expand widget

2.tekan ctrl + f
cari code nie:
outer-wrapper{
3.da jumpe....kowank copy code nie lak...
border: 5px #000000 solid;

4.paste kan code nie kat bawah sekali code

outer-wrapper {
5.preview dulu.....law ok save...
 
 

tutorial background cbox

First go to your Dashboard > Design > Add gadget > HTML/Javascript then korunk copy code dekat bawah nie and paste kan dalam ruangan HTML/Javascript tuh okaii ?
<center><div id="edited" style="width:250px; height:190px; background:url(BACKGROUND SHOUTBOX) no-repeat left top; padding-top:65px; padding-left:0px; position:relative" align="center">SHOUTMIX CODE</div></center>

type of 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(http://i1218.photobucket.com/albums/dd417/cheesweet/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
}

type of border

Jenis-Jenis border.
Border 1
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;

Border 2 
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;

Border 3
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;

Border 4
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;

Border 5
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;

Border 6
-moz-border-radius: 35px;
border-radius: 35px;