Html Kodları Ile Basit Site Şablonu - Blog Derslerim

Trang chủ » Html Kodları örnek Site » Html Kodları Ile Basit Site Şablonu - Blog Derslerim

Có thể bạn quan tâm

Blog Derslerim
  • Ana Sayfa
  • Blogger Temaları
  • Photoshop
  • İletişim

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. İndir 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; }

Bu yazıyı beğendiğiniz mi? Paylaşın!

Tweetle Takip Et categories css, html, şablon, tasarım

27 yorum:

  1. sohbet21 Ocak 2017 10:23

    guzel paylasım

    YanıtlaSilYanıtlar
    1. şişli escort16 Kasım 2018 08:44

      biraz daha açıklasa daha iyi olurmuş

      SilYanıtlar
        Yanıtla
      2. Yanıtla
  2. Unknown13 Mayıs 2018 12:35

    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ıtlaSilYanıtlar
    1. Alya Esendemir6 Temmuz 2018 00:19

      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.

      SilYanıtlar
        Yanıtla
      2. Yanıtla
  3. Adsız1 Kasım 2018 02:17

    selam

    YanıtlaSilYanıtlar
      Yanıtla
  4. Ahmet ilboga30 Ocak 2019 04:10

    Hocam ya bu arkaplandaki resmin boyutunu nasil degistirebikirim

    YanıtlaSilYanıtlar
      Yanıtla
  5. Unknown16 Nisan 2019 23:19

    hiç güzel olmamış

    YanıtlaSilYanıtlar
    1. Adsız3 Mayıs 2019 03:43

      bence de

      SilYanıtlar
        Yanıtla
      2. Yanıtla
  6. Unknown16 Ağustos 2019 02:53

    Css Dosyasını nereye atıcaz

    YanıtlaSilYanıtlar
    1. UgurOkullarıCallı5B16 Ağustos 2020 23:13

      css dosyası oluşturup oraya atıcaksın

      SilYanıtlar
        Yanıtla
      2. Yanıtla
  7. Unknown29 Ekim 2019 04:53

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

    YanıtlaSilYanıtlar
    1. Adsız12 Şubat 2020 01:19

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

      SilYanıtlar
        Yanıtla
      2. Yanıtla
  8. Unknown4 Ocak 2020 10:12

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

    YanıtlaSilYanıtlar
      Yanıtla
  9. Adsız4 Şubat 2020 00:25

    KARDEŞİMMMMMM ÇABUK BURAYA BAK !!!! OLMADI NAPICAM SİNİRDEN ELİM AYAGIM TİTRİYO AMINA KOYUCAM YAPICAGINIZ İŞİ ,

    YanıtlaSilYanıtlar
    1. Adsız12 Şubat 2020 01:18

      kral sakin ol sen hayırdır

      SilYanıtlar
        Yanıtla
      2. Yanıtla
  10. KahveKafe23 Nisan 2020 23:56

    kahve ekipmanlarıkahve çeşitleritariflerkahve falı nasıl bakılır

    YanıtlaSilYanıtlar
      Yanıtla
  11. Cinfis13 Haziran 2021 06:53

    kardeşim saol hakını helal et

    YanıtlaSilYanıtlar
      Yanıtla
  12. Unknown15 Nisan 2022 11:42

    ghggbhedbfhjgbejdfg lan yorumlarda koptum

    YanıtlaSilYanıtlar
    1. Adsız23 Mart 2023 09:39

      bende bende ksdfjskjdfskdfs

      SilYanıtlar
        Yanıtla
      2. Yanıtla
  13. Sesli Chat12 Mayıs 2022 10:01

    Dostum eline emeğine sağlık çok beğendim

    YanıtlaSilYanıtlar
      Yanıtla
  14. Adsız23 Mart 2023 09:39

    mal mısın abim

    YanıtlaSilYanıtlar
      Yanıtla
  15. ilan17 Mayıs 2023 10:43

    tşk

    YanıtlaSilYanıtlar
      Yanıtla
  16. reklam ajansı22 Mayıs 2023 09:21

    teşekkürler

    YanıtlaSilYanıtlar
      Yanıtla
  17. Adsız16 Aralık 2024 04:52

    bip

    YanıtlaSilYanıtlar
      Yanıtla
  18. Adsız18 Aralık 2024 00:09

    iki 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ıtlaSilYanıtlar
    1. Adsız18 Aralık 2024 00:12

      yürü begg arkandayız

      SilYanıtlar
        Yanıtla
    2. Adsız18 Aralık 2024 00:12

      kral amk

      SilYanıtlar
        Yanıtla
      3. Yanıtla
Yorum ekleDaha fazlasını yükle... Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom)
  • Twitter
  • Facebook
  • Google+
  • RSS

Popüler Yayınlar

  • 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...
  • En İyi Arka Plan(Texture) Resimleri İnternet ortamında bulunan veya tasarımla uğraşan herkesin kullanabileceği müthiş arka plan dokularını buradan seçip kaydedebilirsiniz. Log...
  • Blogger Temaları   İNDİR | DEMO İNDİR | DEMO İNDİR | DEMO İNDİR | DEMO İNDİR | DEMO İNDİR | DEMO İ...
  • Resmi Png(transparan) Olarak Kaydetme Blogger sitesine sahip olan birçok kişi sitesine görsellik katmak için görseller oluşturuyor veya hazır görseller yüklüyor fakat bazen is...
  • Blogger ile Photoshop Arasındaki Bağlantı İnternet üzerinde herhangi bir sitesi bulunan çoğu kişi "Photoshop bilmek gerekir mi?" sorusunu kendisine soruyor ve çoğu da ta...
  • Blogger Favicon Simgesini Değiştirme Blogger kullanan birçok kişinin sorunu olan favicon simgesini değiştirme olayını şimdi anlaşılır bir şekilde anlatmaya çalışacağım. 1) İ...
  • Reklam Panosu Eklentisi Sitenizin bir köşesinde sponsor panosu olsun diyorsanız tam size göre bir eklenti. Boyutunu ve

Etiketler

  • css
  • eklentiler
  • html
  • photoshop
  • şablon
  • tasarım
Blogger tarafından desteklenmektedir.

Blog Arşivi

  • ▼  2014 (7)
    • ▼  Ocak (7)
      • Blogger Temaları
      • Blogger ile Photoshop Arasındaki Bağlantı
      • Reklam Panosu Eklentisi
      • Resmi Png(transparan) Olarak Kaydetme
      • Blogger Favicon Simgesini Değiştirme
      • En İyi Arka Plan(Texture) Resimleri
      • Html kodları ile Basit Site Şablonu
  Sementit Blogger Theme

Từ khóa » Html Kodları örnek Site