CSS 3lü Duyuru Paneli

Admin Paneli Temalar&Şablonlar Temalar (Tema isminiz) global.css Gelişmiş Düzenleme en alta aşağıdaki kodları kopyalayın Değişiklikleri Kaydet ve Kapat deyip editörü kapatın.


Admin Paneli Şablonlar (Tema isminiz) Ana Sayfa - [index] Şablonlar index şablonunu açın {$header} kodunun hemen altına aşağıdaki kodları kopyalayın ve yapıştırın.


Sonrasında duyurularınızı düzenleyebilirsiniz. İyi çalışmalar.

Ek Dosyalar

Ekran Görüntüleri
   


  Dosya Şifresi (isterse): mybbturkce.com

MyBB Temalarınız İçin Dinamik Slider: Resimlerin üzerine gelin açıklamalar büyür. Ne kadar açıklama yazsanız da bozulmaz. Açıklamanızın bir kısmı gözükür sadece.

Nasıl Yapılır ? Anlatalım.

1. Temanızın index şablonunu açıp aşağıdaki kodu bulun.
   
   Kod:

   {$header}
   
   
2. Hemen altına bu kodu ekleyin. Ve gerekli kısımları kendinize göre düzenleyin.
   
   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>

Kolay gelsin.

Admin Paneli > Şablonlar > Temanızın Şablonları > Postbit Şablonlar >  postbit_attachments_attachment 

Hepsini sil yapıştır

Admin Paneli > Temalar > Temanızı seçin >  global.css 

En alta ekleyin

Örnek Görüntü:

MyBB Font Awesome Forum İkonu Yapımı

Örnek Görüntü:



Nasıl Yapılır ? Adım adım anlatayım.

1. Admin Paneli > Şablonlar > Gruplandırılmamış şablonlar >  headerinclude  en alta ekleyin.
   
   
   Kod:

   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous" />
   
   
2. Admin Paneli > Şablonlar > Forum Bit şablonları >  forumbit_depth2_forum 
   
   Bul:
   
   Kod:

   <span class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"></span>
   
   Değiştir:
   
   Kod:

   <span class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"><i class="fas fa-comments"></i></span>
   
   
3. Admin Paneli > Temalar >  global.css  içerisinden
   
   Bul:
   
   Kod:

   .forum_status {
height: 30px;
width: 30px;
background: url(images/forum_icon_sprite.png) no-repeat 0 0;
}

.forum_on {
background-position: 0 0;
}

.forum_off {
background-position: 0 -30px;
}

.forum_offlock {
background-position: 0 -60px;
}

.forum_offlink {
background-position: 0 -90px;
}
   
   Değiştir:
   
   Kod:

   .forum_status {
height: 50px;
width: 50px;
font-size: 30px;
text-align: center;
}

.forum_on {
color: #007fd0;
}

.forum_off, .forum_offlock, .forum_offlink {
color: #333;
}

.forum_off i {
opacity: .3;
filter: alpha(opacity=30);
}

.forum_offclose i:before {
content: "\f023";
}

.forum_offlink i:before {
content: "\f0c1";
}

İşlem tamam. Kolay gelsin.

Ek Dosyalar

Ekran Görüntüleri
   


  Dosya Şifresi (isterse): mybbturkce.com

MyBB Öne Çıkan Konular Alanı: Sitenizde öne çıkarmak istediğiniz konuları, site kullanıcılarına daha hızlı ulaştırmanızı/duyurmanızı sağlar.
Kodlayan: tedem

Ekran Görüntüsü:



(Kullanılan temaya göre düzenlenebilmesi için sade bir görünüm tasarladım, bilginize.)

Kurulum:

1. Yönetici paneline giriniz.
   
   
2. Kullandığınız temayı seçiniz.
   
   
3. Yönetici paneline giriniz.
   
   
4. Temanın  global.css  stil sayfasının en sonuna aşağıdaki CSS kodlarınız ekleyin ve kaydedin.
   
   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;
}
   
   
5. Temanızın  header  şablonun en altına aşağıdaki HTML kodlarını ekleyin ve kaydedin.
   
   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>

