Pages

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="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">&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.

32 comments:

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

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

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

    ReplyDelete
  4. Infonya cukup mantab nih....

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

    ReplyDelete
  5. mantap dan makxyoouueesss,langsung sedoot ya

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

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

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

    ReplyDelete
  8. 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

    ReplyDelete
  9. panjang amat ya kodenya, tapi hasilnya OK salut

    ReplyDelete
  10. 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,...

    ReplyDelete
  11. walah ndang mudeng kalo soal script kayak gini :c:

    ReplyDelete
  12. @ 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

    ReplyDelete
  13. 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!!!!

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

    ReplyDelete
  15. gagal pertamaxxxxxxxx,,
    tapi lumayan mantab gan,,, :c:

    ReplyDelete
  16. aQu ko bingung siy,,,:D

    :c: :c: :c:

    ReplyDelete
  17. wih mantab tips nya??

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

    ReplyDelete
  18. bingung.maksdnya slide gimana ............

    ReplyDelete
  19. @ 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:

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

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

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

    ReplyDelete
  23. @ 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'

    ReplyDelete
  24. 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..

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

    yupz.

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

    ReplyDelete

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