MyBB Temalarınız İçin Dinamik Slider - R34LiTy - 03-08-2016
Öncelikle demo verelim;
Kod:
https://codepen.io/r34lity/pen/LkJoGW
Resimlerin üstüne gelin açıklamalar büyür.
Sorunsuzdur. Ne kadar açıklama yazsanız da bozulmaz. Açıklamanızın bir kısmı gözükür sadece.
Kuruluma geçmek gerekirse;
Temanızın index şablonlarını açıp
Kodunun hemen altına bu kodu ekleyin;
Kod:
<style>
@import url(https://fonts.googleapis.com/css?family=Ubuntu:400,500);
body {margin: 0px;}
#slide {
position: relative;
margin: 1px 0px 20px 0px;
float: left;
}
#slide ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
#slide ul li {
display: inline-block;
float: left;
width: calc( 25% - 2px );
height: 150px;
overflow: hidden;
cursor: pointer;
border-left: 1px solid #fff;
}
#slide ul li:nth-child(1) {
border-left: 0px solid;
}
#slide ul li img {
width: 100%;
height: 150px;
float: left;
}
#slide ul li .aciklama {
color: #fff;
line-height: 21px;
text-shadow: 0px 2px 1px black;
font-weight: bold;
text-overflow: ellipsis;
overflow: hidden;
font-family: Ubuntu;
margin: 90px 0px;
height: 30px;
width: calc( 25% - 42px );
padding: 15px 20px;
position: absolute;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,000000+100&0+0,1+100 */
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
transition: all 250ms;
}
#slide ul li:hover .aciklama {
margin: 70px 0px;
height: 50px;
}
</style>
<div id="slide">
<ul>
<li><a href="#"><img src="https://www.mobilofon.com/blog/wp-content/uploads/2016/04/Samsung-Galaxy-S7-Edge-Fiyat%C4%B1-200-D%C3%BC%C5%9Ft%C3%BC.jpg"><div class="aciklama">Son Döneme Damgasını Vuran 5 İlginç Teknolojik Ürün! Fazla kelimelerde böyle oluyor işte deneme için uzun yazmam lazım gördüğün gibi</div></li>
<li><a href="#"><img src="https://www.mobilofon.com/blog/wp-content/uploads/2016/04/Samsung-Galaxy-S7-Edge-Fiyat%C4%B1-200-D%C3%BC%C5%9Ft%C3%BC.jpg"><div class="aciklama">Son Döneme Damgasını Vuran 5 İlginç Teknolojik Ürün! Fazla kelimelerde böyle oluyor işte deneme için uzun yazmam lazım gördüğün gibi</div></li>
<li><a href="#"><img src="https://www.mobilofon.com/blog/wp-content/uploads/2016/04/Samsung-Galaxy-S7-Edge-Fiyat%C4%B1-200-D%C3%BC%C5%9Ft%C3%BC.jpg"><div class="aciklama">Son Döneme Damgasını Vuran 5 İlginç Teknolojik Ürün! Fazla kelimelerde böyle oluyor işte deneme için uzun yazmam lazım gördüğün gibi</div></li>
<li><a href="#"><img src="https://www.mobilofon.com/blog/wp-content/uploads/2016/04/Samsung-Galaxy-S7-Edge-Fiyat%C4%B1-200-D%C3%BC%C5%9Ft%C3%BC.jpg"><div class="aciklama">Son Döneme Damgasını Vuran 5 İlginç Teknolojik Ürün! Fazla kelimelerde böyle oluyor işte deneme için uzun yazmam lazım gördüğün gibi</div></li>
</ul>
</div>
Ve gerekli kısımları düzenleyin.
Cvp: MyBB Temalarınız İçin Dinamik Slider - SefaKaya - 03-08-2016
Eline sağlık başarılı çalışma olmuş.
Cvp: MyBB Temalarınız İçin Dinamik Slider - XLRThetis - 04-08-2016
Gerçekten başarılı , eline sağlık.
Cvp: MyBB Temalarınız İçin Dinamik Slider - R34LiTy - 05-08-2016
Önemli değil
Cvp: MyBB Temalarınız İçin Dinamik Slider - EsqiLerdenBeri - 05-08-2016
Çok başarılı olmuş hocam birde bunu normal wp sitelerinde sağ sidebarda alt alta kullanabılır mıyız ? kullanabılırsek alt alta nasıl yapabılırız ?
Cvp: MyBB Temalarınız İçin Dinamik Slider - R34LiTy - 06-08-2016
(05-08-2016, Saat:13:58)EsqiLerdenBeri Adlı Kullanıcıdan Alıntı: Çok başarılı olmuş hocam birde bunu normal wp sitelerinde sağ sidebarda alt alta kullanabılır mıyız ? kullanabılırsek alt alta nasıl yapabılırız ?
@EsqiLerdenBeri
CSS'yi bunla değişip HTML kodunu bire bir ekle olur.
Kod:
@import url(https://fonts.googleapis.com/css?family=Ubuntu:400,500);
body {margin: 0px;}
#slide {
position: relative;
margin: 1px 0px 20px 0px;
float: left;
}
#slide ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
#slide ul li {
display: block;
width: calc( 25% - 2px );
height: 150px;
overflow: hidden;
cursor: pointer;
border: 1px solid #fff;
}
#slide ul li img {
width: 100%;
height: 150px;
float: left;
}
#slide ul li .aciklama {
color: #fff;
line-height: 21px;
text-shadow: 0px 2px 1px black;
font-weight: bold;
text-overflow: ellipsis;
overflow: hidden;
font-family: Ubuntu;
margin: 90px 0px;
height: 30px;
width: calc( 25% - 42px );
padding: 15px 20px;
position: absolute;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,000000+100&0+0,1+100 */
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
transition: all 250ms;
}
#slide ul li:hover .aciklama {
margin: 70px 0px;
height: 50px;
}
Cvp: MyBB Temalarınız İçin Dinamik Slider - EsqiLerdenBeri - 06-08-2016
Saolasın kardeşim ellerine sağlık
Cvp: MyBB Temalarınız İçin Dinamik Slider - hamit - 11-06-2018
ornek varmı? nasıl gorundugunu merak ettim
|