Cara Membuat Slide Show Foto Di Blog

Cara Membuat Slide Show Foto Di Blog - Mumpung masih bermain laptop . kali ini saya akan berbagi cara  untuk menghias blog yaitu salah satunyadengan cara memasang slide show pada blog . slide show . merpakan gambar yang bergantian dalam waktu tertentu , supaya jelasnya lihat screnshootnya di bawah ini.

DEMO

Berikut cara memasang slider gambar ( slide show

1. Masuk Blog sobat

2. Pilih Tata Letak => Pilih Widget HTML/JavaScript

3. Kemudian Pastekan kode dibawah ini tepat didalam Widget HTML/JavaScript tersebut

<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMzmmybAxnwv3JgOqCS2t4wr3uf-W2zsEZ89U2_5HHj09Zyqti8F4drdfDaqgomHDp0OczKBAiBjUqoljVBcJch_zrFAMNtOiUShRyMpWqatjDRxtaNPGjHy9pVjQYTs6OkJ4eaHqgIEI/s1600/helperblogger.com-ribbon.png) no-repeat; z-index: 7; } #slider { width: 500px; height: 218px; background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBO0knKitw3mxOHIAosPlUBp5IE9NrEsoNcHDWS3Vqc8YKSzOcwpt_we1adgsBIAokGHomtwBHOac_0I2iilX_uRKUMbLN0r0vUmN3uM3Xru3JqUK6NWKrpdz7G2iGhhM1zChaBtHcif0/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLw_wmfisu1B6BBqkqhs-1U5kA5K6ach3Yromu5XmjOpyGYDOoCSuViaXCRSDdOzTMUVkeBhTwPxGhrykOimQLEnpkGOv4cuqhYPmbmYGyiFN4wQDuKZgRZaAbEwoiECl79AB3qqo7HOg/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="Image Slider By helperblogger.com"/></a> <a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-2.jpg" alt="Image Slider By helperblogger.com"/></a> <a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-3.jpg" alt="The slide is a linking image"/></a> <a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-4.jpg" alt="Pure Javascript. No jQuery. No flash."/></a> <a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-5.jpg" alt="#htmlcaption"/></a> </div></div>

5. Kemudian sobat hanya perlu mengubah sedikit url gambarnya.

6. Terakhir klik save dan selesai deh

Demikian ya sob artikel saya mengenai Cara Membuat Slide Show Foto Di Blog . jika ada masalah tanyakan saya . maaf saya tidak dapat menjelaskan dengan detail . karena ini sudah magrib . wassalam. JIka sobat berhasil maka nantinya , hasilnya akan seperti dibawah ini :

Share This Article

Facebook +Google Twitter Digg Technorati Reddit

Sumber Berita Ini: Cara Membuat Slide Show Foto Di Blog

Riio Cyber-Art

Blog ini berisi informasi mengenai dunia blogging dan internet dari berbagai sumber, jika anda menyukai dan mau dapatkan Update berita terbaru, harap ikuti blog ini dengan memasukan Email anda atau mengikuti Twitter/Facebook, dengan begitu anda secara otomatis akan mendapatkan Update Berita terbaru disini.

• Rss
• Twitter
• FaceBook
• Follow This Blog

Baca Juga Artikel Terkait Lainnya

Berita Populer Lainnya