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:

Çevrimdışı 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
Öneri - Fikir MyBB kimler çevrimiçi bölümünde kullanıcı avatarı [Modifikasyon] novruz 1 3,214 04-04-2021, Saat:09:36
Son Yorum: fadatepe54
  mybb son mesajlar forum gündemi eklentisi ? mekkuin 0 1,784 11-03-2021, Saat:19:45
Son Yorum: mekkuin
  [1.8] Mybb Mesajlarda Alıntı Butonlarını Kaldırmak [1.8.22] Anka06 0 3,095 09-04-2020, Saat:19:59
Son Yorum: Anka06
  [1.8] Konu Ön Eki Ekleme - MyBB Cixx 5 7,824 26-01-2020, Saat:20:12
Son Yorum: excelteam
  MyBB otomatik resim boyutlandırma [Modifikasyon] novruz 2 2,648 04-12-2019, Saat:21:31
Son Yorum: novruz



Konuyu Okuyanlar: 1 Ziyaretçi

istanbul escort - mecidiyeköy escort - şişli escort - ataköy escort - taksim escort - escort mecidiyeköy

sex hikaye - porno izle - türk ifşa - mecidiyeköy escort - seks hikaye - türk porno - escort bayan