#artikel-wrapper{float: left;width: 535px;margin: 5px;padding: 5px;}
#sidebar-wrapper{float:right;width:300px;overflow:hidden}
#sidebar{padding:5px}
.sidebar h2,.sidebar h2{color:#fff;padding:4px 8px;background:#3384cc;background:linear-gradient(top,#3384cc,#2a79bf);background:-webkit-linear-gradient(top,#3384cc,#2a79bf);background:-moz-linear-gradient(top,#3384cc,#2a79bf);background:-o-linear-gradient(top,#3384cc,#2a79bf);font-size:11pt;font-family:'PT Sans',Arial,sans-serif;border-bottom:2px solid #ccc;text-shadow:1px 1px 0 #283744;margin:0;margin-bottom:5px}2. panggil code HTML sidebarnya, temukan code ini.
<div id="content-wrapper">
letakkan code berikut ini tepat di bawahnya.
<aside id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
</aside>3. kemudian pasang HTML artikel wrapper berikut ini, letakkan tepat di bawah <div id="content-wrapper">
<div id='artikel-wrapper'>
</div>4. terakhir letakin code main html dibawah ini, tepat dibawah <div id='artikel-wrapper'> .
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>5. selesai. apa anda sudah pusing, ^_^ semangat. jangan lelah menatap sebuah code. ini tahapan awal yang sangat bagus untuk anda dan saya juga pernah mengalaminya. jangan lupa simpan template anda dan lanjut ke tahap berikut ini :
Tahapan keenam "memasang footer-wrapper dan credit blog"
1. copy code CSS dibawah ini letakkan tepat diatas </style>/*--------BOTTOMBAR---------*/
#bottombar {
background:#454545;
border-top:6px solid #e5e5e5;
overflow:hidden;
margin:0 auto;
padding:15px;
color:#dddddd;
}
#bottombar .left {
float:left;
width:34%;
}
#bottombar .center {
float:left;
width:34%;
}
#bottombar .right {
float:right;
width:32%;
}
#bottombar .left .widget, #bottombar .center .widget {
margin:0 15px 15px 0;
}
#bottombar .right .widget {
margin:0 0 15px 0;
}
#bottombar h2 {
font:normal bold 13px Arial, sans-serif;
margin:0 0 10px 0;
padding:6px 0;
border-bottom:2px solid #555;
text-transform:uppercase;
position:relative;
color:#eeeeee;
}
#bottombar h2:after {
content:" ";
width:90px;
height:0px;
position:absolute;
left:0;
bottom:-2px;
border-bottom:2px solid #eeeeee;
}
#bottombar ul, #bottombar ol {
list-style-type:none;
margin:0 0 0 0;
padding:0 0 0 0;
}
#bottombar li {
margin:5px 0;
padding:0 0 0 0;
}
#bottombar ul li:before {
color:#eeeeee !important;
}
#bottombar a {
color:#dddddd;
}
#bottombar a:hover {
color:#ffffff;
}
/*----------footer-wrapper-----*/
#footer-wrapper {
background:#333333;
margin:0 auto;
padding:20px 5px;
overflow:hidden;
color:#eeeeee;
font-size:11px;
}
.footer-left {
float:left;
margin:10px;
}
.footer-right {
float:right;
margin:10px;
}
#footer-wrapper a {
color:#eeeeee;
}
#footer-wrapper a:hover {
color:#ffffff;
}2. panggil codenya dengan menambahkan HTML berikut ini, dan letakkan tepat diatas penutup </div> paling akhir.
<div class='clear'/>
<aside id='bottombar'>
<b:section class='left section' id='left' preferred='yes'/>
<b:section class='center section' id='center' preferred='yes'/>
<b:section class='right section' id='right' preferred='yes'/>
</aside>
<!-- credit by blogger -->
<!-- footer wrapper start -->
<footer id='footer-wrapper'>
<div class='footer-left'>
Copyright 2016 <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> . Publish by <a class='change' href='http://itjenius' id='change' title='nama anda'>nama anda</a>
</div>
<div class='footer-right'>
<a href='url blog anda' title='power by'>Powered by</a> <a href='url blog anda' title='Blogger'>Blogger.com</a>
</div>
</footer>
<!-- footer wrapper end -->3. selesai, sampai disini anda sudah dapat membuat suatu kerangka blog dengan 1 header, 1 main-wrapper, 1 sidebar. cobalah anda save template tersebut dan klik LIHAT BLOG. untuk melihat hasil dari design template blog anda, dan akan tampil seperti gambar ss dibawah ini :
membuat template blog sendiri memang susah-susah gampang terutama anda yang baru mengenal code CSS maupun HTML. saya sendiri mempelajari ini awal tahun 2013. saya merasa tertantang dan penasaran dengan teman saya yang telah membuat suatu blog yang rapi,
saya penasaran bagaimana cara membuat template blog dengan hanya menggunakan code yang rumit saya rasa tidak rumit sihh setelah anda tau. nahh setelah 1 bulan saya belajar dan sedikit bertanya kepada teman saya akhirnya saya mulai mengerti. dan mulai membuat sendiri beberapa template blog.
kendala utama saat membuat sebuah Tempalte yang pernah saya alami, seperti munculnya pesan-pesan error di template yang membuat saya tidak mengerti dan mencoba mencarinya di google, padahal hal yang sangat mudah kesalahan utamanya hanya terletak pada penutup-penutup HTML dan CSS saja.
maka dari itu untuk anda yang pemula saya sarankan dalam Belajar Cara Membuat Template Blogcobalah terlebih dahulu memahami tentang penutup-penutup tiap code dan letak-letak mereka berada, saya rasa tahapan awal seperti itu agar anda tidak kebingungan ketika mendapatkan kesalahan saat membuat suatu template maupun mengedit template.
yang perlu kita ketahui bahwa, membuat suatu Template Blog itu tidak cukup dengan hanya duduk 1 jam didepan komputer, apalagi buat anda yang pemula beberapa blog yang bagus dan responsif itu membutuhkan ketelatenan dan belajar secara serius. jika anda sudah mahir saya rasa waktu seharipun dapat anda membuat sebuah template yang profesional.
mungkin sekian dari artikel Belajar Tentang Membuat Template Blog sendiri untuk pemula, tutorial selanjutnya anda dapat membaca artikel dibawah ini untuk melengkapi bagian-bagian dari kerangka blog anda yang telah anda buat.
note : setelah mengikuti tutorial diatas, cobalah membuat posting dan menambahkan beberapa widget, agar terlihat bentuk struktur main wrappernya dan sidebarnya.
