CSS Blogger slider ekleme

Blogger slider

Bir Fotoğraf galerisi bir Blog'u çekici bir hale getirmek için bir slayt eklemek gerekir.Sizlere bugun çok güzel bir slider tanıtacağım slider'de çok güzel efektlerde var.İstediğiniz resimleri ekleyeyip hareketli slider olarak gösterebilirsiniz.Blogger slider demosu alttaraftadır.Blogger slider konusunda wordpress'e kıyaslandığında baya düşük yüzdelerle kıyaslanabilir ama gün geçtikçe blogger'de çok güzel şeyler çıkmaya başlıyor.Bu blogger slider'de bunlardan biri diyebilirim sizlere neyse fazla lafı uzatmadan blogger slider ekeleme kısmına geçecelim.Adımları düzgünce takip edelim.

Blogger slider kodu:

Blogger> Şablon> HTML Düzenle Git.

Bu kodu aratın ]]> </ b: skin> ve ondan önce aşağıdaki CSS kodunu ekleyin. Sonra kaydedin.

#slider {

 padding: 0;

 width:100%;

 height:400px;

 margin:0 auto;

 background:#000;

 position:relative;

 border:3px solid #000;

 overflow:hidden;

}

#slider .gallery {

 padding:0;

 margin:0 auto;

}

#slider .gallery input {

 display:none;

}

#slider .gallery li {

 list-style-type:none;

 margin:0;

 padding:0;

}

#slider .gallery img {

 width:100%;

 height:100%;

 position:absolute;

 -moz-transition:all 900ms linear;

 -o-transition:all 900ms linear;

 -webkit-transition:all 900ms linear;

 transition:all 900ms linear;

 opacity:0;

 visibility:hidden;

}

#slider input:checked ~ img,

#slider input:checked ~ img#motion-left,

#slider input:checked ~ img#move-down,

#slider input:checked ~ img#move-over,

#slider input:checked ~ img#run-around,

#slider input:checked ~ img#move-right,

#slider input:checked ~ img#italic {

 -moz-transform:rotate(0deg) scale(1);

 -ms-transform:rotate(0deg) scale(1);

 -o-transform:rotate(0deg) scale(1);

 -webkit-transform:rotate(0deg) scale(1);

 transform:rotate(0deg) scale(1);

 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

 filter:alpha(opacity=100);

 opacity:1;

 top:0 !important;

 left:0;

 right:0;

 visibility:visible;

}

#slider .nav {

 padding:2px;

 background:rgba(0,0,0,0.5);

 color:#09f;

 text-decoration:none;

 margin:0;

 position:absolute;

 top:0;

 left:0;

 right:0;

 text-align:center;

}

#slider label {

 padding:1px 10px;

 background:rgba(252, 252, 252, 0.31);

 color:#FFF;

 font:bold 12px/20px Arial,sans-serif;

 text-decoration:none;

 margin:1px 4px 1px 0;

 display:inline-block;

 cursor:pointer;

 position:relative;

 -webkit-transition: .3s;

 -moz-transition: .3s;

 -ms-transition: .3s;

 -o-transition: .3s;

 transition: .3s;

}

#slider label:hover {

 background: #000;

}

#slider .gallery li .description {

 position:absolute;

 padding:5px;

 background:rgba(10, 10, 10, 0.59);

 color:#fff;

 left:0;

 right:0;

 bottom:-1000px;

 font:bold 14px/20px Arial,sans-serif;

 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

 filter:alpha(opacity=0);

 opacity:0;

 -moz-transition:all 1s ease-in-out;

 -o-transition:all 1s ease-in-out;

 -webkit-transition:all 1s ease-in-out;

 transition:all 1s ease-in-out;

}

#slider input:checked ~ .description {

 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

 filter:alpha(opacity=100);

 opacity:1;

 bottom:0;

 -moz-transition-delay:0.5s;

 -o-transition-delay:0.5s;

 -webkit-transition-delay:0.5s;

 transition-delay:0.5s;

}

#slider .gallery li .description a,

#slider .gallery li .description a:visited {

 color:#ff0;

 text-decoration:none;

}

#slider .gallery img#motion-left,

#slider .gallery img#move-right,

#slider .gallery img#move-down,

#slider .gallery img#move-over,

#slider .gallery img#run-around,

#slider .gallery img#italic {

 -moz-transition-delay:0.5s;

 -o-transition-delay:0.5s;

 -webkit-transition-delay:0.5s;

 transition-delay:0.5s;

}

#slider .gallery img#motion-left {

 left:-100%;

}

#slider .gallery img#move-right {

 left:100%;

}

#slider .gallery img#move-down {

 top:100%

}

#slider .gallery img#move-over {

 top:-100%

}

#slider .gallery img#run-around {

 -moz-transform:rotate(1230deg) scale(0);

 -ms-transform:rotate(1230deg) scale(0);

 -o-transform:rotate(1230deg) scale(0);

 -webkit-transform:rotate(1230deg) scale(0);

 transform:rotate(1230deg) scale(0);

}

#slider .gallery img#italic {

 opacity:0;

 -moz-transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);

 -ms-transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);

 -o-transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);

 -webkit-transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);

 transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);

}

İstediğiniz yere şimdi aşağıdaki HTML kodunu ekleyin. Ve istersen Gadget ekleyipte bu kodları ekleyebilirisniz. 

<div id="slider">

<div class="gallery">

<li><input checked="true" id="a" name="system" type="radio" />

<img id="motion-left" src="Resim URL" />

<div class="description">AÇIKLAMASI METİN</div>

</li>

<li><input id="b" name="system" type="radio" />

<img id="move-right" src="Resim URL" />

<div class="description">AÇIKLAMASI METİN</div>

</li>

<li><input id="c" name="system" type="radio" />

<img id="move-over" src="Resim URL" />

<div class="description">AÇIKLAMASI METİN</div>

</li>

<li><input id="d" name="system" type="radio" />

<img id="move-down" src="Resim URL" />

<div class="description">AÇIKLAMASI METİN</div>

</li>

<li><input id="e" name="system" type="radio" />

<img id="run-around" src="Resim URL" />

<div class='description'>DESCRIPTION TEXT</div>

</li>

<li><input id="f" name="system" type="radio" />

<img id="italic" src="Resim URL" />

<div class='description'>AÇIKLAMASI METİN</div>

</li>

<li><input id="g" name="system" type="radio" />

<img id="run-around" src="Resim URL" />

<div class='description'>AÇIKLAMASI METİN</div>

</li>

<li><input id="h" name="system" type="radio" />

<img id="move-right" src="Resim URL" />

<div class="description">AÇIKLAMASI METİN</div>

</li>

<li><input id="i" name="system" type="radio" />

<img id="move-over" src="Resim URL" />

<div class="description">AÇIKLAMASI METİN</div>

</li>

<li><input id="j" name="system" type="radio" />

<img src="Resim URL" />

<div class='description'>AÇIKLAMASI METİN</div>

</li>

</div><!--End up .gallery-->

<div class='nav'>

<label for='a'>1</label>

<label for='b'>2</label>

<label for='c'>3</label>

<label for='d'>4</label>

<label for='e'>5</label>

<label for='f'>6</label>

<label for='g'>7</label>

<label for='h'>8</label>

<label for='i'>9</label>

<label for='j'>10</label>

</div><!--End up .nav-->

</div><!--End up #slider-->