Back to Top
Artikel Terbaru
Home » » Cara Membuat Slide Foto Keren

Cara Membuat Slide Foto Keren

Selamat datang di Blog taharonqi.blogspot.com, kali ini saya akan berbagi kepada sobat-sobat blogger semua tentang sebuah cara membuat slide foto pada blog dan dijamin pasti keren, script ini saya dapatkan dari www.helperblogger.com, dan untuk seperti apa nanti hasilnya bisa lihat sreenshot berikut :


Keren bukan?
Oke untuk seperti apa membuatnya ikuti langkah-langkahnya sebagai berikut :
  • Login ke Akun Blogger sobat
  • Pilih Tata Letak
  • Klik Tambahkan Gadget
  • Pilih HTML/Javascript
  • Masukkan kode dibawah ini :

<style type="text/css"> /* JavaScript Image Slider By http://www.helperblogger.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(http://4.bp.blogspot.com/-2AdmLJaub9w/T_2NGQHAKfI/AAAAAAAACjk/ZHsOsqRyBEk/s1600/helperblogger.com-ribbon.png) no-repeat; z-index: 7; } #slider { width: 500px; height: 218px; background: #fff url(http://3.bp.blogspot.com/-5y0QxGG9wcM/T_2NFVukvgI/AAAAAAAACjg/lgnDtn_n-7w/s1600/helperblogger.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(http://3.bp.blogspot.com/-G-iekYUr83U/T_2NEluoaDI/AAAAAAAACjY/TR1wfeuaO_k/s1600/helperblogger.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="http://code.helperblogger.com/js-image-slider.js" type="text/javascript"></script> <div id="sliderFrame">
 <div id="ribbon">
</div>
<div id="slider">
 <a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-1.jpg" alt="Happy to Share"/></a> <a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-2.jpg" alt="Happy to Share"/></a> <a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-3.jpg" alt="Happy to Share"/></a> <a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-4.jpg" alt="Happy to Share."/></a> <a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-5.jpg" alt="Happy to Share"/></a> </div>
</div>
Keterangan :
Tulisan berwarna  Biru      : Ganti dengan URL gambar sobat
Tulisan berwarna  Kuning : Ganti dengan Deskripsi gambar sobat
Tulisan berwarna  Merah  : Ganti dengan URL yang sobat inginkan

  • Klik Simpan dan lihat hasilnya.
Mungkin itu saja yang dapat saya bagi pada kesempatan kali ini, jika ada yang kurang jelas sobat bisa berkomentar, terima kasih.

Dapatkan Update Artikel Terbaru

Follow Us

Di Posting Oleh : Mas Onqi

Hai Kawan ONshare™, perkenalkan saya Onqi dari Gresik Jawa Timur. Kegiatan saya sehari-hari adalah bekerja dan juga kuliah, untuk kegiatan blogging ini adalah kegiatan untuk mengisi waktu luang saja. dan terima kasih kawan ONshare™ sudi mengunjungi blog saya ini.
Artikel Dilindungi Oleh : DMCA.com

0 comments:

Post a Comment