vBulletin Üst Menü By SüKûT Farkıyla [Modelersiz]

İlk olarak görümden başlayalım.

Giriş yapmadan önce:
vBulletin Üst Menü By SüKûT Farkıyla [Modelersiz] V82af6

Giriş yaptıktan sonra:
vBulletin Üst Menü By SüKûT Farkıyla [Modelersiz] 16auptu

Şimdi gelelim kodlarımıza.

İlk olarak MemHT'e arkadaşımızın vermiş olduğu koddan biraz yararlanacağız.

MemHT demiş ki:

1. Yapılacak İşlem

Afiş Asmak
Anasayfa
Başlık ve Tarayıcı

Logo yerleştirme : Orta
Forum başlığını göster : Hayır
Link çubuğunda sadece resimleri göster : Evet
Menü pozisyonu : Orta

Bunları Yapın Güzel Gözükmesi İçin.. :tskr:

2. Yapılacak İşlem

Afiş Asmak
Renkler ve Resimler
Renkler

CSS Stylesheet - Ekleyin..

Kod:: .m {
width: 950px;
height: 50px;
border: 1px solid #0B198C;
color: #000000;
text-align: left;
font-size: 11px;
font-weight : bold;
font-family: Verdana,Arial,Helvetica,sans-serif;
background-color: #E0E0F6;
background-image: url("http://i78.servimg.com/u/f78/12/38/66/89/navbit10.gif");
background-repeat: no-repeat;
background- : center left ;
}
.e {
width: 300px;
height: 50px;
border-left: solid 1px #666686;
padding-left: 10px;
color: #000000;
text-align: left;
font-size: 11px;
font-weight : bold;
font-family: Verdana,Arial,Helvetica,sans-serif;
background-color: #F5F5FF;
}
.e a:link {
color: #f00;
text-decoration: none;
}
.e a:hover {
color: #f00;
text-decoration: underline;
}

3. Yapılacak İşlem

Genel Yönetim
Forum
Configürasyon

Site Açıklaması : Alttaki Kodu Yapıştırın..
Bu kodda arkadaşımızındakinden biraz değişiklik yaptık eklenecek yer aynı olduğu için burada yazdım

Kod:: <table class=m><td>   </td><td class=e> <br> <br> <br><br> </td></table>

1- Bütün bilgiler otomatik düzenlemiştir, ellemenize gerek yoktur.
2- CSS'deki bazı şeyleri düzenlemeniz gerekebilir,

Kod:: .m {
width: 950px;

"950" Sitenizin genişliğine göre ayarlayın.. :tskr:

Kod:: border: 1px solid #0B198C;
background-color: #E0E0F6;

Bu gibi renkleride kendi temanıza uygun ayarlayın.. Wink

evet MemHT'e arkadaşımıza teşekkür ediyoruz kodumuzun bu kısmı için şimdi geliyoruz asıl bölüme.

İlk olarak Yönetim paneli>Mödüller>Forumun widget yönetimi'ne giriyoruz.

Ardından Kişiselleştirilmiş widget kurmak tıklıyoruz ve yeni bir widget oluşturuyoruz.

Daha sonra ayarlara ve kodumuza gelince

İlk olarak misafirlere görünecek olan yazımızı ayarlayacağız birinci resimde görülen Hoş geldin misafir v.s siz değiştirebilirsiniz onun için

Kod:: <style>
div#misafir1{
position:absolute;
top:302px;
left:50px;
}
div.misafir2{
background-image: url();
background-repeat: no-repeat;
width:400px;
height:5px;
padding-top:18px;
padding-left:15px;
}
</style><div class="misafir2" id=misafir1>
<b><font face="" font color="black"><b>Hoşgeldin</b></font> <font face="" font color="red"><b>Misafir</b></font><font face="" font color="black"> <b>forumumuzda güzel vakit geçirmen dileğiyle</b></font></b>
</div>

top:302px;
left:50px; şu iki değerden yerini ayarlıyoruz Widget başlığımız Misafir Bu tip bir masa kullanın: Hayır yapıyoruz ve gönderiyoruz.

Ardından giriş kısmı yine yeni bi widget açıyoruz ve Widget başlığımız giriş yap Bu tip bir masa kullanın: Hayır yapıyoruz ve aşağıdaki kodumuzu ekleyip gönderiyoruz.

