Salam jumpa lagi sobat blogger, pada kesempatan ini aku coba mau sharing terkait bagaimana Cara membuat image slider Jquery Carousel Flexslider responsive tanpa rubah html.
Tutorial yang aku jelaskan nantinya adalah tutorial penambahan pada html template karena penampilannya aku memakai kode scritp kondisi. (tampilan hanya aku munculkan ketika pada beranda Web) tetapi jika sobat mau menambahkan langsung pada penambahan gadget template sobat, ya tinggal di tambahkan saja, jadi langkah ini adalah langkah termudah yang bisa anda lakukan . masang dan tinggal tunggu hasilnya hmmm
Untuk semua tutorailnya sudah aku jelaskan detail pada file txts, jadi tinggal copy scriptnya dibawah Ini:
=========================================
cara ini aku rasa sangatah mudah, jadi silahkan letakkan kode di bawah ini
tepat di atas kode </header>
note: karena setiap template mempunyai struktur yang berbeda-beda, silahkan gunakan logika anda.
cermati struktur html template anda dengan teliti. sebelum memasang kode slider ini.
(untuk pemula seperti saya, silahkan lakukan backup terlebih dulu template anda untuk keamannnya)
slider ini sudah saya modifikasi hingga anda tinggal makek dan terapin pada template sobat.
jika masih kurang juga untuk masalah lebar (width) dan panjangnnya (hight)nya silahakan atur dan sesuaikan sendiri.
====================
<!-- tambahan image slider-2 start -->
<b:if cond='data:blog.pageType != "item"'>
<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: 5;
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: 375px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.loading .flex-viewport {
max-height: 375px;
}
.flexslider .slides {
zoom: 1;
}
.carousel li {
margin-right: 0px;
}
/* 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: 10px;
height: 10px;
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 alt='get update data script' href='http://tutorialmixs.blogspot.com' style='font-size: 9px; color: white; float: right; margin: 5px;'>.</a>
<noscript>Your browser does not support JavaScript please update!</noscript>
<script src='http://project.dimpost.com/flexslider-carousel/jquery.js' type='text/javascript'/>
<script src='http://project.dimpost.com/flexslider-carousel/jquery.flexslider-min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 0,
minItems: 1,
maxItems: 1
});
});
});
</script>
<!-- tambahan image slider Start -->
<div class='flexslider'>
<ul class='slides'>
<li>
<a href='http://lapak-untungbeliung.blogspot.co.id/2016/02/handphone-mu-bisa-merubah-hidup-anda.html' target='_blank'><img alt='Handphone mu bisa merubah hidup anda' src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPhZSd_J1UMXXSX0oT9VUxXZuaRRVF-74FYwOn1HRcYTbC7IPRj233S8YXeo9PHYWII5PeeQX-x07T1canzljhxM-QL0jrbmtLusZADTnrSAhQqDdlqDGcSNj38fxQnYjpC16uB0lqZO0/s640/cara+membuat+HP+menjadi+mesin+uang.jpg' title='Handphone mu bisa merubah hidup anda'/></a>
</li>
<li>
<a href='http://lapak-untungbeliung.blogspot.co.id/2016/02/penjelasan-terkait-bisnis-dni-lengkap.html' target='_blank'><img alt='Penjelasan Terkait Bisnis DNI [Lengkap]' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jzHKy91t-gfhj7pU4eWawPrDwcHwXx82cnwgBe8ZcgCihkj-s3GQEBiNujCsfmf_m9nVSfwM6OzUyt_JDr9vTbL0FjVCaQAZuZLjcnwE3PEWGl9GN6pa2iRct-NGLPHLnuCPVI_R4vQ/s640/business+kit+DNI.jpg' title='Penjelasan Terkait Bisnis DNI [Lengkap]'/></a>
</li>
<li>
<a href='http://lapak-untungbeliung.blogspot.com/2016/02/cara-daftar-keagenan-pulsa-di-dni.html' target='_blank'><img alt='Cara daftar keagenan pulsa di DNI' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFVhMTCAWY8A71Qbn_0PU_Pb-Yit-GRp9TZjHp21BXTApNuhCMjh2RFggL4WhWIwxmd8APKj8dO9gND1T5E_dLSI6bbJapR3ymAh1LtsT4HHcCb1SBANrmsMTjBnhVYLGPOXnuo4jnOv0/s640/cara+daftar+keagenan+pulsa.jpg' title='Cara daftar keagenan pulsa di DNI'/></a>
</li>
<li>
<a href='http://lapak-untungbeliung.blogspot.com/2016/02/tips-dan-cara-menawarkan-bisnis-dni.html' target='_blank'><img alt='Tips dan Cara menawarkan Bisnis DNI' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM_TjkHFZ74qvet2-C6geFgZDaLXYx7nhX1SL6pjiMjiF6UQXl1LxRBfrK8iOiMuC3Y7d1ZRVhblYodGAOu28vXU0kwrP9qHkmkQgbJG23KZNzwZ8w_OkMjCy5DDlhOiF6Stk5FBWV1FFP/s640/cara+presentasi+yang+baik.jpg' title='Tips dan Cara menawarkan Bisnis DNI'/></a>
</li>
<li>
<a href='http://lapak-untungbeliung.blogspot.com/2016/02/triks-mensiasati-bisnis-bersama-dni.html' target='_blank'><img alt='Triks mensiasati bisnis bersama DNI' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiybGoX1SDiZ_8pWt0svHVcCE91xDyEJ_K6ojJ2dXts08tn5JfZorbFMsKUZdoaXFyrgN0vuVFTUb0gzD8o_FzaRrp4RDvzBDO-Oxz2opjdn1IHVejrYyqyvQQnaASMAa6hNub76khiTUM/s640/trik+mensiasati+bisnis+dni.png' title='Triks mensiasati bisnis bersama DNI'/></a>
</li>
</ul>
</div>
</b:if>
<!-- tambahan image slider End -->
<!-- tambahan image slider-2 start -->
============
note: ganti semua URL Web dan URL Image, dengan Url sobat yah...
yabbbb...
selesai sudah tutorail ini bagaimana Cara Membuat Image Slider Jquery Carousel di atas header
next setelah ini aku akan bagikan juga ke sobat terkait Tutorial Bagaimana Cara Membuat Auto Slider Jquery Carousel Berdasarkan Label
dan aku rasa juga tidak kalah menariknya dari artikel ini, sehingga web sobat nantinya bisa seperti web profesional dengan harga anak kos he,e,.
salam blogger, semoga bermanfaat
Maaf karena scriptnya teralu panjang jadi silahkan saja di get code slider image
semoga bermanfaat.
(Tutorial-Mixs/Berbagai-Sumber-Lain/ABNS)
Post a Comment
mohon gunakan email