Tutorial Link Hover

hye

iema nax buat tutorial lagi

korang nampax gambar di atas

bile korang halakan cursor kat link toe, ade garisan kat atas dan bawah link toe

nax buat jugax

jom follow tutorial nie

 P/S : nax copy, highlight dan guna ctrl + c

 Dashboard -> Template -> Edit HTML -> Tick Expand Widget Templates

 ctrl + f, cari kod nie

a:hover {

 kalau kat bawah dia ade kod lain, delete dan gantikan dengan kod nie

border-top: 2px dotted #ff8fc1;

border-bottom: 2px dotted #ff8fc1;

}

color oren ubah ketebalan border

color hijau ubah jenis border di SINI

color biru ubah warna korang inginkan

 dah siap edit, preview dulu dan save

selamat mencuba 

Tweet

Tutorial Search Box

hye iema nax kongsi tutorial nie kat korang semua ade 2 cara nax letax search box kat blog
CARA PERTAMA log in blog -> Dashboard -> Layout -> Add a Gadget -> Add Search Box

CARA KEDUA Dashboard -> Layout -> Add a Gadget -> HTML/Javascript copy dan paste salah satu kod di bawah  P/S : nax copy, highlight dan guna ctrl + c

yang biase

<center><form action="/search" id="searchThis" method="get" style="display: inline;"> <input id="searchBox" name="q" onclick="this.value=''" style="background: #ffffff; color: #000000; font-size: 13px; height: 20px; width: 190px;" type="text" value="Cari Apa Disini?" /><input id="searchButton" style="background: #ffffff; border-color: #cccccc; color: black;" type="submit" value="search" /></form></center>

yang berwarna dan tulisan lebih menarik

<center><form action="/search" id="searchThis" method="get" style="display: inline;"> <input id="searchBox" name="q" onclick="this.value=''" style="background: #DB944D; color: #000000; font-family:Kristen ITC; font-size: 13px; height: 20px; width: 190px;" type="text" value="Cari Apa Disini?" /><input id="searchButton" style="background: #DB944D; border-color: #ff3399; color: black;font-family:Kristen ITC;" type="submit" value="search" /></form></center>

color biru muda, color background pada kotak seacrh box color hijua tua ,color tulisan color oren ,jenis tulisan color hijau muda ,ayat korang color biru ,color background pada button search color kuning,color border pada button search
dah siap edit save selamat mencuba 

Tweet

Tutorial Letak Widget Weheartit dalam Blog

hye arie nie ade yang bertanye tentang weheartit macam kt blog iema nie

 nie la widget galeri weheartit toe

macam mane nax letax widget nie kat blog??

jom follow tutorial nie

 log in Weheartit

(sama ade guna akaun facebook atau twitter korang sendiri)

 halakan cursor pada nama korang dan klik account settings

 settings dan klik goodies

 scroll ke bawah sikit

 korang akan jumpe macam kat gambar di bawah

 yang iema kotakkan color merah, copy kod toe dan paste kat notepad dulu ye

 log in blog -> Dashboard -> Layout -> Add a Gadget -> HTML/Javascript

 pada ruangan content, paste kod yang korang copy tadi

 siap terus save 

Tweet

Tutorial Blockquote Hover Tanpa Shadow

hye arie nie iema nax tunjuk cara blockquote tanpa shadow kalau korang nax ade shadow, pergi kat tutorial nie  Tutorial Blockquote Hover
lihat gambar di atas sebelum dan selepas hover bentuk border nye berubah kan nax macam toe, jom follow tutorial nie  P/S : nax copy, highlight dan guna ctrl + c  Dashboard -> Template -> Edit HTML  ctrl + f, cari kod nie

.post blockquote {

 kalau tax jumpa kod toe korang kena tambah la  macam mane nax tambah, cari kod nie, Ctrl + f (untuk memudahkan pencarian)

.post-body {

  copy dan paste kod di bawah nie betul2 di atas kod yang dicari tadi... kalau ade kod di no   tadi, just copypaste kod yang lain yang ade di bawah nie

.post blockquote { -moz-border-radius: 35px; border-radius: 35px; background:url(URL BACKGROUND SEBELUM HOVER) center; border-top: 2px solid #FF3399; border-left: 2px solid #FF3399; border-right: 2px solid #FF3399; border-bottom: 2px solid #FF3399; margin:1em 20px; padding: 5px; }
.post blockquote:hover { -moz-border-radius: 25px 10px / 10px 25px; border-radius: 25px 10px / 10px 25px; background:url(URL BACKGROUND SELEPAS HOVER) center; background-position:center; background-repeat:repeat; }

color oren dan color biru korang pilih bentuk border korang di sini  Tutorial Bentuk-Bentuk Border color hijau dan color kuning tukar background yang korang inginkan
 kalau nax letax background color je...   tukar kod nie

background:url(URL BACKGROUND SELEPAS HOVER) center;

ke kod nie

background:#ffffff;

 dah siap edit, preview dulu tax ade pape error, terus save selamat mencuba 

Tweet

Tutorial Cantikkan Kotak Komen Cara2

sebelum

selepas

hye...

korang perasan tax perubahan kotak komen kat atas nie

bentuk border die berubah dari yang sebelum ke selepas guna tutorial nie

yang nie iema godeh sendiri

tangan nie tibe2 dox mengatal nax ubah kod yang asal

bila dah edit jadi plax

 sebelum toe korang follow tutorial nie dulu Tutorial Cantikkan Kotak Komen tutorial nie tutorial yang asal  dah sudah follow tutorial toe  korang follow tutorial nie pulax

 P/S : nax copy, highlight dan guna ctrl + c

 tadi korang ade copypaste kod yang macam nie kan

.comment-footer{

margin-bottom:0 !important;

}

.author-comment{

background : #FFFFFF url(url image untuk kawan) no-repeat right top;

padding:5px;

margin-bottom:1.5em;

border:3px solid #A31947;

border-radius:10px;

}

.author-comment.blog-author {

background: #FFFFFF url(url image untuk owner blog) no-repeat right top;

padding:5px;

margin-bottom:1.5em;

border:3px solid #FF5CAD;

border-radius:10px;

}

 kod yang iema highlightkan color biru, korang ubah bentuk border

 tengok bentuk border di sini

BENTUK-BENTUK BORDER

 kalau korang pilih bentuk border yang E

 kod nye akan jadi macam nie

.comment-footer{

margin-bottom:0 !important;

}

.author-comment{

background : #FFFFFF url(url image untuk kawan) no-repeat right top;

padding:5px;

margin-bottom:1.5em;

border:3px solid #A31947;

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

border-radius: 25px 10px / 10px 25px;

}

.author-comment.blog-author {

background: #FFFFFF url(url image untuk owner blog) no-repeat right top;

padding:5px;

margin-bottom:1.5em;

border:3px solid #FF5CAD;

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

border-radius: 25px 10px / 10px 25px;

}

 dah siap edit, preview dulu dan save

selamat mencuba 

Tweet