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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtNbQx5kO1sKjqAbK-bH4FrABBp4NliqKROxLZAeQBDcpoR_vpJk8yt7UmDt5TQWXhYuZGZzjg7irT8L3Mpk4BuTyDgSaqiROuZ8thYvdjkUmSaU3C0EvORKbGRBT5cVpNYKnjZJv5iSo/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvXrDaZw1yD6HOG8oXkYnPO7LnyqSRciWNuF4q6pzLlWvWQHqvJP0rwUCGKWWcVZebAe8toRhI6UVltiLc1rhnxH1L6Yi58OUohgjLDsz7mBxBNlHphZv9nziVxRuASUJz3JVv22juAqs/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.