Tumhepsiburada Deneme Sitesi - Css Desing Yapımı 2

Css Desing Yapımı 2

Tumhepsiburada bu anlatımı Buradan aldı.

5 Dakikada Css Design Li Siteniz Olsun..

Sitemize Css Desing Uygulandığını Düşünerek Başlıyoruz İşimize Eğer Uygulanmadıysa
http://www.bedava-sitem.com/forum/viewtopic.php?t=77003 Adresinden Sitenize Css Desing İçin Hazırlayın Saten Bizim İçin Önemli Olan Yerleri Ben Burada Tekrarlıyacağım ( Çoğunu Tekrarlıyacağım )

1. Adım

Tasarım Ayarlarına Tıklıyoruz Ve Navigasyonun baslığına

Kod:

Yapıştırıyoruz Ve Navigasyon Başlğında ==> <style type="text/css"> Yazısı Çıkıyor ( Eğer Bu Yazının Aynısı Çıkmaz İse Tekrar Deneyin Wink

)

2. Adım

İçerik bölümünün altındaki bilgi (mesela Copyright) Bölümüne ( Alttaki Site Ortalama Kodunu Ekliyoruz )

Kod:

3. Adım ( En Son Adım )

Yine Tasarım Ayarlarını Seçiyoruz Gelişmiş Ayarlar Diyoruz Tasarımın üzerindeki yazı Bölümüne Şu Kodların Olması Gerekir ;

Kod:

3, Adım Devam

Şimdi Tasarım Üzerine Yazı Bölümüne Eklenecekler
Başlık Resmi + Arka Fon + Menü ( İcon )
Bunları Nereden Bulacağız Diyorsanız Başlık Resmini En Kısa Zamanda yapmak için şu adresten yapabilirsiniz => http://h-master.net/web2.0/index.php

Arka Fon Size Kalmış İstediğiniz Resmi Ekliyebilirsiniz Wink

( Sitelerde Dolaşırken Vs Gördüğünüz Fonları Kullana Bilir Ve Özel Yapabilirsiniz )

Menü (İcon)= Önceden Bedava Sitemde Menüler Vardı Forum Çöktüğünden Dolayı Gitti Sizin Bunu Googlede Nevigasyon Menü Olarak Aratmanız Gerekir
Adresinden Veya Javascipt Sitelerinden Bulabilirsiniz Ben Yukarıdaki Linkten Kullandım Tavsiye Ederim Hepsi Birbirinden Harika Wink

3 Kod İle Sitemiz Css Design Li Hale Geltirebiliyoruz Şimdi Kodu Size Hazır Hale Getiriyorum Yerlerini Değiştirip Kullanabilirsiniz Wink

( Bunları Yapan Arkadaşlar Yerleri Kendinize Göre Ayarladıktan Sonra Tasarım Üzerine Yazıyı Silin Direk Bunu Yapıştırın )

<style type="text/css">
 </style>
<style type="text/css">

</style>
<div align="center"><img alt="" src="BAŞLIK RESİM URLSİ" /></div>
<style type="text/css">

#MainMenu
{
height:32px;
background: url('http://www.fileden.com/files/2007/6/19/1190933/bmid_070.gif');
margin:0;
border:0px none;
}
#tab
{
margin:0;
top:0;
}
#tab ul
{
margin:0;
padding:0;
list-style:none;
float:left;
}
#tab li
{
display:inline;
float:left;
margin:0;
padding:0;
}
#tab a
{
background:#000000 url('http://www.fileden.com/files/2007/6/19/1190933/bright_070.gif') no-repeat right top;
margin:0;
padding:0;
text-decoration:none;
border:0px none;
display:block;
float:left
}
#tab a span
{
display:block;
background:url('http://www.fileden.com/files/2007/6/19/1190933/bleft_070.gif') no-repeat left top;
font-family:Arial, Helvetica, sans-serif;
font-size:11;
color:#000000;
font-weight:bold;
line-height:32px; padding-left:15px; padding-right:15px; padding-top:0; padding-bottom:0
}
#tab a:hover, #tab li.item_active a
{
background-position:right bottom;
border-color:#FF9300;
}
#tab a:hover span, #tab li.item_active a span
{
background-position:left bottom;
color:#000000;
font-weight:bold;
font-style:normal;
text-decoration:none;
}
.dropmenudiv
{
position:absolute;
top:0;
float:left;
display:block;
visibility:hidden;
border:0px solid ;
background: url('http://www.fileden.com/files/2007/6/19/1190933/bmid_070.gif');
color:#000000;
z-index:100;
text-decoration:none;
padding:0
}
.dropmenudiv ul
{
margin:0;
padding:0;
list-style:none;
}
.dropmenudiv li
{
display:inline;
margin:0;
padding:0;
}
.dropmenudiv a:link, .dropmenudiv a:visited
{
width:180px;
margin:0;
padding:0;
display:block;
border:0px solid ;
color:#000000;
background:url('http://www.fileden.com/files/2007/6/19/1190933/bleft_070.gif') no-repeat left top;
font-weight:bold;
font-style:normal;
text-decoration:none
}
.dropmenudiv a span
{
float:left;
display:block;
line-height:32px;
background:url('http://www.fileden.com/files/2007/6/19/1190933/bright_070.gif') no-repeat right top;
font-family:Arial, Helvetica, sans-serif;
font-size:11;
color:#000000; padding-left:15px; padding-right:15px; padding-top:0; padding-bottom:0
}
.dropmenudiv a span
{
float:none;
}
.dropmenudiv a:hover
{
border:0px solid #FF9300;
background-position: left bottom;
font-weight:bold;
font-style:normal;
text-decoration:none;
color:#000000
}
.dropmenudiv a:hover span
{
background-position:right bottom;
color:#000000;
font-weight:bold;
}

