Blogger Dinamik Slider Blogger Etiketi ve Geçmiş Yazılar Entegreli

"Blogger Dinamic Slider" çok basit Blogger a entegre olabilen Jquery ve Ajax jsonları kullanılarak yapılmış bir sliderdır

Blogger Dinamic Slider(bdSlider) Özellikleri

• Otomatik Kayma
• Mobil Uyumlu
• Etiket Entegre Var
• Geçmiş Yazılar Entegre Var
• Kostumize edilebilir(Değerlerle Oynanabilir)
• Kolay Kurulum ve Kolay Değiştirilebilme

Şuan Benimde Kullandığım Slider,Temam Mobil uyumlu olduğu için site hızımı düşürmesin diye bunu kullandım

Nasıl Çalışır ?

Kurulumu Yapmak için çok az bir Blogger Deneyimi Yeterlidir,Kodlar Ajax çağırıyor ve sistem blogger üzerindeki Daha önceden kurulu olan Label ve Geçmiş yazılara kolayca entegre olabiliyor.Arkadaşlar Yapamayan Önerileri Kullanıcıları bize ulaşarak gerekli yardım sağlanacaktır

Kurulum Adımları

Adım - 1: Blogger a Git >Şablon a Tıkla(Temanızın Yedeğini Alın)
Adım - 2: Html yi Düzenle
Adım - 3: Yandaki Kodu ara: </head>  Ctrl+F Tuşlarına aynı anda basılarak kolayca arama yapabilirsiniz
Adım - 4:Bulduğunuz </head> tagının hemen üstüne aşağıdaki kodu yapıştırınız.

<!-- BloggerDynamicSlider Basic CSS -->
<style type="text/css">
/**
 * jQuery BloggerDynamicSlider v1.0.0
 * author 2016 http://onerileri.blogspot.com

 *
 */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400);
@import url("https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/flexslider.min.css");

/* Preloader */

.flexslider.loading:after {
 content: '';
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr-bJPJF1qjFLLkKXf-SbCmb-w8lPRLZqZeGAj1hWLXACVPWVsVMEet86Sac4Gcmzk20Bm1jZ_ngZu4VmZkBWzU24eopDt3azCTUUus7jXhcxAKfd-3l79WA2lTw3fzkoIJ8vYJJpcC6Wi/h120/loader.gif) no-repeat center center;
 background-color: rgba(255, 255, 255, 0.9);
 z-index: 9999;
}

.flexslider.loading ul.flex-direction-nav,
.flexslider.loading ol,
.loading .flex-caption {
 display: none;
}

.flexslider {
 border: 1px solid #cacaca;
 padding: 4px;
 margin: 0 auto 60px auto;
 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
 -webkit-border-radius: 0;
 -moz-border-radius: 0;
 border-radius: 0;
}

.flexslider a {
 text-decoration: none;
}


/* Caption/Post Title */

.flex-caption {
 position: relative;
 padding-left: 15px;
 padding-right: 10px;
 height: 60px;
 background: #FFFFFF;
 color: #1C1C1C;
 font-family: 'Open Sans', sans-serif;
 font-weight: 300;
 font-size: 26px;
 line-height: 26px;
 margin: 0;
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -ms-backface-visibility: hidden;
 backface-visibility: hidden;
}

.flex-caption span {
 display: table-cell;
 vertical-align: middle;
 height: 60px;
}

.flex-caption.overlayDark,
.flex-caption.overlayLight {
 margin-bottom: -60px;
 bottom: 60px;
 position: relative;
}

.flex-caption.overlayDark {
 background: rgba(0, 0, 0, 0.7);
 color: #fff;
}

.flex-caption.overlayLight {
 background: rgba(255, 255, 239, 0.9);
 color: #000;
}

ul.slides li a {
 display: block;
 overflow: hidden;
}


/* blogger css conflicts fix */

