Merih Portal Tasarım v1.0

MyBB için Portal Eklentisi

Eklenti ismi: Merih Portal v1.0

Eklenti Yapımcısı: Merihforum

Türkçe Çeviri: Merihforum

Eklenti Güvenlimi ?: Güvenli

Eklenti Versiyonu: 1.0

Test Durumu: Denemiştir-sorunsuz

Uyumlu Olduğu Sürüm-(ler): MyBB 1.6.x - 1.8.X (1.6 Test edilmedi)

Eklenti Açıklaması: açılır menü, slayt, öne çıkan konular. ücretsiz

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.
[list=1]

Kurulum

Kendinize göre düzenleme
[/list]

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

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 :

<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 data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=125635914&url=http://merihforum.com/index.php" data-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 data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=125635914&url=http://merihforum.com/forumdisplay.php?fid=1" data-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 data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=125635914&url=http://merihforum.com/forumdisplay.php?fid=29" data-href="http://merihforum.com/forumdisplay.php?fid=29"></a></li>
    <li class="gradient_menuitem gradient56"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=125635914&url=http://merihforum.com/forumdisplay.php?fid=71" data-href="http://merihforum.com/forumdisplay.php?fid=71"></a></li>
    <li class="gradient_menuitem gradient56"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=125635914&url=http://merihforum.com/forumdisplay.php?fid=18" data-href="http://merihforum.com/forumdisplay.php?fid=18"></a></li>
    <li class="gradient_menuitem gradient48"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=125635914&url=http://merihforum.com/forumdisplay.php?fid=74" data-href="http://merihforum.com/forumdisplay.php?fid=74"></a></li>
    <li class="gradient_menuitem gradient48"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=125635914&url=http://merihforum.com/forumdisplay.php?fid=3" data-href="http://merihforum.com/forumdisplay.php?fid=3"></a></li>
    <li class="gradient_menuitem gradient48 last_item"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=125635914&url=http://merihforum.com/forumdisplay.php?fid=26" data-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 data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=125635914&url=http://merihforum.com/forumdisplay.php?fid=38" data-href="http://merihforum.com/forumdisplay.php?fid=38"></a></li>
    <li class="gradient_menuitem gradient56"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=125635914&url=http://merihforum.com/forumdisplay.php?fid=35" data-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 data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=125635914&url=http://merihforum.com/forumdisplay.php?fid=82" data-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 data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=125635914&url=http://merihforum.com/forumdisplay.php?fid=121" data-href="http://merihforum.com/forumdisplay.php?fid=121"></a></li>
    <li class="gradient_menuitem gradient56 last_item"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=125635914&url=http://merihforum.com/showthread.php?tid=729" data-href="http://merihforum.com/showthread.php?tid=729"></a></li>
    </ul></li>
 
  </ul>
</div>

<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 data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=125635914&url=http://merihforum.com/forum-121.html" class="devami" data-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 data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=125635914&url=http://merihforum.com/showthread.php?tid=728" class="devami" data-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 data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=125635914&url=http://merihforum.com/thread-576.html" class="devami" data-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 data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=125635914&url=http://merihforum.com/thread-731.html?highlight=lamp" class="devami" data-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

[list=1]

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.

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.
[/list]

[size=xx-large]Demo

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

[size=x-large]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.

< Bu mesaj bu kişi tarafından değiştirildi sempatik141 -- 18 Nisan 2017; 14:26:5 >

Benzer içerikler