Ok sobat pada kesempatan ini seocips.com akan membagikan Image slider for Blog. Nah karena sebelum-sebelumnya slider yang dibagikan bersifat otomatis maka beikut ini adalah manual slider.

Cara memasang Manual slider ini di blog sangat mudah dan gak ribet, anda tinggal mengcopy semua kode dibawah ini kemudian edit seperlunya dan pastekan ke dalam blog anda, apakah anda ingin menambahkannya sebagai widger, di homepage blog ataupun di postingan terserah anda.

Simple CSS Manual Slider For Blogspot


Ok langsung saja berikut ini adalah Simple CSS Manual Slider For Blog Blogger. Copy code dibawah ini dan letakan ditempat yang anda inginkan di template blo anda.

<style>
* {margin: 0;padding: 0;}
#content-slider {width: 650px;overflow: hidden;height: 300px;margin: 30px 0 0 0;border: solid 1px #666;}
#content-slider-inside {list-style: none;height: 320px;overflow: scroll;overflow-y: hidden;}
#content-slider-inside li {width: 650px;background: #ccc;height: 300px;color: #666;font-size: 200px;font-family: "Times New Roman", Times, serif;font-style: italic;text-align: center;line-height: 300px;}
#navigation {list-style: none;margin: 20px 0 0 0;float: right;}
#navigation li {float: left;width: 30px;height: 30px;text-align: center;margin: 0;border: solid 1px #ccc;line-height: 30px;font-family: Arial, Helvetica, sans-serif;margin: 0 0 0 5px;}
#navigation li a, #navigation li a:link, #navigation li a:visited {text-decoration: none;display: block;height: 30px;color: #666;}
#navigation li a.selected, #navigation li a.selected:link, #navigation li a.selected:visited {background: #666;color: #fff;}
#navigation li a:hover, #navigation li a:focus, #navigation li a:active {background: #666;color: #fff;}
</style>
<div style="width: 650px; margin: 0 auto 0 auto;">
<div id="content-slider">
<ul id="content-slider-inside">
<li id="one"><img src="http://3.bp.blogspot.com/-eHtZq2b1svM/VIvMQ1CjsvI/AAAAAAAACvM/Uqqc_oJ7iXY/s1600/slide1.jpg" alt="Slider One" height="300" width="650"/></li>
<li id="two"><img src="http://4.bp.blogspot.com/-YERVd9YpTGw/VIvMSOleBZI/AAAAAAAACvU/j8hH5cRMwbY/s1600/slide2.jpg" alt="Slider Two" height="300" width="650"/></li>
<li id="three"><img src="http://3.bp.blogspot.com/-YqJYQ3Mc1ME/VIvMTxddwjI/AAAAAAAACvc/jMWPXthav3s/s1600/slide3.jpg" alt="Slider Three" height="300" width="650"/></li>
<li id="four"><img src="http://3.bp.blogspot.com/-RvoiRJ5L8AE/VIvMVXnGOQI/AAAAAAAACvk/wHkPb4mTEwk/s1600/slide4.jpg" alt="Slider Four" height="300" width="650"/></li>
<li id="five"><img src="http://3.bp.blogspot.com/-eHtZq2b1svM/VIvMQ1CjsvI/AAAAAAAACvM/Uqqc_oJ7iXY/s1600/slide1.jpg" alt="Slider Five" height="300" width="650"/></li>
</ul>
</div>
<ul id="navigation">
<li><a href="#one">1</a></li>
<li><a href="#two">2</a></li>
<li><a href="#three">3</a></li>
<li><a href="#four">4</a></li>
<li><a href="#five">5</a></li>
</ul>
</div>
Edit seperlunya dengan cara ganti kode warna merah diatas dengan gambar milik sobat. Terus jika tertarik baca juga:
Bagaimana tampilannya bro? keren gak, mudah-mudahan puas. ok smoga bermanfaat.
1 Komentar untuk "Cara Membuat Simple Manual Slider Di Blogspot"