</style>

<script type="text/javascript" src="http://h1.ripway.com/kristaldunya/chromero.js"></script>
<style>
#MainMenu
{
height:32px;
background: url("http://www.fileden.com/files/2007/6/19/1190933/bmid_070.gif");
margin:0;
border:0;
}
#tab
{
margin:0;
top:0;
}
#tab ul
{
margin:0;
padding:0;
list-style:none;
float:left;
}
#tab li
{
display:inline;
float:left;
margin:0;
padding:0;
}
#tab a
{
background:#000000 url("http://www.fileden.com/files/2007/6/19/1190933/bright_070.gif") no-repeat right top;
margin:0;
padding:0;
text-decoration:none;
border:0;
display:block;
float:left;
}
#tab a span
{
display:block;
background:url("http://www.fileden.com/files/2007/6/19/1190933/bleft_070.gif") no-repeat left top;
padding:0 15px 0 15px;
font-family:Arial, Helvetica, sans-serif;
font-size:11;
color:#000000;
font-weight:bold;
line-height:32px;
}
#tab a:hover,#tab li.item_active a
{
background-position:right bottom;
border-color:#FF9300;
}
#tab a:hover span,#tab li.item_active a span
{
background-position:left bottom;
color:#000000;
font-weight:bold;
font-style:normal;
text-decoration:none;
}
.dropmenudiv
{
position:absolute;
top:0;
float:left;
display:block;
visibility:hidden;
border:0 solid ;
background: url("http://www.fileden.com/files/2007/6/19/1190933/bmid_070.gif");
color:#000000;
z-index:100;
text-decoration:none;
padding:0;
}
.dropmenudiv ul
{
margin:0;
padding:0;
list-style:none;
}
.dropmenudiv li
{
display:inline;
margin:0;
padding:0;
}
.dropmenudiv a:link, .dropmenudiv a:visited
{
width:180px;
margin:0;
padding:0;
display:block;
border:0 solid ;
color:#000000;
background:url("http://www.fileden.com/files/2007/6/19/1190933/bleft_070.gif") no-repeat left top;
font-weight:bold;
font-style:normal;
text-decoration:none;
}
.dropmenudiv a span
{
float:left;
display:block;
line-height:32px;
background:url("http://www.fileden.com/files/2007/6/19/1190933/bright_070.gif") no-repeat right top;
padding:0 15px 0 15px;
font-family:Arial, Helvetica, sans-serif;
font-size:11;
color:#000000;
}
.dropmenudiv a span
{
float:none;
}
.dropmenudiv a:hover
{
border:0 solid #FF9300;
background-position:left bottom;
font-weight:bold;
font-style:normal;
text-decoration:none;
color:#000000;
}
.dropmenudiv a:hover span
{
background-position:right bottom;
color:#000000;
font-weight:bold;
}

</style>
<div id="MainMenu">
<div id="tab">
<ul>
<li class="item_active"><a href="Anasayfa.htm"><span>Anasayfa</span></a></li>
<li><a href="100.htm"><span>Chat</span></a></li>
<li><a href="#"><span>Html Kodlar</span></a></li>
<li><a href="#"><span>Javascipt</span></a></li>
<li><a href="#"><span>Oyunlar</span></a></li>
<li><a href="#"><span>Programlar</span></a></li>
<li><a href="#"><span>Sitemiz Hakkında</span></a></li>
<li><a href="#"><span>S.S.S</span></a></li>
<li><a href="#"><span>Diğer İçerik</span></a></li>
<li><a href="#"><span>İletisim</span></a></li>
<li><a href="#"><span>Ziyaretci Defteri</span></a></li>
</ul>
</div>
</div>

BUNLARI OKUYUNUZ ÖNEMLİ NOTLAR ;
Yeşil Yazılı Olan Yerde Yazmakta Örneğin ; ARKA PLAN URLESİNİ BURAYA YAPIŞTIRINIZ Dediğim Yerleri Ve Diğer Yerleri Kendinize Göre Ayarlayın

Turuncu Yazılı Yere Kendi Menünüzü Yapıştırınız Ben Kendi Menümü Yapıştırdım Vede # Olan Yerlere Örneğin www.siteadı.tr.gg/100.htm <== İse sadece 100.htm <== Yazıyorsunuz Oraya
Bunlar Tasarım Üzerine Yazı Bölümüne Yapıştırılması Vede Her Sayfaya Menü Gizleme Kodu Eklenmesi Gerekir Wink

Evet Bukadar Arkadaşlar En Önemli Adımımız 2 Ve 3 Lardı Şimdi Gelelim Benim Yaptığım 15 Dkkalık Css Design 'e

Örnek Görünüm;

Kod: