Blogger Jquery ile slider menü yapımı

Jquery slider menü

• 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/AVvXsEi_aW8nbvaC6lRCWOtqqZk0gKgGxR3LU6Qyks2PRmq7XCJUNsIczGTHVAmRBW-DK6QB_JBt8bUs21lOGzRYfS5ziUmUvBkbBO7C_9W9kbgNdUEsImmuSKnEsRHAvHQSLkTGKH6w2vk8h3Wv/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/AVvXsEiTjKysrEc330k6G325nlf5duVplTtTEyIKxINg6roYZOD2dxdbdSwd2_DD_-7mMit-pDQfpgJO_E42mCYcTcGh81-ofTuGL-eXegyfNeQVmw7fp6XqJDiBI3qbZIWSUpIVVU37TcqYacW8/s1600/22.JPG" alt="" /></a>
            <a href="#"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2TxSXvw8uU89OJ-i7Vmk1-dck64fM1a4kNP5QbBbZzm46kIGzE9cXbQ_kb7qSlAqJFPtOJdZPFdbUziaijW-iBV3gp7CrlA7-8kKSvHoYx_O2bDAMQMavaNbWIdnFSxmz1CKJPpLSHpzQ/s1600/1.JPG" alt="" /></a>
            <a href="#"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGqdlmrGjKCCF-h64AgHqk9zdVrFcdL-VqVKzR9t4yUKgNoMuIKvnnO0wYXyeoIQ0Y0_yF14kRINBKeMOvjbY6jlAKBx5Vd3LVkiQpNkemkI8sUcqWlsvWrazjLjj_J9Ps4oshRhT9S9qf/s1600/4.JPG" alt="" /></a>
            <a href="#"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMPZNgJgeTexYzPK8WoOSXTuF6YKWtVVv0VjQqzySs6xVX9Qc40upf5gk_2zEIleCi-dGxuvYrQWixLwfpLR-5UP-A36xj_hmwDshaQxZPnqaX0bIt3tjJgdqtFw_Te-jgtyOxSlmviszx/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>

• 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.