-->

Abaikan Jika Melihat Iklan Binary Options (Opsi Biner) pada Situs ini, Baca : Perbedaan Forex dengan Binary Options

Daftar Akun XM
image3

Script Slider Video Responsive untuk Blogger

Daftar Akun Exness

Hai Blogger! Berikut saya bagikan Script Slider Video Responsive untuk bikin Blog kamu makin Keren



  • Buka Menu Themes, kemudian klik Edit HTML.
  • Tambahkan Kode ini sebelum Kode </b:skin>
  • Untuk memudahkan pencarian tekan Crtl dan F, ketik </b:skin> dan tekan Enter.

/* built2bless-responsive-slider */
.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 {
    margin: 0;
    padding: 0;
}
.flexslider .slides &gt; li {
    display: none;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}
.flexslider .slides img {
    width: 100%;
    display: block;
}
.flex-pauseplay span {
    text-transform: capitalize;
}
.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-js .slides &gt; li:first-child {
    display: block;
}
.flexslider {
    margin: 0 0 50px 0px;
    background: #fff;
    border: 4px solid #fff;
    position: relative;
    -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;
}
.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;
}
.flex-control-nav {
    width: 100%;
    position: absolute;
    bottom: 0px;
    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;
}

  • Simpan Perubahan Template kemudian Gunakan Kode ini Menampilkan Slider Video :

<!-- built2bless-responsive-slider --><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() {
        $(&#39;.flexslider&#39;).flexslider({
            animation: &quot;slide&quot;,
            animationLoop: false,
            itemWidth: 210,
            itemMargin: 0,
            minItems: 1,
            maxItems: 4
        });
    });
});
</script>
<div class='flexslider'>
<ul class='slides'>
<li><img src='URL Link Video'/></li>
<li><img src='
URL Link Video'/></li>
<li><img src='
URL Link Video'/></li>
<li><img src='
URL Link Video'/></li>
</ul></div>

  • Contoh jika ingin meletakkan Slider Video dibagian atas Blog, maka letakkan dibawah kode </head>
  • Ganti Bagian URL Link Video dengan Url / Link Video yang ingin ditampilkan. 

Semoga Bermanfaat, Happy Blogging :)

KATEGORI KONTEN : Content Management System

BAGIKAN :

CONVERSATION

Daftar Akun XM