19 Cara Membuat Menu Slider Versi 2 Menggunakan JQuery

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

image
Berikut anaa coba berbagi trik membuat menu slider versi dua. Mengapa versi dua? Karena sebelumnya anaa pernah posting trik membuat menu slide atau tab view slide versi 1 yang contonya bisa dilihat pada halaman awal (home) pada sidebar kanan blog ini.
Cara membuat menu slider versi 2

  • Langkah pertama pada dasbor klik tata letak=> edit  HTML=> cari kode ]]></b:skin>
letakkan kode berikut diatas kode tadi:
#slider    {
    background:url(YOUR-LINK-HERE/slide.png);
    height: 254px;
    overflow: hidden;
    position: relative;
    margin: 5px 0;
}
#mover {
    width: auto;
    position:absolute;
    overflow:hidden;
}

.slide {
    padding: 20px 0px;
    width: 1000px;
    float: left;
    position: relative;
    height:200px;
    }
.slide h2 {
    font-family:georgia, Helvetica, Sans-Serif;
    font-size: 24px;
    color: #ac0000;
    padding:0px 0px 0px 30px;
    margin:0px 0px;
    width:500px;
    overflow:hidden;
    }

.slide h2 a:link, .slide h2 a:visited  {
    color:#fff;
    background-color: transparent;
    }
.slide h2 a:hover  {
    color: #ddd;
    background-color: transparent;
    }
span.slmet {
    color: #ee0909;
    font-size: 10px;
    font-family:Tahoma, georgia, Helvetica, Sans-Serif;
    line-height: 20px;
    width: 500px; 
    padding:0px 0px 0px 30px;
    margin:0px 0px;
    text-transform:uppercase;
}   
.slide p {
    color: #999;
    font-size: 12px;
    font-family:georgia, Helvetica, Sans-Serif;
    line-height: 20px;
    width: 500px; 
    padding:0px 0px 0px 30px;
    margin:0px 0px;
    }
.slide img {
    position: absolute;
    top: 20px;
    left: 577px;
    background:#fff;
    padding:10px 10px;
    }
#slider-stopper {
    position: absolute;
    font-family: Georgia, Helvetica, Sans-Serif;
    top: 113px;
    right: 65px;
    color: #AC0000;
    padding: 3px 8px;
    font-size: 14px;
    text-transform: uppercase;
    z-index: 1000;
    }   
  • Langkah ke dua letakkan script JQuery dan kode berikut sebelum </head>

<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/jquery-1.2.6.js' type='text/javascript'/>
<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/slider.js' type='text/javascript'/>

<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
    var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>
Cari kode berikut:
<div id='header-wrapper'>
..........
.........
</b:section>

Letakkan kode berikut tepat di bawah kode tadi :


<!-- Casing -->
<div id='casing'>
<!-- Slider -->
<div id='slider'>
<div id='mover'>
<div class='slide'> <span class='slmet'> Posted by Amatullah </span> <h2><a href='http://amatullah83.blogspot.com/2010/01/cara-membuat-menu-dtree.html'>Cara Membuat Arsip Seperti Menu Dtree?</a></h2> <p>Kali ini saya ingin berbagi lagi trik membuat menu dtree. Apakah menu dtree itu? Menu dtree yang saya maksud adalah menu yang menyarupai menu Windows explorer seperti pada image disamping</p> <img alt='Ngeblog Offline' src='http://i50.tinypic.com/dbk4tv.jpg'/>
</div> <div class='slide'> <span class='slmet'> Posted by Amatullah </span> <h2><a href='http://amatullah83.blogspot.com/2009/07/cara-membuat-menu-scrolling.html'>Cara Membuat Menu Scroll</a></h2> <p>Dengan membuat menu scroll untuk menyimpan catatan kita, link, atau banner akan menghemat tempat pada blog kita. Apa menu scroll itu? Baiknya langsung saja liat contoh disamping!</p> <img alt='Tab View Slide' src='http://i45.tinypic.com/b50h0y.jpg'/>
</div> <div class='slide'> <span class='slmet'> Posted by Amatullah </span> <h2><a href='http://amatullah83.blogspot.com/2009/11/cara-membuat-menu-tab-view.html'>Membuat menu tab view</a></h2> <p>Bagaimana cara membuat menu tab view sederhana seperti gambar disamping..</p> <img alt='tab view sederhana' src='http://i50.tinypic.com/25fimhu.jpg'/> </div> </div>
<!-- /Mover --> </div>
<!-- /Slider --> </div>
<div class='clear'/>
  • Silahkan edit tulisan yang berwarna biru, merah dan hijau dengan link, judul dan deskripsi postingan anda !
  • Terakhir jangan lupa save deh!
  • Semoga berhasil!
