Cara Membuat Menu Slider Versi 2 Menggunakan JQuery

• Langkah pertama pada dasbor klik Template => edit  HTML=> cari kode ]]></b:skin>
• letakkan kode berikut diatas kode ]]></b:skin> : 

Kode

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

Kode

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

Kode

<div id='header-wrapper'>

..........

.........

</b:section>

Letakkan kode berikut tepat di bawah kode tadi : 

Kode

<!-- 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 !
• Klik Simpan.

Jika anda menyukai artikel diblog ini, silahkan Klik Join This Site or Berlangganan gratis via email, dengan begitu anda akan mendapatkan kiriman artikel setiap ada artikel yang terbit di Dunia Herni Chand.