Trik Membuat Menu Slider

Posting kali ini adalah untuk memenuhi permintaan salah satu sobat Tipspack. Saya akan membahas bagaimana membuat menu slider seperti yang anda bisa lihat di halaman blog saya, tepatnya di bawah navigation bar.



Saya tidak akan panjang lebar menjelaskan kegunaanya, anda lihat sendiri dihalaman blog saya kemudian anda simpulkan apa kira-kira kegunaannya.

Jika anda ingin menambahkan slider ini ke template anda, silahkan ikuti langkah berikut:

PERHATIAN: SEBELUM ANDA MELAKUKAN EDIT INI, SEBAIKNYA ANDA LAKUKAN BACKUP FULL TEMPLATE. SEHINGGA JIKA TERJADI KESALAHAN ANDA TINGGAL MENGUPLOAD KEMBALI TEMPLATE ANDA!

1. Seperti biasa, login>Layout>Edit HTML>Expand Widget Template

2. Kemudian letakan script dibawah ini diatas script: ]]></b:skin>

#slider {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3FBHr8Yjvt3nDEkEP8EdsPFsiQqmW2dl3SkaHX78sIDGvnWgoSLwzGwKIQF-4c7uenKbIyS7Am9z9hooEpVK5DEY2k94Y49Kih-xESubSpBsKwQmL5wL9V7CHxyra6LdnTmf3-THrlK0/s1600/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;
}

3. Letakan script dibawah ini, dibawah kode ini: ]]></b:skin>

<script src='http://web2feel.com/monezine/wp-content/themes/primus/js/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://web2feel.com/monezine/wp-content/themes/primus/js/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>

4. Cari kode berikut:

<div id='header-wrapper'>
----(biasanya script yang berada disini berbeda-beda, bergantung pada template. Anda perhatikan saja script diatas dan dibawah ini)-----
</b:section>

5. Letakan script dibawah ini, dibawah script NO. 4

<!-- Slider -->
<div id='slider'>
<div id='mover'>

<div class='slide'>
<h2><a href='POST-LINK-HERE' title='POST-TITLE-HERE'>POST-TITLE-HERE</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>POST-SUMMARY-HERE</p>
<img alt='' src='IMAGE-LINK-HERE'/>
</div>
<div class='slide'>
<h2><a href='POST-LINK-HERE' title='POST-TITLE-HERE'>POST-TITLE-HERE</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>POST-SUMMARY-HERE</p>
<img alt='' src='IMAGE-LINK-HERE'/>
</div>

</div>
<!-- /Mover -->
</div>
<!-- /Slider -->

<div class='clear'/>

Nah, selesailah sudah proses pemasangan script nya.

Sekarang Perhatikan yang satu ini:

* Ganti Tulisan POST-LINK-HERE dengan link ke posting anda.

* Ganti POST-TITLE-HERE , dengan judul posting.

* Ganti Posted by Author On Month - Day - Year , dengan tanggal posting.

* Ganti POST-SUMMARY-HERE, Dengan ringkasan posting anda.

* Ganti IMAGE-LINK-HERE , dengan link gambar yang akan anda pasang.

NOTE:

Jika anda ingin menambahkan jumlah posting yang akan anda letakan di slider, anda copy script dibawah ini:

<div class='slide'>
<h2><a href='POST-LINK-HERE' title='POST-TITLE-HERE'>POST-TITLE-HERE&lt;/a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year &lt;/span>
<p>POST-SUMMARY-HERE&lt;/p>
<img alt='' src='IMAGE-LINK-HERE'/>
</div>

diatas script yang ini:

</div>
<!-- /Mover -->
</div>
<!-- /Slider -->

Nah selesailah sudah semua proses yang lumayan panjang itu, tapi jika anda melihat hasil nya, anda pasti tidak akan menyesal.