Begini Cara
Membuat Template Blogspot Sendiri dengan mudah dan cepat menggunakan Notepad - Dalam mendesign atau membuat
template berpaltfone blogger tidaklah begitu sulit , anda hanya perlu
sedikit menguasi CSS dan HTML dan Java Script , Bahkan dengan menguasai CSS dan
HTML saja anda sudah bisa membuat template blogger sendiri yang keren ,
Template yang saya pakai ini pun juga template hasil buatan saya sendiri ,
meskipun hasilnya tidak begitu baik , tapi saya puas , karena itu hasil karya
saya sendiri
Perlu waktu yang tidak singkat , untuk membuat template blog sendiri , butuh waktu berjam -jam , berhari-hari bahkan sampai berminggu - minggu untuk menghasilkan template yang berkwalitas , oleh sebab itulah mengapa para pembuat template tidak senang kalau link crdit hasil jerih payahnya di hapus oleh si pemakai , jadi ketika anda memakai template unduhan entah itu gratisan atau premium , maka jangan hapuslah link credit si pembuat template tersebut , hargailah karya orang lain jika anda ingin di hargai
Perlu waktu yang tidak singkat , untuk membuat template blog sendiri , butuh waktu berjam -jam , berhari-hari bahkan sampai berminggu - minggu untuk menghasilkan template yang berkwalitas , oleh sebab itulah mengapa para pembuat template tidak senang kalau link crdit hasil jerih payahnya di hapus oleh si pemakai , jadi ketika anda memakai template unduhan entah itu gratisan atau premium , maka jangan hapuslah link credit si pembuat template tersebut , hargailah karya orang lain jika anda ingin di hargai
Cara Membuat Template Blog Sendiri
Kali ini kita akan membuat template
blogspot sendiri dengan structure , header , content , sidebar dan footer
Berikut layout template yang akan kita buat
Berikut layout template yang akan kita buat
Berikut langkah - langkah membuat
template blogspot sendiri
1. Pertama anda masuk dulu ke editor Template Blogger
1. Pertama anda masuk dulu ke editor Template Blogger
Hapus semua kode yang ada di dalam editor template tersebut ( ctrl + a => delete ) , kemudian copy dan pastekan semua kode dibawah ini didalam kolom editor template tersebut :
<?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="white-space: pre-wrap; word-wrap:
break-word;"><!-- <body><div></div> -->
<style
type="text/css">
<!--
/*<b:skin><![CDATA[*/]]
<style type='text/css'>
Bagi anda yang mengerti dan blogger profesional pastinya
tidak akan menghapus link ini. Membuat template ini tidak cukup 1 jam bro!
Blogger Template Style
Name : Nama
Template Anda
Date : Tanggal
Pembuatan Template Ini
Updated by : Mas Yadi/Namamu
*/
#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}
body{background:#fff;color:#000;margin: 0
auto;font-family:Arial, sans-serif;font-size: .8em;word-wrap: break-word;}
a:link,aisited{color:#3384cc;text-decoration:none;margin-left:0px;margin-right:0px;}
a:hover,#nav a:hover,#header a:hover,.post h2 a:hover,.footer
a:hover,#nav h1 a:hover,#nav h2 a:hover {color:rgba(255, 2, 2, 0.85);
-webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out;
-o-transition:all 0.5s ease-out; transition:all 0.5s ease-out}
a img{border-width:0}
img{max-width:100%;width:auto\9;height:auto;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic;}
.quickedit{display:none;}
.clear{clear:both;}
*/ ]]></b:skin>
</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>
Membuat wrapper pada Template
Setelah anda
mengcopas semua kode dasar template tersebut , kini saatnya kita membuat
wrapper paling luarnya, misal kita akan buat ukuran 1024px ( ukuran bisa
diubah ) caranya yaitu
- Pasang Css berikut diatas kode
*/ ]]></b:skin>
2. #wrapper{
3. background:#FFF;
4. width:1024px;
5. overflow:hidden;
6. margin:0 auto;
}
- Kemudian supaya css tadi berfungsi kita panggil dengan memasang htmlnya , caranya kita cari kode <body> kemudian letakan kode dibawah ini tepat , dibawah kode <body> tersebut
8. <div id='wrapper'>
- Nah sekarang coba anda simpan template dan lihat hasilnya , sampai disini anda sudah bisa membuat template sederhana , tetapi hanya ada widget postingan saja ( Baca cara selanjutnya )
Cara membuat Header dan Header Ads
Setelah anda
membuat wrapper sebagai pembungkus , kini kita akan buat header dan header ads
( header untuk iklan ) caranya yaitu :
- Pasang Css Header berikut
diatas kode */ ]]></b:skin>
2. #header-wrapper{width:100%;overflow:hidden;}
3. #header{width:262px;overflow:hidden;float:left;}
4. #header-ads{width:728px;overflow:hidden;float:right;}
.header .widget{padding:10px;}
- Pasang HTML berikut dan letakan
dibawah <div id='wrapper'>
6. <header id='header-wrapper'>
7. <b:section class='header' id='header' maxwidgets='1'>
8. <b:widget id='Header1' locked='true' title='Mas Yadi
Blogger Template (Header)' type='Header'></b:widget>
9. </b:section>
10.<b:section class='header' id='header-ads'
maxwidgets='1'/>
11.<div class='clear'/>
12.</header>
Cara Membuat Post dan sidebar di Blog
Langkah
selanjutnya yaitu kita buat sidebar dan postingan , kali ini postingan dan
sidebar yang kita buat , letak sidebarnya berada sebelah kiri float:left dan artikel berada disebelah kanan Float:right caranya yaitu :
- Pasang Css Postingan dan
Sidebar berikut diatas kode */ ]]></b:skin>
2. #artikel-wrapper{float:right;width:724px;overflow:hidden}
3. #sidebar-wrapper{float:left;width:300px;overflow:hidden}
4. #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}
- Pasang HTML Sidebar berikut dan letakan di atas <b:section class='main' id='main'>
6. <aside id='sidebar-wrapper'>
7. <b:section class='sidebar' id='sidebar'
showaddelement='yes'></b:section>
8. </aside>
- Pasang HTML Artikel berikut dan letakan di atas <b:section class='main' id='main'>
10.<aside id='artikel-wrapper'>
- Tutup HTML artikel tadi dengan meletakan kode penutup berikut tepat di bawah </b:section> yang terakhir (widget posting blog) atau di atas </div> terakhir
12.</aside>
Membuat Footer 3 Kolom di Blog
Langkah yang
terakhir adalah kita membuat footer 3 kolom , yang letaknya paling bawah
, langsung aja berikut cara membuat footer
- Pasang Css Footer
berikut diatas kode */ ]]></b:skin>
2. #footer-wrapper{width:100%;clear:both}
3. .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}
4. .footer{width:32%;padding:5px}
5. #footer-1{float:left}
6. #footer-2{float:left}
#footer-3{float:right}
- Pasang HTML Footer
berikut dan Letakkan tepat di atas </div> yang terkahir
8. <div class='clear'/>
9. <footer id='footer-wrapper'>
10.<b:section class='footer' id='footer-1' showaddelement='yes'/>
11.<b:section class='footer' id='footer-2'
showaddelement='yes'/>
12.<b:section class='footer' id='footer-3'
showaddelement='yes'/>
13.</footer>
Nah jika langkah diatas
telah selesai silahkan simpan template dan lihat hasilnya ,, selamat ya anda
kini sudah bisa membuat template blog sendiri , BTW gimana nih , pusing
atau nggak dengan tutorial diatas , kalau masih baru pertama kali membuat
template mungkin anda pusing , tapi lama-kelamaan kalau udah terbiasa anda akan
biasa saja , Oh ya template di atas tadi masih dasar , nanti kita akan membuat
menu navigasi , auto readmore , breadcrumbs , related post , share artikel dan
design Responsive