informasi investasi, informasi saham, informasi forex, informasi kripto, informasi saham hari ini, informasi forex hari ini, informasi kripto hari ini, fundamental saham, fundamental forex, fundamental kripto, berita investasi, berita saham, berita forex, berita kripto, berita saham hari ini, berita forex hari ini, berita kripto hari ini, artikel investasi, artikel saham, artikel forex, artikel kripto, prediksi saham, prediksi forex, prediksi kripto, analisa saham, analisa forex, analisa kripto, trading saham, trading forex, trading kripto, belajar trading saham, belajar trading forex, belajar trading kripto, panduan trading saham, panduan trading forex, panduan trading kripto, tips trading saham, tips trading forex, tips trading kripto.
image3

Script Slider Video Responsive untuk Blogger

Published at September 2018
Content Category : Content Management System
Cara Daftar Akun Indodax

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 :)

Bagikan :

CONVERSATION