Cara Membuat Template Blog dari awal sampai selesai

Amiblog - dalam membuat Template dengan platform Blogger sebenarnya tidaklah begitu sulit, karena memang desain Template yang di gunakan oleh pihak Blogger adalah desain desain yang simpel dan sederhana. kemudian jika memang anda benar benar ingin menguasai dan bisa membuat Template Blog sendiri, yang harus anda kuasai hanyalah CSS, HTML, dan java Script, dengan menguasai ke tiga hal itu, maka anda sudah bisa membuat Template sendiri.

Namun yang perlu anda ketahui adalah ketika anda sedang membuat Template tidak bisa di buat secara cepat dan tergesa gesa, karena membuat Template itu butuh waktu yang sangat lama, karena yang di perlukan adalah sebuah ketelitian dan ketenangan dalam membuat Template nya.

Banyak sekali di luar sana yang sudah jago dalam Membuat Template, karena mereka mempelajari dan menguasai CSS, HTML dan Java Script, contohnya Template Blog saya ini, di buat oleh Mas sugeng, dan masih banyak lagi yang bisa membuat Template, diantaranya yang saya Tahu :

Mas sugeng
Arlina
Kompi
bung prenky
dan banyak lagi.

Nah bagi anda yang mau mencoba terjun untuk membuat Template Blog di mulai dari awal, silahkan anda cermati Tutorial saya dibawah ini, kemudian Praktekan oleh anda sendiri ya, Good luck, semoga sukses membuat Template nya.

CARA CARA

1.silahkan anda masuk dulu ke menu Template di halaman utama Blog anda

2. lalu Klik edit Html, setelah terbuka semua kode nya, silahkan anda hapus kode bawaan Template anda, semuanya.

3. setelah anda hapus, langkah selanjutnya silahkan salin kode dasar pembuatan Template di bawah ini, kemudian paste kan di Kolom tadi yang sudah anda hapus semua kode nya.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=0.5,maximum-scale=2.0' name='viewport'/>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<meta content='####################' name='google-site-verification'/>
<meta content='####################' name='msvalidate.01'/>
<meta content='####################' name='alexaVerifyID'/>
<meta content='index, follow, noodp, noydir' name='robots'/>
<meta content='id' name='geo.country'/>
<meta content='Mas Yadi' name='author'/>
<meta content='1 days' name='revisit-after'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='blogger' name='generator'/>
<meta content='general' name='rating'/>
<meta content='index, follow, snipet' name='googlebot'/>
<b:if cond='data:blog.pageType == "index"'>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='website' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='id_id' property='og:locale'/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<title><data:blog.pageTitle/></title>
<meta content='KEYWORD+BLOG_ANDA' name='keywords'/>
</b:if>
<b:if cond='data:blog.pageType != "index"'>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='id_id' property='og:locale'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName' name='keywords'/>
</b:if>
*/
<style type="text/css"><!-- /* <b:skin><![CDATA[
/*
Blogger Template Style
Name : Nama Template Anda
Date : Tanggal Pembuatan Template Ini
Updated by : Amiblog
*/
#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;}
]]></b:skin>
<style type='text/css'>

</style>
</head>
<body>

<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>

</body>
</HTML>

4. setelah kode di atas di paste kan, langkah selanjutnya adalah membuat ukuran Wrapper paling Luarnya, disini saya menggunakan ukuran 1000px, untuk ukuran nya bisa anda ubah sendiri sesuai keinginan anda, di bawah ini Kode nya

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

Silahkan Letakan Css Di Atas tepat di atas kode </style>

5.kemudian letakan kode di bawah ini tepat di bawah kode <body>

6. lalu letakan Kode di bawah ini tepat di atas kode </body>

</div>

nah tahap awal pembuatan Template pun sudah selesai, silahkan anda lihat hasilnya, apakah bagus atau tidak, kalau bagus, kita lanjut ke step selanjutnya, untuk membuat Header Blog.

Cara Membuat Header Blog

1.silahkan anda pasang kode di bawah ini tepat di atas kode </style>

#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;}

2. kemudian letakan kode di bawah ini tepat di bawah kode <div id ='wrapper'>

nah sampai di sini membuat Header Blog pun sudah selesai.langkah selanjutnya kita membuat Kolom Pos dan bagian sidebar

Cara membuat Kolom Postingan dan Bagian Sidebar

1. Silahkan anda Letakan Kode Di bawah ini tepat di atas kode </style>

#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}

nah untuk mengatur posisi Sidebar dan pos nya mau di kiri atau di kanan silahkan ubah di bagian tulisan yang berwarna merah, misalkan jika bagian sidebar nya mau di sebelah kanan, dan kolom pos mau di sebelah kiri maka floatnya seperi di atas, dan untuk mengubah posisi sebalik nya silahkan tukar saja.

2. Letakan kode di Bawah ini tepat di atas kode <b:section class='main' id='main'>

3. kemudian pasang lagi kode di bawah ini tepat di atas kode <b:section class='main' id='main'>

4. terakhir silahkan pasang kode di bawah ini tepat di atas kode </div>

</aside>

Selesai deh, Membuat Kolom pos dan Sidebar pun sudah beres, silahkan lihat hasilnya.

Langkah yang terakhir dalam pembuatan Template adalah membuat Bagian Footer,

Cara Membuat Footer

disini saya akan coba membuat Footer dengan 3 kolom, nah jika anda mau membuat Footer dengan dua kolom atau 1 kolom anda bisa edit sendiri nanti.

1.Silahkan anda pasang kode di bawah ini tepat di atas kode </style>

#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}

2.dan yang terakhir silahkan pasang kode di bawah ini tepat di atas kode </div>

selsesai deh, kini Template hasil buatan sendiri pun sudah jadi, gimana mudah bukan,

*Catatan
Template di atas masih dasar sekali, karena masih banyak yang harus di benahi, di mulai dari setting menjadi Resposive, membuat menu navigasi,memasang auto redmore, memasang related post, dan banyak lagi.
untuk pembahasan pengaturan selanjutnya, insya Allah saya akan bahas di pertemuan yang akan datang ya, supaya tidak pusing. jadi cukup sekian dan terima kasih. oh ia hampir lupa, apabila kode di atas ada yang error, mohon untuk segera memberi tahu saya, supaya cepat di perbaiki.

Cara Membuat Template Blog dari awal sampai selesai

4 Responses to "Cara Membuat Template Blog dari awal sampai selesai"

Iklan Tengah Artikel 2