Contoh Membuat Template Dengan CSS
Diposting oleh
Label:
Trick Blog
di
20.05
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>
Anda sedang membaca artikel tentang Contoh Membuat Template Dengan CSS dan anda bisa menemukan artikel ini dengan url http://mafiaboypc.blogspot.com/2013/10/contoh-membuat-template-dengan-css.html. Jika anda ingin menyebarluaskan artikel ini mohon cantumkan link sumbernya! Terima kasih.
Posting Komentar