Blogger 3d Slider Eklentisi

Merhaba arkadaşlar,

bu yayınımda sizlere blogunuzda kullanabileceğiniz güzel bir slider eklentisinden bahsedeceğim.

3d şeklindeki slider bloğunuzda güzel bir hava oluşturacaktır.Kullanımı hemen anlatayım.

Adım1 : Blogger Admin Panel'inden Şablon > Html'yi Düzenle diyoruz ve Ctrl + F tuşlarına basarak ]]><b:skin> kodunu aratıyoruz ve hemen üstüne aşağıdaki kodu yapıştırıyoruz.

/*!
 * Otomatik 3D Slider by Kod Blogcum
 * http://kodblogcum.blogspot.com
 */

.dg-container {
  width:100%;
  height:450px;
  position:relative;
}
.dg-wrapper {
  width:481px;
  height:316px;
  margin:0 auto;
  position:relative;
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
  -ms-transform-style:preserve-3d;
  -o-transform-style:preserve-3d;
  transform-style:preserve-3d;
  -webkit-perspective:1000px;
  -moz-perspective:1000px;
  -ms-perspective:1000px;
  -o-perspective:1000px;
  perspective:1000px;
}
.dg-wrapper a {
  display:block;
  position:absolute;
  left:0;
  top:0;
  background:transparent url('http://lh5.googleusercontent.com/-4pQoBU5e0lg/UqUzJIM7jMI/AAAAAAAAIak/NkYdYXHow-M/s1600/browser.png') no-repeat 0 0;
  -webkit-background-size:100% 100%;
  -moz-background-size:100% 100%;
  background-size:100% 100%;
  -webkit-box-shadow:0 10px 20px rgba(0,0,0,.3);
  -moz-box-shadow:0 10px 20px rgba(0,0,0,.3);
  box-shadow:0 10px 20px rgba(0,0,0,.3);
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
.dg-wrapper a.dg-transition {
  -webkit-transition:all .5s ease-in-out;
  -moz-transition:all .5s ease-in-out;
  -ms-transition:all .5s ease-in-out;
  -o-transition:all .5s ease-in-out;
  transition:all .5s ease-in-out;
}
.dg-wrapper a img {
  display:block;
  margin:0;
  padding:41px 0 0 1px;
  border:none;
  outline:none;
}
.dg-wrapper a .dg-caption {
  font:italic normal 16px/50px Georgia,"URW Bookman L",Serif;
  text-align:center;
  width:100%;
  height:50px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:1px 1px 1px rgba(255,255,255,.5);
  color:#333;
  display:none;
  position:absolute;
  bottom:-55px;
}
.dg-wrapper a.dg-center .dg-caption {display:block}
.dg-container .dg-nav {
  width:58px;
  position:absolute;
  z-index:1000;
  bottom:40px;
  left:50%;
  margin-left:-29px;
}
.dg-container .dg-nav span {
  text-indent:-9000px;
  float:left;
  cursor:pointer;
  width:24px;
  height:25px;
  opacity:0.8;
  background:transparent url('http://lh5.googleusercontent.com/-g4AHuT29Ntw/UqUy2w8chxI/AAAAAAAAIaY/wPyJEQtryjo/s1600/arrows.png') no-repeat 0 0;
}
.dg-container .dg-nav span:hover {opacity:1}
.dg-container .dg-nav span.dg-nav-next {
  background-position:100% 0;
  margin-left:10px;
}
.dg-caption-date:before,
.dg-caption-comment:before {content:" - "}
.dg-caption-comment {display:none}

Adım 2 :Yine Blogger Admin Panel'inden slideri nerde göstermek istiyorsak oraya aşağıdaki kodu ekliyoruz.Ben Gadget olarak ekledim.Gadget olarak eklemek için;

Yerleşim > Gadget Ekle > Html/JavaScript diyoruz ve aşağıdaki kodu ekliyoruz.
http://kodblogcum.blogspot.com/ yazan yere kendi blog adresinizi yazıyorsunuz.
NOT:Sliderda kaç tane resim gözükmesini istiyorsak aşağıda koddan numPost : 3 yazan yerdeki 3 yerine kaç tane resim istiyorsak resim adedini yazıyoruz.

Paylaş

Yazar : KODBLOGCUM

Benzer Yayınlar