Nivo Slider - jQuery Image Slider Untuk Blogger

Hari ini saya berbagi mengagumkan, slider gambar indah lain untuk blog Blogger / BlogSpot. Hal ini dibuat dengan jQuery. dan tentu saja HTML dan CSS tetapi keangkeran utama, efek geser dibuat dengan jQuery. Slider Gambar ini dibuat oleh dev7studios.com/nivo-slider/. Mereka melakukan benar-benar pekerjaan yang besar. Slider ini telah diunduh lebih dari 20,00000 kali dari situs mereka. Saya telah membuat versi bloggerized slider. Lihat demo di bawah ini.

• DEMO
• DOWNLOAD

Mari Langkah ke depan untuk menambahkan ini jQuery Image Slider ke Blogger

1 Pergi ke Blogger Dashboard> Tata Letak> Tambah Gadget
2 Pilih HTML / Javascript
3 Copy kode di bawah dan paste di atasnya.

<style type="text/css"/> /* dimpost.com - Basic Style */ body{ background: transparent; font:15px/2 'Adobe Caslon Pro', Georgia, Serif; margin:0; padding:0; } a{outline:0 none} #pagewrap{ margin:10px auto; padding:0; position:relative; height:400px; width: 640px; } #slidewrap{position:absolute;} #slider { border-color: #c0c0c0; border-radius: 5px 5px 5px 5px; border-style: solid; border-width: 10px 10px 30px; box-shadow: 0 0 3px #2F2F2F; height: 280px; margin: 10px; position: relative; width: 600px; } #slider images{ position:absolute; top:0px; left:0px; display:none; } /* The Nivo Slider styles */ .nivoSlider { position:relative; } .nivoSlider images { position:absolute; top:0px; left:0px; } /* If an image is wrapped in a link */ .nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:6; display:none; } /* The slices and boxes in the Slider */ .nivo-slice { display:block; position:absolute; z-index:5; height:100%; } .nivo-box { display:block; position:absolute; z-index:5; } .nivo-directionNav{display:none!important} .nivo-html-caption { display:none; } .nivo-caption{ position:absolute; right:20px; text-align:center; top:130px; width:192px; z-index:60; } .nivo-caption p{margin:0} .nivo-caption .title{font-style:italic} .nivo-controlNav { bottom: -23px; display: block; height: 15px; left: 204px; position: absolute; text-align: center; width: 192px; z-index: 51; opacity: 0.6; } .nivo-controlNav a{ background:transparent url(http://project.dimpost.com/image-slider/images/button.png) no-repeat center center; display:inline-block; height:14px; width:14px; text-indent:-9999px; cursor:pointer; } .nivo-controlNav .active{ background:transparent url(http://project.dimpost.com/image-slider/images/button_active.png); } </style> <script src="http://project.dimpost.com/image-slider/jquery-1.6.1.min.js" type="text/javascript"></script> <script src="http://project.dimpost.com/image-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script> <!--[if IE]> <script src="modernizr-2.0.min.js"></script> <![endif]--> <div id="pagewrap"> <div id="slidewrap"> <div id="slider"> <a href=" http://dimpost.com/ " target="_blank"><img alt="" title="#caption1" src=" http://project.dimpost.com/image-slider/images/sample0.jpg " /></a> <a href=" # " target="_blank"><img alt="" title="#caption2" src=" http://project.dimpost.com/image-slider/images/sample1.jpg " /></a> <a href=" # " target="_blank"><img alt="" title="#caption3" src=" http://project.dimpost.com/image-slider/images/sample2.jpg " /></a> <a href=" # " target="_blank"><img alt="" title="#caption4" src=" http://project.dimpost.com/image-slider/images/sample3.jpg " /></a> <a href=" # " target="_blank"><img alt="" title="#caption5" src=" http://project.dimpost.com/image-slider/images/sample4.jpg " /></a> <a href=" # " target="_blank"><img alt="" title="#caption6" src=" http://project.dimpost.com/image-slider/images/sample5.jpg " /></a> </div> </div> </div> 

4. Ubah link berwarna merah dengan Anda. dan gambar berwarna biru link dengan gambar Anda.

jQuery Carousel Slider untuk Blogger (FlexSlider)

Ini adalah responsif jQuery korsel slider. Slider ini luar biasa yang dikembangkan oleh flexslider.woothemes.com. Ini memiliki beberapa fitur yang sangat keren yang membuat Anda seperti itu. Fitur yang paling keren itu sepenuhnya responsif; Anda tidak perlu tegang tentang slider lebar / tinggi bahkan semua gambar lebar dan tinggi yang otomatis disesuaikan. Dan juga Anda dapat mengatur minimum jumlah / maksimum gambar yang akan tampil di acara berbagai ukuran layar / browser. Jadi secara keseluruhan itu cukup slider korsel indah. Di sini disesuaikan untuk blogger / blogspot sehingga Anda hanya dapat menyalin dan menyisipkan kode untuk diinstal pada blog blogger Anda. Check out live demo dengan mengklik link di bawah.

