Cara Membuat Slider Zinmag

Coba perhatikan header blog ini, apakah ada yang menarik? Iya, slide “featured content”, yang bergerak disertai dengan foto. Menarik bukan? Postingan ini mungkin bukan yang pertama kali, namun tidak membuat saya ciut nyali untuk berbagi. Share tidak mengenal waktu dan tempat, tapi niat dam keinginanlah yang menjadi factor utamanya. Banyakan cuap-cuap ya?he..3x. Oke klo gitu, saya tidak usah berpanjang lebar lagi [ntar isi posting malah ngk connect ma judulnya], mari kita mulai dengan, hal apa yang kita butuhkan......



Pertama, tentu potongan artikel [post summary] dan foto terkait adalah hal yang terpenting. Hal ini berfungsi sebagai isi dari slider [lihat slide featured content di bagian atas]. Setelah itu, ikuti langkah-langkah pemasangannya sebagai berikut....


Pertama, Login kea kun blogger anda. lalu masuk ke edit halaman, terus edit HTML [jangan lupa centang expand widget]. Tahap selanjutnya, cari kode : ]]></b : skin, dan masukan kode script di bawah ini persis di atasnya;
#slider {
background:url(http://img99.imageshack.us/img99/9594/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 selanjutnya, masukkan kode di bawah ini tepat di bawah kode : ]]></b : skin :
<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://bloggerstyles.com/data/templates/000/Zinmag-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>

Terakhir, cari kode dibawah ini :
<div id='header-wrapper'>
.............
.............
……….
……….
</b:section>

setelah itu, masukkan kode di bawah ini tepat di bawah kode di atas :
<!-- Casing -->
<div id='casing'>

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

<div class='slide'>
<h2><a href='http://herdiansyah-hamzah.blogspot.com/search/label/Seri%20Tulisan%20Politik' title='Seri Tulisan Politik'>Seri Tulisan Politik</a></h2>
<span class='slmet'/>
<p>Seri tulisan politik adalah kategori gagasan dan pandangan saya terhadap realitas politik Indonesia hari ini. Kaum mapan (borjuasi) telah membangun tembok angkuh yang menenggelamkan kepentingan rakyat miskin selama bertahun-tahun. Untuk itu, perjuangan merebut kekuasan adalah hal mutlak yang harus kita lakukan demi merebut kembali hak rakyat yang telah dirampas selama ini. Memang berat dalam kegamangan dan kebingungan gerakan demokratik hari ini, namun tidak ada yang mustahil jika bangunan persatuan mampu kita bangun bersama.... </p>
<img alt='' src='http://i278.photobucket.com/albums/kk100/herdiansyah/Featuredpolitics.jpg'/>
</div>

<div class='slide'>
<h2><a href='http://herdiansyah-hamzah.blogspot.com/search/label/Seri%20Tulisan%20Hukum' title='Seri Tulisan Hukum'>Seri Tulisan Hukum</a></h2>
<span class='slmet'/>
<p>Seri tulisan hukum adalah kategori gagasan dan pandangan saya terhadap realitas hukum di Negara kita hari ini. Fenomena korupsi, praktek mafia peradilan dan akses hukum yang begitu sempit bagi masyarakat marginal [miskin], adalah buah nyata dari sistem hukum kita yang masih timpang dan bobrok. Hal ini ditandai dengan kian maraknya praktek pembungkaman dan penutupan ruang dan kesempatan bagi rakyat untuk mendapatkan bantuan dan pelayanan hukum secara cuma sebagaimana yang telah diamanatkan oleh Undang-undang Dasar Negara kita....</p>
<img alt='' src='http://i278.photobucket.com/albums/kk100/herdiansyah/Featuredlaw.jpg'/>
</div>

<div class='slide'>
<h2><a href='POST-LINK-HERE' title='Action Games'>Seri Tulisan Daerah</a></h2>
<span class='slmet'/>
<p>Seri Tulisan Daerah ini, tentu akan lebih banyak mengupas tentang situasi Kalimantan Timur, tempat saya bermukin saat ini. Lebih tepatnya, seri ini adalah ide dan gagasan soal fenomena social yang tengah terjadi di daerah, khusunya menyangkut kemiskinan, pengangguran dan kesejahteraan. Kemiskinan merupakan bentuk langsung dari ketidakstabilan ekonomi (unstabilished economic). Meningkatnya kriminalitas, dekadensi moral, ketidakpercayaan diri secara massal, serta lemahnya produktivitas dan kreatifitas, adalah buah dari kemiskinan....</p>
<img alt='' src='http://i278.photobucket.com/albums/kk100/herdiansyah/Daerah.png'/>
</div>

<div class='slide'>
<h2><a href='POST-LINK-HERE' title='POST-TITLE-HERE'>Seri Blogger Tricks</a></h2>
<span class='slmet'/>
<p>Seri Blogger tricks ini merupakan kumpulan postingan mengenai trik, tips dan segala sesuatu yang berbau blogger. Meskipun tulisan-tulisan disini bukan ide dan gagasan original dari saya, tapi tetap nekad aja deh. Itung-itung berbagi buat sesama. Banyak dari para blogger yang ingin ini dan itu untuk mengoptimalkan dan mempercantik blog, tapi terkadang bingung harus bagaimana. Nah, mampir dan sempatkan aja untuk membuka serial kategori blogger tricks ini. Mudah2an bermanfaat bagi anda yang membacanya...</p>
<img alt='' src='http://i278.photobucket.com/albums/kk100/herdiansyah/BloggerTricks.png'/>
</div>

<div class='slide'>
<h2><a href='POST-LINK-HERE' title='POST-TITLE-HERE'>Seri Tulisan Internasional</a></h2>
<span class='slmet'/>
<p>Under Construction, be Patient...</p>
<img alt='' src='http://i278.photobucket.com/albums/kk100/herdiansyah/internationalnews.png'/>
</div>

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

<div class='clear'/>

Selesai, selamat mencoba....

Catatan : untuk merubah background image slide yg berwarna hitam, silahkan cari kode :#slider {
background:url(http://img99.imageshack.us/img99/9594/slide.png), dan ganti gambar dan warna sesuai dengan selera anda. Sedangkan isi posting dan gambar bergerak, silahkan ganti sesuai dengan isi blog anda karena kode di atas menggunakan isi dan slide blog kepunyaan saya.