MyBBDepo - Türkiyenin MyBB Deposu Forumuna Hoşgeldiniz
Eğer sitemize yaptığınız ilk ziyaretiniz ise, lütfen öncelikle Forum Kurallarını okuyunuz. Forumumuzda bilgi alışverişinde bulunabilmeniz için Kayıt olmalısınız. Üye olmayanlar forumumuzdan yararlanamazlar.
Eğer zaten kayıtlı kullanıcı iseniz, lütfen kullanıcı adınız ve şifreniz ile, Giriş yapınız. (Sitemize üyelik ücretsizdir).
R34LiTy avatar
Konuyu Oyla:
  • Derecelendirme: 0/5 - 0 oy
  • 1
  • 2
  • 3
  • 4
  • 5

Derecelendirme: 0/5 - 0 oy

MyBB Temalarınız İçin Dinamik Slider


Sponsor Reklam

Çevrimdışı R34LiTy
 Tarih: 03-08-2016, Saat:22:30
#1
Ö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
Kod:
{$header}
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.
Cevapla
Bunu Beğenenler: SefaKaya , XLRThetis , CyberPatient , ozanakkaya
Sponsor Reklam
Sponsor Reklam Sponsor Reklam

Çevrimdışı SefaKaya
 Tarih: 03-08-2016, Saat:22:34
#2
Eline sağlık başarılı çalışma olmuş.
Cevapla
Bunu Beğenenler:

İzinli XLRThetis
 Tarih: 04-08-2016, Saat:11:25
#3
Gerçekten başarılı , eline sağlık.
Cevapla
Bunu Beğenenler:

Çevrimdışı R34LiTy
 Tarih: 05-08-2016, Saat:00:03
#4
Önemli değil
Cevapla
Bunu Beğenenler:

Çevrimdışı EsqiLerdenBeri
 Tarih: 05-08-2016, Saat:13:58
#5
Ç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 ?
Cevapla
Bunu Beğenenler:

Çevrimdışı R34LiTy
 Tarih: 06-08-2016, Saat:15:17
#6
(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;
}
Cevapla
Bunu Beğenenler:

Çevrimdışı EsqiLerdenBeri
 Tarih: 06-08-2016, Saat:16:00
#7
Saolasın kardeşim ellerine sağlık
Cevapla
Bunu Beğenenler: R34LiTy

Çevrimdışı hamit
 Tarih: 11-06-2018, Saat:17:33
#8
ornek varmı? nasıl gorundugunu merak ettim
Cevapla
Bunu Beğenenler:

 


Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  [1.6 - 1.8] Mybb Social Login Eklentisi ile 30 Farklı Sosyal MEdya sitesiyle Kayıt Olma camoka1903 2 1,077 12-09-2017, Saat:00:48
Son Yorum: Mashimaro
  [1.4 - 1.6 - 1.8] MyBB : Meta Tag Eklemek Ripbyrustavi02 1 1,154 26-04-2017, Saat:00:16
Son Yorum: VenomBoss
Kod [1.6 - 1.8] MyBB Öne Çıkan Konular Alanı tedem 22 5,817 13-04-2017, Saat:22:21
Son Yorum: VenomBoss
  sitem için forum kurmayı duşunuyorum yusuf0618 1 1,140 15-12-2016, Saat:14:06
Son Yorum: DotFRM
  haber sitem için bir forum açmayı düşünüyorum yusuf0618 2 1,245 16-10-2016, Saat:05:48
Son Yorum: eksewest



Konuyu Okuyanlar: 1 Ziyaretçi