Begini Cara Membuat Template Blogger Sendiri dengan Mudah dan Cepat - Dalam Mendesign atau membuat sebuah template blogger sendiri tidaklah begitu sulit. Kenapa begitu sobat? Karena, sobat hanya perlu menguasai CSS, HTML dan Java Script. Itu adalah faktor penting dalam pembuatan Template Blogger.

Bahkan hanya dengan menguasai CSS dan HTML, sobat sudah bisa membuat template blog sendiri yang keren. Tanpa HTML dan CSS mana mungkin template bisa jadi, karena dalam pembuatan template HTML dan CSS sudah seperti pasangan yang tidak mau dipisahkan.

Mas Yoga sendiri juga sudah pernah membuat Template Blogger niche Anime. Yah, walaupun begitu saya juga membutuhkan template yang Mas Yoga redesign HTML dan CSS-nya.

Walaupun template yang saya buat belum dipublikasikan ke Template Blogger di seluruh Indonesia. Mas Yoga merasa bangga, karena saya sendiri sudah bisa membuat template blogger, walaupun tidak keren, yang penting template buatan sendiri.

Yuk di coba : Template Buatan Mas Yoga

Akan tetapi dalam pembuatan template perlu waktu yang tidak singkat , untuk membuat template blog sendiri , butuh waktu berjam-jam , berhari-hari bahkan sampai berminggu-minggu untuk menghasilkan template yang berkualitas.

Banyak para blogger yang salah dalam menggunakan template. Oleh sebab itulah mengapa para pembuat template tidak senang kalau link credit hasil jerih payahnya di hapus oleh si pemakai template , jadi ketika sobat memakai template unduhan entah itu gratisan atau premium , maka jangan hapuslah link credit si pembuat template tersebut , hargailah karya orang lain jika sobat ingin di hargai

Membuat Template Blog Sendiri

Ayo sobat kita belajar membuat template blog sendiri dengan Mas Yoga.

Kali ini template blogger yang akan kita buat yaitu dengan struktur, Header, Header Ads, Sidebar, Content dan Footer.
Berikut adalah gambar template layout yang akan kita buat.

 
---- >>>>> KODE HTML DASAR TEMPLATE 











































*/
<style type="text/css"><!-- /* /*
Bagi anda yang mengerti dan blogger profesional pastinya tidak akan menghapus link ini!!!
Blogger Template Style
Name       : Personal Blogger Template
Date       : 9 November 2016
Updated by : Mas Yoga/Nama Pembuat Template
*/
#navbar-iframe{height:0;visibility:hidden;display:none;}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;}
a:link,a:visited{color:#1BC7A5;text-decoration:none;margin-left:0px;margin-right:0px;}
a img{border-width:0;}
img{max-width:100%;vertical-align:middle;border:0;height:auto;}
.quickedit{display:none;}
.clear{clear:both;}
body{background:#eaeaea;margin:0;padding:0;font-family: calibri;color:#2c3e50;}
]]>

Membuat Wrapper pada Template Blogger

Setelah sobat mengcopas semua kode dasar yang ada di atas kedalam template sobat, pada tahap selanjutnya kita akan membuat wrapper halaman luar template, kita akan membuat ukuran 1024px (sobat bisa merubah dengan sesuka hati).
1. Pertama copy pastekan kode CSS di bawah ini ke dalam template sobat. Tepatnya di atas kode

.

 #wrapper{
background:#FFF;
width:1024px;
overflow:hidden;
margin:0 auto;
} 

2. Selanjutnya, agar kode CSS Wrapper tersebut dapat muncul di tampilan template, panggil kode CSS dengan HTML. Caranya : cari kode kemudian copy pastekan kode dibawah ini tepat di atas kode tersebut.

 
 3. Langkah selanjutnya, kita pasang kode penutup 
, tepatnya di atas kode .

 

 #header-wrapper{width:100%;overflow:hidden;}
#header{width:262px;overflow:hidden;float:left;}
#header-ads{width:728px;overflow:hidden;float:right;}
.header .widget{padding:10px;} 

.

Membuat Post dan Sidebar Template Blog

Setelah kita membuat Header dan Header Ads pada template blog, langkah selanjutnya adalah membuat sidebar dan konten/postingan di blog. Kali ini sidebar dan postingan yang akan kita buat, letak sidebar berada di sebelah kiri float:left dan artikel berada di sebelah kanan float:right. Caranya sebagai berikut :
1. Pertama copy pastekan kode CSS Sidebar dan Postingan dibawah ini tepat di atas kode &gt.

 #artikel-wrapper{float:right;width:724px;overflow:hidden}
#sidebar-wrapper{float:left;width:300px;overflow:hidden}
#sidebar{padding:5px}
.sidebar h2,.sidebar h3{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. Pasang kodeHTML sidebar tepat di atas kode

.

3. Pasang kode HTML Postingan tepat di atas kode syntak

.

4. Tutup tag HTML Postingan tadi tepat di bawah kode

yang terakhir atau juga bisa tepat di atas kode

 #footer-wrapper{width:100%;clear:both}
.footer h3,.footer 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}
.footer{width:32%;padding:5px}
#footer-1{float:left}
#footer-2{float:left}
#footer-3{float:right}