29 Aralık 2012 Cumartesi

Blogger CSS3 ile Slider Oluşturmak

Blogger dersleri kategorisinde bloglarına renk katmak isteyenler için Blogger manşet menüler sunmuştum. Link ekleyebileceğiniz bu tasarımlar ile belirlediğiniz konuları ön plana çıkarabilme imkanına sahip oluyorsunuz.

İnceleyebileceğiniz Manşet Menüler :

Blogger Resimli Manşet Slayt Menüsü >>
Hareketli Resim Manşet Slayt Menüsü >>
Blogger Resimli Slayt Gösterisi >>

Link ekleyebilme özelliğinin yanı sıra sadece tanıtım ve slayt gösterileri sunmak isteyenler için ise CSS3 ile dizayn edilmiş farklı bir tasarım örneği sunmak istiyorum.

Blogger CSS3 Slider Demo

Blogger CSS3 ile Slider Kullanımı

1 ) Blogger kumanda paneline gelip Şablon >> HTML'yi Düzenle sekmesiyle kodlarımızı açıyoruz. Widget şablonlarını genişlet kutucuğunu işaretliyoruz.
2 ) Ctrl + F yardımı ile ]]></b:skin> kodunu bularak aşağıdaki kodu hemen üzerine ekliyoruz.

/* fade slider */
.slides {
height:300px;
margin:50px auto;
overflow:hidden;
position:relative;
width:900px;
}
.slides ul {
list-style:none;
position:relative;
}
/* keyframes #anim_slides */
@-webkit-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;
}
100% {
opacity:0;
}
}
@-moz-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;
}
100% {
opacity:0;
}
}
.slides ul li {
opacity:0;
position:absolute;
top:0;
/* css3 animation */
-webkit-animation-name: anim_slides;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: anim_slides;
-moz-animation-duration: 24.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
}
/* css3 delays */
.slides ul li:nth-child(2), .slides ul li:nth-child(2) div {
-webkit-animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
}
.slides ul li:nth-child(3), .slides ul li:nth-child(3) div {
-webkit-animation-delay: 12.0s;
-moz-animation-delay: 12.0s;
}
.slides ul li:nth-child(4), .slides ul li:nth-child(4) div {
-webkit-animation-delay: 18.0s;
-moz-animation-delay: 18.0s;
}
.slides ul li img {
display:block;
}
/* keyframes #anim_titles */
@-webkit-keyframes anim_titles {
0% {
left:100%;
opacity:0;
}
5% {
left:10%;
opacity:1;
}
20% {
left:10%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}
@-moz-keyframes anim_titles {
0% {
left:100%;
opacity:0;
}
5% {
left:10%;
opacity:1;
}
20% {
left:10%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}
.slides ul li div {
background-color:#000000;
border-radius:10px 10px 10px 10px;
box-shadow:0 0 5px #FFFFFF inset;
color:#FFFFFF;
font-size:26px;
left:10%;
margin:0 auto;
padding:20px;
position:absolute;
top:50%;
width:200px;
/* css3 animation */
-webkit-animation-name: anim_titles;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: anim_titles;
-moz-animation-duration: 24.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
}

Kodlar içerisinde kırmızı yazılmış sayısal değerleri değiştirerek sliderın boyutları belirleyebilirsiniz.

3 ) Blogger Kontrol Paneli > Yerleşim > Gadget Ekle > HTML/Javascript seçeneğini kullanarak sliderı görmek istediğiniz yere aşağıdaki kodları ekleyin.

<div class="slides">
<ul> <!-- slides -->
<li><img alt="Blogger CSS3 ile Slider" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOfiAMrkyr6SI8mX5-onZCJO7p8tjEHiL2VrTA0hEynCzDoSPUNyRtDxdLiP7QDP6550eN_FJ4NMDhTocemnaIam4Z3NI6HKUJrz0ronBIFA9hDbY8wv0xTYnsBdapzQf6qdgEmkhinoI/s1600/Blogger-CSS3-ile-Slider(1).jpg" />
<div>
Başlığınız #1</div>
</li>
<li><img alt="Blogger CSS3 ile Slider" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnBsmEKJb-msoYsHf_rs7r98PpcKRY5G-4fiZoBFH5SCd5d61q4EOlLUsdgutCn77RwQdhXSaPTEUMzGvy-b7S8-QiCMvjTPQxyabZK2kpALIGjlmaYY0Hq9oTP10jMdZWyRzzQ-OAYlo/s1600/Blogger-CSS3-ile-Slider(2).jpg" />
<div>
Başlığınız #2</div>
</li>
<li><img alt="Blogger CSS3 ile Slider" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX3qJD8DeTrJqJEBLP2nMX3tnClK_xmwe4LdYrIi5iubWRcJaoTHR8kIF8jQERU_EmyonrNA2ZTtAR9D2aZjgpCIFZ-bT4yjjpCieP1xELOp8X1Vg2xlHyyTwXYvJotiXaD0oMzUKuTEY/s1600/Blogger-CSS3-ile-Slider(3).jpg" />
<div>
Başlığınız #3</div>
</li>
<li><img alt="Blogger CSS3 ile Slider" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij0XuVR1NCD6qiQgx1jWDh4DVM31gYk2b8JaMc3mYF_QfI9nT3yl9ouEnVuZN6oRjNF_zgMMP2LwQsf3KMUxyRQg0i-tWPpEcwdvxgKF4YJmfy2JOQY22BrPdisKEjLkSOg6YLGB0Luxg/s1600/Blogger-CSS3-ile-Slider(4).jpg" />
<div>
Başlığınız #4</div>
</li>
</ul>
</div>

Blogger CSS3 Slider Modifiye :

Pembe yazılmış olanlar resimlerin alt etiketidir.
Mavi olarak belirlenmiş alan resim üzerine gelince görünecek olan başlık.
Kırmızı linkler görünecek olan resim linkleri.

Hiç yorum yok:

Yorum Gönder

29 Aralık 2012 Cumartesi