DH Anasayfa
İndirim Kodu
Ara
Popüler
Foruma Git
Hakkımızda
Destek
Mobil Sürüm
Standart Site Görünümü
Bu Konuda
  • Tüm Forumlar
  • Web Tasarım - Programlama
  • Hazır forum ve portallar
  • Bu Konuda
Arama butonu
Bağlan:
Facebook
Google+
Twitter
Aşağı Git Tüm Forumlar Web Tasarım - Programlama Hazır forum ve portallar Merih Portal Tasarım v1.0
Bu konudaki kullanıcılar: 1 misafir
0
Cevap 633
Tıklama 0
Öne Çıkarma
Merih Portal Tasarım v1.0
Cevap Yaz
Konuya Özel
S
sempatik141
7 yıl
Çavuş
Konu Sahibi

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



    < Resime gitmek için tıklayın >


    < Resime gitmek için tıklayın >


    < Resime gitmek için tıklayın >



    [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 >

    Cevap Yaz
    Tüm Forumlar Web Tasarım - Programlama Hazır forum ve portallar Merih Portal Tasarım v1.0
    DH Mobil uygulaması ile devam edin. Mobil tarayıcınız ile mümkün olanların yanı sıra, birçok yeni ve faydalı özelliğe erişin.
    App Store'danİndirin Google Play'denİndirin
    Gizle ve güncelleme çıkana kadar tekrar gösterme.
    DonanımHaber Forum - Mini Sürüm

    Hakkımızda | Yukarı

    Tam sürüm için tıklayınız
    Version: 1.2.855
    Donanım Sponsoru: incehesap.com