Visitor

Namecheap.com
» » » » Tutorial Buat Template Standar (Oleh: Aditya Pratama Malah)

Tutorial Buat Template Standar (Oleh: Aditya Pratama Malah)

, , Edit
Namecheap.com Assalamualaikum Warohmatullahi Wabarokatu

Pada tutorial kali ini saya akan membagikan template yang dibuat oleh teman saya atas Nama:  Aditya Pratama Malah

1. Buka Aplikasi Notepad ++ atau Sublime Text


2. Buatlah Struktur Folder seperti pada gambar dibawah ini:


3. Setelah struktur folder telah dibuat seperti gambar diatas, silahkan menuju ke aplikasi Sublime Text 3, dan ketikan source code seperti dibawah ini:

Source Code Html:

 <html>
  <head>
    <title>BoltimNews</title>
 <link href='css/tampilan.css' rel='stylesheet' type="text/css" />
  </head>
  <body>
    <div class='bungkus'>
   <div class='header'>
        <div class='ber'><span class='be3'>Breaking News</span><marquee><a style='font-size:9pt; text-decoration:none;'href='#'><b>BOLTIMnews</b>- Indonesia juara Piala Dunia.<b>BOLTIMnews</b>- Smk juara Piala LPI.<b>BOLTIMnews</b>- German juara Piala Dunia.<b>BOLTIMnews</b>-Siswa Berperestasi Di BOLTIM dapat Beasiswa.</a></marquee></div>
      <h3><b>BOLTIM</b><i>News </i>| <span><i>Terdepan Menimageskan</i><span></h3><br>
   </div>  
   <div class='menu'>
     <ul>
    <li><a href='#'>Beranda</a></li>
    <li><a href='#'>Ekonomi</a></li>
    <li><a href='#'>Lokal</a></li>
    <li><a href='#'>Nasional</a></li>
    <li><a href='#'>Teknologi</a></li>
    <li><a href='#'>Sosial & Budaya</a></li>
    <li><a href='#'>Mancanegara</a></li>
  </ul>
   </div>  
   <div class='sidebar'>
     <div class='warna'> 
   <div class='side'>
     <form method='post' action='#'>
      <input type='search' class='in' placeholder='cari berita yang anda suka!'>
      <input type='submit' class='en' value='Cari'>
     </form>
   </div>
        </div>     
  <div class='pop'>
     <div class='b'>
      <h3>Berita Populer</h3>
   </div>
   <div class='pep'>
   <div class='is'>
    <span><h3></h3></span>
    <img src='images/1.jpeg'> 
    <span><h4>Judul Berita</h4></span>
    <span><p>Jenis jaringan ini memberikan layanan lebih </p></span>
  </div>
  <div class='is'>
    <span><h3></h3></span>
    <img src='images/1.jpeg'> 
    <span><h4>Judul Berita</h4></span>
    <span><p>Jenis jaringan ini memberikan layanan lebih </p></span>
  </div>    
  <div class='is'>
    <span><h3></h3></span>
    <img src='images/1.jpeg'> 
    <span><h4>Judul Berita</h4></span>
    <span><p>merupakan beberapa kumpulan dari LAN yang berada<p></span>
  </div>   
  <div class='is'>
    <span><h3></h3></span>
    <img src='images/1.jpeg'> 
    <span><h4>Judul Berita</h4></span>
    <span><p>Jenis jaringan ini memberikan layanant </p></span>
  </div>     
  </div>
  
  </div>
  <div class='pop'>
  
   <div class='pep'>
    <img style='margin-top:54px;'src='images/1.jpeg'width='270px' height='400' alt='iklan'>
  </div>
  
  </div>
   </div>   
   <div class='konten'>
     <img src='images/1.jpeg' width='694px' height='400'>
    <div class='bx'>
      <h3>Berita Terbaru</h3>
   </div>
     <div class='isi box5'>
    <img src='images/1.jpeg'> 
    <span><h3>Judul Berita</h3></span>
    <span><p>Jenis jaringan ini memberikan layanan lebih luas lagi di banding MAN yaitu dapatJenis jaringan ini memberikan layanan lebih luas lagi di banding MAN yaitu dapatJenis jaringan ini mean layanan lebih luas lagi di banding MAN yaitu dapatJenis jaringan ini memberikan layanan lebih luas lagi di banding MAN yaitu dapatmberikan layanan lebih luas lagi di banding MAN yaitu dapat</p></span>
    <span style='float:right;'><a href='#'>Selengkapnya</a></span>
  </div>    
  <div class='isi box5'>
    <img src='images/1.jpeg'> 
    <span><h3>Judul Berita</h3></span>
    <span><p>Jenis jaringan inan layanan lebih luas lagi di banding MAN yaitu dapatJenis jaringan ini memberikan layanan lebih luas lagi di banding MAN yaitu dapati memberikan layanan lebih luas lagi di banding MAN yaitu dapatJenis jaringan ini memberikan layanan lebih luas lagi di banding MAN yaitu dapatJenis jaringan ini memberikan layanan lebih luas lagi di banding MAN yaitu dapat</p></span>
    <span style='float:right;'><a href='#'>Selengkapnya</a></span>

  </div>   
  <div class='isi box5'>
    <img src='images/1.jpeg'>
    <span><h3>Judul Berita</h3></span>
    <span><p>Jenis jaringan ini memberikan layanan lebih luas lagi di banding MAN yaitu dapatJenis jaringan ini memberikan layanan lebih luas lagi di banding MAN yaitu dapatJean layanan lebih luas lagi di banding MAN yaitu dapatJenis jaringan ini memberikan layanan lebih luas lagi di banding MAN yaitu dapatnis jaringan ini memberikan layanan lebih luas lagi di banding MAN yaitu dapat</p></span>
    <span style='float:right;'><a href='#'>Selengkapnya</a></span>
  </div>     
  <div class='isi box5'>
    <img src='images/1.jpeg'> 
    <span><h3>Judul Berita</h3></span>
    <span><p>Jenis jaringan an layanan lebih luas lagi di banding MAN yaitu dapatJenis jaringan ini memberikan layanan lebih luas lagi di banding MAN yaitu dapatini memberikan layanan lebih luas lagi di banding MAN yaitu dapatJenis jaringan ini memberikan layanan lebih luas lagi di banding MAN yaitu dapatJenis jaringan ini memberikan layanan lebih luas lagi di banding MAN yaitu dapat</p></span>
    <span style='float:right;'><a href='#'>Selengkapnya</a></span>

  </div>
   </div>   
   <div class='footer'>
     <address>&copy;2016. Tim IT BoltimNews.</address>
   </div>
 </div>
  </body>
