Home » » membuat slide

membuat slide



..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(){
$(&quot;.trigger&quot;).click(function(){
$(&quot;.panel&quot;).toggle(&quot;fast&quot;);
$(this).toggleClass(&quot;active&quot;);
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 &lt;/head&gt; :&lt;script type='text/javascript'&gt; var thumbnail_mode = &amp;quot;no-float&amp;quot;...</p> <img alt="" width="130px" src="http://lh3.ggpht.com/_wyuKzbY9B1A/SuQOiU0tPgI/AAAAAAAAAcQ/rgnL0rj74BE/read%20more_thumb%5B3%5D.jpg?imgmax=800" height="80px"/>
</div>

<div class="slide">
<h2><a href="http://leciku.blogspot.com/2009/11/memasang-emoticon-di-kolom-komentar.html">&nbsp;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">&nbsp;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">&nbsp;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.
Share this article :

+ komentar + 32 komentar

Saturday, December 12, 2009 11:36:00 PM

petramaxxxxxxx

Saturday, December 12, 2009 11:38:00 PM

pertamaaaaaaaaaaaaaaaaxxx
boleh dicoba tuh,,,,,,,biar blogku makin cakep....

Saturday, December 12, 2009 11:38:00 PM

wah, hebat tutorialnya euuuyyy.....
salam kenal...

Saturday, December 12, 2009 11:38:00 PM

wah ternyata kalah cepatt

Saturday, December 12, 2009 11:39:00 PM

wah, kok ada yang nyelip diantara komenku...?

Saturday, December 12, 2009 11:39:00 PM

jadinya aku kelimaxxxxxxxx
uenaknya.....

Sunday, December 13, 2009 9:58:00 AM

jiaha! kok malah perang sh?
:f:

Sunday, December 13, 2009 10:48:00 AM

Infonya cukup mantab nih....

Untuk masalah ganti template untk wodprs...maaf ku blm tau...maklum terjunnya cuma di blogspot bukan wodprs....Thanks

Sunday, December 13, 2009 9:00:00 PM

mantap dan makxyoouueesss,langsung sedoot ya

Sunday, December 13, 2009 9:01:00 PM

langsung coba aja mas ya, semoga saya berhasil, soalnya masih pemula sih :)

Monday, December 14, 2009 2:02:00 PM

mantabbbbb brow,,,,

Monday, December 14, 2009 3:39:00 PM

@ osi, iia. gk p2. mksih blik. :c:

@ Rumah Blogger " Sabirinnet " moenas,
yupz. thankz. :h:

Monday, December 14, 2009 4:50:00 PM

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

Monday, December 14, 2009 7:28:00 PM

panjang amat ya kodenya, tapi hasilnya OK salut

Tuesday, December 15, 2009 9:26:00 AM

Keren nih. Mantap infonya.

Tuesday, December 15, 2009 9:26:00 AM

makasih banyak ya udah posting tutorial ini aku jadi terharu....karena udah lama aku nyari tutorial seperti ini tapi baru nemunya di blog ini..

sekali lagi thank ya...

izin save totorial ini,...

Tuesday, December 15, 2009 12:27:00 PM

walah ndang mudeng kalo soal script kayak gini :c:

Tuesday, December 15, 2009 7:57:00 PM

@ rifky, oO.. yapz. tp blog ini gk trllu berad maz loadnya. beratya aja cuma 105,67 KB. hehe..

@ jola, hihi.. mksih.

@ opung, yupz.

@ rizal, hehe.. iya. silahkan. :a:

@ wahyoe koplo, :g: haha.. jan, cah reog kie pinter ngeblog trae. wkwkwk

Wednesday, December 16, 2009 9:30:00 AM

makasih yah tutornya... :h:

oia...

Dukung dan Vote ina kag di DISINI
Pilih yang --> inamuth2.blogspot.com - Malang in My Dream : Nikmati Sejuta Rasa Bakso
Thanks before!!!!

Wednesday, December 16, 2009 4:09:00 PM

iia mbak inaa. udah tak vote 5x. hihi.. :g:

Wednesday, December 16, 2009 6:34:00 PM

gagal pertamaxxxxxxxx,,
tapi lumayan mantab gan,,, :c:

Wednesday, December 16, 2009 7:06:00 PM

aQu ko bingung siy,,,:D

:c: :c: :c:

Thursday, December 17, 2009 1:10:00 AM

wih mantab tips nya??

clurutan sik ya kyaknya dah di siapi t d atas
heheh:

Friday, December 18, 2009 8:46:00 AM

bingung.maksdnya slide gimana ............

Friday, December 18, 2009 1:48:00 PM

@ wafyez, haha! he'eh. :c:

@ 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:

Friday, December 18, 2009 2:49:00 PM

wah ini kaya'e yg aku pasang diblogku yg dulu, skrg dah pake WP jadi tinggal install plugIns ini itu :c:

Friday, December 18, 2009 2:54:00 PM

bagus neh buat newbie sepertiku,,langsung dipraktek,,mohon comentar balik ya digubuk aku mas,,tapi make bahsaa inggris,,asala tulis aja gpp..thanks..ditunggu

Saturday, December 19, 2009 3:04:00 AM

ajur tukokne neh lo...sangu mu akeh to
wakkwakkwakk

Saturday, December 19, 2009 4:14:00 PM

@ bol3ok, ihh.. enak'e. pengen punya domain kaya' gitu aq. :k:

@ my world, hehe.. iya.

@ noexs, lah.. sangu 2000e akeh.
ngge mangan thok entek maz. (ombene ngutang)
jiakakakakakk'

Saturday, December 19, 2009 5:20:00 PM

Perasaan kemarin phonank dah komen deh...
tp kok gak ada yah pas phonank check lagi....

kmanakah..??

yowesss...
tak komen lagi,, wah...
source kodenya,,,

banyak juga..

Thursday, December 24, 2009 8:31:00 PM

hehe.. masa' sih maz?
lum masuk paling. :f:

yupz.

Thursday, January 07, 2010 9:27:00 PM

wadow,. tulisan yg kuning na gak kliatan shob,. hehe

Post a Comment

Silahkan berkomentar dengan baik, sopan, bijak dan membangun demi kepentingan bersama.

 
Support : My personal blog - Yusron Krista
Copyright © 2011. Leciku - Portal Berita Anak Muda - All Rights Reserved
Proudly powered by Blogger