Untuk melihat hasilnya klik disini


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

19 komentar :

  1. detail bangett.. mantepp niee ... baca2 lebh jelas doloee ah

    BalasHapus
  2. Subhanalloh...ana bener2 salut ma ukhti. Hebat bener ya ilmunya. Kalau boleh tau, emang ukhti sekolah di mana?? Keliatannya ilmunya komprehensif sekali..

    BalasHapus
  3. datang berkunjung sambil bawa camilan buat begadang nanti malam... sekeranjang... durian! :thumbsup: :thumbsup::thumbsup:|

    BalasHapus
  4. waahh lengkap sekali ya, thanx ilmunya ya bro...

    BalasHapus
  5. kalo ada waktu akan saya coba, terima kasih udah share nya, sukses terus mas.

    BalasHapus
  6. Mantap dibikin manual, berhubung aku ga ngerti bahasa gituan aku pake plugins aja deh...

    BalasHapus
  7. bagus mas ada slidenya
    walau saya selalumemilih enggak pake slide dulu ndak berat :D

    terus kalau kasih saran yah judul itu jgn pas di sorot kok malah jadi kecil... judul kan menguatkan... masak pas disorot kok malah mengecil

    terus slide show tab view disampingkeknya gambar jadi gak pas tengah kayaknya kode resize gambarnya kehapus pas gatni urlgambar

    BalasHapus
  8. kak, aQ mw nanyaa nih kak,, tp bukan ttg slide tab,,
    aq binun

    kk tolong lyt blog aq deh,,

    yang postingan yg ada download nya kan cuma postingan pendek, jd gk butuh readmore.. pdhl di html nya gak ku ketik span class=fullpost, tpi kok ttp keluar readmore nya?

    cra ilangin nya gmn?

    thx ya k
    kl dh bls,tlg kbri y :)

    BalasHapus
  9. wah ternyata ribet juga ya...

    thank sherenya...saya mau nyoba tapi beelum berani karen atahun malah eror

    salam kenal nih...

    BalasHapus
  10. terimakasih saran dan kritiknya!!!

    untuk suci ntr anaa jawab keblog ade ya, krn trbtsx kolom komentar tuk tampilkan kode JS.

    BalasHapus
  11. berselancar kerumah sahabat, dapat tambahan ilmu lagi. Trims atas ilmunya sangat membantu, semoga suksess n tetap semangat

    BalasHapus
  12. aduuh kaak,,sya malah jd bingung kalo ditulis di shout mix gt,,kk gy OL gak? sya gy buka FB nie :)

    BalasHapus
  13. @ suci, ya udh ntr anaa kirim diinbox fb ade!

    BalasHapus
  14. wuih......keren nieh, ternyata walau template gak ada slidenya bisa dipasang slide dengan tambahan sedikit HTML, keren. mampir yuk

    BalasHapus
  15. @ benar maya, terimakasih kunjungannya!

    BalasHapus
  16. Kak dah dikirim ke inbox bLm?

    BalasHapus
  17. sudah de' silahkan dicek!

    BalasHapus
  18. inih dia yang masih dalam proses pembelajaranku, membuat slide

    BalasHapus