1. Seperti biasa login dulu sob.
2. Pilih menu Tata letak > Add Gadget > HTML/Javascript.
3. Pastekan kode di bawah ini.(bisa juga sobat letakan dalam postingan pada bagian HTML)
<style>
#slider {
position:absolute !important;
top:50%;
left:50%;
width:650px;
height:350px;
margin-top:-175px;
margin-left:-325px;
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
-moz-box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
}
.nivoSlider img {
position:absolute;
top:0;
left:0;
display:none;
}
.nivoSlider a {
border:0;
display:block;
}
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
.nivo-caption {
position:absolute;
left:75px;
bottom:29px;
width:498px;
padding-top:13px;
padding-bottom:13px;
z-index:8;
border:1px solid #000;
border-left-color:rgba(0,0,0,.5);
border-right-color:rgba(0,0,0,.5);
-webkit-box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
-moz-box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
background: -webkit-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
background: -moz-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
background: -o-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
background: -ms-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
background: linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e648494c', endColorstr='#e6262728',GradientType=0 );
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
.nivo-caption p {
margin:0;
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size:14px;
font-weight:bold;
color:#fff;
text-align:center;
text-shadow:0px -1px 0px #000;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
.nivo-directionNav a {
position:absolute;
bottom:30px;
z-index:9;
cursor:pointer;
text-indent:-9999px;
width:45px;
height:39px;
background-image:url(http://4.bp.blogspot.com/-nVH_wLuXb7c/UB62lKkUv1I/AAAAAAAABVM/_FjJIm1wIrM/s1600/
labstrike-arrows.png);
background-repeat:no-repeat;
}
.nivo-prevNav {
left:75px;
background-position:0 0;
box-shadow: 1px 0px 0px rgba(255,255,255,.2), 2px 0px 0px rgba(0,0,0,.4);
}
.nivo-nextNav {
right:77px;
background-position:-45px 0px;
box-shadow: -1px 0px 0px rgba(255,255,255,.2), -2px 0px 0px rgba(0,0,0,.4);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/
jquery.min.js"></script>
<script src="http://www.code.helperblogger.com/jquery.nivo.
slider.js"></script>
<script type="text/javascript">
$(window).load(function () {
$('.nivoSlider').nivoSlider({
effect: 'sliceDown',
directionNavHide: false,
captionOpacity: 1,
controlNav: false
});
});
</script>
<div id="slider" class="nivoSlider">
<img src="http://1.bp.blogspot.com/-21F_RkIo-DM/UB6wSDoVrtI/AAAAAAAABUc/zlWeqKG5XnA/s1600/labstrike-image1.png"
alt="Slider Image 1" title="This Is An Example Of A Caption">
<img src="http://2.bp.blogspot.com/-9vn5zCDd06Q/UB6weSSfN4I/
AAAAAAAABUk/jz9jB35Ejh4/s1600/labstrike-image2.png"
alt="Slider Image 2" title="You Can Add Anything Here">
<img src="http://1.bp.blogspot.com/-W2bnzOGjGow/UB6wnRIq24I/AAAAAAAABUs/KehuTNwZcrQ/s1600/
labstrike-image3.png"
alt="Slider Image 2" title="Like Image Description">
<img src="http://2.bp.blogspot.com/-bpA0v0ayP4o/UB6wyezZ1XI/AAAAAAAABU0/i6u4Ci-JeY8/s1600/
labstrike-image4.png"
alt="Slider Image 2" title="Your image Information">
<img src="http://1.bp.blogspot.com/-m2os5MJOs8s/UB6w-NofxeI/AAAAAAAABU8/E2tMD9nLKYY/s1600/labstrike-image5.png"
alt="Slider Image 2" title="Other opinion">
</div>
* untuk tulisan yang berwarna hijau menunjukan tinggi dan lebar,silahkan atur sendiri sesuai
selera anda.
* untuk tulisan yang berwarna merah menunjukan URL image,silahkan anda ganti dengan URL anda.
* untuk tulisan yang berwarna biru menunjukan nama slider,silahkan anda ganti sesuai
selera4. Simpan dan Lihat Hasilnya..
0 komentar:
Posting Komentar