Contoh Membuat Template Dengan CSS

Senin, Mei 13, 2013

Contoh Membuat Template Dengan CSS

Fasilitas dari CSS sebenarnya sangat mudah untuk didapatkan dan diciptakan, namun itu semua butuh waktu yang banyak dan pemahaman yang memadai jikalu seseorang ingin membuat sebuah template yang uniq dengan karakter dari sebuah website tersebut atau kah untuk diri sendiri.

Pelajari selengkapnya tentang pengeditan CSS atau menggunakan Generator editing css, semua itu bisa kita lakukan dengan gampang dan sesuai kebutuhan pribadi orang.

Berikut Contoh Template CSS yang telah saya Edit dengan beragam nama saya,

Jikalau Kalian ingin Template CSS yang lain bisa didownload disini KLIK

Note : Edit lah Isi dan Nama yang terkandung didalamnya jika perlu,

Copy script dibawah ini dan simpan dengan sitank .HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--

Name       : Ian Azhari
Description: Dua Colom, fixed-width design with dark color scheme.
Version    : 1.0
Released   : 20130313

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ian An Azhari</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css">
<style type="text/css" media="all" />
html, body {
 height: 100%;
}

body {
 margin: 0px;
 padding: 0px;
 background: #22222D url(images/img01.png) repeat;
 font-family: 'Open Sans', sans-serif;
 font-size: 13px;
 color: #545454;
}

h1, h2, h3 {
 margin: 0;
 padding: 0;
 font-weight: 300;
}

h2 {
 padding: 0px 0px 20px 0px;
 font-size: 2em;
}

p, ol, ul {
 margin-top: 0px;
}

p {
 line-height: 180%;
}

strong {
}

a {
 color: #141414;
}

a:hover {
 text-decoration: none;
}

a img {
 border: none;
}

img.border {
}

img.alignleft {
 float: left;
}

img.alignright {
 float: right;
}

img.aligncenter {
 margin: 0px auto;
}

hr {
 display: none;
}

/** WRAPPER */

#wrapper {
 overflow: hidden;
 width: 1200px;
 margin: 50px auto;
 background: #FFFFFF;
 box-shadow: 0px 0px 10px 5px rgba(0,0,0,.2);
}

.container {
 width: 1200px;
 margin: 0px auto;
}

.clearfix {
 clear: both;
}

/** HEADER */

#header {
 overflow: hidden;
 height: 150px;
 background: #000000 url(images/img01.png) repeat;
}

/* Logo */

#logo
{
 float: left;
 width: 350px;
 padding: 30px 0px 0px 50px;
}

#logo h1
{
 padding: 5px 10px 0px 0px;
}

#logo h1 a
{
 text-decoration: none;
 font-size: 1.5em;
 font-weight: 300;
 color: #FFFFFF;
}

#logo p
{
 display: block;
 padding: 0px 0px 0px 0px;
 letter-spacing: 1px;
 font-size: 1em;
 color: #7C7C7C;
}

#logo p a
{
 color: #7C7C7C;
}

/* Menu */

#menu
{
 float: right;
 width: 700px;
 padding: 60px 50px 0px 0px;
}

#menu ul
{
 float: right;
 margin: 0;
 padding: 0px 0px 0px 0px;
 list-style: none;
 line-height: normal;
}

#menu li
{
 float: left;
}

#menu a
{
 display: block;
 margin-left: 1px;
 padding: 7px 0px 7px 30px;
 letter-spacing: 1px;
 text-decoration: none;
 text-align: center;
 font-size: 14px;
 font-weight: 300;
 color: #FFFFFF;
}

#menu a:hover, #menu .current_page_item a
{
 text-decoration: none;
 border-radius: 5px;
 color: #FFFFFF;
}

/** PAGE */

#page {
 overflow: hidden;
 width: 1100px;
 padding: 50px 50px;
 background: #F6F6F6 url(images/img01.png) repeat;
 color: #202020;
}

#page h2 {
}

/** CONTENT */

#content {
 float: left;
 width: 750px;
}