• Demo1
• DEMO2

Mari kita Instal jQuery Carousel Slider Blog Blogger Anda

1. Pergi ke Blogger Dashboard> Tata Letak> Tambah Gadget
2. Pilih HTML / Javascript
3. Salin kode di bawah dan paste di atasnya.

<style type="text/css"> /* * jQuery FlexSlider v2.0 * http://www.woothemes.com/flexslider/ * * Copyright 2012 WooThemes * Free to use under the GPLv2 license. * http://www.gnu.org/licenses/gpl-2.0.html * * Contributing author: Tyler Smith (@mbmufffin) */ /* Browser Resets */ .flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus{ outline:none; } .slides, .flex-control-nav, .flex-direction-nav{ margin:0; padding:0; list-style:none; } /* FlexSlider Necessary Styles *********************************/ .flexslider{ margin:0; padding:0; } .flexslider .slides > li{ display:none; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; -o-backface-visibility:hidden; backface-visibility:hidden; } /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img{ width:100%; display:block; } .flex-pauseplay span{ text-transform:capitalize; } /* Clearfix for the .slides element */ .flexslider a.intro { bottom:0; color:rgba(0, 0, 0, 0.1); font-size:14px; position:absolute; right:0; text-decoration:none; z-index:99999; } .slides:after{ content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0; } html[xmlns] .slides{ display:block; } * html .slides{ height:1%; } /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ .no-js .slides > li:first-child{ display:block; } /* FlexSlider Default Theme *********************************/ .flexslider{ margin:0 0 60px; background:#fff; border:4px solid #fff; position:relative; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; -webkit-box-shadow:0 1px 4px rgba(0,0,0,.2); -moz-box-shadow:0 1px 4px rgba(0,0,0,.2); box-shadow:0 1px 4px rgba(0,0,0,.2); zoom:1; } .flex-viewport{ max-height:2000px; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; transition:all 1s ease; } .loading .flex-viewport{ max-height:300px; } .flexslider .slides{ zoom:1; } .carousel li{ margin-right:5px; } /* Direction Nav */ .flexslider li { border: 0 none !important; padding: 0 !important; text-indent: 0 !important; } .flex-direction-nav a{ width:30px; height:30px; margin:-20px 0 0; display:block; background:url(http://project.dimpost.com/flexslider-carousel/images/bg_direction_nav.png) no-repeat 0 0; position:absolute; top:50%; cursor:pointer; text-indent:-9999px; opacity:0; -webkit-transition:all .3s ease; -moz-transition:all .3s ease; -o-transition:all .3s ease; transition:all .3s ease; } .flex-direction-nav .flex-next{ background-position:100% 0; right:-36px; } .flex-direction-nav .flex-prev{ left:-36px; } .flexslider:hover .flex-next{ opacity:0.8; right:5px; } .flexslider:hover .flex-prev{ opacity:0.8; left:5px; } .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover{ opacity:1; } .flex-direction-nav .disabled{ opacity:.3!important; filter:alpha(opacity=30); cursor:default; } /* Control Nav */ .flex-control-nav{ width:100%; position:absolute; bottom:-40px; text-align:center; } .flex-control-nav li{ margin:0 6px; display:inline-block; zoom:1; *display:inline; } .flex-control-paging li a{ width:11px; height:11px; display:block; background:#666; background:rgba(0,0,0,0.5); cursor:pointer; text-indent:-9999px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.3); -moz-box-shadow:inset 0 0 3px rgba(0,0,0,0.3); box-shadow:inset 0 0 3px rgba(0,0,0,0.3); } .flex-control-paging li a:hover{ background:#333; background:rgba(0,0,0,0.7); } .flex-control-paging li a.flex-active{ background:#000; background:rgba(0,0,0,0.9); cursor:default; } .flex-control-thumbs{ margin:5px 0 0; position:static; overflow:hidden; } .flex-control-thumbs li{ width:25%; float:left; margin:0; } .flex-control-thumbs img{ width:100%; display:block; opacity:.7; cursor:pointer; } .flex-control-thumbs img:hover{ opacity:1; } .flex-control-thumbs .active{ opacity:1; cursor:default; } </style> <script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.js"></script> <script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.flexslider-min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", animationLoop: false , itemWidth: 210 , itemMargin: 0 , minItems: 1 , maxItems: 4 }); }); }); </script> <div class="flexslider"> <ul class="slides"> <li> <img src=" http://project.dimpost.com/flexslider-carousel/images/slide1.jpg " /> </li> <li> <img src=" http://project.dimpost.com/flexslider-carousel/images/slide2.jpg " /> </li> <li> <img src=" http://project.dimpost.com/flexslider-carousel/images/slide3.jpg " /> </li> <li> <img src=" http://project.dimpost.com/flexslider-carousel/images/slide4.jpg " /> </li> <li> <img src=" http://project.dimpost.com/flexslider-carousel/images/slide2.jpg " /> </li> <li> <img src=" http://project.dimpost.com/flexslider-carousel/images/slide1.jpg " /> </li> <li> <img src=" http://project.dimpost.com/flexslider-carousel/images/slide4.jpg " /> </li> <li> <img src=" http://project.dimpost.com/flexslider-carousel/images/slide3.jpg " /> </li> <li> <img src=" http://project.dimpost.com/flexslider-carousel/images/slide1.jpg " /> </li> <li> <img src=" http://project.dimpost.com/flexslider-carousel/images/slide4.jpg " /> </li> <li> <img src=" http://project.dimpost.com/flexslider-carousel/images/slide3.jpg " /> </li> <li> <img src=" http://project.dimpost.com/flexslider-carousel/images/slide2.jpg " /> </li> </ul> </div> 

4. Simpan, dan dilakukan.

CATATAN:

• Lupakan lebar dan tinggi akan menyesuaikan otomatis.
• Pasang berwarna pink URL gambar dengan URL gambar yang Anda unggah (Anda dapat meng-upload gambar di blogspot, flickr dll)
• Ada beberapa hal lain yang dapat mengubah, lihat di bawah. Saya kira saya tidak perlu menjelaskan bahwa karena mereka diberi nama seperti karena mereka.

  animationLoop: false , itemWidth: 210 , itemMargin: 0 , minItems: 1 , maxItems: 4 

jQuery Image Slider (wow slider) dengan Thumbnail untuk Blogspot

Di sini saya datang dengan slider lain gambar yang mengagumkan untuk blogspot. Ini adalah 'jQuery Image Slider dengan Thumbnail' diciptakan oleh WOWSlider . Saya melakukan sedikit penyesuaian untuk membuat blogger ramah dengan hormat untuk wowslider. Lihat demo di bawah ini.

• Demo1
• DEMO2

Mari Langkah ke depan untuk menambahkan ini jQuery Image Slider dengan Thumbnail untuk Blogspot

1 Pergi ke Blogger Dashboard> Tata Letak> Tambah Gadget
2 Pilih HTML / Javascript
3 Copy kode di bawah dan paste di atasnya.  

<style type="text/css"> .slider-box { background: none repeat scroll 0 0 #FAFAFA; border-radius: 5px 5px 5px 5px; box-shadow: 0 0 3px #333333; margin: 0 auto; width: 675px; overflow: hidden; } #slider-wrapper { margin: 0 auto; padding: 10px; } #jslider-container { border: 2px solid #FFFFFF; max-width: 550px; position: relative; text-align: left; z-index: 90; } </style> <link href="http://project.dimpost.com/image-slider/wowslider/css/wow-slider.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <div class="slider-box"> <div id="slider-wrapper"> <div id="jslider-container"> <div class="jslider_images"> <ul> <li><a href="http://dimpost.com"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKziPl74EwHbgMgYRENB81CiOthd86L4uEnTs9cvKuFgaK0sVnkKZEuzZWKLpyDInjT2gFSMDSZ5-vOZ4cjAYdBAMMmlREq8FU67RkleO3Ke0yjArfPx4P3rxVcERyqTYQeSLmN8wg4XUC/s550/sample1.jpg" title="Sunset"/> </a>A boat with beautiful sunset.</li> <li><a href="#"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWq98L6cqgrNpIk_7Kpo4YfhPNT7_TpCWwqQcziKpvcVoI4SJvU_AB4zjldNaKUp6EaWh0aSyiS0tQFRWf8ir2C291V3yqOxGwscZR6VXIh0XvMFwbEY8QKzavSBByhC1wWhD3LBC85HYC/s550/sample2.jpg" title="Rainbow"/> </a></li> <li><a href="#"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuVlens8UhNlOQSKmdACg7MsYrP7Rk1bLREMe_1No0drExe_aixJCmg-iEnuw3luU_yvmGl8FAnoyFTsqnQcgR8DHFPDCH1jcFaVx7ecteIcVVQ8Gb4YIOi4UAoW6lacEgdfHHJi0ABkM0/s550/sample3.jpg" title="True Nature"/> </a>Tree in field with blue sky.</li> <li><a href="#"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2svYV767rxg33LEV0kAEZgAmdCVI-zJZrDGjL_l3OYWnVX5OMVksAhbtD_4QUd-COEitW0uFSb8iq1yrTeDVA5azEQsgLcRAWIptE6_9UAuMDXLccOpMJTs1FU0KK2ETV0-OWqSPGteEE/s550/sample4.jpg" title="Sunrise""/> </a>Amaizing sunrise moment</li> <li><a href="#"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp0Lga2jzrDCEeIqINNHWg1A-3ryyZFbCeJ7gBw8BCTGCTexi-SWKpYlFQbOT0qD61xvMDqftOeJTkbtFV5RwDYZR6SJMMQgBDnhHoI7-SHW0JTCOnHfpF7Wsg4ORgdxMkcKRsWpNtwq3x/s550/sample5.jpg" title="CAR in HDR Nature"/> </a></li> <li><a href="#"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp9bRiNehoPYIYlrVnvJ1aDLFP9-sXaGhErgtXugccZ_66f80jIs3UltNSiJx-ZNNaJByL-XnPzHBvESj0EPHZt4Iv9D7epO_KlnK8cbYBZ-pZs5NSweXxJ_x9R_yZtOQlRmHoeEiVf_g8/s550/sample6.jpg" title="Sunshine"/> </a></li> </ul> </div> <div class="jslider_thumbs"> <div> <a href="#" title="Sunset"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRFTyC-bcgOECjSa-5qM7vuBOzBqBwnp_q7xaJ8-AM_jSqYtsWNgXrw-2I-h8r71s5nU3VEQJ_PYBegBmdVCaFgiICyNz75eFyjXfOyH85ErKJhAoQiNzubnl3wOspCzQcN6EgW3dtAv4d/s85/sample1.jpg"/></a> <a href="#" title="Rainbow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWj5rj9yB2wYv-aKITA7mgdZeWsXD72kwjg9K_YuDvojEvTTs8pq1h9mlo_rVQ-jCDni-eEkyi_ti5taGZ9sKRp1EB2JD6UWc8chGoiE_zOdMD_E5HI_KW0Ttr324aFzbTNhaCf_uZs09_/s85/sample2.jpg"/></a> <a href="#" title="True Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJGigPob_hBPzeY7GLVmh-Y6HFxp-GyesoTW56OX5uHBDMkx97TKjPA8MHgdMPdh0wOsMwhFtJMNByEW-mmLbXhhNRgdAJAISI1jANPxERchse-PGoYLNbKp5LjMSF_v9NRWi_Ye89fIYd/s85/sample3.jpg"/></a> <a href="#" title="Sunrise"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcQmuGA-LtTEo3-QZereSx5tYqsVx5_IAtonPtyU-sTNhZ2PRhq0XYcWyiNvv4GJHScxcgyIHhoxSo0nPYdpngVZ0X4W-GPVSUnOSAyLUzsthik2J4dfU7j5ozIkMdg91WT_03cAnuF9bN/s85/sample4.jpg"/></a> <a href="#" title="CAR in HDR Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2V4wi5GID63KHWgZ_XDLGW72-erVwWUOYk4opY4zO6aGcTndKbJ_rfPhvaVUWqmXXNumvMKwvg68tZk7NroBQ6nMKjsZcaUZI6I8BPMJVxVxL-WYnIdxS5Hf633uWThVJaQx4Kv8Dhb71/s85/sample5.jpg"/></a> <a href="#" title="Sunshine"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDx6yrRuyhktlV5av2G9Cx3_-fpRWWnLHqwIFdeZo1265kX8LCivL9kJOY-bPQL2OftxhQHVElKnd-PJNWkVfMQM3OT5ub8oqwtFp_OZuaagSPQR9OMLFQhVmkPo5GbOPycNY_S8j6SNpG/s85/sample6.jpg"/></a> </div> </div> </div> </div> </div> <script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script> 

 

 

SELAMAT MENCOBA ,!!!

Tambahkan JavaScript Gambar Slider Blogger Mudah

Di sini saya berbagi JavaScript image slider keren untuk blogger. Ini bisa dengan mudah digunakan sebagai konten yang ditampilkan di blog blogger. Slider Gambar ini dibuat oleh menucool.com . Sebuah slider benar-benar keren adalah ini. Ini memiliki efek geser cukup bagus, dan kurang waktu pembukaan yang dibuat oleh Javascript, tidak ada jQuery atau flash yang digunakan. Dan satu hal lagi adalah itu mudah disesuaikan. Saya telah disesuaikan itu sedikit sesuai dengan sempurna untuk blog blogger. Lihat Demo atau download kode sumber dari link di bawah ini.

• Demo1
• DEMO2
• DOWNLOAD SUMBER

Mari Pasang Slider Image untuk Blog Blogger Anda

1 Pergi ke Blogger Dashboard> Tata Letak> Tambah Gadget
2 Pilih HTML / Javascript
3 Copy kode di bawah dan paste di atasnya.

<style type="text/css"> /* http://dimpost.com */ #sliderFrame {position:relative;width:700px;margin: 0 auto 40px;} #slider { width:700px;height:306px;/* Make it the same size as your images */ background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq4wkwpIxTuqAyFBcMYR4F-G290Xfh9bfaP2RdSY6ps-vwtumcjq9imIMl3rB96LHecBtInSTwtN28Jh0Wydr44kchaBIX4sTRx2QC9WFOENMT4UJKowEziILdJhq0Ze0DfW9AplO-fPt-/s1600/loading.gif) no-repeat 50% 50%; position:relative; margin:0 auto;/*make the image slider center-aligned */ box-shadow: 0px 1px 5px #999999; } #slider img { position:absolute; border:none; display:none; } /* the link style (if an image is wrapped in a link) */ #slider a.imgLink { z-index:2; display:none;position:absolute; top:0px;left:0px;border:0;padding:0;margin:0; width:100%;height:100%; } /* Caption styles */ div.mc-caption-bg, div.mc-caption-bg2 { position:absolute; width:100%; height:auto; padding:0; left:0px; bottom:15px; 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; } /* ------ built-in navigation bullets wrapper ------*/ div.navBulletsWrapper { top:320px; left:280px; /* Its position is relative to the #slider */ width:150px; background:none; padding-left:20px; position:relative; z-index:5; cursor:pointer; } /* each bullet */ div.navBulletsWrapper div { width:11px; height:11px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP355kzTYDscjZgSQ-SHjsW3OQ1odmmZowAuEBM_ONu5uzS29vGYI4M37l5rbFPe-Ntuhu3sEdfJwhH2Umsjo6rIvw95zuU7Vt4lQRs9z8Y6P5XMCZBQJCtHwuWU-2Mu03eNS5y9jbe8Zx/s1600/bullet.png) no-repeat 0 0; float:left;overflow:hidden;vertical-align:middle;cursor:pointer; margin-right:11px;/* distance between each bullet*/ _position:relative;/*IE6 hack*/ } div.navBulletsWrapper div.active {background-position:0 -11px;} .intro { bottom: 0; color: rgba(0, 0, 0, 0.2); font-size: 16px; position: absolute; right: 0; text-decoration: none; z-index: 99999; } /* --------- Others ------- */ #slider { transform: translate3d(0,0,0); -ms-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); } </style> <script src="http://project.dimpost.com/image-slider/js-image-slider-1.js" type="text/javascript"></script> <script src="http://project.dimpost.com/image-slider/js-image-slider-2.js" type="text/javascript"></script> <div id="sliderFrame"> <div id="slider"> <a href=" # "><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiirC1HNxTcZWKE15ab1MLuoTfx2yZc8gLyUs_2HlTPIohpTIO9jf0B_hgNAjiC60_j7mosVUBXe6jM64gIjXuMI7xkYB9vGatK78AUCaGgz7ber9XpEyYw9OKE46fUrO0nG47OB6oPghIW/s1600/image-slider-1.jpg " alt=" #htmlcaption1 " /></a> <a href=" # "><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEw7zuIO3hnNt3RTSX0Q_e6czb4IjVo-_cpEqg3TOpytik3e_a9EiljcROcBByPuupzkh640WNh69J6TEtVD7WAE0NEUf_OcngcApFOhFVTalHhrjT-OSjv5wf4HixzwurOdmtJO_7ET6v/s1600/image-slider-2.jpg " alt=" Go UP! " /></a> <a href=" # "><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRRyWR5Yu42iM55JSBH2OIvkxagPgRIHlZJFp1iuxRuICKOOWeF9byx1z9DaYsGkZyv_azmfSDzM_qYoV9akstTeV28LGFGrywMEYZrTZh_TK342_mPBWKNhNAMjydYxuNEhQl0b8HDZeJ/s1600/image-slider-3.jpg " alt=" Pure Javascript. No jQuery. No flash. " /></a> <a href=" # "><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbm8iDHZRTSz-9HaRUhlDao5DWylutleXReMUF2iL3J6oLIWLGYUbjf1FLo3meN9uEX-BAnrVumfQb4y3J3L_5-hpEUiglkBSZcFFziGWuguNS6gSRgcIv5F0hXG6LEYxiV9-i3gpUYo64/s1600/image-slider-4.jpg " alt=" #htmlcaption2 " /></a> <a href=" # "><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgudQPGLvCh7RVa8BWQp9q0C3_c0iad_OUkMYXMdZRvV9ngymA9u74GisC4KoZOdU51oJxGGTDyP8bF0d1xNj5OOaMIHC6url0ZqRvRY9k7MPEdYLuay9pymzPyMorV2QdNqLU1sBhYADRi/s1600/image-slider-5.jpg " alt=" Stay Connected "/></a> </div> <div id="htmlcaption1" style="display: none;"> Image Slider by <a href="http://dimpost.com/" target="_blank">DIMPost.com</a> </div> <div id="htmlcaption2" style="display: none;"> <a href="http://www.w3schools.com/css/" target="_blank">CSS</a> <a href="http://www.w3schools.com/js/default.asp" target="_blank">JavaScript</a> Rocks. </div> </div> 

4. Sekarang Ubah nilai berwarna URL Gambar, Link ke Image, Gambar Keterangan dll sebagai jalan.

FlexSlider Dasar Gambar Slider Widget untuk Blogger

Ini adalah responsif jQuery image slider. Slider sederhana namun menakjubkan ini dikembangkan oleh woothemes.com. Ini memiliki beberapa fitur yang sangat baik yang membuat Anda seperti itu. Fitur yang paling keren adalah hal ini sangat responsif dan ringan; Anda tidak perlu tegang tentang slider lebar / tinggi bahkan semua gambar lebar dan tinggi yang otomatis disesuaikan. Di sini disesuaikan untuk blogger / blogspot sehingga Anda hanya dapat menyalin dan menyisipkan kode untuk diinstal pada blog blogger Anda. Check out live demo di bawah ini.

• Slider demo1 (Blogspot)
• Slider DEMO2 (statis)

Mari kita Instal FlexSlider Gambar Slider Widget di Blogger

1. Pergi ke Blogger Dashboard> Tata Letak> Tambah Gadget Pilih HTML / Javascript
2. Salin kode di bawah dan paste di atasnya.

<!-- SLIDER CSS --> <style type="text/css"> /* * jQuery FlexSlider v2.2.0 * http://www.woothemes.com/flexslider/ * * Copyright 2012 WooThemes * Free to use under the GPLv2 license. * http://www.gnu.org/licenses/gpl-2.0.html * * Contributing author: Tyler Smith (@mbmufffin) */ /* Browser Resets *********************************/ .flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus {outline: none;} .slides, .flex-control-nav, .flex-direction-nav {margin: 0; padding: 0; list-style: none;} /* FlexSlider Necessary Styles *********************************/ .flexslider li { border: 0 none !important; padding: 0 !important; text-indent: 0 !important; margin-bottom: 0 !important; } .flexslider {margin: 0; padding: 0;} .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img {width: 100%; display: block;} .flexslider .slides, .flexslider .slides img, .flex-direction-nav { margin: 0 !important; padding: 0 !important; } .flex-pauseplay span {text-transform: capitalize;} /* Clearfix for the .slides element */ .slides:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] .slides {display: block;} * html .slides {height: 1%;} /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ .no-js .slides > li:first-child {display: block;} /* FlexSlider Default Theme *********************************/ .flexslider { margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1; } .flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .loading .flex-viewport { max-height: 300px; } .flexslider .slides { zoom: 1; } .carousel li { margin-right: 5px; } /* Direction Nav */ .flex-direction-nav {*height: 0;} .flex-direction-nav a { text-decoration:none; display: block; width: 40px; height: 45px; margin: -20px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; color: rgba(0,0,0,0.8); text-shadow: 1px 1px 0 rgba(255,255,255,0.3); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; } .flex-direction-nav .flex-prev { background: url("http://project.dimpost.com/flexslider-basic/img/arrows1.png") no-repeat scroll -15px -92px transparent; left: -50px; } .flex-direction-nav .flex-next { background: url("http://project.dimpost.com/flexslider-basic/img/arrows1.png") no-repeat scroll -15px -15px transparent; right: -50px; text-align: right; } .flexslider:hover .flex-prev { opacity: 0.5; left: 10px; } .flexslider:hover .flex-next { opacity: 0.5; right: 10px; } .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 0.9; } /* Pause/Play */ .flex-pauseplay a { display: block; width: 20px; height: 20px; position: absolute; bottom: 5px; left: 10px; opacity: 0.8; z-index: 10; overflow: hidden; cursor: pointer; color: #000; } .flex-pauseplay a:before { font-family: "flexslider-icon"; font-size: 20px; display: inline-block; content: '\f004'; } .flex-pauseplay a:hover { opacity: 1; } .flex-pauseplay a.flex-play:before { content: '\f003'; } /* Control Nav */ .flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;} .flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;} .flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -o-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); box-shadow: inset 0 0 3px rgba(0,0,0,0.3); } .flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); } .flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; } .flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;} .flex-control-thumbs li {width: 25%; float: left; margin: 0;} .flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;} .flex-control-thumbs img:hover {opacity: 1;} .flex-control-thumbs .flex-active {opacity: 1; cursor: default;} @media screen and (max-width: 860px) { .flex-direction-nav .flex-prev { opacity: 1; left: 10px;} .flex-direction-nav .flex-next { opacity: 1; right: 10px;} } </style> <!-- SLIDER HTML --> <div id="flex-isfb"> <!-- Preloader --> <div id="preloader"></div> <style> /* Preloader */ #preloader { position: absolute; top:0; left:0; right:0; bottom:0; background-color:#fff; /* change if the mask should have another color then white */ z-index:999999999999; /* makes sure it stays on top */ } </style> <div class="flexslider"> <ul class="slides"> <li> <a href="http://dimpost.com"> <img src=" http://project.dimpost.com/flexslider-basic/img/1.jpg " /> </a> </li> <li> <a href="http://dimpost.com"> <img src=" http://project.dimpost.com/flexslider-basic/img/2.jpg " /> </a> </li> <li> <a href="http://dimpost.com"> <img src=" http://project.dimpost.com/flexslider-basic/img/3.jpg " /> </a> </li> </ul> </div> </div> <!-- SLIDER JS --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="http://project.dimpost.com/flexslider-basic/js/jquery.flexslider-min.js"></script> <script type="text/javascript"> $(window).load(function(){ $('.flexslider').flexslider({ animation: "slide", controlNav: true, directionNav: true, easing: "swing", slideshowSpeed: 3000, animationSpeed: 600, }); }); //<![CDATA[ $(window).load(function() { $('#preloader').delay(350).fadeOut('slow'); }) //]]> </script> 

3 bintang, dan kita selesai.

CATATAN:

• Lupakan lebar dan tinggi akan menyesuaikan otomatis.
• Pasang berwarna pink URL gambar dengan URL gambar yang Anda unggah (Anda dapat meng-upload gambar di blogspot, flickr dll)
• Ada beberapa hal lain yang Anda mungkin ingin bermain dengan, lihat di bawah. Saya kira saya tidak perlu menjelaskan bahwa karena mereka diberi nama seperti karena mereka. Bermain dengan mereka ...

animasi: "geser",
controlNav: true,
directionNav: true,
meringankan: "ayunan",
slideshowSpeed: 3000,
animationSpeed: 600,

Have fun! Jangan lupa untuk mengucapkan terima kasih :)

