Yeni - Blogger İçin Haber Manşet Alanı ( Css Tasarımlı )
Merhaba arkadaşlar, tasarımını beğendiğim bir eklentiyi sizlerle paylaşmak istedim.
Bu eklenti ile blogunuza sade ve tasarımı ilginç bir haber manşet alanı olarak kullanabilirsiniz. Css ile tasarlanmış bu eklenti sitenizde az yer kaplayacak ve blog ziyaretçilerinizin de ilgisini çekecektir.
Gelelim eklentinin kullanımına ve uygulanışına;
Blogger Kumanda Paneli > Yerleşim > Gadget Ekle > HTML/Javascript ve açılan boş kutuya aşağıdaki kodu yerleştiriyoruz
<style>
#slider {
width: 600px;
height: 200px;
margin: 40px auto 0;
overflow: visible;
background-color: #362c30;
border: 10px solid #362c30;
-moz-transition: all 150ms ease-in;
-webkit-transition: all 150ms ease-in;
-o-transition: all 150ms ease-in;
position: relative;
}
#mask {
overflow: hidden;
}
#slider:hover {
background-color: #fff;
border: 10px solid #ddd;
}
#slider:hover #pause {
opacity: 1;
}
#slider:hover #progress {
background-color: rgba(255,255,255,0.0);
}
#slider:hover ul, #slider:hover #progress, #slider:hover #overlay {
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
}
#pause {
width: 600px;
height: 200px;
position: absolute;
top: 0;
opacity: 0;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaE6vEFxQxy2ogXyesc2OUHhZFhxwYAAJru9NRAUEZz1QK6TV7k-jMHMCRds9Su5C8ECNl0aQrTP_l1VU2A50WJ5qjiaqoUDyfKlLcEgvWkhoZc8VdYSIfMNxWBih-p6G91Sc7WMpB-bs/s1600/bloglamazamani-manset-alani-paused.png);
background-position: 566px 10px;
background-repeat: no-repeat;
pointer-events: none;
-moz-transition: all 150ms ease-in;
-webkit-transition: all 150ms ease-in;
-o-transition: all 150ms ease-in;
}
#progress {
width: 1px;
height: 1px;
background-color: #ffd000;
-moz-animation: progress 18s infinite;
-webkit-animation: progress 18s infinite;
position: relative;
top: -1px;
-moz-transition: all 150ms ease-in;
-webkit-transition: all 150ms ease-in;
-o-transition: all 150ms ease-in;
}
#overlay {
width: 600px;
height: 200px;
position: absolute;
top: 0;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHLqWEYVUcPIvH-hK8o2YVANmEnxIwNUyRjfj6a7t6AofAGql2ZLvs1bToPOnzY7I6ohbKPL03Sf2rXcWTG-u1FPe6iVJsJ2c5bk-NCW_JTYP1RZA_OCi81I-9ND00XgfbbEnc7C0d7mE/s1600/bloglamazamani-.png);
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
-moz-transition: all 150ms ease-in;
-webkit-transition: all 150ms ease-in;
-o-transition: all 150ms ease-in;
opacity: 0.5;
-moz-animation: overlay-fade 18s infinite;
-webkit-animation: overlay-fade 18s infinite;
}
#slider ul {
width: 2400px;
list-style: none;
padding: 0;
margin: 0;
-moz-animation: slide-animation 18s infinite;
-webkit-animation: slide-animation 18s infinite;
position: relative;
left: 0px;
}
#slider li {
display: inline;
width: 600px;
height: 200px;
margin: 0;
padding: 0;
float: left;
position: relative;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmDiVjDCs3rCelJMM9a_B2iJwf4Kdk9BxjYOVmQ2sauG0M2bb3goKzZnUF85HdXimMlN2wKG4we4Z0Derh0P4aHtEYl_hUAwdnFf_LWd2_Ypi3S592cIvNZdTlBs6hRMJxLJ0c9RlceP8/s1600/bloglamazamani-yukleniyor.gif);
background-position: 50% 50%;
background-repeat: no-repeat;
}
#slider li:last-of-type {
background-color: #362c30;
}
#slider li a {
display: block;
text-decoration: none;
}
#slider li span {
display: block;
width: 560px;
padding: 15px 20px;
position: absolute;
bottom: 0;
left: 0;
background-color: rgba(54,44,48,0.6);
border-top: 1px solid #362c30;
text-shadow: 1px 1px 1px #362c30;
pointer-events: none;
text-align: left;
}
#slider-shadow {
width: 100%;
height: 260px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhak_XPui9IMAU6QbllurJuWx-zwpty5LAUi1uGadYDIb2RuDawR288x7TO73R8treexMXe7TF0yhFef0zF207YbpfIM_ZAB98c50igrJiBhDbNmu71oljddi811Sdg9qb57fUGLy_lu2c/s1600/bloglamazamani-slider-shadow.png);
background-position: center bottom;
background-repeat: no-repeat;
margin: 10px auto 0;
}
@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-600px; opacity:1;}
45% {left:-600px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-1200px; opacity:1;}
70% {left:-1200px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1800px; opacity:1;}
95% {opacity:1;}
98% {left:-1800px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-moz-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-600px; opacity:1;}
45% {left:-600px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-1200px; opacity:1;}
70% {left:-1200px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1800px; opacity:1;}
95% {opacity:1;}
98% {left:-1800px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-webkit-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:600px; opacity:1;}
22.5% {width:600px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:600px; opacity:1;}
47.5% {width:600px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:600px; opacity:1;}
72.5% {width:600px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:600px; opacity:1;}
98% {width:600px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-moz-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:600px; opacity:1;}
22.5% {width:600px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:600px; opacity:1;}
47.5% {width:600px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:600px; opacity:1;}
72.5% {width:600px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:600px; opacity:1;}
98% {width:600px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-webkit-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
@-moz-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
#slider ul li span h2 {
font-size: 24px;
line-height: 24px;
color: #fff;
font-weight: normal;
font-family: 'Communist-Regular';
text-shadow: 1px 1px 1px #362c30;
}
</style>
<div id="slider-shadow">
<div id="slider">
<div id="mask">
<ul>
<li>
<a href="#" title="BURAYA BAŞLIK YAZIN"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd1ljvV8degoOLjPHL7XlkBd-Ubtf4cBS1Bn7EjWnFsg3jbfWXeqSWkq5iPo3LvfbhKA4X8hswnlctTUUoxXZG7hdotf0m8OBPckn30fpeCOKRzznz-DgAwDhmc7kIl5Vho1HnMeRa2LU/s1600/haber1.png" /></a><span><h2>BURAYA AÇIKLAMA</h2></span>
</li>
<li>
<a href="#" title="BURAYA BAŞLIK YAZIN"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglDBBZ1kLvepTTjPEgipiVohu-MlzYQg0FqyqzwMaDoKXv8amjALEzP91jA9Bg7Cp2PMdF_vw1jYsU3vmURoOYz7fGjrM2QT-kqdFDgk5xcoqA9oTdmwYUM2yD1r1N1Z1E2gH82Pbbxzk/s1600/haber2.png" /></a>
<span><h2>BURAYA AÇIKLAMA</h2></span>
</li>
<li>
<iframe src="http://www.guncellbilgiler.blogspot.com/" width="600" height="200" frameborder="0" scrolling="no"></iframe>
<span><h2>BLOGLAMA ZAMANI</h2></span>
</li>
<li>
<a href="#" title="BURAYA BAŞLIK YAZIN"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLqQo89dlbtd8jyRQp8Mo3kWY-2ICAels9_EtSp4ehizELhwXjk4VxOR2l2pUAzejJCDQans3adYsrgDShbbM1CkDb4FLdjd6K6OwXT59Q4HGChFfRTnWGN0mNLyEZWmeinODcuGjuz8k/s1600/haber3.png" /></a>
</li>
</ul>
</div>
<div id="progress">
</div>
<div id="overlay">
</div>
<div id="pause">
</div>
</div>
</div>
Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. İyi bloglamalar...
1 Yorum
Çok güzel olmuş hocam bu kodu ayırmanız bende kullanabilirim her an blogumu büyütme düşünceleri içerisindeyim şu an yetersiz olduğunu düşünüyorum...