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

28 komentar:

  1. Yang gue ngerti cuma tutorial nomer 3 doang

    BalasHapus
  2. Aku agak kurang ngerti yang nomor dua bang hehehe Yang lain sih ngerti ^_^ Oke, aku bookmark dulu, ini penting hahaha :))

    BalasHapus
  3. @ryan coba dibaca baca lagii.. kalo masih ga ngerti tanyain ajaa..
    @bang basith udah diperelas lagi nomer 2nya tuhh

    BalasHapus
  4. waaah, kalo cara nambahin reply kayak begimana ?

    BalasHapus
  5. well, ana faham makasih karung :3

    BalasHapus
  6. @bepbep yg disamping comment ini? ntar yah di posting selanjutya
    @pandu : woke broo

    BalasHapus
  7. gue nggak ngerti satu tutorial pun .-'
    oke betapa bodohnya gw~

    BalasHapus
  8. Wah, bisa dicoba, nih..
    Aku save halamannya, ya ^^..
    Mo kucobain ntar >.<

    BalasHapus
  9. Lucunyaa.. . sayang masih belum ngerti .. Y.Y

    BalasHapus
  10. ukurannya berapa nih buat tutor yg ke tiga ???

    BalasHapus
  11. nice tutor :D , lengkap caranya :D

    BalasHapus
  12. kok gue udh nyoba yang tutorial ke 2 gak ngaruh ya? pas gue arahin ke gambarnya kok dia gak berubah? haha

    BalasHapus
  13. et et et et gak jadi, ternyata ngaruh tapi setelah gue refresh selama 6 kali -_-"

    BalasHapus
  14. gue udh pasang (tutorial ke 2) nih linknya http://artwork-upiupil.blogspot.com/http://artwork-upiupil.blogspot.com/

    Mau nanya dong kalo biar gambar guenya ke samping tuh gimana ya (dibawah header), kalo ke bawah kok jelak ya

    BalasHapus
  15. @rene coba baca baca lagii.. nanti juga bisa.. atau tanya tanya ajaa..
    @happy sippp
    @senandung coba praktek duluu
    @dwi silakan dicobaa
    @mukminin silahkann
    @upil itu udah kesamping ah ==

    BalasHapus
  16. Makasih karung buat tutorialnya.. :D
    Salam kenal ya

    BalasHapus
  17. keren tutornya :D
    tapi saya terlalu takut kalo ngedit lewat "edit HTML", suka gagal, dan alahasil template jadi berantakan :((

    btw, salam kenal om karung X))

    BalasHapus
  18. tutorialnya berguna kakak terima kasih infonya langsung di cobaak :D

    BalasHapus
  19. Asyik banget deh bisa belajar tutorial :D

    BalasHapus
  20. kode body nya gak ketemu . . :(

    BalasHapus