Skip to main content

Cara Membuat Simple Manual Slider Di Blogspot

Ok sobat pada kesempatan ini anisuka.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=”https://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=”https://4.bp.blogspot.com/-YERVd9YpTGw/VIvMSOleBZI/AAAAAAAACvU/j8hH5cRMwbY/s1600/slide2.jpg” alt=”Slider Two” height=”300″ width=”650″/></li>
<li id=”three”><img src=”https://3.bp.blogspot.com/-YqJYQ3Mc1ME/VIvMTxddwjI/AAAAAAAACvc/jMWPXthav3s/s1600/slide3.jpg” alt=”Slider Three” height=”300″ width=”650″/></li>
<li id=”four”><img src=”https://3.bp.blogspot.com/-RvoiRJ5L8AE/VIvMVXnGOQI/AAAAAAAACvk/wHkPb4mTEwk/s1600/slide4.jpg” alt=”Slider Four” height=”300″ width=”650″/></li>
<li id=”five”><img src=”https://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.

Buka Komentar
Tutup Komentar