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
  MyBB her foruma ayrı Font Awesome ikon [Modifikasyon] novruz 0 380 14-08-2019, Saat:11:01
Son Yorum: novruz
  [1.6 - 1.8] Mybb Social Login Eklentisi ile 30 Farklı Sosyal MEdya sitesiyle Kayıt Olma camoka1903 5 2,288 18-07-2019, Saat:17:47
Son Yorum: MuslumDurukan
  MyBB Gece modu özelliği [Modifikasyon] novruz 2 305 06-07-2019, Saat:21:34
Son Yorum: novruz
  MyBB ana sayfada son konular 4'lü blok [Modifikasyon] novruz 0 205 03-07-2019, Saat:17:39
Son Yorum: novruz
Öneri - Fikir MyBB kimler çevrimiçi bölümünde kullanıcı avatarı [Modifikasyon] novruz 0 164 30-06-2019, Saat:11:08
Son Yorum: novruz



Konuyu Okuyanlar: 1 Ziyaretçi