| 10 comments ]

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(http://4.bp.blogspot.com/_0CLPmP1ydOo/SYp13iDNovI/AAAAAAAAAvg/wUu2lIrDIHc/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.

10 comments

Haady said... @ May 1, 2009 at 9:35 AM

Sip, langsung praktek sob..
Thx bertubi-tubi ya..
^_^

Itik Bali said... @ May 2, 2009 at 5:48 AM

He..he agak bingung sih
tapi keren tips nya
salam kenal ya..

Planet Jingga said... @ May 2, 2009 at 6:07 PM

di save dulu ah ntr dicoba.

angga said... @ May 6, 2009 at 2:43 AM

Keren sob infonya. Tips nya aku simpen dulu.
Slider memang bisa membuat pengunjung makin betah di blog kita.

KOKODA said... @ June 3, 2009 at 3:15 PM

Salam Kenal...

Sy sdh cuba gdn petunjuk2 ini tp sy blm berhasil, Tolong petunjuknya..? sy masih bingun di scrip NO 4 - 5 , cara pasangnya itu dibawah scrip No 4 saya masih bingun krn saya sdh juba tp gagal...

Email : tianty2010@yahoo.com
sy tunggu ya...GBU

sunter57 said... @ June 20, 2009 at 2:38 PM

Boleh juga ne buat di coba. Thx B 4

Fajar_Bukan said... @ June 23, 2009 at 1:46 PM

TIps nya berkelas,..........
di simpan dulu,........... by http://fajarbukan.blogspot.com/

Mukminin milano said... @ July 14, 2009 at 9:59 AM

THX TIPS'A SOB....

muantab dh....

pupung said... @ July 19, 2009 at 10:17 PM

dapet tips baru lagi nehh..thanks ya

tian said... @ January 27, 2010 at 2:11 AM

di coba dulu yach bro,. thanx

Post a Comment