Keren.!!! Image Slider

info-gamepc.blogspot.com - Disini saya akan berbagi slider gambar keren untuk blogger, slider ini dapat digunakan sebagai penghias tampilan sidebar kanan maupun kiri dan bisa dipasang di menu utama Blog Slider Gambar ini dibuat oleh menucool.com.

Slider ini benar-benar keren, memiliki efek geser cukup bagus, muncul diblog dengan pembukaan waktu yang diciptakan oleh Javascript, tanpa menggunakan jQuery atau flash. Dan satu lagi mudah disesuaikan dengan selera kita.

DEMO

Mari kita praktekkan:

1. Pergi ke Blogger Dashboard => Tata Letak => Tambah Gadget
2. Pilih HTML / Javascript
3. Salin kode di bawah ini dan paste.

<style type="text/css">
#sliderFrame {position:relative;width:700px;margin: 0 auto 40px;}
#slider {
width:700px;height:306px;/* Make it the same size as your images */
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhykoahI3TxDqdKl0c_cE-HHF5ktYcBpScH1cj3mB_88cR4VIaYfLJ2NCEH943yPqqmfYjG-CJ-VxWl-kFq2vAIC7PDE1HbfDAlzsO2zzUBiQMmZdUkupaqb-FEkb-CFGmpTT6Vla8cf44h/s1600/loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;/*make the image slider center-aligned */
box-shadow: 0px 1px 5px #999999;
}
#slider img {
position:absolute;
border:none;
display:none;
}

/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
z-index:2;
display:none;position:absolute;
top:0px;left:0px;border:0;padding:0;margin:0;
width:100%;height:100%;
}

/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
position:absolute;
width:100%;
height:auto;
padding:0;
left:0px;
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;
}

/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper {
top:320px; left:280px; /* Its position is relative to the #slider */
width:150px;
background:none;
padding-left:20px;
position:relative;
z-index:5;
cursor:pointer;
}

/* each bullet */
div.navBulletsWrapper div
{
width:11px; height:11px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGo5brHWDvUn2Lf8mjFCuRYmJqzJ8_5xCnncxuHNkrxJiMbsHxL4OlDj2sbIIRuLfgRYe5we9NhUy8FqBeAyzc60-dvZ2MZD8hNf7JYB0FBUqnQ0b_7Y4Y4fwyrVp08UKqcINiiLFz8ghU/s1600/bullet.png)
no-repeat 0 0;
float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
margin-right:11px;/* distance between each bullet*/
_position:relative;/*IE6 hack*/
}
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;
}
/* --------- Others ------- */
#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-1.js" type="text/javascript"></script>
<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/AVvXsEhDB4bRa7p-BSKO0sxvB4STNhDODDY5OdBZSnecdeb7U_bIUaEFceozI37vUH8UaV2Y8URfGntMpr7W24667afGBAj9BmiHt0oKjjN9fRk6wNFYy6XL_NVeIt65KPbkufDePG14zYJSl3bc/s1600/image-slider-1.jpg" alt="#htmlcaption1" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHQlKl44cCHI1YBFk7P78WoBR9s-mVdgD2Vk_K7qh2EsuBBckiLcTC0SomfU5ZU-_WAKGvo1ArhHPfsPtuLwojyWtXCyUR3p13a5eqgQq0U07pM0Mbblg6a-a5aZOqlPfQoHTLtYdMpgyC/s1600/image-slider-2.jpg" alt="Go UP!" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy6S4Ehx41_V1cqW5pgDKO8Z98nCWkEwdf6J5sw4Ms52wRhuov9qp_22UVPdF9qZ03TXlY6cPa6JgJttO4C7s7JmSdtlJUrXf1wIVhr3so_BLGe1z7_BVrk-cdzuqqOW7qVyFeJkQshUlu/s1600/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtVoDerOIU9b53HUe9P0nWBklpgtc41C1lSP8-BTqVlxhofDVAaO3gqAOVHBoZ5cHi9igV7UjXl6iWsPKcqmTjiovE04hZjBO3LFvsvzT7DoqeQ-lRRVnFeuDET2SoUZr6hD8KPu-iqxud/s1600/image-slider-4.jpg" alt="#htmlcaption2" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGefHUMWaIwQouKMieqMfurGGcTzrlOOh50gtuBKVm2XNwLX-SC8c0dGXXruhmUpqxCI755eU3VEEdtasKjtUypYJSMEbvgDQuX81B304Z6_gAOjIqqjfN1jv-78rQHtgF4IDVrzMceZbM/s1600/image-slider-5.jpg" alt="Stay Connected"/></a>
</div>
<div id="htmlcaption1" style="display: none;">
Image Slider by <a href="http://dimpost.com/" target="_blank">DIMPost.com</a>
</div>
<div id="htmlcaption2" style="display: none;">
<a href="http://www.w3schools.com/css/" target="_blank">CSS</a> <a href="
http://www.w3schools.com/js/default.asp" target="_blank">JavaScript</a> Rocks.
</div>
</div>

4. Ganti text yang berwarna biru dengan gambar kamu, terakhir simpan dan lihat hasilnya Semoga berhasil...