Blogger Jquery ile slider menü yapımı

Jquery slider menü

       Merhabalar değerli blog okuyucuları ,

     Öncelikle şunu belirtmek isterim ki bu yazı bloggertrix adresinden esinlenerek türkçeye çevrilerek sizlerle paylaşılmıştır.Bu yazımda sizlere jquery slider yapımını Blogger blogunuza nasıl ekleyeceğinizi ve kullanacağınızı anlatmaya çalışacağım.

     Google üzerinde jquery adı altında bir arama yaptığınızda bir çok sonuçla karşılaşmanız mümkün.Haber sitelerinde veya bir çok internet sitelerinde bu slider ile karşılaşıyoruz.Özellikle haber siteleri bu slider ları çok etkin bir biçimde kullanmaktalar.Hoş görünen bu slider ile isterseniz blogunuz için bir manşet menü yapabilir isterseniz de bir resim galerisi oluşturabilirsiniz.Öncelikle eklentinin yani jquery ile yapılmış slider'n nasıl göründüğünü merak ediyorsanız test butonuna tıklayarak bakabilirsiniz.

TEST

     Peki bu slider ile neler yapabiliriz bir bakalım.Jquery slider ile bir çok şey yapmak mümkün.Yukarıda da bahsettiğim üzere isterseniz bir resim galerisi isterseniz de bir üst menü yapabilirsiniz.Örneğin blogunuzda yeni bir yazı yazdığınızda bunu manşet menüden göstermek isteyebiliriz.Ya da belli konuları (örneğin en çok trafik alan konularınız) bu slider'a ekleyerek daha göz önünde bulunmasını sağlayabiliriz.Daha farklı fikirler üretmek sizin elinizde.İstediğinizi yapabilirsiniz blogunuz için en iyi olan neyse. Gelin şimdi birlikte adım adım jquery slider'ı ile bir manşet menü yapalım.

• Blogger paneline giriş yapıyoruz.
• Daha sonra yerleşim sekmesine tıklıyoruz.
• Blog kayıtları yazan yerin üst kısmına bir Gadget ekliyoruz.
• Gadget ekle butonuna tıklıyoruz Html javascript'e tıklıyoruz ve aşağıdaki kodları yapıştırıyoruz.
• Kodları yapıştırmadan önce kod paylaşımın altındaki uyarıları okuyunuz.Daha sonra blogunuza uygulayınız.

<style type="text/css">

.container1 {
 width: 660px;padding: 0;margin: 0 auto;
}
.folio_block {
 position: absolute;left: 50%; top: 50%;margin: -140px 0 0 -395px;}
.main_view {float: left;position: relative;}
.window {-moz-box-shadow: 0px 0px 5px #303030;
-webkit-box-shadow: 0px 0px 5px #303030;
box-shadow: 0px 0px 5px #303030;border:1px solid #000000;height:240px; width: 660px;
margin-top:15px;overflow: hidden; 
position: relative;
}
.image_reel {
 position: absolute;top: 0; left: 0;
}
.image_reel img {float: left;}
.paging_ugurturkoglu {
 position: absolute;bottom: 10px; right: -7px;width: 178px; height:47px;z-index: 100; 
text-align: center;
 line-height: 40px;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW5zfwFQg6sxW6zHoxgLrTo87YZy1bmk6gyXbb0it6to7gqTOOo8bu_VhXPgwBQivT5tM6Lw3rW045x8cKKiJunZRUbiXg7_HcjWtJJ8tERP3M5RhXU32g9Pvs2CmXjoMlAOflF43NNr_0/s1600/paging.png) no-repeat;
 display: none; 
}
.paging_ugurturkoglu a {
 padding: 5px;text-decoration: none;color: #fff;
}
.paging_ugurturkoglu a.active {
 font-weight: bold; background: #920000; border: 1px solid #610000;
 -moz-border-radius: 3px;
 -khtml-border-radius: 3px;
 -webkit-border-radius: 3px;
}
.paging_ugurturkoglu a:hover {font-weight: bold;}
</style>
<div class="container1">
<div class="main_view">
    <div class="window">
        <div class="image_reel">
            <a href="#"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja2YwUAGFTEXzhoKvvZjSCuIJkjlIykrDnPlwQvB6t0-06utGpQ7LNSge2a3v7eWanAoSLFq9Fi9DzTDpYPe3lIxApQevke9Hy5qnvkh4Ea9AYdu9IQX2OWl4U5Fy9exbyrx8ED71tYAAl/s1600/22.JPG" alt="" /></a>
            <a href="#"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpDYNsJk-YvC0uHOsP_pAtZavOFctovyfrW7-cI_qkcYQGz5apGm40E5Tw1YsIk1Q5XKWud1x_XsKPJtoOnsTzZb97xQF6c4-VrHpxS4O4RK8jW97nuzPp4fRasy6xRwn-zm4h60XBQG_A/s1600/1.JPG" alt="" /></a>
            <a href="#"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP-MwPa_WBWwH64C8xePVRGPbgB67CrG4Nr3_j8AgMwdn1egImy18gIf_uhT5P54bASeVJXB6hhv02j53NHmaUCFMgAALFcOfZY4A_CMEZnqv6xdJyKQMD2FXifNUlsejxuZj_UQorssv9/s1600/4.JPG" alt="" /></a>
            <a href="#"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj74M-UtVg-iZXlbI29X6mvWS4CRld1XKB4TqIdbWQ-3pPS_7N7sonyq3SBapzskhxdmYitwnrY1ViC1GEzqwunn5uSs34pGcFAQbb94IX3n0OR2gck6amgv4ciQZdvSuE3PKMFbXNpFu5k/s1600/3.JPG" alt="" /></a>
        </div>
    </div>
    <div class="paging_ugurturkoglu">
        <a href="#" rel="1">1</a>
        <a href="#" rel="2">2</a>
        <a href="#" rel="3">3</a>
        <a href="#" rel="4">4</a>
    </div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

