Hoşgeldiniz Esrarengiz.NET | Türkiyenin En iyi Webmaster Platformu

Webmaster Forum - Tüm özelliklerimize erişmek için şimdi webmaster topluluğumuza katılın.
  • Kayıt olduktan ve giriş yaptıktan sonra, konu oluşturabilir, mevcut konulara cevap gönderebilir,
  • diğer üyelerinize itibar kazandırabilir, kendi özel mesajlaşma programınızı edinebilir ve çok daha fazlasını WF ile yapabilirsiniz.
  • Ayrıca hızlı ve tamamen ücretsiz, ne bekliyorsun?
  • Css Ve Html İle Forum Teması Yapımı

    Karpuz Official

    Moderator
    Katılım
    21 Şub 2021
    Forum
    54
    Tepki
    65
    Puan
    17
    Yaş
    23
    Konum
    İstanbul
    Meslek
    WebMaster/YazılımUzmanı/GrafikTasarım/SeoDanışmanı/Reklamacı
    Merhaba değerli forum üyeleri bu gün sizlerle bir forum teması nasıl yapılır bunu öğreneceğiz:

    (Bu konuda css ve html anlatmadım. Html dersleri için Trker4ktas moderatörün konularına bakın css bu gün ilerleyen saatlerde gelecek :) bütün kodları kopyalayın ve index.html diye bir dosya oluşturp onun içine koyun daha sonra dosyayı sürükleyerek tarayıcının içine koyun ve temamızın nasıl olduğuna bakın)

    ilk başta html taglarını giriyoruz
    HTML:
    <!DOCTYPE html>
    <html lang="tr">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Forum Teması</title>
    </head>
    <body>
      
    </body>
    </html>

    daha sonra <body> taglarının arasına kodlarımız

    HTML:
    <html>
    <head>
        <title>Developers Area</title>
        <meta charset="utf-8">
        <meta name="author" content="The61">
        <meta name ="keywords" content="dev,develop,geliştiriciler,platform,java,python,c,c++,web,türk">
        <meta name ="description" content="Developers Forum">
        <meta name ="viewport" content="width=device-width,initial-scale=1">
        <link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">                                 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript">
          
    
    
    
          
        </script>
    </head>
    
    <!-- bu kısım css  taglarını girdiğimiz -->
    
    <style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    body{
        background:lightgray;
        font-size:14px;
        font-family:arial;
    }
    .main{
        width:100%;
        height:100%;
        background:gray;
    }
    .main > .navbar{
        width:100%;
        height:6%;
        background:#333333;
    }
    .main > .navbar > .icons{
        float: left;
        padding:13px 0px 0px 50px;
    }
    .main > .navbar > .icons > a{
        color:white;
        padding: 15px;
    }
    .main > .navbar > .src{
        float: right;
        margin: 13px 30px 0px 0px;
    }
    .main > .navbar > .src > a{
        color:white;
        padding: 5px;
        text-decoration: none;
    }
    .main > .navbar > .src > #lv > #lg{
        padding-left: 3px;
    }
    
    .main > .header{
        width:100%;
        height:10%;
        background:#FFFFFF
    }
    .main > .header > .logo{
        float:left;
        margin:20px 0px 0px 50px;
    }
    .main > .header > .menu{
        float:right;
        padding:30px 20px 0px 0px;
    }
    .main > .header > .menu > a{
        color:black;
        padding:6px;
        text-decoration: none;
        transition: all 500ms;
    }
    .main > .header > .menu > a:hover{
        color:white;
        background:#328BC2;
        transition: all 500ms;
    }
    .main >  #day{
        width:100%;
        height:5%;
        background:#348BC1;
    }
    .main > #day > p{
        color:#F7F9F9;
        font-size:14px;
        padding:10px 0px 0px 50px;
    }
    .main > #day > a{
        float:right;
        margin:-15px 10px 0px 0px;
        color:#F7F9F9;
        font-size: 14px;
        text-decoration: none;
    }
    .main > .banner{
        width:100%;
        height: 35%;
        background:linear-gradient(to right bottom,#2975B3,#348BC1);
    }
    .main > .banner > #bannertext > h1{
        text-align: center;
        color: white;
        padding-top: 30px;
        font-size: 50px;
        font-weight:200;
    }
    .main > #banneralt{
        width:100%;
        height:10%;
        background:#333333;
    }
    .main > #banneralt > p{
        color:#55585F;
        text-align: center;
        padding-top: 15px;
    }
    .main > .content{
        width:100%;
        height:100%;
        background:none;
    }
    .main > .content > .left-column{
        float: left;
        width:900px;
        height:%100;
        background:lightgray;
    }
    .main > .content > .right-column{
        float:left;
        width: 449px;
        height: 700px;
        background:lightgray;
    }
    .main > .content > .left-column > .cat-1{
        width:700px;
        height:300px;
        border-radius:5px;
        margin:10px auto;
        background:white;
        overflow:hidden;
    }
    .main > .content > .left-column > .cat-1 > #topic{
        width:%100;
        height:15%;
        background:#348BC1;
        border-radius:5px 5px 0px 0px;
    }
    .main > .content > .left-column > .cat-1 > #topic > h2{
        color:white;
        font-size:18px;
        font-weight: lighter;
        padding:15px 0px 0px 15px;
    }
    .main > .content > .left-column > .cat-1 > #timeline{
        width:%100;
        height:8%;
        background:#333333;
    }
    .main > .content > .left-column > .cat-1 > #timeline > #fr{
        float:left;
        margin:5px 0px 0px 40px;
        font-size:12px;
        text-decoration: none;
        color:white;
    }
    .main > .content > .left-column > .cat-1 > #timeline > a{
        float:right;
        color:white;
        font-size:12px;
        text-decoration: none;
        margin:5px 50px 0px 0px;
    }
    .main > .content > .left-column > .cat-1 > #post{
        width:%100;
        height:20%;
        background:white;
        border-bottom:1px solid lightgray;
    }
    .main > .content > .left-column > .cat-1 > #post > #post-img{
        float:left;
        margin:12px 10px 0px 6px;
    }
    .main > .content > .left-column > .cat-1 > #post > #post-name{
        padding:10px 0px 0px 0px;
    }
    .main > .content > .left-column > .cat-1 > #post > #post-name > p{
        font-size:12px;
    }
    .main > .content > .left-column > .cat-1 > #post > #post-top{
        float:left;
        margin:-25px 10px 0px 410px;
    }
    .main > .content > .left-column > .cat-1 > #post > #post-posts{
        float:left;
        margin:-25px 0px 0px 500px;
    }
    .main > .content > .left-column > .cat-1 > #post > #last{
        float:left;
        margin:-35px 0px 0px 570px;
    }
    .main > .content > .right-column > .newp{
        width:300px;
        height:300px;
        margin:10px 0px 0px 50px;
        border-radius:5px;
        background:white;
        overflow: hidden;
    }
    .main > .content > .right-column > .newp > #topico{
        width:%100;
        height:15%;
        border-radius:5px 5px 0px 0px;
        background:#348BC1;
    }
    .main > .content > .right-column > .newp > #topico > h2{
        color:white;
        font-size:18px;
        font-weight: lighter;
        padding:15px 0px 0px 15px;
    }
    .main > .content > .right-column > .newp > #post2{
        width:%100;
        height:25%;
        margin-top:0px;
        background:none;
        border-bottom:1px solid lightgray;
    }
    .main > .content > .right-column > .newp > #post2 > #post-img{
        float:left;
        width:60px;
        height:60px;
        margin:10px 0px 0px 10px;
        background-image:url(https://s3.amazonaws.com/uifaces/faces/twitter/getsocial_now/128.jpg);
        background-size:cover;
        background-position:center;
    }
    .main > .content > .right-column > .newp > #post2 > #post-text{
        float:left;
        margin:15px 0px 0px 10px;
    }
    .main > .content > .right-column > .newp > #post2 > #post-text > h4{
        font-size:13px;
    }
    .main > .content > .right-column > .newp > #post2 > #post-text > p{
        font-size:12px;
    }
    </style>
    
    <!-- css tagları burada bitiyor -->
    
    <body>
        <div class ="main">
            <div class ="navbar">
             <div class ="icons">
                 <a href ="#"><i class="fab fa-facebook-f"></i></a>
                 <a href ="#"><i class="fab fa-twitter"></i></a>
                 <a href ="#"><i class="fab fa-google"></i></a>
                 <a href ="#"><i class="fas fa-rss"></i></a>
             </div>
             <div class ="src">
              <a href ="#"><i class="fas fa-search"></i></a>
              <a id="lv" href="#">Login<i id="lg" class="fas fa-sign-in-alt"></i></a>
             </div>
            </div>
            <div class ="header">
            <div class ="logo">
              <h1><span style ="color:#2975B3;">FORUM</span>PLUS</h1>
          </div>
          <div class ="menu">
              <a href ="#">FORUMS</a>
              <a href ="#">ARTICLES</a>
              <a href ="#">BLOGS</a>
              <a href ="#">WHATS'NEW</a>
              <a href ="#">COLOR</a>
              <a href ="#">CONTACT</a>
            </div>
        </div>
        <div id ="day">
            <p>Saturday,September 17.2016</p>
            <a href ="#">FAQ</a>
            <a href ="#">Calendar</a>
        </div>
        <div class ="banner">
         <div id ="bannertext">
             <h1>Welcome To Forum Plus</h1>
        </div>
    </div>
        <div id ="banneralt">
            <p>İf this is your first visit be sure to check out the FAQ by clicking the link above.You may have to register before you can post click the register link <br>proceed.To start viewing messages select the forum that you want to visit from the selection below</p>
        </div>
        <div style ="clear:both;"></div>
            <div class ="content">
             <div class  ="left-column">
              <div class ="cat-1">
               <div id="topic">
                   <h2>HELPS SUPPORTS</h2>
               </div>
               <div id ="timeline">
                   <a id ="fr" href ="#">FORUM</a>
                   <a href ="#">LAST POSTS</a>
                   <a href ="#">POSTS</a>
                   <a href ="#">TOPİCS</a>
               </div>
                <div id ="post">
                    <div id ="post-img">
                        <i class="fas fa-file fa-2x"></i>
                    </div>
                    <div id ="post-name">
                 <h4>POST İNSTALLATİON</h4>
                 <p>Post installation</p>
             </div>
             <div id ="post-top">
                 <p>2</p>
              </div>
              <div id ="post-posts">
                  <p>2</p>
              </div>
              <div id ="last">
                  <p>Learn D7 coding..<br>
                      by <a href ="#">admin</a></p>
              </div>
          </div>
               <div id ="post">
                    <div id ="post-img">
                        <i class="fas fa-file fa-2x"></i>
                    </div>
                    <div id ="post-name">
                 <h4>POST İNSTALLATİON</h4>
                 <p>Post installation</p>
             </div>
             <div id ="post-top">
                 <p>2</p>
              </div>
              <div id ="post-posts">
                  <p>2</p>
              </div>
              <div id ="last">
                  <p>Learn D7 coding..<br>
                      by <a href ="#">admin</a></p>
              </div>
          </div>
               <div id ="post">
                    <div id ="post-img">
                        <i class="fas fa-file fa-2x"></i>
                    </div>
                    <div id ="post-name">
                 <h4>POST İNSTALLATİON</h4>
                 <p>Post installation</p>
             </div>
             <div id ="post-top">
                 <p>2</p>
              </div>
              <div id ="post-posts">
                  <p>2</p>
              </div>
              <div id ="last">
                  <p>Learn D7 coding..<br>
                      by <a href ="#">admin</a></p>
              </div>
          </div>
               <div id ="post">
                    <div id ="post-img">
                        <i class="fas fa-file fa-2x"></i>
                    </div>
                    <div id ="post-name">
                 <h4>POST İNSTALLATİON</h4>
                 <p>Post installation</p>
             </div>
             <div id ="post-top">
                 <p>2</p>
              </div>
              <div id ="post-posts">
                  <p>2</p>
              </div>
              <div id ="last">
                  <p>Learn D7 coding..<br>
                      by <a href ="#">admin</a></p>
              </div>
          </div>
      </div>
               <div class ="cat-1">
               <div id="topic">
                   <h2>GENERAL DİSCUSSION</h2>
               </div>
               <div id ="timeline">
                   <a id ="fr" href ="#">FORUM</a>
                   <a href ="#">LAST POSTS</a>
                   <a href ="#">POSTS</a>
                   <a href ="#">TOPİCS</a>
               </div>
                    <div id ="post">
                    <div id ="post-img">
                        <i class="fas fa-file fa-2x"></i>
                    </div>
                    <div id ="post-name">
                 <h4>POST İNSTALLATİON</h4>
                 <p>Post installation</p>
             </div>
             <div id ="post-top">
                 <p>2</p>
              </div>
              <div id ="post-posts">
                  <p>2</p>
              </div>
              <div id ="last">
                  <p>Learn D7 coding..<br>
                      by <a href ="#">admin</a></p>
              </div>
          </div>
               <div id ="post">
                    <div id ="post-img">
                        <i class="fas fa-file fa-2x"></i>
                    </div>
                    <div id ="post-name">
                 <h4>POST İNSTALLATİON</h4>
                 <p>Post installation</p>
             </div>
             <div id ="post-top">
                 <p>2</p>
              </div>
              <div id ="post-posts">
                  <p>2</p>
              </div>
              <div id ="last">
                  <p>Learn D7 coding..<br>
                      by <a href ="#">admin</a></p>
              </div>
          </div>
               <div id ="post">
                    <div id ="post-img">
                        <i class="fas fa-file fa-2x"></i>
                    </div>
                    <div id ="post-name">
                 <h4>POST İNSTALLATİON</h4>
                 <p>Post installation</p>
             </div>
             <div id ="post-top">
                 <p>2</p>
              </div>
              <div id ="post-posts">
                  <p>2</p>
              </div>
              <div id ="last">
                  <p>Learn D7 coding..<br>
                      by <a href ="#">admin</a></p>
              </div>
          </div>
               <div id ="post">
                    <div id ="post-img">
                        <i class="fas fa-file fa-2x"></i>
                    </div>
                    <div id ="post-name">
                 <h4>POST İNSTALLATİON</h4>
                 <p>Post installation</p>
             </div>
             <div id ="post-top">
                 <p>2</p>
              </div>
              <div id ="post-posts">
                  <p>2</p>
              </div>
              <div id ="last">
                  <p>Learn D7 coding..<br>
                      by <a href ="#">admin</a></p>
              </div>
          </div>
    
              </div>
                         <div class ="cat-1">
               <div id="topic">
                   <h2>GENERAL DİSCUSSION</h2>
               </div>
               <div id ="timeline">
                   <a id ="fr" href ="#">FORUM</a>
                   <a href ="#">LAST POSTS</a>
                   <a href ="#">POSTS</a>
                   <a href ="#">TOPİCS</a>
               </div>
                    <div id ="post">
                    <div id ="post-img">
                        <i class="fas fa-file fa-2x"></i>
                    </div>
                    <div id ="post-name">
                 <h4>POST İNSTALLATİON</h4>
                 <p>Post installation</p>
             </div>
             <div id ="post-top">
                 <p>2</p>
              </div>
              <div id ="post-posts">
                  <p>2</p>
              </div>
              <div id ="last">
                  <p>Learn D7 coding..<br>
                      by <a href ="#">admin</a></p>
              </div>
          </div>
               <div id ="post">
                    <div id ="post-img">
                        <i class="fas fa-file fa-2x"></i>
                    </div>
                    <div id ="post-name">
                 <h4>POST İNSTALLATİON</h4>
                 <p>Post installation</p>
             </div>
             <div id ="post-top">
                 <p>2</p>
              </div>
              <div id ="post-posts">
                  <p>2</p>
              </div>
              <div id ="last">
                  <p>Learn D7 coding..<br>
                      by <a href ="#">admin</a></p>
              </div>
          </div>
               <div id ="post">
                    <div id ="post-img">
                        <i class="fas fa-file fa-2x"></i>
                    </div>
                    <div id ="post-name">
                 <h4>POST İNSTALLATİON</h4>
                 <p>Post installation</p>
             </div>
             <div id ="post-top">
                 <p>2</p>
              </div>
              <div id ="post-posts">
                  <p>2</p>
              </div>
              <div id ="last">
                  <p>Learn D7 coding..<br>
                      by <a href ="#">admin</a></p>
              </div>
          </div>
               <div id ="post">
                    <div id ="post-img">
                        <i class="fas fa-file fa-2x"></i>
                    </div>
                    <div id ="post-name">
                 <h4>POST İNSTALLATİON</h4>
                 <p>Post installation</p>
             </div>
             <div id ="post-top">
                 <p>2</p>
              </div>
              <div id ="post-posts">
                  <p>2</p>
              </div>
              <div id ="last">
                  <p>Learn D7 coding..<br>
                      by <a href ="#">admin</a></p>
              </div>
          </div>
    
              </div>
                         <div class ="cat-1">
               <div id="topic">
                   <h2>GENERAL DİSCUSSION</h2>
               </div>
               <div id ="timeline">
                   <a id ="fr" href ="#">FORUM</a>
                   <a href ="#">LAST POSTS</a>
                   <a href ="#">POSTS</a>
                   <a href ="#">TOPİCS</a>
               </div>
                    <div id ="post">
                    <div id ="post-img">
                        <i class="fas fa-file fa-2x"></i>
                    </div>
                    <div id ="post-name">
                 <h4>POST İNSTALLATİON</h4>
                 <p>Post installation</p>
             </div>
             <div id ="post-top">
                 <p>2</p>
              </div>
              <div id ="post-posts">
                  <p>2</p>
              </div>
              <div id ="last">
                  <p>Learn D7 coding..<br>
                      by <a href ="#">admin</a></p>
              </div>
          </div>
               <div id ="post">
                    <div id ="post-img">
                        <i class="fas fa-file fa-2x"></i>
                    </div>
                    <div id ="post-name">
                 <h4>POST İNSTALLATİON</h4>
                 <p>Post installation</p>
             </div>
             <div id ="post-top">
                 <p>2</p>
              </div>
              <div id ="post-posts">
                  <p>2</p>
              </div>
              <div id ="last">
                  <p>Learn D7 coding..<br>
                      by <a href ="#">admin</a></p>
              </div>
          </div>
               <div id ="post">
                    <div id ="post-img">
                        <i class="fas fa-file fa-2x"></i>
                    </div>
                    <div id ="post-name">
                 <h4>POST İNSTALLATİON</h4>
                 <p>Post installation</p>
             </div>
             <div id ="post-top">
                 <p>2</p>
              </div>
              <div id ="post-posts">
                  <p>2</p>
              </div>
              <div id ="last">
                  <p>Learn D7 coding..<br>
                      by <a href ="#">admin</a></p>
              </div>
          </div>
               <div id ="post">
                    <div id ="post-img">
                        <i class="fas fa-file fa-2x"></i>
                    </div>
                    <div id ="post-name">
                 <h4>POST İNSTALLATİON</h4>
                 <p>Post installation</p>
             </div>
             <div id ="post-top">
                 <p>2</p>
              </div>
              <div id ="post-posts">
                  <p>2</p>
              </div>
              <div id ="last">
                  <p>Learn D7 coding..<br>
                      by <a href ="#">admin</a></p>
              </div>
          </div>
    
              </div>
             </div>
             <div class ="right-column">
              <div class ="newp">
              <div id ="topico">
                  <h2>New Forum Posts</h2>
              </div>
              <div id ="post2">
               <div id ="post-img"></div>
               <div id ="post-text">
                   <h4>Learn D7 Coding..</h4>
                   <p>by <a href ="#">admin</a><br>
                Sun Oct 04,2015 05:30pm
                   </p>
               </div>
              </div>
                       <div id ="post2">
               <div id ="post-img"></div>
               <div id ="post-text">
                   <h4>Learn D7 Coding..</h4>
                   <p>by <a href ="#">admin</a><br>
                Sun Oct 04,2015 05:30pm
                   </p>
               </div>
              </div>
                       <div id ="post2">
               <div id ="post-img"></div>
               <div id ="post-text">
                   <h4>Learn D7 Coding..</h4>
                   <p>by <a href ="#">admin</a><br>
                Sun Oct 04,2015 05:30pm
                   </p>
               </div>
              </div>
             </div>
            </div>
        </div>
    </body>
    </html>
     
    Moderatörün son düzenlenenleri:

    CasperTR

    Esrarengiz
    Moderator
    Katılım
    12 Tem 2020
    Forum
    314
    Tepki
    127
    Puan
    42
    Konum
    İzmir
    Web
    teknobalik.com
    Meslek
    Yazılımcı
    1614152617790.png


    Güzel bir görünüşü var ben beğendim.
     
    Katılım
    16 Tem 2020
    Forum
    140
    Çözümler
    2
    Tepki
    125
    Puan
    42
    Konum
    Bursa
    Meslek
    Freelance web & Coder
    Ellerinize sağlık???????? Bu arada head'daki "lang=en" ' i tr yapın, ikide bi çeviri sorar yoksa tarayıcı ????
     
    instagram takipçi satın al smm panel fenerbahçe haberleri instagram türk takipçi paketleri
    Üst