Cara Membuat Template Blog Mudah - Kali ini saya akan posting tentang cara membuat layout atau Template Blog sendiri , Mungkin jika anda sudah Mengenal CSS dan HTML akan terasa lebih mudah.
Oke langsung saja , mungkin struktur layoutnya seperti ini :
1. Copy Semua kode di bawah ini dan simpan template anda :
<?xml
version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title><data:blog.pageTitle/></title>
<meta content='index,
follow' name='Hasib'/>
<meta content='1 days'
name='revisit-after'/>} img{ max-width:100%; vertical-align:middle; height:auto; } .quickedit{ display:none;< } .clear{ clear:both; } body{ background:#fff; margin:0; padding:0; font-family: 'Open Sans'; color:#333; } ]]></b:skin> <style type='text/css'> </style> </head> <body> <div id='wrapper'> <!-- Header Blog --> <header id='header-wrapp'> <b:section class='header' id='Header' maxwidgets='1'> <b:widget id='Header2' locked='true' title='Hasib Muharam Template (Header)' type='Header'></b:widget> </b:section> <div class='clear'/> <div class='nav'> <ul> <li><a href='/'> Home </a></li> <li><a href='#'> Profile </a></li>< <li><a href='#'> Contact us </a></li> <li><a href='#'> Social </a></li> </ul> </div> <div class='clear'/> </header> <b:section id="Logo" class="Logo" maxwidgets="1" showaddelement="yes"></b:section> <!-- Artikel --> <aside id='artikel-wrapper'></aside> <!-- Sidebar Blog--> <aside id='sidebar-wrapp'> <b:section class='sidebar' id='Sidebar' showaddelement='yes'></b:section> </aside> <!-- Post --> <b:section class='main' id='Main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget> </b:section> <div class='clear'/> <!-- Footer Blog--> <footer id='footer-wrapper'> <div id='footer' class='Footer'> Copyright 2016 © <data:blog.pageTitle/> - All Rights Reserved | Powered by : <a href='blogger.com'> Blogger</a> </div> </footer> </div> </body> </html>
2. Copy Semua kode di
bawah ini dan simpan di bawah kode <style> :
·
Untuk membuat
wrapper copy kode dibawah ini :
#wrapper {
background:#fff;
max-width:1124px;
width:100%;
overflow:hidden;
margin:0 auto;
padding:10px;
border-left:2px solid
#f2f2f2;
border-right:2px solid
#f2f2f2;
}
·
Untuk membuat Header
copy kode dibawah ini :
#header-wrapp{
width:100%;
overflow:hidden;
}
#Header{
width:100%;
overflow:hidden;
float:left;
}
#Header2{
font-size:28px;
padding:40px;
font-family:Impact;
text-shadow:
1px 0px 0px
#fff,
-1px 0px 0px #fff,
0px 1px 0px
#fff,
0px -1px 0px
#fff,
1px 1px 2px
#000;
}
.header .widget{
padding:10px;
}
·
Untuk membuat Main
copy kode dibawah ini :
#artikel-wrapp{
float:left;
width:68%;
overflow:hidden;
}
·
Untuk membuat Sidebar
copy kode dibawah ini :
#sidebar-wrapp{
float:right;
width:30%;
overflow:hidden;
}
#Sidebar{
padding:10px;
}
.sidebar h2 ,.sidebar
h3{
color:#333;
padding:10px;
border-bottom:3px solid
maroon ;
font-size:11pt;
font-family:sans-serif;
margin:0;
margin-bottom:5px;
}
·
Untuk membuat Navbar
Menu copy kode dibawah ini :
.nav {
float:left;
width:100%;
height:auto;
background:#333;
}
.nav a {
text-decoration:none;
color: #fff;
}
.nav li {
list-style-type:none;
float:left;
width:80px;
height:10px;
padding:20px;
background:#333;
text-align:left;
cursor:pointer;
line-height:10px;
transition-duration:0.6s;
}
.nav li:hover{
background:red;
}
·
Untuk membuat Logo
copy kode dibawah ini :
#Logo-wrapp
{width:100%;height:auto;}
#Logo img
{width:100%;height:100%;}
#Logo {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0xXbqt5qXrV6aiJCEhxgoUDpEc1L4ACQoY3GxmSZRo5I0fJJd7MxSpAhDhxIJpqeGS8NRzQy0xTdnElNbUBEo6A2KEIwRIbtFAvbtInjGIeB-9mMPtKnCIHKJScyLow9Hi2N2f3uwBfw/s1600/write-code.png)no-repeat;width:100%;height:400px;margin-bottom:20px;}
·
Untuk membuat Footer
copy kode dibawah ini :
Silahkan anda bereksperimen sendiri Semoga Bermanfaat TERIMAKASIH
#footer-wrapper{
width:100%;
height:auto;
display:block;
float:left;
border-top:2px solid
#f2f2f2;
}
#footer {
color:#333;
text-align:left;
padding:5px;
cursor:default;
width:100%;
height:60px;
line-height:60px;
}
Silahkan anda bereksperimen sendiri Semoga Bermanfaat TERIMAKASIH
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
46 Comments
no-repeat;width:100%25;height:400px;margin-bottom:20px){kind=link}