Cara Membuat Template Blogger Blogspot Sendiri dari awal sampai akhir
| Bagaimana cara membuat tempalte blogger blogspot sendiri, setelah lama mencari-cari akhirnya ketemu juga cara bikin tempalte bloger sendiri, ternyata tidak serumit yang saya banyangkan sebelumnya. Ternyata Bikin template itu Gampang. Meskipun mungkin tidak secakep para profesional, tetapi ada kepuasan tersendiri. Contohnya template saya ini. Yuk kita langsung aja ke TKP....... |
Inspirasi (tepatnya nyontek) cara membuat template blogger blogspot ini dari blogger yang baik hati yang beralamat di sini : http://www.masyadi.com/ . Yuk kita kupas Bagaimana caranya Masyadi membuat template blogspot sendiri.
Langkah 1 : Membuat Design Template
Kita akan membuat design template seperti design di bawah ini :
Langkah 2 : Mengganti Template yang setandar dengan template awal kita
Caranya adalah, masuk ke menu blogspot - template. Ganti semua kode HTML dengan kode di bawah ini.<?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[
/*
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/Ganti dengan nama Kamu
*/
#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>
Langkah 3 : Membuat Wrapper (Bungkus Tampilan)
Selanjutnya adalah kita akan membuat halaman tampilan. Kali ini kita membuat halaman dengan lebar 1024px (ukuran ini bisa di ubah). Caranya yaitu :1. Pasang Kode Css berikut di atas kode </style>
#wrapper{2. Kemudian supaya kode css tadi berfungsi kita panggil dengan memasang kode htmlnya , caranya kita cari kode <body> kemudian letakan kode dibawah ini tepat , di bawah kode <body> tersebut
background:#FFF;
width:1024px;
overflow:hidden;
margin:0 auto;
}
<div id='wrapper'>3. Kemudian kita tutup kode wrapper diatas dengan memasang kode penutup div dibawah ini di atas kode </body>
</div>4. Nah sekarang coba anda simpan template dan lihat hasilnya , sampai disini anda sudah bisa membuat template sederhana , tetapi hanya ada widget postingan saja.
Langkah 4 : Membuat Header dan Header Ads (tempat iklan)
Setelah kita membuat wrapper sebagai pembungkus , kini kita akan buat header dan header ads ( header untuk iklan ) caranya yaitu :1. Pasang Css Header berikut di atas kode </style>
#header-wrapper{width:100%;overflow:hidden;}2. Pasang HTML berikut dan letakan di bawah <div id='wrapper'>
#header{width:262px;overflow:hidden;float:left;}
#header-ads{width:728px;overflow:hidden;float:right;}
.header .widget{padding:10px;}
<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>
Langkah 5 : 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 :
1. Pasang Css Postingan dan Sidebar berikut 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}
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>
Silahkan di coba bikin postingan perdana, dan lihat hasilnya.
Bersambung
Bersambung
