Tambahkan Carousel Slider di Blogger

Saya percaya bahwa para blogger ingin membuat blognya lebih profesional dan juga para blogger akan menggunakan berbagai jenis CSS dan JQuery coding untuk membuat blognya lebih user friendly.

Saya memiliki beberapa trik yang akan saya bagikan yang akan membuat blog Anda lebih menarik dan hari ini, saya akan berbagi jquery carousel slider untuk meningkatkan daya tarik blog Anda serta membantu Anda untuk meningkatkan pageviews blog Anda.

Slider ini sepenuhnya responsif serta dirancang menggunakan koding profesional yang akan membuat blog anda sepenuhnya user friendly dan Anda dapat menempatkan artikel penting Anda dalam widget ini untuk mendapatkan lebih banyak tampilan halaman dan mendatangkan pengunjung baru.

JQuery Slider Carousel untuk Blog.

Slider ini tidak hanya responsif dan sip untuk pembaca blog anda tetapi juga, memiliki beberapa fitur lain. Secara otomatis menyesuaikan tinggi dan lebar dari semua posting gambar, Anda dapat juga menyesuaikan jumlah maksimum gambar yang akan ditampilkan diblog Anda dan setiap kali pembaca situs Anda meng-klik pada gambar maka dia akan otomatis mengarahkan pada posting link yang Anda masukkan pada masing-masing gambar.

Saya harap Anda menyukainya dan dapat menerapkan metode ini dengan mudah untuk ditambahkan di blog anda.

1. Masuk ke Blogger Dashboard -> Tata Letak -> Tambah Gadget.
2. Sekarang seret mouse ke bawah dan pilih HTML/JavaScript.
3. Tinggal kopi kode dibawah ini didalam kotak HTML/JavaScript.

<style type="text/css"> /* 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3i-YmnRc3B5h238uV1fnxAJ6XFPq0mZsO2mtMtqiBiWn2W5jN7ZKSHK5LupFki44Df7FE_HBl5ZtyW2xI_zPdNozHKOE-flomoCfUX0L3xwrjHkyFWAuB3Eebmw8mVLjNk9_MKLbAHI0/s1600/sbtnextprev.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="https://dl.dropboxusercontent.com/s/12bwcaf2wiv4r0t/flexslider-carousel-jquery1.js"></script> <script type="text/javascript" src="https://dl.dropboxusercontent.com/s/lyqsx17ffqci1ql/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> <a href="#"><img src="<span style='background:#00FFFF;width:300px'>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgilVOlqVc6Gq0Cx7QZRoqAv8MhojKqVUWEEuist9HT07kG7_EEUoD0B0_wornkTr8XDOC4LcP4mmEqEjIjjysvHBeuhLu16PEmwYdmeMJkSgHCji_oX2pHHLMuSTDJpqos4GWe3gF_aSo/s1600/Download-places-wallpaper-dubai-lake-view.jpg</span>" /></a> </li> <li> <a href="#"><img src="<span style='background:#00FFFF;width:300px'>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTSLMF2CcuSD93e88UsYoK-jmp_TMAZ2GHVj_QJVWZNkKBn0Jp4ZnwLOLRqSgO_IwtvmZeq5W4AyMXKD0jveVy1Xv3N8-dsFtPDVeYSEdRISWifbkmnBVDMZZiqiVScjTHPUUTgG4V82I/s1600/Nature_Light.jpg</span>" /></a> </li> <li> <a href="#"><img src="<span style='background:#00FFFF;width:300px'>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHem8LOP7ykbI8bEkcUemOecGltE3CuHvdOnfrkdSEg4dqLcGrz8fNSLkcnsUV_evmsVV91DDgeo_2kiwn0qy_jxh6Nb0nCw5nqPtBQOwZHkx5RYq6RWp8AgGW7ayU2faI4WumAgpoiuY/s1600/Beautiful-Forest-HD-Wallpaper-1920x1200.jpg</span>" /></a> </li> <li> <a href="#"><img src="<span style='background:#00FFFF;width:300px'>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTSLMF2CcuSD93e88UsYoK-jmp_TMAZ2GHVj_QJVWZNkKBn0Jp4ZnwLOLRqSgO_IwtvmZeq5W4AyMXKD0jveVy1Xv3N8-dsFtPDVeYSEdRISWifbkmnBVDMZZiqiVScjTHPUUTgG4V82I/s1600/Nature_Light.jpg</span>" /></a> </li> <li> <a href="#"><img src="<span style='background:#00FFFF;width:300px'>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHem8LOP7ykbI8bEkcUemOecGltE3CuHvdOnfrkdSEg4dqLcGrz8fNSLkcnsUV_evmsVV91DDgeo_2kiwn0qy_jxh6Nb0nCw5nqPtBQOwZHkx5RYq6RWp8AgGW7ayU2faI4WumAgpoiuY/s1600/Beautiful-Forest-HD-Wallpaper-1920x1200.jpg</span>" /></a> </li> <li> <a href="#"><img src="<span style='background:#00FFFF;width:300px'>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTSLMF2CcuSD93e88UsYoK-jmp_TMAZ2GHVj_QJVWZNkKBn0Jp4ZnwLOLRqSgO_IwtvmZeq5W4AyMXKD0jveVy1Xv3N8-dsFtPDVeYSEdRISWifbkmnBVDMZZiqiVScjTHPUUTgG4V82I/s1600/Nature_Light.jpg</span>" /></a> </li> <li> <a href="#"><img src="<span style='background:#00FFFF;width:300px'>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHem8LOP7ykbI8bEkcUemOecGltE3CuHvdOnfrkdSEg4dqLcGrz8fNSLkcnsUV_evmsVV91DDgeo_2kiwn0qy_jxh6Nb0nCw5nqPtBQOwZHkx5RYq6RWp8AgGW7ayU2faI4WumAgpoiuY/s1600/Beautiful-Forest-HD-Wallpaper-1920x1200.jpg</span>" /></a> </li></ul><p style=" float:right; margin-right:40px; font-size:10px;" >Provided By: <a href='http://info-gamepc.blogspot.com' rel='dofollow' target='_blank' title='Blogger Tricks'>Spice Blogger Tricks</a></p> </div>

4. Setelah itu, cukup ikuti langkah-langkah berikut dan rubah beberapa perubahan dalam koding diatas.

PENGATURAN:

Slider ini sepenuhnya responsif dan dirancang dengan kode profesional sehingga Anda tidak perlu melakukan pengaturan lebih, cukup ikuti beberapa langkah dan lakukan beberapa perubahan yang diperlukan di dalamnya, gantilah gambar yang berwarna dengan URL gambar anda.