MyBB Depo Forum
Merih Portal Tasarım v1.0 - Baskı Önizleme

+- MyBB Depo Forum (https://mybbdepo.com)
+-- Forum: MyBB 1.8 Depo (https://mybbdepo.com/mybb-1-8-depo-forumu)
+--- Forum: MyBB 1.8 Modifikasyon & Eklenti Deposu (https://mybbdepo.com/mybb-1-8-modifikasyon-eklenti-deposu-forumu)
+---- Forum: Portal Sayfası (https://mybbdepo.com/portal-sayfasi-111-forumu)
+---- Konu Başlığı: Merih Portal Tasarım v1.0 (/merih-portal-tasarim-v1-0-konusu.html)



Merih Portal Tasarım v1.0 - merihforum - 16-04-2017

MyBB için Portal Eklentisi
resim Eklenti ismi: Merih Portal v1.0 
resim Eklenti Yapımcısı: Merihforum
resim Türkçe Çeviri: Merihforum
resim Eklenti Güvenlimi ?: Güvenli resim
resim Eklenti Versiyonu: 1.0
resim Test Durumu: Denemiştir-sorunsuz resim
resim Uyumlu Olduğu Sürüm-(ler): MyBB 1.6.x - 1.8.X (1.6 Test edilmedi)
resim Eklenti Açıklaması:  açılır menü, slayt, öne çıkan konular. ücretsiz
resim Eklenti Kurulumu:


Merhaba Arkadaşlar.
Mybb Sitem için tasarladığım bunu herkesinde kendisine göre kullanmasını istedim.  
Öne çıkan konularıda ekledim belki bilmeyen arkadaşlarımız benim tasarımım yanında onuda kullanmak isteyebilirler her neyse...


Açılır Menu yü mybb de kullanmayı kaç zamandır istiyordum nasip bugüneymiş.

Öne çıkan konular haricinde tasarım bana aittir. Kullanım serbest herhangi bir telif hakkı linki ve isim hiçbiryerde bulunmamakta.
Slayt ve açılır menü tanımlandığı için css ve js elbette dışarıdan da çağırılabilirdi rel kullanılarak fakat tek yol elbette o değil.

Anlatımı 2 şekilde yapayım biraz uzun sürebilir.
  1. Kurulum
  2. Kendinize göre düzenleme

Kuruluma başlarken ben portal sayfasında temanın portal şablonunda birçok şeyi örnek olarak sol taraf kolonlarını kaldırdım ve bunun üzerine portalı inşa ettim. İsterseniz sizde benim gibi yapabilir veya dilediğinizi uygulayabilirsiniz.
İleride reklam alanları ve isteğe göre özel tasarımlarda yapabilirim.
portal sayfasını ana sayfa yapmak için .htcaccess dosyasının en sonuna 

Kod:
DirectoryIndex portal.php index.php

eklenir.


Gelelim kuruluma ;
Admin Paneli >> Temalar & Şablonlar >> Şablonlar >> Temanız >> Portal Sayfası Şablonlar >>  portal >> {$header} in altına şu kodları yapıştırın :

Kod:
<link rel="stylesheet" href="index_files/mbcsmbmcp.css" type="text/css" />
<!-- Merih Portal v1.0 Kullanım serbesttir. Takıldığınız yerleri forumumuzda konu açarak sorabilirsiniz -->
<div id="mbmcpebul_wrapper"  style="max-width: 432px;">
 <ul id="mbmcpebul_table" class="mbmcpebul_menulist css_menu" align="center">
 <li><div class="buttonbg gradient_button gradient58" style="width: 136px;"><div class="arrow"><div class="icon_1"><a href="http://merihforum.com/index.php">FORUM</a></div></div></div>
   <ul class="gradient_menu gradient354 img_32">
   <li class="gradient_menuitem gradient48 first_item"><a href="http://merihforum.com/forumdisplay.php?fid=1"><a class="with_img_24" title=""><img src="index_files/mbico_mbmcp_1.png" alt="" />Başlangıç<a href="http://merihforum.com/forumdisplay.php?fid=1"></a></li>
   <li class="gradient_menuitem gradient48"><a class="with_img_24" title=""><img src="index_files/mbico_mbmcp_2.png" alt="" />Android<a href="http://merihforum.com/forumdisplay.php?fid=29"></a></li>
   <li class="gradient_menuitem gradient56"><a class="with_img_32" title=""><img src="index_files/mbico_mbmcp_3.png" alt="" />MMO / RPG<a href="http://merihforum.com/forumdisplay.php?fid=71"></a></li>
   <li class="gradient_menuitem gradient56"><a class="with_img_32" title=""><img src="index_files/mbico_mbmcp_4.png" alt="" />Oyun<a href="http://merihforum.com/forumdisplay.php?fid=18"></a></li>
   <li class="gradient_menuitem gradient48"><a class="with_img_24" title=""><img src="index_files/mbico_mbmcp_5.png" alt="" />Programlama<a href="http://merihforum.com/forumdisplay.php?fid=74"></a></li>
   <li class="gradient_menuitem gradient48"><a class="with_img_24" title=""><img src="index_files/mbico_mbmcp_6.png" alt="" />Bilgisayar<a href="http://merihforum.com/forumdisplay.php?fid=3"></a></li>
   <li class="gradient_menuitem gradient48 last_item"><a class="with_img_24" title=""><img src="index_files/mbico_mbmcp_7.png" alt="" />Konu Dışı<a href="http://merihforum.com/forumdisplay.php?fid=26"></a></li>
   </ul></li>
 <li><div class="buttonbg gradient_button gradient58" style="width: 123px;"><div class="arrow"><div class="icon_2"><a>OYUN</a></div></div></div>
   <ul class="gradient_menu gradient146 img_32">
   <li class="gradient_menuitem gradient48 first_item"><a class="with_img_24" title=""><img src="index_files/mbico_mbmcp_8.png" alt="" />Android<a href="http://merihforum.com/forumdisplay.php?fid=38"></a></li>
   <li class="gradient_menuitem gradient56"><a class="with_img_32" title=""><img src="index_files/mbico_mbmcp_9.png" alt="" />Dota 2<a href="http://merihforum.com/forumdisplay.php?fid=35"></a></li>
   
   </ul></li>
 <li><div class="buttonbg gradient_button gradient58"><div class="arrow"><div class="icon_3"><a>Duyurular<a href="http://merihforum.com/forumdisplay.php?fid=82"></a></div></div></div>
   <ul class="gradient_menu gradient106 img_32">
   <li class="gradient_menuitem gradient48 first_item"><a class="with_img_24" title=""><img src="index_files/mbico_mbmcp_10.png" alt="" />Dota2 den<a href="http://merihforum.com/forumdisplay.php?fid=121"></a></li>
   <li class="gradient_menuitem gradient56 last_item"><a class="with_img_32" title=""><img src="index_files/mbico_mbmcp_11.png" alt="" />Forumdan<a href="http://merihforum.com/showthread.php?tid=729"></a></li>
   </ul></li>

 </ul>
</div>
<!-- javascript kodlar olmadanda bu çalışabilir. fakat bazı eski tarayıcılar ve dokunmatik ekranlar için script kodlarına ihtiyaç var -->
<script type="text/javascript" src="index_files/mbjsmbmcp.js"></script>

 
 <br/><br/><br/>
<br/>&nbsp;<br/>

<style>
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;}
.mySlides {display:none}

/* Slideshow üst taraf */
.slideshow-container {
 max-width: 800px;
 position: relative;
 margin: auto;
}

/* Caption yazısı */
.text {
 color: #f2f2f2;
 font-size: 15px;
 padding: 8px 12px;
 position: absolute;
 bottom: 8px;
 width: 100%;
 text-align: center;
}

/* numara yazıları (1/3 gibi kaç resim koyacaksanız düzenleyin) */
.numbertext {
 color: #f2f2f2;
 font-size: 12px;
 padding: 8px 12px;
 position: absolute;
 top: 0;
}

/* gösterge */
.dot {
 height: 13px;
 width: 13px;
 margin: 0 2px;
 background-color: #bbb;
 border-radius: 50%;
 display: inline-block;
 transition: background-color 0.6s ease;
}

.active {
 background-color: #717171;
}

/* animasyon geçişi */
.fade {
 -webkit-animation-name: fade;
 -webkit-animation-duration: 1.5s;
 animation-name: fade;
 animation-duration: 1.5s;
}

@-webkit-keyframes fade {
 from {opacity: .4}
 to {opacity: 1}
}

@keyframes fade {
 from {opacity: .4}
 to {opacity: 1}
}

/* küçük ekranlar için metin boyutunu azaltın*/
@media only screen and (max-width: 300px) {
 .text {font-size: 11px}
}
</style>
</head>
<body>

<h2>Forumdan Enstanteneler</h2>
<p>Yardıma ihtiyacınız olan bir konu varsa arama butonunu kullanabilir veya yeni konu açabilirsiniz.
yazılım alanında kendini geliştirenler veya bu konuda kendisini geliştirmek iseyenler önceliğimizidir


Bize katılmaz mısınız ?</p>

<div class="slideshow-container">

<div class="mySlides fade">
 <div class="numbertext">1 / 7</div>
 <img src="images/skill.jpg" style="width:100%">
 <div class="text">Bir zamanlar silkroad dan</div>
</div>

<div class="mySlides fade">
 <div class="numbertext">2 / 7</div>
 <img src="images/pudge_hook.jpg" style="width:100%">
 <div class="text">Pudge Hook Setimiz</div>
</div>

<div class="mySlides fade">
 <div class="numbertext">3 / 7</div>
 <img src="http://cdn.dota2.com/apps/dota2/images/blogfiles/gfwgwc_bl.jpg" style="width:100%">
 <div class="text">2016 Dota 2 Kazananı</div>
</div>

<div class="mySlides fade">
 <div class="numbertext">4 / 7</div>
 <img src="http://i.hizliresim.com/l3Gl8B.png" style="width:100%">
 <div class="text">Castle Clash oynuyoruz</div>
</div>

<div class="mySlides fade">
 <div class="numbertext">5 / 7</div>
 <img src="http://www.e-sporturkiye.com/Upload/Icerik/Orjinal/9a375e43-82b7-43f5-be68-fc6f986419cd.jpg" style="width:100%">
 <div class="text">Dota 2 Kazananı Wings</div>
</div>

<div class="mySlides fade">
 <div class="numbertext">6 / 7</div>
 <img src="http://www.loadthegame.com/wp-content/uploads/2014/12/World-of-Tanks-MMORPG.jpg" style="width:100%">
 <div class="text">World Of The Tank Bazan giriyoruz</div>
</div>

<div class="mySlides fade">
 <div class="numbertext">7 / 7</div>
 <img src="https://hydra-media.cursecdn.com/dota2.gamepedia.com/thumb/8/86/Cosmetic_icon_Winter_2017_Treasure_III.png/256px-Cosmetic_icon_Winter_2017_Treasure_III.png?version=c57d391dd5edd8f16c3d83043d0dceb1" style="width:100%">
 <div class="text">Dota 2 Hazineleri dağıtıyoruz</div>
</div>

</div>
<br>

<div style="text-align:center">
 <span class="dot"></span>
 <span class="dot"></span>
 <span class="dot"></span>
 <span class="dot"></span>
 <span class="dot"></span>
 <span class="dot"></span>
 <span class="dot"></span>
</div>

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
   var i;
   var slides = document.getElementsByClassName("mySlides");
   var dots = document.getElementsByClassName("dot");
   for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
   }
   slideIndex++;
   if (slideIndex> slides.length) {slideIndex = 1}    
   for (i = 0; i < dots.length; i++) {
       dots[i].className = dots[i].className.replace(" active", "");
   }
   slides[slideIndex-1].style.display = "block";  
   dots[slideIndex-1].className += " active";
   setTimeout(showSlides, 4000); // şuan 4 saniyede bir değişiyor. Değiştirebilirsiniz
}
</script>





<div class="one-cikan-konu-alan">
                   <div class="one-cikan-konu">
                       <div class="one-cikan-konu-ust">
                           <h4 class="baslik">Dota 2. "Savaş Kupası 2017 Kış Turnuvası" sona geliniyor.</h4>
                           <img class="resim" src="http://e-sporturkiye.com/Upload/Icerik/Orjinal/556763f9-b858-4762-9122-504cd16ca99b.jpg" alt="" />
                       </div>
                       <div class="one-cikan-konu-icerik">
                           <p class="aciklama"> Kiev Major Dergisi duyuruldu</p>
                       </div>
                       <div class="one-cikan-konu-alt">
                           <a href="http://merihforum.com/forum-121.html" class="devami">Konuyu Görüntüle</a>
                       </div>
                   </div>
                   <div class="one-cikan-konu">
                       <div class="one-cikan-konu-ust">
                           <h4 class="baslik">Ortadoğu Karışıyor</h4>
                           <img class="resim" src="http://haber.sol.org.tr/sites/default/files/styles/newsimagestyle_615x410/public/web-damascus-bombing-afp.jpg?itok=2lP_R8Ow" alt="" />
                       </div>
                       <div class="one-cikan-konu-icerik">
                           <p class="aciklama">Esad Rejimi Suriyede masumlara sarin gazı kullandı</p>
                       </div>
                       <div class="one-cikan-konu-alt">
                           <a href="http://merihforum.com/showthread.php?tid=728" class="devami">Konuyu Görüntüle</a>
                       </div>
                   </div>
                   <div class="one-cikan-konu">
                       <div class="one-cikan-konu-ust">
                           <h4 class="baslik">World Of The Tank Sarıyor</h4>
                           <img class="resim" src="http://www.loadthegame.com/wp-content/uploads/2014/12/World-of-Tanks-MMORPG.jpg" alt="" />
                       </div>
                       <div class="one-cikan-konu-icerik">
                           <p class="aciklama">Ubuntu Lamp Kurulumu</p>
                       </div>
                       <div class="one-cikan-konu-alt">
                           <a href="http://merihforum.com/thread-576.html" class="devami">Konuyu Görüntüle</a>
                       </div>
                   </div>
                   <div class="one-cikan-konu">
                       <div class="one-cikan-konu-ust">
                           <h4 class="baslik">Linux Lamp Kurulumu</h4>
                           <img class="resim" src="http://idroot.net/wp-content/uploads/2015/06/lamp-logo.png" alt="" />
                       </div>
                       <div class="one-cikan-konu-icerik">
                           <p class="aciklama">işinie yarayabilir</p>
                       </div>
                       <div class="one-cikan-konu-alt">
                           <a href="http://merihforum.com/thread-731.html?highlight=lamp" class="devami">Konuyu Görüntüle</a>
                       </div>
                   </div>
               </div>



bunları oraya kopyala-yapıştırdıktan sonra aşağıdaki linkden indirdiklerinizi ftp ana dizine gönderin

https://yadi.sk/d/m0ddr57o3H2LMf

bunlar css menu ve js kodları için gereken materyaller.

Kurulum bu kadar.


2.Kendinize Göre Düzenleme

  1. Tavsiyem px piksellere pek dokunmayın ben çok denedim böyle iyi inanın.
  2. kurulumdan sonra benim ayarlarım yüklendiği için portal şablonunda ctrl-f ile merihforum.com yazan yerleri kendinize göre düzenleyin. <a href olan olan konu başlıkları, <img src="..." şeklinde olanlarda nokta nokta yazdığım yere noktaları silip tırnaklar arasına resmin yolunu yazacaksınız.
  3. color: #f2f2f2 şeklinde yazan yerleri kendi renk seçiminize göre renk kodları yazabilirsiniz.
  4. Sıfırdan anlatım olduğu için söyleyeyim <h2> ve </p> tagları arası arasında kalan yerleri düzenleyin.
  5. Ben 7 resim kullandım slayt için. siz isterseniz arttırabilir-azaltabilirsiniz bunun için <div style="text-align:center"> yazan yerde kaç tane resim olmasını istiyorsanız o kadar <span class="dot"></span> kodu alt alta olmak zorunda. Ona göre javascrit kodu çevirme-döndürme işlemi yapmakta. 
  6. Slaytları ben 4 saniye değişmeli ayarlamıştım bunun ayarı için setTimeout(showSlides, 4000); yazan yerde 4000 yerine 2000 yazarsanız misal 2 saniyede bir resimler slayt şeklinde akar.
  7. Slayt resimlerinin alanını daha büyük veya daha küçük olmasını isterseniz  .slideshow-container { max-width: 800px; yazan yerdeki 800 sayısını değiştirin.


Demo

Kod:
Demo
http://merihforum.com/portal.php





Takıldığınız bir yer olursa sorun. Her zaman buraya bakamayabiliyorum. Olmadı bizim forumdan da sorabilirsiniz.
Ücretli-ücretsiz bu Portalı devam ettirme isteğindeyim.

Mybb Konusunda sıkıntı yaşayanlarada ayrıca yardım edebilirim fakat bazan yoğun olabiliyorum sonuçta insan bu doğduğun değil doyduğun yer memleketin demişler. ücretle tema yapabilirim.

İsteğe göre bunun benzerlerinide yapabilirim  Gülümseme
Portalda ayrı forumda ayrı öne çıkanlar konusunuda talebe göre anlatabilirim bizim sitedeki gibi olandan.



resim


resim


resim



Edit : yandexden ndirdiğiniz zipli dosyanın içindeki index.htm yi ana dizine göndermenize gerek yok onu yerel bilgisayarınızda localhostta denemeniz için koydum.


Cvp: Merih Portal Tasarım v1.0 - VenomBoss - 16-04-2017

Güzelmiş Hocam , Ellerinize Sağlık.