Blogger Otomatik Slider Eklentisi

By Adsız - 1 Mart 2014 Cumartesi - 2 Comments

Facebook ve Mail yoluyla okuyucularımız Tarafından Yoğun Olarak blogger Otomatik Slider Talebi gelmekte. Bizde okuyucularımızın talebini Yerine getirmek Bir araştırmaya Girdik nihayetinde bu güzel eklentiyi Bulduk Daha önce size Etiket bazlı Blogger Otomatik kaymak eklentisini sunmuştuk bu eklenti ise site url'si uzerinde yazıları Otomatik Olarak çekmekte sözü fazla uzatmadan kodlara geçelim ..

Slider Eklentisini Kurmadan kez isterseniz öncesinde eklentiye DEMO 'dan Göz atabilirsiniz ..

Öncellikle ŞU kodu ]]></b:skin> . buluyoruz Kodu bulduktan SONRA Üzerine aşağıdaki kodları ekliyoruz

 /* Main */  
 .slidesJS-frame {  
  background-color:white;  
  width:570px; /* samakan dengan lebar slideshow */  
  height:270px; /* samakan dengan tinggi slideshow */  
  border:4px solid black;  
  margin:0 auto;  
 }  
 .slidesJS {  
  background-color:#f0f0f0;  
  position:relative;  
  font:normal normal 11px/normal Helmet,Freesans,Sans-Serif;  
 }  
 .slidesJS-container {  
  position:relative;  
  overflow:hidden;  
  display:none;  
 }  
 /* Next & Prev */  
 .slidesJS-next,  
 .slidesJS-prev {  
  display:block;  
  float:left;  
  background-color:black;  
  color:white;  
  font-weight:bold;  
  text-decoration:none;  
  height:20px;  
  line-height:20px;  
  padding:0 7px;  
  margin:8px 0 0;  
  overflow:hidden;  
 }  
 .slidesJS-next {float:right}  
 /* Pagination */  
 .slidesJS-pagination {  
  list-style:none;  
  margin:8px auto 0;  
  padding:0;  
  width:auto;  
  text-align:center;  
 }  
 .slidesJS-pagination li {  
  list-style:none;  
  display:inline-block;  
  *display:inline;  
  margin:0 2px;  
  padding:0;  
 }  
 .slidesJS-pagination a {  
  display:block;  
  background-color:black;  
  color:white;  
  font-weight:bold;  
  text-decoration:none;  
  height:20px;  
  line-height:20px;  
  padding:0 7px;  
  overflow:hidden;  
 }  
 .slidesJS-next:hover,  
 .slidesJS-prev:hover,  
 .slidesJS-pagination li.current a {background-color:blue}  
 /* Caption */  
 .slidesJS-caption {  
  display:none;  
  position:absolute;  
  right:0;  
  bottom:0;  
  left:0;  
  z-index:500;  
  padding:8px 10px 10px;  
  background-color:black;  
  background-color:rgba(0,0,0,.5);  
  font:normal normal 13px/1.33 Helmet,Freesans,Sans-Serif;  
  color:white;  
 }  
 .slidesJS-title a {  
  color:white;  
  text-decoration:none;  
 }  
 .slidesJS-title a:focus,  
 .slidesJS-title a:hover {text-decoration:underline}  
 .slidesJS-meta:before {content:" - "}  
 .slidesJS-meta-comment {display:none}  
 /* Ribbon */  
 .slidesJS-ribbon {display:none}

Yukardaki Kodları ekledikten SONRA aşağıdakileri Kodları yerleşim >> Gadget EKLE >> HTML / JavaScript Yoluyla ekliyoruz. 2.YOL Eger blog kaytıları uzerinde Hazır Gadget Varsa şablonda ŞU kodun <div id='main-wrapper'> Altına aşağıdaki Kodları Ekleyebilirsiniz

 <div class="slidesJS-frame" id="slidesJS-frame">  
 <div class="slidesJS" id="slidesJS">  
 </div>  
 </div>  
 <div style="clear: both;">  
 </div>  
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  
 <script>  
 var slidesJS_config = {  
   url: 'http://biribiziokuyor.com',  
   numPost: 7,  
   labelName: null,  
   monthArray: [  
     "Ocak",  
     "Şubat",  
     "Mart",  
     "Nisan",  
     "Mayıs",  
     "Haziran",  
     "Temmuz",  
     "Agustos",  
     "Eylül",  
     "Ekim",  
     "Kasım",  
     "Aralık"  
   ],  
   noImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC',  
   newTabLink: false,  
   containerId: 'slidesJS',  
   slider: {  
     width: 570,  
     height: 270,  
     preload: true,  
     preloadImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNmnEmigf7py3lxA3Jxja2Tc9JCEBFboeZmxlVjF8_ZYqTCh77nQjPJuDgO6P9CUkgtrkLLv66gUZjxvxJ_UGDeF8DCiLfomdtGTOtXmh2HxUY3Za5JpDG25YjPZfq8itCzP1KctMKJpg/s1600/slidesJS-loading.gif",  
     generateNextPrev: true,  
  prevText: "Önceki",  
     nextText: "Sonraki",  
     pagination: true,  
     generatePagination: true,  
     prependPagination: false,  
     fadeSpeed: 350,  
     fadeEasing: "",  
     slideSpeed: 350,  
     slideEasing: "",  
     start: 1,  
     effect: "true",  
     crossfade: false,  
     randomize: false,  
     play: 5000,  
     pause: 0,  
     hoverPause: true,  
     bigTarget: false,  
     animationStart: function(current) {  
       $('.slidesJS-caption', '.' + this.container).slideUp(100);  
     },  
     animationComplete: function(current) {  
       $('.slidesJS-caption', '.' + this.container).slideDown(200);  
     },  
     slidesLoaded: function() {  
       $('.slidesJS-caption', '.' + this.container).slideDown(200);  
     }  
   }  
 };  
 </script>  
 <script src="https://biribiziokuyor-com.googlecode.com/svn/sliderso.js"></script>

Kırmızı Ile gösterilen http://www.biribiziokuyor.com Yerine Kendi sitesi Yapıştırınız url'nizi. İyi Çalışmalar ...

News Ticker

Blogger Otomatik Slider Eklentisi

Share This:

Post Tags:

BiriBizi Okuyor

Sosyal Link:

2 yorum to ''Blogger Otomatik Slider Eklentisi"