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> </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;
}
guzel paylasım
YanıtlaSilbiraz daha açıklasa daha iyi olurmuş
SilKardeş bana acil dönüş yaparmısın ben bunu indirdim ama arkaplana resim ekleyecem bi türlü olmadı nasıl yaparız yahu
YanıtlaSilOnun 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.
Silselam
YanıtlaSilHocam ya bu arkaplandaki resmin boyutunu nasil degistirebikirim
YanıtlaSilhiç güzel olmamış
YanıtlaSilbence de
SilCss Dosyasını nereye atıcaz
YanıtlaSilcss dosyası oluşturup oraya atıcaksın
SilBirşey sormak istiyorum html kodları tam degıl en bası yok yazabılırmısınız ???
YanıtlaSilkanka en baştaki kodlar fazlalık sen takma kafana deli olursun . :) :)
Silsayfanın buton ları çalışmıyor senın kendı web sitesinin iletişim bölümünü merak ettim
YanıtlaSilKARDEŞİMMMMMM ÇABUK BURAYA BAK !!!! OLMADI NAPICAM SİNİRDEN ELİM AYAGIM TİTRİYO AMINA KOYUCAM YAPICAGINIZ İŞİ
YanıtlaSil,
kral sakin ol sen hayırdır
Silkahve ekipmanları
YanıtlaSilkahve çeşitleri
tarifler
kahve falı nasıl bakılır
kardeşim saol hakını helal et
YanıtlaSilghggbhedbfhjgbejdfg lan yorumlarda koptum
YanıtlaSilbende bende ksdfjskjdfskdfs
SilDostum eline emeğine sağlık çok beğendim
YanıtlaSilmal mısın abim
YanıtlaSiltşk
YanıtlaSilteşekkürler
YanıtlaSilbip
YanıtlaSiliki gündür bu sitenin aynısını yapmaya çalışıyoruz sınıfça ama bu kod hiçbir şekilde çalışmıyor çalışmayan bir kodu ne diye buraya atarsınız ki bide yorumlarda teşekkür etmişler çalışmıyor kod neyin teşekkürünü ediyorsunuz haftaya sınav olucaz ve bu stenin koduna ihtiyacım var...
YanıtlaSilyürü begg arkandayız
Silkral amk
Sil