Cara Membuat Template Blog Sendiri

sitotok November 24, 2015

sitotok.blogspot.com | Cara Membuat Template Blog Sendiri. Jika Anda akan membuat template blogspot sendiri dengan structure , header , content , sidebar dan footer

Ini dia layout template yang akan kita buat. Sebelimnya, 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 Anda yang telah di hapus.

<?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[
/*
Semoga anda berhasil
Blogger Template Style
Name : Sitotok | Template dasar blogger
Date : 24/11/2015
Updated by : Sitotokpedia - http://sitotok.blogspot.co.id
*/
#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>

Membuat wrapper pada Template. Setelah Anda mengcopas semua kode dasar template di atas, kini saatnya kita membuat wrapper paling, buat ukuran 1024px (ukuran bisa diubah) caranya yaitu

1. Pasang Css berikut diatas kode style>

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

2. Kemudian memasang HTML, caranya kita cari kode kemudian letakan kode dibawah ini tepat , dibawah kode <body> tersebut

<div id='wrapper'>

3. Kemudian kita tutup kode wrapper diatas dengan memasang kode penutup div dibawah ini diatas kode</body>

</div>

4. Simpan template & lihat hasilnya.

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 :

1. Pasang Css Header berikut diatas 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. Pasang HTML berikut dan letakan dibawah <div id='wrapper'>

<header id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Mas Yadi Blogger Template (Header)' type='Header'></b:widget>
</b:section>
<b:section class='header' id='header-ads' maxwidgets='1'/>
<div class='clear'/>
</header>

Cara Membuat Post dan sidebar di Blog. Langkah untuk membuat 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 :

1. Pasang Css Postingan dan Sidebar berikut diatas 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}

2. Pasang HTML Sidebar berikut dan letakan di atas <b:section class='main' id='main'>

<aside id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
</aside>

3. Pasang HTML Artikel berikut dan letakan di atas <b:section class='main' id='main'>

<aside id='artikel-wrapper'>

4. Tutup HTML artikel tadi dengan meletakan kode penutup berikut tepat di bawah </b:section> yang terakhir (widget posting blog) atau di atas </div> terakhir

</aside>

Membuat Footer 3 Kolom di Blog. Langsung aja berikut cara membuat footer.

1. Pasang Css Footer berikut diatas 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. Pasang HTML Footer berikut dan Letakkan tepat di atas </div> yang terkahir

<div class='clear'/>
<footer id='footer-wrapper'>
<b:section class='footer' id='footer-1' showaddelement='yes'/>
<b:section class='footer' id='footer-2' showaddelement='yes'/>
<b:section class='footer' id='footer-3' showaddelement='yes'/>
</footer>

Langkah demi langkah diatas telah selesai silahkan simpan template dan lihat hasilnya. Selamat bagi anda kini sudah bisa membuat template blog sendiri. Semoga bermanfaat.

SD: Dari Berbagain Sumber

sitotok

Dari Awal

Cara Membuat Template Blog Sendiri

Related Posts