![]() |
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 ile Slider Kullanımı
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/AVvXsEgfb3NhYW_WnF7fgnufv9QCtgD2TGDVIIZqxs7Qx0ulLrbVwI8SXJcVi6l5lud1KvCZ9bfz9Sjj5_F7akbuVKRIpDswAtTOM2vhr1naw9EJRH_lH8BZD0Fs-5hRI2BrozAK6c0nEmhYF58/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/AVvXsEjGCEhpULkT8EkDTJZhfZ0yz8XO3D_V7Wq6thCZpPcBO2OiwzBQD9yxXB8y6farwscjlYwLXmZhLbA4vS6x0IIuNxa9L-7gi6hvc0Rr8_lSgJGLK5blRlWwUYwYLQzOeugyFVUqYfFUx6I/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/AVvXsEhGsSW_VjaRDktAoLnxDUnAFLZ5t_5Yir1vkPB-707mN2yzEghIzGxAIZVdLqwM60NdUvegOQ02xf1EOh7ieT1IUfne8WbGyCHwmXf-rbokOmX2jWec0vcMcT08QjsEOPoJvQCiUnoMfec/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/AVvXsEg6ODILgRS7n3lPjhntepYfnCi2VmTMps49OJeEayE9fvEL8Lu_0ddaPbnMesNghs1A9HBuKfA9lHI_RbrOmAJhJ9S-dVaYVOVgHfmYuKhRXI6sUhcK-2Fq_yAdfpmnl6a4WfLqRckajFo/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.
0 yorum:
Yorum Gönder