https://instagram.com/alphazzers
   
Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
MyBB Öne çıkan konular alanı
#1
Herkese merhaba arkadaşlar, bu yazımda Öne çıkan konular alanını paylaşacağım. Öncelikle belirtmek isterim ki kod yapımcısı erdalmedet isimli bir MyBB kullanıcısıdır. Kurulumu aşağıdaki adımları takip ederek gerçekleştirebilirsiniz. 

1.Adım: Admin Paneli > Kullandığınız temanın Global.css stil sayfasına girin ve en aşağıya aşağıda yer alan CSS kodunu ekleyin.

Kod:
.one-cikan-konu-alan {
margin: 0 -8px 18px -8px;
overflow: hidden; /* FIX */
}

.one-cikan-konu {
background-color: #FAFAFA;
width: calc(25% - 18px);
float: left;
margin: 0 8px;
border: 1px solid #ddd;
border-radius: 4px;
}

.one-cikan-konu-ust {
background-color: transparent;
}

.one-cikan-konu-ust > h4.baslik {
border-bottom: 1px solid #ddd;
padding: 0 16px;
margin: 0;
text-transform: uppercase;
height: 42px;
line-height: 42px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.one-cikan-konu-ust > img.resim {
width: calc(100% + 2px);
height: 200px;
margin: 0 -1px;
}

.one-cikan-konu-icerik {
background-color: #FFF;
}

.one-cikan-konu-icerik > p.aciklama {
padding: 16px;
margin: 0;
}

.one-cikan-konu-alt {
background-color: transparent;
}

.one-cikan-konu-alt > a.devami {
border-top: 1px solid #ddd;
padding: 0 16px;
height: 42px;
line-height: 42px;
text-align: center;
display: block;
}

2.Adım: Admin Paneli > Kullandığınız temanın şablon sayfası > Header Şablonları'na girin ve aşağıdaki HTML kodunu ekleyin.

Kod:
<div class="one-cikan-konu-alan">
<div class="one-cikan-konu">
<div class="one-cikan-konu-ust">
<h4 class="baslik">Öne Çıkan Konu Başlığınızı Buraya Giriniz</h4>
<img class="resim" src="http://www.bilim.org/wp-content/uploads/files-html_-css_-php_-js.jpg" alt="" />
</div>
<div class="one-cikan-konu-icerik">
<p class="aciklama">Buraya konunuz hakkında açıklama yazısı yazabilirsiniz.</p>
</div>
<div class="one-cikan-konu-alt">
<a href="#" class="devami">Konuyu Görüntüle</a>
</div>
</div>
<div class="one-cikan-konu">
<div class="one-cikan-konu-ust">
<h4 class="baslik">Öne Çıkan Konu Başlığınızı Buraya Giriniz</h4>
<img class="resim" src="http://www.bilim.org/wp-content/uploads/files-html_-css_-php_-js.jpg" alt="" />
</div>
<div class="one-cikan-konu-icerik">
<p class="aciklama">Buraya konunuz hakkında açıklama yazısı yazabilirsiniz.</p>
</div>
<div class="one-cikan-konu-alt">
<a href="#" class="devami">Konuyu Görüntüle</a>
</div>
</div>
<div class="one-cikan-konu">
<div class="one-cikan-konu-ust">
<h4 class="baslik">Öne Çıkan Konu Başlığınızı Buraya Giriniz</h4>
<img class="resim" src="http://www.bilim.org/wp-content/uploads/files-html_-css_-php_-js.jpg" alt="" />
</div>
<div class="one-cikan-konu-icerik">
<p class="aciklama">Buraya konunuz hakkında açıklama yazısı yazabilirsiniz.</p>
</div>
<div class="one-cikan-konu-alt">
<a href="#" class="devami">Konuyu Görüntüle</a>
</div>
</div>
<div class="one-cikan-konu">
<div class="one-cikan-konu-ust">
<h4 class="baslik">Öne Çıkan Konu Başlığınızı Buraya Giriniz</h4>
<img class="resim" src="http://www.bilim.org/wp-content/uploads/files-html_-css_-php_-js.jpg" alt="" />
</div>
<div class="one-cikan-konu-icerik">
<p class="aciklama">Buraya konunuz hakkında açıklama yazısı yazabilirsiniz.</p>
</div>
<div class="one-cikan-konu-alt">
<a href="#" class="devami">Konuyu Görüntüle</a>
</div>
</div>
</div>

resim.gif Ekran Görüntüsü:
jnY8DG.png
Cevapla PGM
Teşekkür verenler:
#2
Teşekkürler.
Cevapla PGM
Teşekkür verenler:
#3
Eline sağlık yararlı konu teşekkürler.
Ara
Cevapla PGM
Teşekkür verenler:
#4
Rica ederim.
Cevapla PGM
Teşekkür verenler:
#5
Bu konu vardı sanki :P
Bana ulaşmak için / http://english.10tl.net

MybbPHPVB.NETHTMLCSS MySQL                                    

Eğer eleştiriden korkuyorsanız, dünyadan hiçbir şey yapmadan geçip gideceksiniz demektir. 
Cevapla PGM
Teşekkür verenler:
#6
Olabilir, kapsamlı bir araştırma yapmadan paylaştım.
Cevapla PGM
Teşekkür verenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 1 Ziyaretçi



Webfast.10tr.net - Dev Paylaşım Platformu -

Online Shopping App
Online Shopping - E-Commerce Platform
Online Shopping - E-Commerce Platform
Feinunze Schmuck Jewelery Online Shopping