$(".paging_ugurturkoglu").show();
 $(".paging_ugurturkoglu a:first").addClass("active");
  
 
 var imageWidth = $(".window").width();
 var imageSum = $(".image_reel img").size();
 var imageReelWidth = imageWidth * imageSum;
 
  $(".image_reel").css({'width' : imageReelWidth});
 
 //paging_ugurturkoglu + Slider Function
 rotate = function(){ 
  var triggerID = $active.attr("rel") - 1; 
  var image_reelPosition = triggerID * imageWidth; 
  $(".paging_ugurturkoglu a").removeClass('active'); 
  $active.addClass('active'); 
  
  
  $(".image_reel").animate({ 
   left: -image_reelPosition
  }, 500 );
  
 }; 
 
 //Rotation + Timing Event
 rotateSwitch = function(){  
  play = setInterval(function(){ 
   $active = $('.paging_ugurturkoglu a.active').next();
   if ( $active.length === 0) { 
    $active = $('.paging_ugurturkoglu a:first'); 
   }
   rotate(); 
  }, 5000); 
 };
 
 rotateSwitch(); 
 
$(".image_reel a").hover(function() {
  clearInterval(play); 
 }, function() {
  rotateSwitch(); 
 }); 
 
$(".paging_ugurturkoglu a").click(function() { 
  $active = $(this); 
  clearInterval(play); 
  rotate(); 
  rotateSwitch(); 
  return false; 
 }); 
 
});
</script>

Kod kısmında ayarlanacak Bölümler

• Jquery slider'ın da en önemli öge tabiki resimler.Resimlerin seo için öneminden de daha önceleri bahsetmiştik.Neyse Slider'a nasıl resim ekleyeceğiz.Ben bu menüyü ayarlarken 4 adet resim ele aldım.Resimler aşağıda gözükmekteler.Bu dört adet resimi yazıma ekledim.Daha sonra bu resimlerin üstünde sağ tıklayarak URL adreslerini kopyaladım.Kod kısmını açtım ve kod kısmında Mavi rengi olan yerlere URL adreslerini yapıştırdım.Resimlerin URL adreslerini.İsterseniz resimleri internet ortamında ucrestsiz resim yukleme adreslerine yükleyerek de adreslerini yani URL lerini kopyalabilirsiniz.

resim-1

resim-2

resim-3

resim-4

• Kırmızı renkte olan # yazan yere de resme vermek istediğiniz adresin URL sini yapıştırıyoruz.Böylece jquery slider ile yaptığımız manşet menümüzde hangi resme tıklarsak belirlemiş olduğumuz adrese gidilecektir.

Bu kadar Basit.Jquery slider menümüz hazır.

İyi günler.

Bir önceki yazımda Blogger da Rss kutusu ve sosyal paylaşım butonları  hakkında bilgiler verilmektedir.