</html>

4. Save dengan nama index.html di folder yang anda sudah buat sebelumnya.


5. Buatlah file baru di Sublime Text, lalu ketik code source css dibawah ini.
Source Code Css:
*{
 margin:0px;
 padding:0px;
}
body{
 background:;
}
.bungkus{
 margin:0 auto;
 width:990px;
}
.header{
 background:#DD2258;
 height:90px;
 
}
.header h3{
 padding-top:10px;
 padding-left:8px;
    font-size:24pt;
 font-family:stencil;
  color:white;
}.header i{
    font-size:19pt;
 font-family:arial;
 color:white;
}
.menu{
 background:#CE1B46;
 color:;
 height:40px;
}
.menu ul{
 
}
.menu li { 
   list-style:none;
   float:left;
   padding-top:10px;
   padding-left:5px;
}
.menu a{
 text-decoration:none;
 padding-top:8px;
 padding-left:5px;
 padding-bottom:8px;
 padding-right:5px;
}.menu a:hover{
 color:white;
 text-decoration:none;
 background:#DD2258;
}
.sidebar{
 margin-top:20px;
 float:right;
 height:410px;
 width:270px;
 border:1px solid #DD2258;
 
}
.be3{
 background:#CE1B46;
 color:white;
 
}
.ber{
 width:500px;

}
marquee{
 background:#CE1B46;
}
h3,p,a{
 color:white;
}
a{
 font-family:verdana;
}
p{
 font-family:arial; font-size:9pt;
}h3{
 font-family:verdana;
 font-size:12pt;
}
.warna{
     background:#DD2258;
  margin:0px;
  padding:0px;
  height:70px;
}.b{
     background:#CE1B46;
  margin:0px;
  padding:8px;
  height:30px;
}.bx{
 
     background:#CE1B46;
  margin-top:20px;
  padding:8px;
  width:130px;
  height:30px;
}
.box22{
 border:1px solid black;
 width:300px;
}
.side{
 margin:0 auto;
 width:200px;
}.pep{
 
}
input{
 margin-top:20px;
}
.in{
 height:30px; 
 width:150px;
 padding:8px;
}
.en{
    height:30px; 
 width:42px;
 border:none;
 background:#CE1B46;
 color:white;
}
.en:hover{
 background:white;
 color:#CE1B46;
 cursor:pointer;
}

.is {
 padding:8px;
}.is p{
 color:black;
}
.is img{
  float:left;
  width:70px;
  padding-right:8px;  
  height:50px;  
}
.konten{
 margin-top:20px;
}
.isi {
 margin-top:20px;
 padding:8px;
 width:678px;
 height:130px;
}
.xs{
 background-color:#CE1B46;
 padding:8px;
 width:284px;
 border:1px solid #CE1B46;
}
.box5 img{
 float:left;
 width:150px;
 padding-right:8px;
}
.box5{
 background:#DD2258;
}
.footer{
 margin-top:20px;
 height:40px;
 clear:both;padding-top:10px;
 background:black;
 color:white;
 text-align:center;
}

6. Save source code tersebut di folder css yang sudah dibuat sebelumnya, jangan lupa simpan dengan nama file tampilan.css:


7. Hasil:


Selesai...!!!

Template Web Ala: Aditya Pratama Malah

Jika ada yang kurang paham dengan pemaparan tutorial diatas silahkan berikan komentar dimana yang kurang anda pahami....

Link Download Source Code Full:
MediaFire

(Iswanto Mahmud)....

Subscribe to receive free email updates:

0 Response to "Tutorial Buat Template Standar (Oleh: Aditya Pratama Malah)"

Post a Comment

Subscribe to: Post Comments (Atom)