Sobat blogger salam jumpa lagi, dah lumayan lama aku ndak posting di blogku yang satu ini, atau mungkin beberapa blog aku, karena maklum lagi ada beberapa pemesanan website, ataupun permintaan bantuan buat sobat blogger untuk minta di bantu edit beberapa Html template terkait pemasangan slider pada blog mereka. ya.. kalau aku lagi tidak ada kerjaan, insysAllah aku akan bantu untuk mempercantik blog sobat blogger yang menginginkan bantuan aku.. yahh semoga bisa menjadikan manfaat aja, biar mereka juga bertambah semangat buat blog, karena melihat tampilan blognya tambah oke..
yab,, kali ini aku mo share terkait cara membuat image slider responsive dengan jquery, tanpa harus susah payah mengotak-atik template sobat (untuk pemula seperti saya, aku rasa tutorial ini sangat membantu sekali.. tapi sebelumnya aku minta maaf karena aku tidak bisa share secara langsung scriptnya di postingan ini. jadi jika sobat memang menginginkan script ini terpsang di blog atau website sobat, silahkan download aja di link di bawah ini. (jangan lupa di follow blognya ya sob, agar sobat bisa mendapatkan artikel gratis update setiap aku membuat artikel baru..)
Untuk scriptnya silahkan di bawah ini:
<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
* http://tutorialmixs.blogspot.com
* 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: 10;
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: 130px;
-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: .1;
cursor: pointer;
}
.flex-control-thumbs img:hover {
opacity: 1;
}
.flex-control-thumbs .active {
opacity: 1;
cursor: default;
}
</style>
<a style="font-size: 9px; color: white; float: right; margin: 5px;" href="http://tutorialmixs.blogspot.com" alt="get update data script">.</a>
<noscript>Your browser does not support JavaScript please update!</noscript>
<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: 3
});
});
});
</script>
<div class="flexslider">
<ul class="slides">
<li>
<a href="http://tutorialmixs.blogspot.co.id/2016/03/list-generator-backlink-builder-free.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZ8sOOjTI9JG291U48B4lzIcS_VI0yn6Sfu0kvHLpQyY5MfQg7L9OBoNTwgywufQwo0XMVDVJWqkqzTcCUQd4FAr9Uyd5uEPMUYoHsVOzo1nBgq_XWrZh1Y-HKvIrd5lhWI87fYipyMw/s640/backlink+bulder+free.jpg" title="Kumpulan Backlink Generator Free" alt="Kumpulan Backlink Generator Free"/></a>
</li>
<li>
<a href="http://tutorialmixs.blogspot.co.id/search/label/Submission" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKfXIOHfNDX0JgLFRuCVbeqygk9ucD3XH4wvESBRkUIu_B9UU08C5CdYqnKzMCJv9Q2vEuqRFvaerXvy421sGYzpWasuYOSyMdiNJXsLRUUZNV5dsPPdxTNLglPkIA-DdNbrNBEBaKnLw/s400/FWsubmission.jpg" title="Free Submission URL lengkap" alt="Free Submission URL lengkap"/></a>
</li>
<li>
<a href="http://tutorialmixs.blogspot.co.id/search/label/DirectoryFree" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjc-R-YbkNN-r9PoIZmnY5CC6da2SSJw1obqBdKhvB9rtlCgAzaDwVSgkOqBbAG5MbDlij_OjXZeZ8u9X3TaXT79j_y56_77RrE-VTnJtLm0wF6HzI8DgxNoRAhjMcoTw00OcZ6vsyzMU/s640/ISEDN+directory+submite+Free.jpg" title="Submit Blog ke Direktory free lengkap" alt="Submit Blog ke Direktory free lengkap"/></a>
</li>
<li>
<a href="http://tutorialmixs.blogspot.co.id/search/label/Slider" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkaRfsbOrlWKff_5wZr0rOIxMXxOpjojVigojtdv-1XPma87Cc0hhGQG7YB59w4h-eRcDBezp3xWTo0CK4J7EX862Qkx6fSoZV2iJypwwOkhewfDqxfKt1k50Yz3j5XK1cq8fmC5oxheY/s640/Image+slider+header+untuk+blogger.jpg" title="Slider dan Jquery widget untuk blogger" alt="Slider dan Jquery widget untuk blogger"/></a>
</li>
<li>
<a href="http://tutorialmixs.blogspot.co.id/search/label/Widget" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA6rA1ozfeAUk6e_ee7_-RwOGKUN80oW1IhlfdIs-Fp1PQDPTvRcPPwPDjtBjl9dyqd3U7ekqvhAqw5kcm3UoHRae1EXxudR46AZWdR8DRxmmpeobESOBupHUXXJQgAG1rw2QtmUWKIDg/s640/image+slider+v3.jpg" title="Widget for Blogger" alt="Widget for Blogger"/></a>
</li>
<li>
<a href="http://tutorialmixs.blogspot.co.id/search/label/Artikel%20Blog" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBE0mBNdu8o-nBPp_svW_gc5PXCy9e161pYzJS0Iw7LxtGu4k_Jq_hSumLizvVG3fyB136cSiHcNxL4-axQuQ59inO3y4Pv0MCSnc9sdETV5W6W4w3QaNgbHDTx6AIXuzgUKX3C5-9WXA/s640/cara+mengaitkan+blog+dengan+search+console+google.jpg" title="Artikel Blogger" alt="Artikel Blogger"/></a>
</li>
<li>
<a href="http://tutorialmixs.blogspot.co.id/search/label/Mobile" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHZd9pbcmpqC2Bfxw9ihXncvpDIBCynYzX_8X_JQq0-auGuBxyZ3mMp2nRAZP2xeVkxnek5EKgbE-YYvbtO9FslL2wTCJD_LNWFaCGAKhw1WKJ3vb88sJliRmq1Wk1kvxtX15y6ww6EHg/s640/android+cara+hemat+baterai.jpg" title="Mobile and Download Apps" alt="Mobile and Download Apps"/></a>
</li>
<li>
<a href="http://tutorialmixs.blogspot.co.id/search/label/GetMoney" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyQr8Yx2yVWeyEWHZo7spC98DXykTdUBjHrXsEFUIJ68SQJ9yPZc0S7lLDkWaej1GMoQ8H_ueCHJ2kqPJ0dGr4uioYbhxY_cmRZfBxWMqqnRJssBSjGxzxHIOr-2KHfmbaLqL7nckNu_g/s400/iklan+accestrade.jpg" title="Get Money / Affiliate Iklan " alt="Get Money / Affiliate Iklan"/></a>
</li>
<li>
<a href="http://tutorialmixs.blogspot.co.id/search/label/Related%20Post" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2qYL6z3ZYrpfR1vNKveQvK2TdB4LFPvktz8UQSZR24060sd7YFLBDE9feSwxVm1E8uS4PmVfthLH9n321xdhbhftgPwnzbl_kLRNXykBOYAKj5dR2gS9l3mFugmDJLDK434SzjKxmPqU/s640/Related+posts+horizontal+by+label.jpg" title="Related Posts Widget for Blogger" alt="Related Posts Widget for Blogger"/></a>
</li>
<li>
<a href="http://tutorialmixs.blogspot.co.id/search/label/Recent%20Post" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe8nkTh4UxuHI4KfKC3K4-7fdm64O1B4NZUD_ctAm_lrZeO100O_o2qXOD2El4nkSrlzAT0suTWnkO3RhX9pBUpHrwIxg-WJqOGL9vFHJIeoVDcn5D0zk1vKDE3zwzxZLKPHayHdCbc3A/s640/recent+post+slider+responsive+ciamixs.jpg" title="Recent Posts Widget for Blogger" alt="Recent Posts Widget for Blogger"/></a>
</li>
<li>
<a href="http://tutorialmixs.blogspot.co.id/search/label/PopularPosts" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC0S97U56LUt3w380hoUfN19LfMKtcNl5Vk-S287jvRTLk8ZpklNtBijzU1peBRDPttfiLEYodliHhtHDhIVIbo0qzTCdjana5JZ7ZFfxQcXeEq5la98lZlxYZtFUMlz_dcFUlvGf8Eos/s400/Popular+Post+Vertikal.jpg" title="Popular Posts Widget for Blogger" alt="Popular Posts Widget for Blogger"/></a>
</li>
<li>
<a href="http://tutorialmixs.blogspot.co.id/search/label/TipsTrik" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbIDJbTYuQNVkZIlF49YfQ-7qVo45Ox8bHG0k9ISLE5wS7scfDhvgUFu2eXSUHzeGDbyEi6jHeW1CiELJOP-ix-7ZIcWIAnR-fcAxqS-O2PzCweobwiB9zOsz1eBW71P8cJ7t70EOye8k/s400/polcy+privay+iubenda.png" title="Kumpulan Tips dan Triks" alt="Kumpulan Tips dan Triks"/></a>
</li>
<li>
<a href="http://tutorialmixs.blogspot.co.id/search/label/IndikatorForex" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKea_uSyNMuu1Bm4pJ1SBzJpJ6jZ1UwcuhcMYNjtJGpo0F3OMfpfFnLUsPci0RWDdK0Kzvm6zbaVF4LjPcDgNx90BXQD9Wo_6ccU18rI7vVcTPIlI-56bS2vC9mXKBPydpcUGX70K5a94/s640/SuperTrend+indikator.jpg" title="Indikator Forex dan Template lengkap" alt="Indikator Forex dan Template lengkap"/></a>
</li>
</ul>
</div>
<!-- batas -->
catatan:
- untuk cara memasangnya silahkan tambahkan saja di penambahan widget pada tmplate sobat yah..
- silahkan ganti juga untuk hal di bawah ini dengan alamat URL dan Image sobat :
href="http://tutorialmixs.blogspot.co.id/search/label/IndikatorForex (ganti URL Link sobat)
img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKea_uSyNMuu1Bm4pJ1SBzJpJ6jZ1UwcuhcMYNjtJGpo0F3OMfpfFnLUsPci0RWDdK0Kzvm6zbaVF4LjPcDgNx90BXQD9Wo_6ccU18rI7vVcTPIlI-56bS2vC9mXKBPydpcUGX70K5a94/s640/SuperTrend+indikator.jpg (silahkan ganti image yang mau ditampilan untuk di jadikan Label utama slider)
oke itu saja tutorial ini, semoga bisa bermanfaat buat sobat blogger
salam blogger
Untuk semua cara sudah aku sekalian jelaskan kok di scriptnya. jadi silahkan download aja.
oke aku rasa tutorial di pagi ini, semoga bisa menjadikan manfaat buat sobat blogger.
(Tutorial-Mixs/Berbagai-Sumber-Lain/ABNS)
Post a Comment
mohon gunakan email