Pure CSS3 Gambar Slider untuk Blogspot (Cycle Style)

Di sini saya datang dengan slider gambar gaya dan panas untuk blogger yang hanya menggunakan CSS3 murni. Tidak Javascript atau jQuery digunakan. Jadi slider ini lebih mudah untuk menyesuaikan untuk pemula, hanya perlu HTML dasar dan sedikit pengetahuan CSS3 yang baik. Tidak ada sisi server coding yang digunakan di sini, sehingga semua adalah di tangan Anda. Slider gaya Siklus ini dibuat oleh SmashingMagazine . Lihatlah pada halaman mereka untuk lebih lanjut tentang hal itu.

Saya membuat sebuah versi bogarized dari mereka, sekarang hanya perlu mengikuti beberapa langkah mudah untuk menginstal slider ini pada blogspot blog.

• DEMO
• DOWNLOAD

Mari kita ikuti sederhana 4 langkah untuk menambahkan ini "image slider CSS3 ke blog Blogger"

1 Pergi ke Blogger Dashboard> Tata Letak>
2 Tambah HTML / Javascript Gadget
3 Copy kode di bawah dan paste di atasnya.

<style type="text/css" media="screen"> .container { margin: 0 auto; overflow: hidden; width: 700px; } #content-slider { height: 335px; width: 100%; } #slider { background: none repeat scroll 0 0 #000000; border: 5px solid #FFFFFF; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7); height: 320px; margin: 10px auto; overflow: visible; position: relative; width: 680px; } #mask { height: 320px; overflow: hidden; } #slider ul { margin:0; padding:0; position:relative; } #slider li { width:680px; height:320px; position:absolute; top:-325px; list-style:none; } #slider li.firstanimation { -moz-animation:cycle 25s linear infinite; -webkit-animation:cycle 25s linear infinite; } #slider li.secondanimation { -moz-animation:cycletwo 25s linear infinite; -webkit-animation:cycletwo 25s linear infinite; } #slider li.thirdanimation { -moz-animation:cyclethree 25s linear infinite; -webkit-animation:cyclethree 25s linear infinite; } #slider li.fourthanimation { -moz-animation:cyclefour 25s linear infinite; -webkit-animation:cyclefour 25s linear infinite; } #slider li.fifthanimation { -moz-animation:cyclefive 25s linear infinite; -webkit-animation:cyclefive 25s linear infinite; } #slider .tooltip { background:rgba(0,0,0,0.7); width:300px; height:60px; position:relative; bottom:75px; left:-320px; -moz-transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; } #slider .tooltip h1 { color:#fff; font-size:24px; font-weight:300; line-height:60px; padding:0 0 0 20px; } #slider li#first:hover .tooltip, #slider li#second:hover .tooltip, #slider li#third:hover .tooltip, #slider li#fourth:hover .tooltip, #slider li#fifth:hover .tooltip { left:0px; } /* PROGRESS BAR */ .progress-bar { position:relative; top:-5px; width:680px; height:5px; background:#000; -moz-animation:fullexpand 25s ease-out infinite; -webkit-animation:fullexpand 25s ease-out infinite; } /* ANIMATION */ @-moz-keyframes cycle { 0% { top:0px; } 4% { top:0px; } 16% { top:0px; opacity:1; z-index:0; } 20% { top:325px; opacity:0; z-index:0; } 21% { top:-325px; opacity:0; z-index:-1; } 92% { top:-325px; opacity:0; z-index:0; } 96% { top:-325px; opacity:0; } 100%{ top:0px; opacity:1; } } @-moz-keyframes cycletwo { 0% { top:-325px; opacity:0; } 16% { top:-325px; opacity:0; } 20% { top:0px; opacity:1; } 24% { top:0px; opacity:1; } 36% { top:0px; opacity:1; z-index:0; } 40% { top:325px; opacity:0; z-index:0; } 41% { top:-325px; opacity:0; z-index:-1; } 100%{ top:-325px; opacity:0; z-index:-1; } } @-moz-keyframes cyclethree { 0% { top:-325px; opacity:0; } 36% { top:-325px; opacity:0; } 40% { top:0px; opacity:1; } 44% { top:0px; opacity:1; } 56% { top:0px; opacity:1; } 60% { top:325px; opacity:0; z-index:0; } 61% { top:-325px; opacity:0; z-index:-1; } 100%{ top:-325px; opacity:0; z-index:-1; } } @-moz-keyframes cyclefour { 0% { top:-325px; opacity:0; } 56% { top:-325px; opacity:0; } 60% { top:0px; opacity:1; } 64% { top:0px; opacity:1; } 76% { top:0px; opacity:1; z-index:0; } 80% { top:325px; opacity:0; z-index:0; } 81% { top:-325px; opacity:0; z-index:-1; } 100%{ top:-325px; opacity:0; z-index:-1; } } @-moz-keyframes cyclefive { 0% { top:-325px; opacity:0; } 76% { top:-325px; opacity:0; } 80% { top:0px; opacity:1; } 84% { top:0px; opacity:1; } 96% { top:0px; opacity:1; z-index:0; } 100%{ top:325px; opacity:0; z-index:0; } } @-webkit-keyframes cycle { 0% { top:0px; } 4% { top:0px; } 16% { top:0px; opacity:1; z-index:0; } 20% { top:325px; opacity:0; z-index:0; } 21% { top:-325px; opacity:0; z-index:-1; } 50% { top:-325px; opacity:0; z-index:-1; } 92% { top:-325px; opacity:0; z-index:0; } 96% { top:-325px; opacity:0; } 100%{ top:0px; opacity:1; } } @-webkit-keyframes cycletwo { 0% { top:-325px; opacity:0; } 16% { top:-325px; opacity:0; } 20% { top:0px; opacity:1; } 24% { top:0px; opacity:1; } 36% { top:0px; opacity:1; z-index:0; } 40% { top:325px; opacity:0; z-index:0; } 41% { top:-325px; opacity:0; z-index:-1; } 100%{ top:-325px; opacity:0; z-index:-1; } } @-webkit-keyframes cyclethree { 0% { top:-325px; opacity:0; } 36% { top:-325px; opacity:0; } 40% { top:0px; opacity:1; } 44% { top:0px; opacity:1; } 56% { top:0px; opacity:1; z-index:0; } 60% { top:325px; opacity:0; z-index:0; } 61% { top:-325px; opacity:0; z-index:-1; } 100%{ top:-325px; opacity:0; z-index:-1; } } @-webkit-keyframes cyclefour { 0% { top:-325px; opacity:0; } 56% { top:-325px; opacity:0; } 60% { top:0px; opacity:1; } 64% { top:0px; opacity:1; } 76% { top:0px; opacity:1; z-index:0; } 80% { top:325px; opacity:0; z-index:0; } 81% { top:-325px; opacity:0; z-index:-1; } 100%{ top:-325px; opacity:0; z-index:-1; } } @-webkit-keyframes cyclefive { 0% { top:-325px; opacity:0; } 76% { top:-325px; opacity:0; } 80% { top:0px; opacity:1; } 84% { top:0px; opacity:1; } 96% { top:0px; opacity:1; z-index:0; } 100%{ top:325px; opacity:0; z-index:0; } } /* ANIMATION BAR */ @-moz-keyframes fullexpand { 0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; } 4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; } 16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; } 17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; } 18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; } } @-webkit-keyframes fullexpand { 0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; } 4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; } 16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; } 17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; } 18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; } } </style> <div class="container"> <div id="content-slider"> <div id="slider"> <div id="mask"> <ul> <li id="first" class="firstanimation"> <a href="http://dimpost.com"> <img src="http://project.dimpost.com/image-slider/images/img_1.jpg" alt="Cougar"/> </a> <div class="tooltip"> <h1>Cougar</h1> </div> </li> <li id="second" class="secondanimation"> <a href="#"> <img src="http://project.dimpost.com/image-slider/images/img_2.jpg" alt="Lions"/> </a> <div class="tooltip"> <h1>Lions</h1> </div> </li> <li id="third" class="thirdanimation"> <a href="#"> <img src="http://project.dimpost.com/image-slider/images/img_3.jpg" alt="Snowalker"/> </a> <div class="tooltip"> <h1>Snowalker</h1> </div> </li> <li id="fourth" class="fourthanimation"> <a href="#"> <img src="http://project.dimpost.com/image-slider/images/img_4.jpg" alt="Howling"/> </a> <div class="tooltip"> <h1>Howling</h1> </div> </li> <li id="fifth" class="fifthanimation"> <a href="#"> <img src="http://project.dimpost.com/image-slider/images/img_5.jpg" alt="Sunbathing"/> </a> <div class="tooltip"> <h1>Sunbathing</h1> </div> </li> </ul> </div> <div class="progress-bar"></div> </div> </div> </div> 

4. Ubah link berwarna biru dengan Anda. dan gambar berwarna merah menghubungkan dengan gambar Anda.