.flexslider ul {
 margin: 0 !important;
 padding: 0 !important;
 line-height: initial !important;
}

.flexslider ul.flex-direction-nav li {
 margin: 0;
 padding: 0;
 line-height: initial;
}

.flexslider ul li {
 margin-bottom: 0 !important;
}

.flexslider img {
 padding: 0;
 border: none;
 -webkit-box-shadow: none;
 box-shadow: none;
}

ul.flex-direction-nav {
 position: static;
}

ul.flex-direction-nav li {
 position: static;
}

.error {
 font-family: monospace, sans-serif;
}

@media (max-width: 600px) {
 .flex-caption {
 font-size: 20px;
 line-height: 20px;
 font-weight: 400;
 }
}
</style>
<!-- Include Dependency Script -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="http://shuvojitdas.com/script/jquery.bdslider.min.js"></script>

Not:Kullandığınız başka bir Jquery Düşük ise Slider da kilitleme yapabilir.Bu yüzden eski jquery nizi silip tekrar sayfanızı görüntüleyin 

Adım - 5: Şimdi slider ı nereye yapacağımıza geldi sıra, Yerleşim e gelelim.Daha Sonrasında Slider için yeterli Genişlikteki Gadget a gelip Html & Javascript olan Gadget ı seçip aşağıdaki kodu yapıştıralım

<div id="slider1"></div>
<script type="text/javascript">
$(document).ready(function() {
 $("#slider1").BloggerDynamicSlider({
 imageWidth: 636, // Image width in px value
 imageHeight: 398, // Image height in px value
 maxItem: 6, // Max number of Slider Image to show
 animation: "slide", // Select your animation type, "fade" or "slide"
 showPostTitle: true, // Show post title as Caption ? (true/false)
 postTitleStyle: "overlayLight", // Caption style: "default, "overlayDark" or "overlayLight"
 });
});
</script>

Adım - 6:Kaydet  ve şimdi yukarıdaki koda $("#slider1").BloggerDynamicSlider({ yazan yerin hemen altına eğer belirli bir etiketteki yazılarımızı slider da göstermek istiyorsak
 blogURL: "http://xxxx.blogspot.com",

labelName: "Sağlık",

Blog Url yazan yere İki tırnak arasına xxxx yazan yere blogumuzun ismini yazacağız

labelName yazan yerede hangi etiketi göstereceksek onu yazacağız ben farazi olarak sağlık yazdım

daha sonrasında $("#slider1").BloggerDynamicSlider yazan yerin hemen altına yapıştırıyoruz ve İşlem Bitiyor.Slider hakkındaki Önerileri Yazımız burada bitmiştir Arkadaşlar 

Sağlıcakla Kalın

Slider Ayarları

$("#slider1").BloggerDynamicSlider({
 blogURL: "", // Your Blog URL. example: "http://onerileri.blogspot.com"; Only need to specify when fetching slider content from another blog
 labelName: "", // Show posts from specific Label. Specify a 'Label', or leave it empty to fetch from all recent posts
 maxItem: 6, // Max number of Slider Posts to show
 showPostTitle: true, // Show post title as Caption ? (true/false)
 postTitleStyle: "default", // Select post title/caption style "default, "overlayDark" or "overlayLight"
 imageWidth: 544, // Image width in px value
 imageHeight: 280, // Image height in px value
 animation: "fade", // Select your animation type, "fade" or "slide"
 controlNav: true, // Navigation for paging control of each slide? (true/false)
 directionNav: true, // Previous/next navigation? (true/false)
 pauseOnHover: false, // Pause slideshow when hovering over slider, then resume when no longer hovering (true/false)
 slideshowSpeed: 7000, // Set the speed of the slideshow cycling, in milliseconds
 animationSpeed: 600, // Set the speed of animations, in milliseconds
 animationLoop: true, // Should the animation loop? (true/false)
});

Yapamayan Arkadaşlar Yorum olarak atabilirler