Not: Anlatımı varsayılan (default) tema için yaptım. Farklı temalarda HTML kodunu, farklı alanlara koymanız gerekebilir. Bu konuda herhangi bir sorunla karşılaşırsanız, konu altına yorum yapabilirsiniz.

Ek Dosyalar

Ekran Görüntüleri
   


  Dosya Şifresi (isterse): mybbturkce.com

Flat yani Minimal tasarım nedir?

Herkese merhabalar bu yazımda flat yani minimal tasarımın ne olduğundan ve ne olmadığından bahsedeceğim. Öncelikle flat kelimesinin anlamı düz demektir. Genelde iki boyutlu tasarımlar olarak adlandırılır. Bir nevi çok abartıya kaçmamak olarak da nitelendirilebilir. Günümüzde moda olan bu anlayış büyük ve köklü firmaları da harekete geçirmiştir. Günümüzde birçok web sitesi, alışveriş siteleri, sosyal medya siteleri gibi siteler flat yani minimal tasarım anlayışını benimsemişlerdir. Gelin hep beraber bu firmaların eski logolarını ve yeni logolarını karşılaştıralım.

Flat tasarım, yeni Android ve iOS sürümlerinin çıkışı ile birlikte daha fazla rağbet görmüş, birçok mobil tabanlı uygulama tasarımlarını flat olarak değiştirmişlerdir. Soğuk renklerin kullanıldığı bu tasarımların genellikle hangi renklerden oluştuğu aşağıdaki resimde yer almaktadır. Ayrıca aşağıda bazı butonların karşılaştırması da bulunmaktadır.


Daha çok minimal tasarım için aşağıdaki tasarım örneklerini incelemenizde fayda var...

Ek Dosyalar

Ekran Görüntüleri
           


  Dosya Şifresi (isterse): mybbturkce.com

Konuya geçmeden önce bir önceki SEO makalem olan "SEO nedir ve nasıl yapılır?" isimli konumu okumanızı tavsiye ederim. Öncelikle bu yazımızda başlık yani H etiketini nerelerde ve nasıl kullanacağımızdan bahsedeceğim. H etiketi birden altıya kadar olan genellikle başlıkları vurgulamak ve arama motorlarına makalenizi doğru tanıtmak için kullanılan html tabanlı bir etikettir. <h1> etiketi en büyük başlığı, <h6> etiketi ise en küçük ve geri planda kalan başlıklar için kullanılır. Bu etiket sayesinde başlıklar daha vurgulu yani kalın ve büyük hale gelmektedir.


Bu etiketlerin SEO puanınıza doğrudan ve etkili bir şekilde etki etmesi için doğru yerde ve doğru şekilde kullanmalısınız. Örneğin ana başlığa <h6> etiketi verirken, geri planda kalan başlıklar için <h1> etiketi vermemelisiniz. Gelelim nasıl kullanacağımıza. Bu etiketleri kullanmadan önce ana başlığı belirlememiz gereklidir. Sonra bir gazete sayfasını inceleyerek bu gazete sayfasının düzenine göre başlıklarımızı H etiketi ile sırasıyla desteklememiz gereklidir. Bu etiketleri bol bir şekilde kullanmamızın bir anlamı yoktur. Bol bir şekilde kullanmak okuyucu sıkacak ve sitenize yarardan çok zarar getirecektir. Tabii ki çok az kullanıp makaleyi tek bir başlık altında toplamamanız gerekmektedir. Daha az önemi bulunan yerleri H etiketi ile desteklemek yerine <strong> etiketi ile kalın yazabilirsiniz. Aşağıda bu etiketlerin ne kadar kullanılması gerektiği bulunmaktadır.


H1 Etiketi
En fazla iki kez kullanılmalıdır. Bir tanesi sitenin üst bölümünde yer alan genel bir başlık olurken diğeri ise site içeriğinin başlığı olmalıdır.

H2 Etiketi
H2 etiketinin kullanım sayısı kişiden kişiye değişmektedir. En fazla iki tane kullanılması önerilirken, bazı kişiler tarafından bu sayı beş kere kullanılmalıdır şeklinde yorumlanmaktadır. Doğru bir kullanım olması için <h1> etiketi altında kullanılmalı ve alt başlıkları temsil etmelidir.

