Baca juga artikel lainnya

Kategori



Kamis, 20 Desember 2012

Cara membuat slideshow keren di blog

Asslamu'alaikum wr.wb 

Cara membuat slideshow keren di blog wah , slideshow kali ini sangat keren banget .. kira kira seperti gambar dibawah ini
dan juga slideshow ini gak usah pake J-query gimana ?? Tertarik  kalo oke kita langsung ke TKP :
  • Login Ke blog
  • Pilih tambah gadget
  • pilih html/javascript
  • Copy dan pastekan kode ini pada javascript
<style type="text/css">
 /* JavaScript Image Slider By http://www.otowebsite.blogspot.com/ */
#mcis {
 display: none;
}
#sliderFrame {
 position: relative;
 width: 500px;
 margin: 0 auto;
        border:5px solid #000;
}
#ribbon {
 width: 111px;
 height: 111px;
 position: absolute;
 top: -4px;
 left: -4px;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9ofoejwAecQxAuYdBswCeDHQplosFKcXcrVft2xQschWdwlb_qMd9s5myNU821Sxv5d076pT8W8AUnJGkcb3j-Ck39DtNA7344D-xXJvuTtL6x1xSu75617ADBIQUdQHC4Ck3D3AUyQ/s1600/otowebsite.blogspot.com--ribbon.png) no-repeat;
 z-index: 7;
}
#slider {
 width: 500px;
 height: 218px;
 background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIb0jGKXkC7zv_z-E4wu8LgpoVDtNaHFOqV4Zhi8cdUygcjoHspn6jYWz0_fOPzS8_Bj4Re5Ka1f4jgNdCNsRfMzJRbU9jf5iphI1GAe5IofA87LMqyX7HtnMP_ApItIuZzntAXZGIXQ/s1600/otowebsite.blogspot.com--loading.gif) no-repeat 50% 50%;
 position: relative;
 margin: 0 auto;
 box-shadow: 0px 1px 5px #999999;
}
#slider img {
 position: absolute;
 border: none;
 display: none;
}
#slider a.imgLink {
 z-index: 2;
 display: none;
 position: absolute;
 top: 0px;
 left: 0px;
 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: 0px;
 bottom: 0px;
 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 {
 top: 250px;
 left: 190px;
 width: 150px;
 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/AVvXsEhoIxyKotpFnhby67oddFmRfAHb1k1E5R_e-SyC5NUH0ySZzyEOeMkReuQyE5ocw38JbLG3zR4G8mD-B38zKu6dIX9llTTcimZorDhr2REkxxHVKL8AbNzKGLbsXQKsVxRAWYVmrFg7ZQ/s1600/otowebsite.blogspot.com-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;
}
#slider {
 transform: translate3d(0,0,0);
 -ms-transform: translate3d(0,0,0);
 -moz-transform: translate3d(0,0,0);
 -o-transform: translate3d(0,0,0);
 -webkit-transform: translate3d(0,0,0);
}
 </style>
<script src="https://otowebsite-blogspot.googlecode.com/svn/trunk/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
     <div id="ribbon"></div>
            <div id="slider">
<a href="#"><img src="ulr gambar" alt="deskripsi"/></a>
<a href="#"><img src="ulr gambar" alt="deskripsi"/></a>
<a href="#"><img src="ulr gambar" alt="deskripsi"/></a>
<a href="#"><img src="ulr gambar" alt="deskripsi"/></a>
<a href="#"><img src="ulr gambar" alt="deskripsi"/></a>
                </div></div>
  • pilih simpan
" Ganti tulisan ulr gambar dengan ulr gambar sobat "

Selamat mencoba

wasslamu'alaikum wr.wb

Artikel Terkait

Anda baru Saja membaca artikel tentang Cara membuat slideshow keren di blog dan anda bisa menemukan postingan Cara membuat slideshow keren di blog ini dengan url http://crgprogramer.blogspot.com/2012/12/cara-membuat-slideshow-keren-di-blog.html,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara membuat slideshow keren di blog ini sangat bermanfaat bagi teman-teman anda, Tapi ingat, jangan lupa untuk meletakkan link Cara membuat slideshow keren di blog sumbernya.

2 komentar:

Ip addres

IP