Blogger Otomatik Slider Eklentisi

01 Mart 2014 Cumartesi, 09:58
Blogger Otomatik Slider Eklentisi



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: "http://lh3.googleusercontent.com/-SrchH_T_dag/UpnwHVaUkCI/AAAAAAAAIY4/kAG7IM7kMT8/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 …

Yorum yazın...

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

porno porno izle porno