Blogger için JQuery Foto Galeri Eklentisi

Yukarıdaki resimde gördüğünüz gibi JQuery ile çalışan Foto Galeri eklentimiz sayesinden resimlerinizi Ana Sayfada ön planda tutabilirsiniz. Kullanımı kolay olan bu eklentimiz eminim bir çoğunuzun arayıpta bulamadığı bir Foto Galeri eklentisidir.. 

1. Adım HTML Kodlarını Blogger'a ekleyin

Yeleşim - Gittikten sonra - Gadget  ekle diyoruz ve HTML/JavaScript aşağıdaki Kodlarımızı ekliyoruz ve Blogger için JQuery Foto Galeri eklentimizi kurmuş oluyoruz. 

<script src='http://code.jquery.com/jquery-latest.js'></script>  <script src='http://mybloggertricks.googlecode.com/files/jquery.jcarousel.min.js' type='text/javascript'></script>  <script src='http://mybloggertricks.googlecode.com/files/mycarousel.js' type='text/javascript'></script>    <style>
.jcarousel-skin-tango .jcarousel-container {      -moz-border-radius: 10px;      -webkit-border-radius: 10px;     border-radius: 10px;      background: #F0F6F9;       }
.jcarousel-skin-tango .jcarousel-direction-rtl {      direction: rtl;  }
.jcarousel-skin-tango .jcarousel-container-horizontal {     width:425px;     padding: 20px 40px;  }
.jcarousel-skin-tango .jcarousel-container-vertical {      width: 75px;      height: 245px;      padding: 40px 20px;  }
.jcarousel-skin-tango .jcarousel-clip {      overflow: hidden;  }
.jcarousel-skin-tango .jcarousel-clip-horizontal {      width:  425px;     height: 75px;  }
.jcarousel-skin-tango .jcarousel-clip-vertical {      width:  75px;      height: 245px;  }
.jcarousel-skin-tango .jcarousel-item {      width: 75px;      height: 75px;  }
.jcarousel-skin-tango .jcarousel-item-horizontal {      margin-left: 0;      margin-right: 10px;  }
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {      margin-left: 10px;      margin-right: 0;  }
.jcarousel-skin-tango .jcarousel-item-vertical {      margin-bottom: 10px;  }
.jcarousel-skin-tango .jcarousel-item-placeholder {      background: #fff;      color: #000;  }
/**  *  Horizontal Buttons  */  .jcarousel-skin-tango .jcarousel-next-horizontal {      position: absolute;      top: 43px;      right: 5px;      width: 32px;      height: 32px;      cursor: pointer;      background: transparent url(http://mybloggertricks.googlecode.com/files/next-horizontal.png) no-repeat 0 0;  }
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {      left: 5px;      right: auto;      background-image: url(http://mybloggertricks.googlecode.com/files/prev-horizontal.png);  }
.jcarousel-skin-tango .jcarousel-next-horizontal:hover,  .jcarousel-skin-tango .jcarousel-next-horizontal:focus {      background-position: -32px 0;  }
.jcarousel-skin-tango .jcarousel-next-horizontal:active {      background-position: -64px 0;  }
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,  .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,  .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus,  .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {      cursor: default;      background-position: -96px 0;  }
.jcarousel-skin-tango .jcarousel-prev-horizontal {      position: absolute;      top: 43px;      left: 5px;      width: 32px;      height: 32px;      cursor: pointer;      background: transparent url(http://mybloggertricks.googlecode.com/files/prev-horizontal.png) no-repeat 0 0;  }
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {      left: auto;      right: 5px;      background-image: url(http://mybloggertricks.googlecode.com/files/next-horizontal.png);  }
.jcarousel-skin-tango .jcarousel-prev-horizontal:hover,  .jcarousel-skin-tango .jcarousel-prev-horizontal:focus {      background-position: -32px 0;  }
.jcarousel-skin-tango .jcarousel-prev-horizontal:active {      background-position: -64px 0;  }
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,  .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,  .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus,  .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {      cursor: default;      background-position: -96px 0;  }
/**  *  Vertical Buttons  */  .jcarousel-skin-tango .jcarousel-next-vertical {      position: absolute;      bottom: 5px;      left: 43px;      width: 32px;      height: 32px;      cursor: pointer;      background: transparent url(http://mybloggertricks.googlecode.com/files/next-horizontal.png) no-repeat 0 0;  }
.jcarousel-skin-tango .jcarousel-next-vertical:hover,  .jcarousel-skin-tango .jcarousel-next-vertical:focus {      background-position: 0 -32px;  }
.jcarousel-skin-tango .jcarousel-next-vertical:active {      background-position: 0 -64px;  }
.jcarousel-skin-tango .jcarousel-next-disabled-vertical,  .jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover,  .jcarousel-skin-tango .jcarousel-next-disabled-vertical:focus,  .jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {      cursor: default;      background-position: 0 -96px;  }
.jcarousel-skin-tango .jcarousel-prev-vertical {      position: absolute;      top: 5px;      left: 43px;      width: 32px;      height: 32px;      cursor: pointer;      background: transparent url(http://mybloggertricks.googlecode.com/files/prev-horizontal.png) no-repeat 0 0;  }
.jcarousel-skin-tango .jcarousel-prev-vertical:hover,  .jcarousel-skin-tango .jcarousel-prev-vertical:focus {      background-position: 0 -32px;  }
.jcarousel-skin-tango .jcarousel-prev-vertical:active {      background-position: 0 -64px;  }
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical,  .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover,  .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:focus,  .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {      cursor: default;      background-position: 0 -96px;  }
  </style>   
  <ul id="mycarousel" class="jcarousel-skin-tango">     
<li><a href="#"><img src="Resim URL Link" width="75" height="75"alt="Tanım" /></a></li>     
<li><a href="#"><img src="Resim URL Link" width="75" height="75"alt="Tanım" /></a></li>
<li><a href="#"><img src=" Resim URL Link" width="75" height="75"alt="Tanım" /></a></li>
<li><a href="#"><img src=" Resim URL Link " width="75" height="75"alt="Tanım" /></a></li>
<li><a href="Yönlendireceğiniz Bağlantı Adresi"><img src=" Resim URL Link " width="75" height="75"alt="Tanım" /></a></li>  
  </ul> 

Share on Google Plus

Yazar rsmylz

Merhaba... Blog hakkında istek ve Düşüncelerinizi Bildirirseniz ve reklamları tıklarsanız sevinirim...