Blogger İç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.. 

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> 

Renklendirmiş olduğumuz kısımları kendinize göre düzenleyiniz..