Dunia dalam Karung: 3Tutorial karungboy

Minggu, 01 Januari 2012

3Tutorial karungboy

haloo semuanyaa.. selamat tahun baru 2012 bagi yang merayakann.. postingan pertama aku ditaun ini aku ngepost tutorial aja yah..
sebelum mempraktekan tutorial ini ada baiknya berdoa dulu & backup templatenya.. buat jaga jaga..
oke langsung aja ke tutorialnya

1. Floating Header
yaa.. tutorial yang pertama itu kita bikin header yang diem dibagian atas browser . . jadi discroll kemana juga si header ngikut. . kayak kepala si karungboy yang diatas ituu.. caranya gini :
di dashboard blognya klik layout>edit HTML terus centang expand template widget.
kalo udah, teken CTRL+F terus cari .header-outer terus sebelum tanda } copas code dibawah ini

margin:auto;
overflow:hidden;
position:fixed;
z-index:999999;
width:100%;
text-align: center;

buat yang gaada .header-outernya copas code dibawah ini ke sebelum tanda ]]><b:skin>

.header-outer {
margin:auto;
overflow:hidden;
position:fixed;
z-index:999999;
width:100%;
text-align: center;
}

setelah itu tinggal masukin headernya..
cari code <body>
terus dibawahnya masukin

<div class='header-outer'>
header kamu disini </div>

udah beres.. gampang nggak? komentarnya ntar dulu.. liat tutorial selanjutnya dulu yaa..

2. Rollover Image
yang ini buat ngebikin image jadi berubah kalo mouse diarahin ke image itu.. caranya gini :

<a href="url kalo imagenya diklik">
<img src="gambar 1"
onmouseover="this.src='gambar 2'"
onmouseout="this.src='gambar 1'">
</a>

*gambar1 dan 2 itu url gambarnya..
contoh :
gambar 1 : karungboy.blogspot.com/gambar1.jpg

gambar 2 : karungboy.blogspot.com/gambar2.jpg
jadinya di scriptnya gini :

<a href="http://karungboy.blogspot.com">
<img src="http://karungboy.blogspot.com/gambar1.jpg"
onmouseover="this.src='http://karungboy.blogspot.com/gambar2.jpg'"
onmouseout="this.src='http://karungboy.blogspot.com/gambar1.jpg'">
</a>

buat yang ini bisa dipake dimana aja.. disini juga bisa..


sample

ini juga bisa dijadiin header.. tinggal selipin di "header kamu disini" di tutorial pertama.
3. Comment box background
tutorial yang ini buat ngasih background ke comment box.. kayak yang dibawah inii..
oke langsung aja..
awalnya sama kayak tutorial pertama,
di dashboard blognya klik layout>edit HTML terus centang expand template widget.
kalo udah, teken CTRL+F terus cari <div class='comment-form'> kalo udah ketemu, ganti code itu ama <div id='krb-form'>
kalo udah.. sekarang cari ]]></b:skin> terus diatasnya copas code ini :

#krb-form iframe{
background:transparent url(background 1) no-repeat top left;
border:7px solid transparent;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#000;
width:504px;
}
#krb-form iframe:hover{
background:transparent url(background 2) no-repeat top left;
border:7px solid transparent;
}

#krb-form a{
color:#000;
}

sama seperti tutorial kedua.. background 1 dan 2 diganti url gambar.
oke.. sekarang liat hasilnya..

selesaaii.. gampang kan??
buat sekarang segini dulu aja ya.. kalo bingung atau ada yg mau ditanyain add FB aku aja ya :3
oya.. yang udah pake share linknya di komentar dong.. biar aku bisa liatt