Kod:: <style>
div#giris1{
position:absolute;
top:288px;
left:690px;
}
div.giris2{
background-image: url();
background-repeat: no-repeat;
width:400px;
height:50px;
padding-top:18px;
padding-left:15px;
}
</style><div class="giris2" id=giris1><span class="gensmall"><div class="giris4" id="giris3" align="left">
<form action="/login.forum" method="post" name="formUS95login">
<table cellpadding="0" cellspacing="3" border="0">
<tr>
<td class="smallfont">Kullanıcı adı:</td>
<td><input type="text" name="username" value="" size="10" maxlength="40" /></td>
<td class="smallfont" nowrap="nowrap"><label for="cb_cookieuser_navbar"><span class="gen">
<input type="checkbox" name="autologin"checked="checked" />
</span><acronym ="border-bottom: 1px dotted #000000; cursor: help;" title="Forumdan çıkış tuşunu kullanarak çıkana kadar, Forum tarafından otamatikmen tanınmanızı sağlar.">Beni hatırla</acronym></label></td>
</tr>
<tr>
<td class="smallfont"><label for="navbar_password">Şifre:</label></td>
<td><input type="password" name="password" size="10" maxlength="32" /></td>
<td><input name="login" type="submit" class="button" id="login" accesskey="s" tabindex="104" title="Lütfen öngörülen bölümlere Kullanıcı isminizi ve Şifrenizi giriniz. Yada 'Kayıt Ol'-tuşuna tıklayarak Üye olabilirsiniz." value="Giriş" /></td>
</tr>
</table>
</form></div>
</span></div>

top:288px;
left:690px; yine şu iki değerden yerini ayarlıyoruz widgetimizin.Evet izinlerini de sadece misafir olarak ayalıyoruz bu iki widgetimizin sıra geldi üyelerimize görünecek kısma yani giriş yaptıktan sonraki hale

Evet ilk olark yine widget oluştur diyoruz ve Widget ismi: Üye Bu tip bir masa kullanın: Hayır yapıyoruz ve aşağıdaki kodumuzu ekleyip gönderiyoruz.

Kod:: <style>
div#misafir1{
position:absolute;
top:302px;
left:50px;
}
div.misafir2{
background-image: url();
background-repeat: no-repeat;
width:400px;
height:5px;
padding-top:18px;
padding-left:15px;
}
</style><div class="misafir2" id=misafir1>
<b><font face="" font color="black"><b>By SüKûT</b></font></b>
</div>

top:302px;
left:50px; yine şu iki değerden yerini ayarlıyoruz

ve diğer kısma geçiyoruz.Arama kısmını eklemeye

Ve yine ilk olarak widget oluştur diyoruz, Widget ismi: Arama Bu tip bir masa kullanın: Hayır yapıyoruz ve aşağıdaki kodumuzu ekleyip gönderiyoruz.

Kod:: <style>
div#giris1{
position:absolute;
top:300px;
left:720px;
}
div.giris2{
background-image: url();
background-repeat: no-repeat;
width:260px;
height:52px;
padding-top:18px;
padding-left:15px;
}
</style><div class="giris2" id=giris1><span class="gensmall"><div class="giris4" id="giris3" align="left"><div id="a"><div id="search-box"><form method="get" action="/search.forum" id="search"><input name="searchUS95keywords" id="keywords" maxlength="128" class="inputbox search" value="Aranacak kelime..." onclick="if (this.value == 'Aranacak kelime...') this.value = '';" onblur="if (this.value == '') this.value = 'Aranacak kelime...';" type="text"><input class="button" value="Arama" type="submit"></p></form></div></div>
</span></div>

top:300px;
left:720px; yine şu iki değerden yerini ayarlıyoruz

Yada ben arama bölümü olmasını istemiyorum alttaki resimdeki gibi olmasını istiyorum dersen

vBulletin Üst Menü By SüKûT Farkıyla [Modelersiz] Fohw6h

vBulletin Üst Menü By SüKûT Farkıyla [Modelersiz] Fohw6h

ve kod bunu da diğeriyle aynı başlıklarda yapa bilirsiniz sadece üstteki kod yerine bunu eklersiniz

Kod:: <style>
div#giris1{
position:absolute;
top:284px;
left:670px;
}
div.giris2{
background-image: url();
background-repeat: no-repeat;
width:260px;
height:52px;
padding-top:18px;
padding-left:15px;
}
</style><div class="giris2" id=giris1><span class="gensmall"><a class="gensmall" href="/search.forum?search_id=newposts"><font face="" font color="black">Son ziyaretinden bu yana gönderilenler</font><img src="http://i78.servimg.com/u/f78/12/38/66/89/ok10.png" alt="ok" width="16" height="16" /></a><br />
<span class="gensmall"><a class="gensmall" href="/search.forum?search_id=egosearch"><font face="" font color="black">Kendi mesajların</font><img src="http://i78.servimg.com/u/f78/12/38/66/89/ok10.png" alt="ok" width="16" height="16" /></a><br />
<span class="gensmall"><a class="gensmall" href="/search.forum?search_id=unanswered"><font face="" font color="black">Cevaplanmamış mesajlar</font><img src="http://i78.servimg.com/u/f78/12/38/66/89/ok10.png" alt="ok" width="16" height="16" /></a></span></div>

top:284px;
left:670px; yine şu iki değerden yerini ayarlıyoruz.Evet izinlerini de misafirler dışındaki tüm kullanıcılar olarak ayalıyoruz.İşlem tamamdır.

Evet vBulletin menümüz hazırdır hayırlı olsun.

By SüKûT anlatım ve tasarım bana aittir...

güzel paylaşımın için teşekkurler