H3 Etiketi
H3 etiketi bir sayfada paragrafları temsil etmek için kullanılmalıdır. Kullanım sayısının beş veya altıyı geçmesi önerilmektedir.

H4, H5 ve H6 Etiketi
Bu etiketler bir sayfada kategoriler ve daha az önemi bulunan yerleri vurgulamak için kullanılır.


Önemli Bilgiler!
H1 etiketi kullandığınızda sitenizin ana başlığını belirttiğiniz için bu etiketin arasında yer alan başlığı uzun tutmayınız. Bu ana başlık sitenizin içeriğini anlattığı için kısa ve öz olmalıdır.

H etiketlerini kullanırken mutlaka <title> etiketi ekleyiniz. Örnek kullanım: <h1 title="H etiketi">H etiketi ve doğru kullanımı</h1>

Sitenizde bulunan H etiketlerinin CSS kodları ile boyutlarının ayarlanabileceğini aklınızdan çıkarmayınız.

Merhabalar,
MyBB Seo bakımından önemli olan SSL sertifikasının kurulumundan sonra MyBB sisteminize uyumlu hale getirmeye çalışacağız.  İsterseniz önce SSL sertifikasını açıklayalım.

- SSL sertifikaları site adreslerinin doğruluğunu kontrol eden, iki nokta arasındaki veri iletişimini şifreli kanal üzerinden yaparak güvenli bir şekilde iletilmesini sağlayan bir üründür. SSL sertifikaları hiç bir zaman yazdığınız kodun veya web sitenizin güvenliğini sağlamaz.

Şimdi SSL sertifikanız kurulduktan sonra yapmanız gereken adımlar aşağıdaki gibidir.

1)   Forum Bilgileri  kısmını güncellemek.

   

Admin KP Forum Ayarları Forum Bilgileri kısmına geliyoruz. 

Forum Adresi Kısmında sizde şu şekildedir.

Bu kısımda http alanını https olarak değiştiriyoruz.


Yine aynı kısımda olan Forum Ana Sayfa Adresi kısmına geliyoruz. Üstteki adımları uyguluyoruz.

2)  Robots.txt  kısmını güncellemek. 

Bunun için FTP ana dizinine gidiyoruz ve dosyayı düzenlemek için açıyoruz. Ve varsa ilk sıradaki gibi bunları sitenize göre düzenliyorsunuz. Yoksa ekleyip düzenleyebilirsiniz.


3)  .htaccess  Dosyasında Düzenleme Yapma
Kodu ekleyin. Burada  siteadresiniz  yazan kısmı kendi site adresiniz ile değiştireceksiniz. http ile başlayan kısmı mutlaka https olarak değiştirin.

4) Bu adımlardan sonra tam verim almanız için düzenlemeniz gereken bir çok yer olabilir. 

• Sitenizde bulunan tüm http:// bağlantılarını https:// olarak güncelleyeceksiniz.
  
• Üyelerin imzalarında ki http resimler,
  
• Temanız daki http resimler,
  
• Sitenizde bulunan tüm .js ve .css uzantılı site bağlantılarını yine  http:// 'den https:// formatına çevirmeniz  gerekiyor.
  

Kolay gelsin.

Admin KP - Şablonlar - Temanızın Şablonları - PostBit Şablonları -  postbit_signature  aşağıdaki gibi düzenleyin.

Eğer imzayı kare içine almak istiyorsanız aşağıdaki kodu deneyebilirsiniz:


Örnek Resimler:

Merhaba Arkadaşlar,
MyBB'de sitemizi veya bir sayfayı nasıl başka siteye yönlendirebileceğimizi göreceğiz.

1. Eğer bütün siteyi tamamen başka siteye yönlendirmek istiyorsak;
   
   Admin KP > Şablonlar > Temanızın Şablonları > headerinclude (Gruplandırılmamış) Şablonlar >  headerinclude 
   
   En üstüne ekleyin:
   
   Kod:

   <script>
window.location.href = "SITE-ADRESİ";
</script>
   
   
2. Eğer sadece bir sayfayı yönlendireceksek, o sayfanın olduğu şablona giriyoruz ve üstteki kodu en üste yapıştırıyoruz.
   

Kolay gelsin.