Html kodları ile Basit Site Şablonu

Html ve Css kodları ile basit bir kişisel blog şablonu örneği. Div kullanılarak yapılmış bir şablondur, tüm görseller ve orta alanda oluşan slayt görüntüsü photoshop programı ile yapılmıştır. Site kodların ve görselleri şablonu indirerek inceleyebilirsiniz. Ya da aşağıdaki kodları indirmeden inceleyebilirsiniz. Her şey size kolaylık sağlamak ve yardımcı olabilmek için, kolay gelsin. 








Html Kodları;
body {
 background-color: #343434;
}
</style>
<link href="stil dosyam.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="sayfa">
  <div id="logo"><img src="logo.jpg" width="1000" height="80" /></div>
  <div id="renkicin">
    <div id="menu">
      <ul class='dd_menu'>
        <li><a href='ANASAYFA.html'>Anasayfa</a> </li>
        <li><a href='HOBİLERİM.html'>Hobilerim</a> </li>
        <li><a href='SOSYALMEDYA.html'>Sosyal Medya</a>
          <ul>
            <li><a href=''>Twitter</a></li>
            <li><a href=''>Facebook</a></li>
          </ul>
        </li>
        <li><a href='İLETİŞİM.html'>İletişim</a> </li>
      </ul>
      </div>
  </div>
  <div class="icerik">
    <div id="sagilk">
      <div id="ilk"><img src="Untitled-1.png" width="170" height="100" border="0" usemap="#Map" />
        <map name="Map" id="Map">
          <area shape="poly" coords="146,96,149,95" href="#" />
          <area shape="rect" coords="26,4,153,96" href="http://blogderslerim.blogspot.com/" />
        </map>
      </div>
    <div id="orta"><a href="http://blogderslerim.blogspot.com/"><img src="SON.png" width="170" height="100" border="0" usemap="#Map2" /></a>
      <map name="Map2" id="Map2">
        <area shape="rect" coords="66,16,141,71" href="http://sporyazisi.blogspot.com/" target="_blank" />
        <area shape="rect" coords="1,9,151,98" href="#" />
      </map>
    </div>
    <div id="alt"><img src="ORTA.png" width="170" height="100" border="0" usemap="#Map3" />
      <map name="Map3" id="Map3">
        <area shape="rect" coords="55,28,150,78" href="ANASAYFA.html" target="_blank" />
      </map>
    </div>
</div>
    <div class="solsidebar"><img src="SOLSİDEBAR.jpg" width="150" height="450" /></div>
    <div id="icerikrenk">
      <div id="resimalan">
      <p><img src="manzara.gif" width="460" height="360" /></p>
      <p>&nbsp;</p>
    </div>
</div>
  </div>
  <div id="footer"><a href="#">ANASAYFA | BLOG | İLETİŞİM</a>
    <div id="footrenk"></div>
  </div>
</div>
</body>
</html>
CSS Kodları;
#sayfa {
 width: 1000px;
 margin-right: auto;
 margin-left: auto;
}
.icerik {
 float: left;
 height: auto;
 width: 1000px;
}

#logo {
 height: 80px;
 width: 1000px;
 margin-right: auto;
 margin-left: auto;
}
#renkicin {
 height: 60px;
 width: 1000px;
 background-color: #E99137;
}
#menu {
 height: 50px;
 width: 1000px;
 margin-top: 10px;
 background-color: #DDD;
}
#icerikrenk {
 height: 430px;
 width: 500px;
 background-color: #111;
 float: left;
 margin-right: 20px;
 margin-left: 65px;
 margin-top: 10px;
}
#resimalan {
 height: 360px;
 width: 460px;
 margin: 20px;
 float: left;
 color: #EEE;
}
#sagilk {
 float: right;
 height: 400px;
 width: 200px;
 margin-right: 25px;
 margin-top: 10px;
}
#ilk {
 height: 100px;
 width: 170px;
 margin-right: auto;
 margin-left: auto;
 margin-top: 25px;
 background-color: #1e1e1d;
}
#orta {
 height: 100px;
 width: 170px;
 margin-top: 25px;
 margin-right: auto;
 margin-left: auto;
 background-color: #1e1e1d;
}
#alt {
 height: 100px;
 width: 170px;
 margin-top: 25px;
 margin-right: auto;
 margin-left: auto;
 background-color: #1e1e1d;
}
#footer {
 height: 60px;
 width: 550px;
 margin-top: 10px;
 background-color: #DDD;
 padding-left: 450px;
 padding-top: 40px;
 float: left;
}
#footrenk {
 height: 20px;
 width: 1000px;
 margin-left: -450px;
 float: left;
 margin-top: 21px;
 background-color: #E99137;
}





.dd_menu {
 padding:0px;
 margin:0;
 list-style-type:none;
 height:30px;
 background-color: #DDD;
}
.dd_menu li {
 float:left;
 height:30px;
 border-right: solid 1px white;
}
.dd_menu li a {
 display:block;
 color:#fff;
 text-decoration:none;
 font:12px arial, verdana, sans-serif;
 font-weight: bold;
 padding-top: 9px;
 padding-right: 20px;
 padding-bottom: 9px;
 padding-left: 20px;
}
.dd_menu li:hover a {text-decoration:underline;}

.dd_menu ul {position:absolute; left:-9999px; top:-9999px; list-style-type:none;}
.dd_menu li:hover {
 position:relative;
 background-color: #E99137;
}
.dd_menu li:hover ul {left:0px; top:30px; background:lavender; padding:3px; border:1px solid grey; width:160px;}
.dd_menu li:hover ul li a {height:18px; padding:0px; display:block; font-size:11px; width:158px; line-height:18px; text-indent:5px; color:#444; background-color:lavender; text-decoration:none; border:1px solid transparent;}
.solsidebar {
 float: left;
 height: 450px;
 width: 150px;
 margin-left: 10px;
 margin-top: 10px;
}

23 yorum:

  1. Kardeş bana acil dönüş yaparmısın ben bunu indirdim ama arkaplana resim ekleyecem bi türlü olmadı nasıl yaparız yahu

    YanıtlaSil
    Yanıtlar
    1. Onun için resmi indirmen ve isimlendirmen gerekir . Uzatnsınına da dikkat et "img" içerisinde resmi koyarken .png yada .jpg olarak farklı farklı ayrılabiliyor. Sorunun hala daha devam ederse bana meil atabilirsin.

      Sil
  2. Hocam ya bu arkaplandaki resmin boyutunu nasil degistirebikirim

    YanıtlaSil
  3. Css Dosyasını nereye atıcaz

    YanıtlaSil
  4. Birşey sormak istiyorum html kodları tam degıl en bası yok yazabılırmısınız ???

    YanıtlaSil
    Yanıtlar
    1. kanka en baştaki kodlar fazlalık sen takma kafana deli olursun . :) :)

      Sil
  5. sayfanın buton ları çalışmıyor senın kendı web sitesinin iletişim bölümünü merak ettim

    YanıtlaSil
  6. KARDEŞİMMMMMM ÇABUK BURAYA BAK !!!! OLMADI NAPICAM SİNİRDEN ELİM AYAGIM TİTRİYO AMINA KOYUCAM YAPICAGINIZ İŞİ


    ,

    YanıtlaSil
  7. kardeşim saol hakını helal et

    YanıtlaSil
  8. ghggbhedbfhjgbejdfg lan yorumlarda koptum

    YanıtlaSil
  9. Dostum eline emeğine sağlık çok beğendim

    YanıtlaSil
  10. mal mısın abim

    YanıtlaSil