Membuat image slider di blog

 Membuat image slider di blog

 sebelumnya dapat juga dibuat : slider dengan efek Quake 
 dapat dilihat DISINI
Berikut adalah kodenya

<style type="text/css">
/* http://lhulunk.blogspot.co.id/*/
#sliderFrame { position:relative; width:100%; margin:0 auto 10px; }
#slider { width:100%; height:306px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirohyphenhyphenwerfJkVG6Sb_Yx3-mzF_8gzcJpcYBxMWXaV35igIjh3k5Y7w7C1Fn-1_m4FZdEE8IpMivainPIijPs8hBJcO5g5-QFbqgyqm5ubgLGYXKx5WwQHPAF5dSNmltnjv_AknSegi8C5Y2/s1600/loading.gif) no-repeat 50% 50%; position:relative; margin:0 auto; box-shadow:0 1px 5px #999999; }
#slider img { position:absolute; border:none; display:none; }
#slider a.imgLink { z-index:2; display:none; position:absolute; top:0; left:0; border:0; padding:0; margin:0; width:100%; height:100%; }
div.mc-caption-bg,div.mc-caption-bg2 { position:absolute; width:100%; height:auto; padding:0; left:0; bottom:15px; z-index:3; overflow:hidden; font-size:0; }
div.mc-caption-bg { background-color:black; }
div.mc-caption { font:bold 14px/20px Arial; color:#EEE; z-index:4; padding:10px 0; text-align:center; }
div.mc-caption a { color:#FB0; }
div.mc-caption a:hover { color:#DA0; }
div.navBulletsWrapper { background:none; padding-left:20px; position:relative; z-index:5; cursor:pointer; }
div.navBulletsWrapper div { width:11px; height:11px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxI9O11O-_S1HTRLkF5mY11D5QDhjNDLMHjjpCvrd2qAWYRW5kalPH2QsnPOwvBwTb6mybgkS2YHMzGgE7QFMpcbf1b6QIpJiDgTAAkEV5P0Htiqgc25puHSklEePgf4RQOcxdpKc0Jh_4/s1600/bullet.png) no-repeat 0 0; float:left; overflow:hidden; vertical-align:middle; cursor:pointer; margin-right:11px; position:relative; }
div.navBulletsWrapper div.active { background-position:0 -11px; }
.intro { bottom:0; color:rgba(0,0,0,0.2); font-size:16px; position:absolute; right:0; text-decoration:none; z-index:99999; }
#slider { transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); }
</style>
<script src="http://project.dimpost.com/image-slider/js-image-slider-2.js" type="text/javascript"></script><div id="sliderFrame">
<div id="slider">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMfJmnixmiDfrNSvCwrp0mG2Xk_a470HHzaXADGoGEiVLnXFPxP2Hg6VypCVgNzYNOzU6-YBppxeBhbxBWA00Z45w6RpkM54kn2m4AmuxUHsvWfOmn9G8w3XlsvcTuCwG9h4q9jxParN2t/s1600/image-slider-1.jpg" alt="#htmlcaption1" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0rA26KXWq3nBNpaIQ_2Urqcug5jUR9uDO8R_ucdlPZfLDux5g5_HmjKU6O-hJDoYw7HCkfet2UCXN7T-7jJAxyuDfmeQDKae_JvZ1ybnGyVfgAdGpfgZfOOs5F_if3tHYKJY4sHBrEQ8e/s1600/image-slider-2.jpg" alt="cropoz!" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqDdFgrO4qATtiI8twH8OwoBUQXIDl31PfX5q0sILlB9FVcBzcnZa8jpMcC3PUxzGm_Ci6QuAj9XWYn76kfgCgJnPL_PRl2M21F4G0uUtDqNssaOgRNIvQvrZZ6VmBavzyM1ljZHhQs9Vq/s1600/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitn69WvNg34br0r2FO0Ce3y4DfVaZdsZptDqb6Wr9XN-m6iYuU6sOVDvfTb6YyGYaE-S8hnqjWjwKspa5HaBfeDEi34lGbPFg7VCXp7iMtB7Uvlije1WQFjRwZ6js5Uw1aGeIfNpW4qD_L/s1600/image-slider-4.jpg" alt="#htmlcaption2" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilDy-BDC5sStOLaFCKzNWZh2sogydN7CZhcnpTdDl_EWOApXGjFBqvay-Y1c_CFwI2pYj-x7mAEuur83JuUxWulj7ovqRvQ24jiDoXsy_NKXR4tZKnmC9N6xah3oYWBARKQkAv5of_eOZg/s1600/image-slider-5.jpg" alt="Stay Connected"/></a>
</div>
<div id="htmlcaption1" style="display: none;">
Image Slider by <a href="http://lhulunk.blogspot.co.id/="_blank">lhu#nk</a>
</div>
<div id="htmlcaption2" style="display: none;">
<a href="http://lhulunk.blogspot.co.id/" target="_blank">CSS</a> <a href="http://www.seocips.com" target="_blank">blogger</a> Rocks.
</div>
</div>

Ganti tulisan berwarna biru dengan link tujuan gambar anda