Saturday, April 13, 2013

Memasang Slider dengan Jquery Manual

Penggunaan Slider memang menjadi keindahan tersendiri bagi blog, namun ada beberapa yang mengatakan bahwa slider justru merusak keindahan blog. Pada kali ini saya akan membagikan kepada teman-teman cara memasang slider pada blog dengan manual.

Langkah-langkah Install Silder Image Manual untuk Blogger Blog Anda!
1. Go to Blogger Dashboard > Layout > Add a Gadget
2. Select HTML/Javascript
3. Copy the code below and paste on it.
Klik Button / Tombol
<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/v9vvehruur3swp7/n17-content-slider-01.js" type="text/javascript"></script>
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img alt="Blogger Tips and Tricks" border="0" src="https://bitly.com/24workpng1" style="bottom: 10%; position: fixed; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img alt="Latest Tips For Bloggers" border="0" src="https://bitly.com/24workpng1" style="bottom: 10%; position: fixed; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img alt="Blogger Tricks" border="0" src="https://bitly.com/24workpng1" style="bottom: 10%; left: 0%; position: fixed;" /></a>
<style type="text/css">
ul.slideshow {
list-style:none;
width:100%;
height:320px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Droid Sans,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:100%;
height:320px;
border:none;
}
#slideshow-caption {
width:100%;
height:50px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:500;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:1000;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style>
<br />
<ul class="slideshow">
<li><a href="https://www.blogger.com/blogger.g?blogID=8322400826293890020#" target="_blank"><img alt="Replace This Text With Your Featured Post 1 Description." src="http://2.bp.blogspot.com/-kN9wDJN0-kU/UlEyuWKm5PI/AAAAAAAACfs/ePUp5TflDso/s1600/image-slider-1.jpg" title="This is featured post 1 title" /></a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=8322400826293890020#" target="_blank"><img alt="Replace This Text With Your Featured Post 2 Description." src="http://1.bp.blogspot.com/-0uD1rqEqmn4/UlEzNrvK7bI/AAAAAAAACgE/gw3_uB8Z9Xw/s1600/image-slider-2.jpg" title="This is featured post 2 title" /></a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=8322400826293890020#" target="_blank"><img alt="Replace This Text With Your Featured Post 3 Description." src="http://3.bp.blogspot.com/-H7jOhm-huAg/UlEzHwDWQhI/AAAAAAAACf8/GIESvcDrtuM/s1600/image-slider-3.jpg" title="This is featured post 3 title" /></a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=8322400826293890020#" target="_blank"><img alt="Replace This Text With Your Featured Post 4 Description." src="http://2.bp.blogspot.com/-NNq_IfDzjjU/UlEy8GBNosI/AAAAAAAACf0/phbMnA_ZWPM/s1600/image-slider-4.jpg" title="This is featured post 4 title" /></a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=8322400826293890020#" target="_blank"><img alt="Replace This Text With Your Featured Post 5 Description." src="http://4.bp.blogspot.com/-Rpp3JhulYWw/UlEzZZ1g5kI/AAAAAAAACgM/V0yC5u0r5wY/s1600/image-slider-5.jpg.png" title="This is featured post 5 title" /></a></li>
</ul>
Lihat Demo:
Blogger Tips and TricksLatest Tips For BloggersBlogger Tricks
  • Replace This Text With Your Featured Post 1 Description.
  • Replace This Text With Your Featured Post 2 Description.
  • Replace This Text With Your Featured Post 3 Description.
  • Replace This Text With Your Featured Post 4 Description.
  • Replace This Text With Your Featured Post 5 Description.
4. Setelah itu ubahlah warna, url gambar, link untuk gambar, gambar caption, dan lain-lain sesuai dengan keinginan anda.

Demikian dan terima kasih telah berkunjung. Untuk melihat tips lainnya silahkan kunjungi label Tips Blogger

Silahkan berikan kritik dan saran jika salah | Berkomentarlah dengan baik dibawah ini, dan gunakan media ini sebaik mungkin agar blog ini berguna dengan baik pula | Terima Kasih Telah Berkunjung | Semoga Bermanfaat!
EmoticonEmoticon