/** SIDEBAR */

#sidebar {
 float: right;
 width: 300px;
}

/* Footer */

#footer {
 overflow: hidden;
 margin: 0px 50px;
 padding: 30px 0px;
 border-top: 5px solid #000000;
}

#footer p {
 text-align: center;
}

#footer a {
 color: #545454;
}

/* Three Column */

#three-column {
 overflow: hidden;
 margin: 0px 50px;
 padding: 50px 0px;
}

#three-column #tbox1 {
 float: left;
 width: 400px;
 margin-right: 50px;
}

#three-column #tbox2 {
 float: left;
 width: 300px;
}

#three-column #tbox3 {
 float: right;
 width: 300px;
}

/* List Style 1 */

ul.style1 {
 margin: 0px;
 padding: 0px;
 list-style: none;
}

ul.style1 li {
 padding: 10px 0px 15px 0px;
 border-top: 1px solid #E6E7DC;
}

ul.style1 a {
 text-decoration: none;
 color: #545454;
}

ul.style1 a:hover {
 text-decoration: underline;
}

ul.style1 .first {
 padding-top: 0px;
 border-top: none;
}


/* List style 2 */

ul.style2 {
 margin: 0px;
 padding: 0px;
 list-style: none;
}

ul.style2 li {
 padding: 25px 0px 15px 0px;
 border-top: 1px solid #DDDDDD;
}

ul.style2 .first {
 padding-top: 0px;
 border-top: none;
}

ul.style2 h3 {
 padding: 0px 0px 10px 0px;
}

ul.style2 h3 a {
 color: #4F4F4F;
}

ul.style2 a {
 text-decoration: none;
 color: #919191;
}

ul.style2 a:hover {
 text-decoration: underline;
}

/* Button Style 1 */

.button-style {
 display: inline-block;
 margin-top: 20px;
 padding: 7px 20px;
 background: #22222D url(images/img01.png) repeat;
 text-decoration: none;
 text-transform: uppercase;
 color: #FFFFFF;
}
</style>

