Blogger için alternatif slayt eklentisi

Blogger için alternatif slayt eklentisi

FURKAN GÜLER Ocak 25, 2017
FURKAN GÜLER
Blogger için alternatif slayt eklentisiBlogger için en çok tercih edilen eklentilerden biri de elbette slayt geçişleridir. Birçok farklı çeşidi olan bu eklentinin bugün bahsedeceğim şekli ise, kolay kurulumuyla birlikte hem sade hem de etkileyici bir yapıya sahip. Css kodları üzerinde düzenlemeler yaparak gönlünüzce değiştirebileceğiniz gibi, eklentiyi birazdan paylaşacağım haliyle de kullanabilirsiniz. Slaytımız herhangi tıklama işlemine gerek duymadan da çalışmasının yanı sıra, üzerindeki numaralara tıklayarak da hareket ettirilebilmektedir. Şimdi bu güzel eklentinin kurulumuna geçebiliriz.
Blogger panelimizin Tasarım > Html’yi Düzenle bölümü açarak aşağıdaki kodu buluyoruz.
</head>
Bu kodun hemen üzerine aşağıdaki kodları ekliyoruz.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&quot;.paging&quot;).show();
$(&quot;.paging a:first&quot;).addClass(&quot;active&quot;);
var imageWidth = $(&quot;.window&quot;).width();
var imageSum = $(&quot;.image_reel img&quot;).size();
var imageReelWidth = imageWidth * imageSum;
$(&quot;.image_reel&quot;).css({&#39;width&#39; : imageReelWidth});
//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr(&quot;rel&quot;) - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(&quot;.paging a&quot;).removeClass(&#39;active&#39;); //Remove all active class
$active.addClass(&#39;active&#39;); //Add active class (the $active is declared in the rotateSwitch function)
//Slider Animation
$(&quot;.image_reel&quot;).animate({
left: -image_reelPosition
}, 500 );
};
//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $(&#39;.paging a.active&#39;).next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $(&#39;.paging a:first&#39;); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 5000); //Timer speed in milliseconds (3 seconds)
};
rotateSwitch(); //Run function on launch
//On Hover
$(&quot;.image_reel a&quot;).hover(function() {
clearInterval(play);
}, function() {
rotateSwitch(); //Resume rotation
});
//On Click
$(&quot;.paging a&quot;).click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});
});
</script>
Daha sonra aşağıdaki kodu buluyoruz
]]></b:skin>
Bu kodun hemen üzerine de aşağıdaki kodları ekliyoruz.
#galeria{
margin: 0 auto;
padding: 0px 0px;
width: 810px;
z-index:999;
}
.main_view {
float:left;
position: relative;
z-index:999;
}
.window {
height:289px;
width: 800px;
border:1px solid #fff;
overflow: hidden;
position: relative;
-moz-box-shadow:0px 0px 4px #fff;
-webkit-box-shadow:0px 0px 4px #fff;
box-shadow:0px 0px 4px #fff;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;z-index:999;
}
.image_reel {
position: absolute;
top: 0; left: 0;
z-index:1000;
}
.image_reel img {
float: left;
z-index:1001;
}
.paging {
position: absolute;
bottom: 40px;
right: -1px;
width: 220px;
height:41px;
z-index: 100;
text-align: center;
line-height: 40px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWp9muNZhGE5HkabkajGD58wJRxAAoV3PCDmKX2qyLtHyzq1Nc1PKN0JymNVKPIMiOGQtoOJaKKUKI-gPi4dgM9OwO5kPS5ECTq-0RKbpa96Q0gZFxvRgpG71JwG-OJ-eofOpw9LzPK6vg/s0/slider.png);
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-radius-bottomleft: 15px;
-webkit-border-radius-topleft: 15px;
border:1px solid #fff;
border-right: 0px solid;
display: none;
-moz-box-shadow:inset 0px 0px 2px #d6d6d6;
-webkit-box-shadow: inset 0px 0px 2px #d6d6d6;
box-shadow:inset 0px 0px 2px #d6d6d6;
z-index:1002;
}
.paging a {
outline:none;
padding: 5px 10px;
text-decoration: none;
color: #999;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWp9muNZhGE5HkabkajGD58wJRxAAoV3PCDmKX2qyLtHyzq1Nc1PKN0JymNVKPIMiOGQtoOJaKKUKI-gPi4dgM9OwO5kPS5ECTq-0RKbpa96Q0gZFxvRgpG71JwG-OJ-eofOpw9LzPK6vg/s0/slider.png) center;
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
-moz-box-shadow: inset 0px 0px 1px #d6d6d6;
-webkit-box-shadow:inset 0px 0px 1px #d6d6d6;
box-shadow:inset 0px 0px 1px #d6d6d6;
border:1px solid #fff;z-index:1002;
}
.paging a.active {
font-weight: bold;
border: 1px solid #fff;
color: #17add8;
background: #f1f1f1;
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
-moz-box-shadow: inset 0px 0px 2px #d6d6d6;
-webkit-box-shadow:inset 0px 0px 2px #d6d6d6;
box-shadow:inset 0px 0px 2px #d6d6d6;
z-index:1002;
}
.paging a:hover {
font-weight: bold;
z-index:1002;
}
Son olarak ise slaytımızın yer almasını istediğimiz şablon bölümüne aşağıdaki kodları ekliyoruz.
<div id='galeria'>
<div class='main_view'>
<div class='window'>
<div class='image_reel'>
<a href='#' rel='1'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS6_6eG92Lj7O67iEKil5lg5_nq7aZ8jh7YYSrCxB1R70F1zo0h5O_7oYPaKMqb1UM7oL4qeldMjoK6_4NzfNZC2rcePJV22ORU3t4n65L9RXPQXnROZKCWiUSFHE8etew-ZUor596dTkY/s0/wallpapersafull_4110..jpg'/></a>
<a href='#' rel='2'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAVAsVt2wE8PpsoxYNinIWSq4JnkoiTg3bw0412Jk8lg1i1OzoOm5J1eJd9cpdbFs-hSSrkjOtuPKwwemp2HENJHIgG6SskmlbsI41srq5Rb8ar6paS_Xvd8i3n8ilyBYTEFKnhOVa-wZb/s0/wallpapersafull_3986..jpg'/></a>
<a href='#' rel='3'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAe0ClhAiFK891FV_Wuvpt1lvOKVKMcdPcQnmhdWSb9CfVQcIzhZroYUtODHh2pN6AILGMp3Hfa1LJ626265InaWm6_EdSCOKqG6zwggvLMlKX-uoFrt2PyA56plI8HLupjE4YFWTSFs98/s0/wallpapersafull_4106..jpgg'/></a></div></div>
<div class='paging'><a href='' rel='1'>1</a><a href='' rel='2'>2</a><a href='' rel='3'>3</a>
</div></div>
</div>
Böylece slaytımızı blog sayfamıza eklemiş olduk.
Önemli notlar:
  • Script kodları içerisinde kırmızıyla belirttiğim rakamı küçülterek slayttaki resimlerin daha kısa aralıklarla değişmesini sağlayabilirsiniz.
  • Slaytta yer alan ve kırmızıyla belirttiğim resimlerin yerine yine 800 px × 289 px boyutlarında farklı resimler koyabilirsiniz.
  • Slayttaki resimlere tıklandığında istediğiniz bir adrese yönlendirmesini isterseniz de yine kırmızıyla belirttiğim # kısmını silerek adresi yazabilirsiniz

Hakkında

Önceki Yayın
« Önceki
Sonraki Yayın
Sonraki »
Kaydol: Kayıt Yorumları (Atom)