Cara Membuat Menu Slider Versi 2 Menggunakan JQuery

Cara Membuat Menu Slider Versi 2 Menggunakan JQuery

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

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 ]]>

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

Cari kode berikut:

..........
.........

Letakkan kode berikut tepat di bawah kode tadi :

Posted by Amatullah

Cara Membuat Arsip Seperti Menu Dtree?

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

Posted by Amatullah

Cara Membuat Menu Scroll

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!

Posted by Amatullah

Membuat menu tab view

Bagaimana cara membuat menu tab view sederhana seperti gambar disamping..

• 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