..heii, aku bukannya mo buat slide kayak gambar di atas luch! wehehehee..
sebenernya, udah agak malez mosting tentang tutor2 kayak gini.
..tapi, kemarend ada yg minta cara buat slide nih. kalo gak salah namane rizal.
(hehe.. bener gak ya?) .. jadi ea udah dech. gak pa2.
dahh.. langsung aja. (soalnya udah sore nihh.. takut gak nyampe')
1. masukin kode di bawah tepat di atas ]]></b:skin> :
/*Menu Slider*/
#slider {
background:transparent; height:150px; overflow:hidden; position:relative; margin-left:0px}
#mover {width:auto; position:absolute; overflow:hidden}
.slide {padding: 10px 0px; width:580px;float:left; position:relative; height:150px}
.slide h2 {font-family:verdana,georgia,helvetica,Sans-Serif; font-size:10pt;color: #ac0000; padding-left:10px; margin-left:10px; width:350px; overflow:hidden}
.slide h2 a:link, .slide h2 a:visited {color:#000; background-color:transparent}
.slide h2 a:hover {color:#0B0B61; background-color:transparent}
.slide p {color:#000; font-size:10px; font-family:verdana,georgia,helvetica,Sans-Serif; text-align:justify; line-height:15px; width:350px; padding-left:0px; margin:0px}
.slide img {margin-left:20px; position:absolute; top:50px; left:350px; background:#2E2E2E; padding:5px 5px}
#slider-stopper {position: absolute;font-family: verdana, georgia, helvetica, Sans-Serif;top:10px; right:10px; color:#B40404; padding:3px 8px; font-size:11px; font-style:bold; text-transform:uppercase; z-index:1000}
2. masukin kode di bawah sebelum </head>
<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/slider.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
..yg ke-3, ..masuk ke Page Elements.
klik add a gadget, tyuz HTML / Javascript.
masukin kode ini:
<!-- Casing -->
<div id="casing">
<!-- Slider -->
<div id="slider">
<div id="mover">
<div class="slide">
<h2><a href="http://leciku.blogspot.com/2009/12/read-more-otomatis.html">Read More Otomatis</a></h2> <p>..udah lama nih aku gak mosting. hehehe...ehm. mungkin, nie bukan hal baru buad temen2. tapi ya.. sapa tau nie berguna buad yg lagi nyari. langsung ke TKP aja ya?1. masuk ke edit HTML (centang Expand Widget Templates)2. masukin kode di bawah sebelum </head> :<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot;...</p> <img alt="" width="130px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioSaeRDqymdISo3-eamEhvK5F8FngTcttfefzD7X1dkV9eQXkEnp3NMpCKF9X7C8Fbo9HZ3sZd5kTiII1x-pY_SPOMQ6gDA6E5M5AYhDxTwOX3kxLdW38d48RNFsVpVs1fylcZiw6-5wA/?imgmax=800" height="80px"/>
</div>
<div class="slide">
<h2><a href="http://leciku.blogspot.com/2009/11/memasang-emoticon-di-kolom-komentar.html"> emoticon comment</a></h2> <p>...dah, gak usah basa-basi lagi. :P
langsung aja:...</p> <img alt="" width="130px" src="http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-014.gif?imgmax=800" height="80px"/>
</div>
<div class="slide">
<h2><a href="http://leciku.blogspot.com/2009/11/memodifikasi-tags-cloud.html"> modifikasi tags cloud</a></h2> <p>...mosting apa ya? jadi bingung aQ....kali ini, aku pengen mosting cara buat tags cloud biar terlihat warna-warni. (...kaya' pelangi. hehehe...)_pertama, masuk ke blogger, truz masuk ke edit HTML.jangan lupa tuk nyenntang "expand template widget"* kedua, cari kode: ketiga, masukkan kode di bawah tepat di atas kode tadi: .label-size-1...</p> <img alt="" width="130px" src="http://upload.wikimedia.org/wikipedia/en/thumb/a/a5/TagCloudCloud.png/800px-TagCloudCloud.png?imgmax=800" height="80px"/>
</div>
<div class="slide">
<h2><a href="http://leciku.blogspot.com/2009/10/cinlok-cinta-lokasi.html"> Cinlok</a></h2> <p>deket sama seseorang memang menyenangkan. apalagi kalo lawan jenis. wUa! gUbRaK! ...itulah yang sekarang ini ku rasain. awal kenal "dia" siih... "ahh... biasa aja. gak ada yg spesial". tapi pas udah deket/ akrab, eh... ternyata nih anak asyik banget! sumpah! gak nyangka gue. apa lagi dia satu kelas sama aku.
hii...</p> <img alt="" width="130px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhshlzXT_9MKDxcbJYVXSyWsnz86R8PBx2yoW0315WD2RG1HetyZTZv10A0SjktSEexYhA_y30jZHhvOf3nr-3FcxVfxggbGy1qVHrJfSemyKo3tgCcfNleZJATKmYrD1XGDJ0u2kqKErA/s320/images.jpeg?imgmax=800" height="80px"/>
</div>
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
</div>
<div class="clear"/></div>
keterangan:
yg merah buat url.
yg aqua buat judul.
yg kuning buat keterangan.
tyuz yg biru buat url gambar.
..dahh, jadi.
petramaxxxxxxx
ReplyDeletepertamaaaaaaaaaaaaaaaaxxx
ReplyDeleteboleh dicoba tuh,,,,,,,biar blogku makin cakep....
wah, hebat tutorialnya euuuyyy.....
ReplyDeletesalam kenal...
wah ternyata kalah cepatt
ReplyDeletewah, kok ada yang nyelip diantara komenku...?
ReplyDeletejadinya aku kelimaxxxxxxxx
ReplyDeleteuenaknya.....
jiaha! kok malah perang sh?
ReplyDelete:f:
Infonya cukup mantab nih....
ReplyDeleteUntuk masalah ganti template untk wodprs...maaf ku blm tau...maklum terjunnya cuma di blogspot bukan wodprs....Thanks
mantap dan makxyoouueesss,langsung sedoot ya
ReplyDeletelangsung coba aja mas ya, semoga saya berhasil, soalnya masih pemula sih :)
ReplyDeletemantabbbbb brow,,,,
ReplyDelete@ osi, iia. gk p2. mksih blik. :c:
ReplyDelete@ Rumah Blogger " Sabirinnet " moenas,
yupz. thankz. :h:
Ow..gitu ya, bikin J query..dulu blog ku aku pasangin spt itu juga cuman versi lain bukan yg kayak punya kamu bro..tapi load page nya jadi lemot makanya aku hapus...thanks infonya ya bro
ReplyDeletepanjang amat ya kodenya, tapi hasilnya OK salut
ReplyDeleteKeren nih. Mantap infonya.
ReplyDeletemakasih banyak ya udah posting tutorial ini aku jadi terharu....karena udah lama aku nyari tutorial seperti ini tapi baru nemunya di blog ini..
ReplyDeletesekali lagi thank ya...
izin save totorial ini,...
walah ndang mudeng kalo soal script kayak gini :c:
ReplyDelete@ rifky, oO.. yapz. tp blog ini gk trllu berad maz loadnya. beratya aja cuma 105,67 KB. hehe..
ReplyDelete@ jola, hihi.. mksih.
@ opung, yupz.
@ rizal, hehe.. iya. silahkan. :a:
@ wahyoe koplo, :g: haha.. jan, cah reog kie pinter ngeblog trae. wkwkwk
makasih yah tutornya... :h:
ReplyDeleteoia...
Dukung dan Vote ina kag di DISINI
Pilih yang --> inamuth2.blogspot.com - Malang in My Dream : Nikmati Sejuta Rasa Bakso
Thanks before!!!!
iia mbak inaa. udah tak vote 5x. hihi.. :g:
ReplyDeletegagal pertamaxxxxxxxx,,
ReplyDeletetapi lumayan mantab gan,,, :c:
aQu ko bingung siy,,,:D
ReplyDelete:c: :c: :c:
wih mantab tips nya??
ReplyDeleteclurutan sik ya kyaknya dah di siapi t d atas
heheh:
bingung.maksdnya slide gimana ............
ReplyDelete@ wafyez, haha! he'eh. :c:
ReplyDelete@ nyielz, ..hehe, baca lg aj. smbil di pahamin. :d:
@ noexz, halah.. ojo maz! ngko nek mbok tumpa'i ajur! wkwkwk :f:
@ didiets, ituch.. yg kayak di headerQ. yg ganti2 itu loch! :m:
wah ini kaya'e yg aku pasang diblogku yg dulu, skrg dah pake WP jadi tinggal install plugIns ini itu :c:
ReplyDeletebagus neh buat newbie sepertiku,,langsung dipraktek,,mohon comentar balik ya digubuk aku mas,,tapi make bahsaa inggris,,asala tulis aja gpp..thanks..ditunggu
ReplyDeleteajur tukokne neh lo...sangu mu akeh to
ReplyDeletewakkwakkwakk
@ bol3ok, ihh.. enak'e. pengen punya domain kaya' gitu aq. :k:
ReplyDelete@ my world, hehe.. iya.
@ noexs, lah.. sangu 2000e akeh.
ngge mangan thok entek maz. (ombene ngutang)
jiakakakakakk'
Perasaan kemarin phonank dah komen deh...
ReplyDeletetp kok gak ada yah pas phonank check lagi....
kmanakah..??
yowesss...
tak komen lagi,, wah...
source kodenya,,,
banyak juga..
hehe.. masa' sih maz?
ReplyDeletelum masuk paling. :f:
yupz.
wadow,. tulisan yg kuning na gak kliatan shob,. hehe
ReplyDelete