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.

HTML KODLARI


Kod:
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 KODLARI



Kod:
#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; }






İçeriğe ulaşabilmek veya forumu aktif kullanabilmek için öncelikle GİRİŞ yapmalısınız, Üye değilseniz KAYIT olmalısınız
veya aradığınız konu hakkında ElektroBLOG sayfalarımızdan arama yapabilirsiniz