<!--[if IE 6]>
<link href="default_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<div id="wrapper">
 <div id="header">
  <div id="logo">
   <h1><a href="#">Ian An Azhari</a></h1>
   <p>Template Design by <a href="http://www.azhariian.blogspot.com/" rel="nofollow">Ian</a></p>
  </div>
  <div id="menu">
   <ul>
    <li><a href="#" accesskey="1" title="">Home</a></li>
    <li><a href="#" accesskey="2" title="">Pemrograman</a></li>
    <li><a href="#" accesskey="3" title="">Tentang Kami</a></li>
    <li><a href="#" accesskey="4" title="">Kebijakan</a></li>
    <li><a href="#" accesskey="5" title="">Hubungi Kami</a></li>
   </ul>
  </div>
 </div>
 <div id="page">
  <div id="content">
   <h2>Perguruan Tinggi STMIK Raharja</h2>
   <p><img src="http://www.pribadiraharja.com/yahoo_site_admin/assets/images/33.292165823_std.jpg" width="750" height="250" alt="" /></p>
   <p>Ini adalah <strong>STMIK RAHARJA </strong>, Sebuah Campus Teknologi Informasi Unggulan yang Berada di Tangerang.   Foto ini adalah halaman depan Gedung STMIK Raharja yang saya dapat di google. Dan saya adalah Mahasiswa disana, meniadi seorang pelajar IT memang harus mengerti semua tentang bidang dunia internet, Dunia Teknologi, dan yang paling penting adalah bahasa Pemrograman harus saya kuasai, dan Impian saya sekarang ini adalah menjadi seorang Web Master dan menguasai segala sesuatu yang berkaitan didalamnya</p>
   <p>Jurusan saya adalah Teknologi Informasi dan Konsentrasinya Software Engineering, entah apa saya mampu atau tidak menjadi Insinyur Software tapi yang pasti saya akan mencoba menciptakan sebuah software sendiri milik saya pribadi yang akan berguna dan digunakan oleh orang banyak dengan hak pencipta Ian Azhari :) </p>
  </div>
  <div id="sidebar">
   <div id="tbox1">
    <h2>Pemrograman II</h2>
    <ul class="style2">
     <li class="first">
      <h3><a href="#">HTML5 dan CSS3</a></h3>
      <p><a href="#">HTML5 adalah Standard Baru dari bahasa HTML yang akan diluncurkan sesegera mungkin, hanya menunggu para pihak browser untuk membuat software mereka support dengannya</a></p>
     </li>
     <li>
      <h3><a href="#">HTML5 Multimedia</a></h3>
      <p><a href="#">Dengan HTML5, bermain video dan audio lebih mudah dari sebelumnya. nibh.</a></p>
     </li>
     <li>
      <h3><a href="#">HTML5 Graphics</a></h3>
      <p><a href="#">Dengan HTML5, gambar grafis lebih mudah dari sebelumnya : Menggunakan elemen <canvas>, Menggunakan inline SVG, dan Menggunakan CSS3 2D/3D.</a></p>
     </li>
     <li>
      <h3><a href="#">CSS3</a></h3>
      <p><a href="#">terdapat berupa : Selectors Baru, Properti Baru, Animasi Transformasi 2D/3D, Corners Rounded, Efek bayangan, dan Font Unduhan.</a></p>
     </li>
    </ul>
   </div>
  </div>
 </div>
 <div id="three-column">
  <div id="tbox1">
   <h2>Apa itu HTML5</h2>
   <p>HTML5 akan menjadi standar baru untuk HTML. Versi sebelumnya HTML, HTML 4.01, datang pada tahun 1999. Web telah banyak berubah sejak saat itu..</p>
   <p><a href="#" class="button-style">Read More</a></p>
  </div>
  <div id="tbox2">
   <h2>Fitur - Baru HTML5</h2>
   <ul class="style1">
    <li><a href="#">elemen Video dan Audio untuk media pemutaran.</a></li>
    <li><a href="#"></a> Bentuk kontrol baru, seperti kalender, tanggal, waktu, email, url,dan Search</li>
   </ul>
   <p><a href="#" class="button-style">Read More</a></p>
  </div>
  <div id="tbox3">
   <h2>Temukan Saya Di</h2>
   <ul class="style1">
    <li class="first"><a href="http://twitter.com/ian_azharii">Twitter</a></li>
    <li><a href="#">http://facebook.com/ian.azhari.5</a></li>
    <li><a href="http://azhariian.blogspot.com/">Blog</a></li>
    <li><a href="https://plus.google.com/100811158385257729732">Google +</a></li>
   </ul>
  </div>
 </div>
 <div id="footer">
  <p>Copyright (c) 2013 azhariian.blogspot.com. All rights reserved. Design by <a href="http://azhariian.blogspot.com/" rel="nofollow">Ian Azhari</a></p>
 </div>
</div>
</body>
</html>

Get Free Email Updates Daily!

Label: CSS, Template

7 komentar:

Unknown06.14.00
artikel nya bagus gan :D, saya juga lagi mempelajari cara membuat template,,biasa belajar sama tente youtube nd om google hehe,,
BalasHapus
Balasan
Unknown18.12.00
hehe,, ni tugas kuliah gan,, sebenarnya udah pngen bljar yang HTML5, tpi blom ksampean,,
klo ane blajar-nya ma di Edit HTML blog, lebih enak ngutak atiknya,,hehe
BalasHapus
Balasan
Vpie ◥TwekzLibz◤ MahaDhifa20.23.00
.. wouwww,, langsung ke tkp ach,, kayak nya keren^ nich kalo template pake css. he..86x. tenkz ya?!? ..
BalasHapus
Balasan
Unknown08.15.00
luar biasa
visit my blog
http://waroengbebas.blogspot.com/
BalasHapus
Balasan

Tambahkan komentar

Ad 468 X 60

Senin, Mei 13, 2013

Contoh Membuat Template Dengan CSS

7 komentar:

Join Me