Cara Mudah Cek Kode Warna HTML dengan Kode CCS

Cara Mudah Cek Kode Warna HTML dengan kode CCS

Read More

Cara Membuat Widget Slideshow Keren di Blog Terbaru

Cara Membuat Widget Slideshow Keren di Blog Terbaru

Membuat slideshow pada blog ternyata mudah dan tak sesulit yang dibayangkan, coba browsing berkali-kali tapi susah memasangnya, kali ini saya mau share info tentang cara membuat slideshow dengan menggunakan kode HTML, langsung saja gan lihat ke TKP dibawah ini:
1. Masuk/Login dulu ke Blogger.com
2. Pilih Tata Letak
3. Klik Tambah Widget
4. Pilih HTML/Java Script
5. Copy dan Paste Kode dibawah ini dan Simpan
6. Ganti kode url blog dengan gambar agan

<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/AVvXsEj7CfJSHws2amwbAEIW1HGGO5IA5iZA5ERfN3Nh5XmSaeFix8ACdKNMlN19N_xI1rR1_wpNtSiJwb40VYtSTacbgpv9OtLUAQwf_KN2xC-1jzxfshzJ-Q-NB_jW_GTPxLDhBr2ZBPN5MQ/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/AVvXsEh35ab3xqgFxCAtScLjK3TpytjJjWKo9Lpnv60eFqZYF6hMROqphtt9DgbQeGwW1ZC5gFwh2ADdVmK8IwjvbiDZIswW4fp8LVwTqRvyrv3ozRJUCODu2ufn_yYB_AdbAuqDbAkEUb423A/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/AVvXsEgJlSgnNOVXsbPeA8chbe_KnsQ9oq8i0JiVSIylVsBF_ckptzA-wE8aUG4JEm6Mwc8C8ZXhsDMA8Y08NfCawWfinQYnpI4AFYflQ6LEWv5eU-Os1DKS_YzxwoO78QMEd6ERBheDnyMOCw/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>

SEMOGA BERMANFAAT.. 

Read More