1. Go to
Blogger Dashboard > Layout > Add a Gadget
2. Select HTML/Javascript
3. Copy the code below and paste on it.
4. Now Change the colored value of Image URL, Link to Image, Image Caption etc. as your way.
2. Select HTML/Javascript
3. Copy the code below and paste on it.
4. Now Change the colored value of Image URL, Link to Image, Image Caption etc. as your way.
<style
type="text/css">
/*
http://dimpost.com */
#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/AVvXsEgyFtTl1Ga-YpCa67U4AG-RzkpRhH8oawLaD74LMpgd6BKq7uuJaj0705twF1rxFkdBM9ZsVWgrusa9vV93wjFnn_qZWOXBU8l6BZjyxwZAChpTaZkn9sUJC90ojn_o1A7S41z2cv68hBYT/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/AVvXsEjF3kMICfmK60thfXf2YIRsg_DImiqT_5bOOJkEhM0HMLRsk7DzgP3Bzp2riF9IqdUGIis89xmeByXQpW7171-oMOUnbKvNnhyLUK4BYYJ0AaI6SJX4sIR0kwC3nANKipSU1FrcoO6r31Gm/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;}
/* ---------
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://dimpost.googlecode.com/files/js-image-slider.js"
type="text/javascript"></script>
<div
id="sliderFrame">
<div
id="slider">
<a
href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8M_Gb5scsi51ziOSSF8CoXh1HSv41ESpitQ8Priu_lon1FnLnWDVdShq_bXdt8_gcSDgbiwfWQOawSvCaDK-7YeFv-Dax3LRJJEB_0j_d_41eAtdsS9YN6ojKonxu19khM7kvPuKxTzJA/s1600/image-slider-1.jpg"
alt="#htmlcaption1"
/></a>
<a
href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXsWTwMQI6azKGwmbo9Ue-PDNnWoDaDgnvUdeq0G8ONeZ-81R5y38QL2kDlnuTvSnMR4O9-LZxD6SPAKxzJujnsqu717f0eKC9EwmwJg6QUhThuJGAgBU4Slkf9j7AxLoC36TU79YOwGOl/s1600/image-slider-2.jpg"
alt="Go UP!" /></a>
<a
href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1w_R6PSLvV902AVv3piEzSZ-OfFBkHa2YQOtIEoeb71kf8km8doaxSgI_rYrGiAe_iRnA6ATsU324wp3cD3NY-H71WF4gdHOXBIHkr08-59LK81gWIqZU4x9oBi_0syW3_6YhN0uaKRas/s1600/image-slider-3.jpg"
alt="Pure Javascript. No jQuery. No flash."
/></a>
<a
href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXPQzfAFSthoax2nqmlsYmIj1-mqZHqOBvd3bUIcqyhNttvNJFQv91gWSi-RDW07OLG6_keH7ki_ZIaZ1PEr2etNYixi12QjWvfPvrLSB06biFrFP7BFui-bqNnWpoa7EkjINHf5f73qGA/s1600/image-slider-4.jpg"
alt="#htmlcaption2"
/></a>
<a
href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh_JZ1bwJ6nqW7C5rVoD41Rk5tcWJbanE0R6385W-IgooQs0tUL9lJfnL_JIYR069-LldsDbA9xhGUOGsJ6Y4UDsrOlbv91azssd8FI2xD7E3s3Vjm8GiLhYtEolF_w07ig0na9ssqUhn2/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>
Tidak ada komentar:
Posting Komentar