Merih Forum Başlangıç Duyurular Merih Portal Tasarım v1.0

  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Merih Portal Tasarım v1.0

 
#1

MyBB için Portal Eklentisi
eklenti.png Eklenti ismi: Merih Portal v1.0 
yapimci.png Eklenti Yapımcısı: Merihforum
cevirmen.png Türkçe Çeviri: Merihforum
guvenlik.png Eklenti Güvenlimi ?: Güvenli onay.png
versiyon.png Eklenti Versiyonu: 1.0
arac.png Test Durumu: Denemiştir-sorunsuz onay.png
mybb.png Uyumlu Olduğu Sürüm-(ler): MyBB 1.6.x - 1.8.X (1.6 Test edilmedi)
aciklama.png Eklenti Açıklaması:  ücretsiz
kurulum.png 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); // Change image every 2 seconds
}
</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
  • Tavsiyem px piksellere pek dokunmayın ben çok denedim böyle iyi inanın.
  • 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.
  • color: #f2f2f2 şeklinde yazan yerleri kendi renk seçiminize göre renk kodları yazabilirsiniz.
  • Sıfırdan anlatım olduğu için söyleyeyim <h2> ve </p> tagları arası arasında kalan yerleri düzenleyin.
  • 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. 
  • 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.


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  Smile
Portalda ayrı forumda ayrı öne çıkanlar konusunuda talebe göre anlatabilirim bizim sitedeki gibi olandan.



ojqzXX.png


ldPzqQ.png


V08y9B.png



Ara
Cevapla


[-]
Hızlı Cevap

İnsan Doğrulama:
Aşağıda görünen onay kutusunu işaretleyiniz. Bu işlem otomatik spam kayıtları önlemek için kullanılır.

Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  header buton menu tasarım dalaylama 1 2,876 16-06-2017, Saat: 21:16
Son Yorum: sempatik141
  Merih Portal v2.0 dalaylama 1 2,600 09-05-2017, Saat: 10:18
Son Yorum: tuğrul
  Her Turlu buton menu tasarım dalaylama 0 1,872 23-04-2017, Saat: 00:02
Son Yorum: dalaylama

Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  


Konuyu Okuyanlar:
1 Ziyaretçi

   
Türkçe Çeviri: MCTR, Forum Yazılımı: MyBB, © 2002-2020 MyBB Group.  



Merih Forum® bilgi paylaşım platformu. 2015-2020 Tüm hakları saklıdır.