Salam
NEWBIE, Belajar Membuat Template Blog
Sendiri dengan menggunakan Notepad. Mendesign
sebuah template dengan platform blogger sebenarnya bisa dipelajari sich , Newbie
hanya perlu sedikit menguasi CSS dan HTML dan Java Script , Bahkan dengan menguasai
CSS dan HTML saja newbie sudah bisa membuat template blogger sendiri. Yang
namanya NEWBIE dan dalam tahap belajar hasil yang tidak maksimal adalah wajar,
namun kemauan Sahabat newnie-lha yang kelak menentukan semuanya bisa menjadi
lebih maksimal.
Template berkwalitas tidak serta merta diperoleh dalam waktu singkat , perlu ada tahapan dalam belajar untuk memperoleh hasil maksimal dalam mendesain Template , oleh sebab itulah mengapa para pembuat template sangat marah kalau link credit ( hak cipta ) hasil jerih payahnya di hapus oleh user , jadi ketika Sobat memakai template hasil download gratisan mohon jangan hapuslah link credit si pembuat template, hargailah karya orang lain jika anda ingin di hargai.
Belajar Membuat Template
Blogger Sendiri
Berikut tampilan template yang akan kita buat dengan struktur , header , content , sidebar dan footer ( struktur yang sederhada saja yaaa… )
Berikut
ini tips belajar membuat template blogspot sendiri
1. Sobat
masuk dulu ke Akun Blogger >> Template >>
Edit HTML
2.
Setelah itu kelihatan gambar seperti dibawah ini
Catatan : Jangan menghapus Template Newbie
yang da jadi, buatlah Blog baru untuk belajar
3. Hapus
semua kode yang ada di dalam editor template tersebut ( ctrl + A lalu delete )
, kemudian copy pastekan 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='xxxxxxxxxxxxxxxxx' name='google-site-verification'/>
<meta
content='xxxxxxxxxxxxxxxxx' name='msvalidate.01'/>
<meta
content='xxxxxxxxxxxxxxxxx' name='alexaVerifyID'/>
<meta content='index, follow,
noodp, noydir' name='robots'/>
<meta content='id'
name='geo.country'/>
<meta content='Maulidia Syahfira'
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'>
Sebagai blogger profesional dan
mengerti akan hak cipta pastinya tidak akan menghapus link ini. Hargailah karya
firanewbie !
Blogger Template Newbiestyle
Name : Firanewbie Template Blogger
Date : 21 November 2014
Updated by : Firanewbie Blogger
*/
#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,asmileisited{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>
Cara Membuat wrapper pada
Template Blog
Setelah
Newbie menyalih seluruh kode di atas kemudian Sobat coba membuat wrapper paling
luarnya, misalnya ukuran 1024px ( ukuran bisa diubah ) caranya seperti ini :
>> Tempatkan kode CSS berikut diatas kode */ ]]></b:skin>
CSS
#wrapper{
background:#FFF;
width:1024px;
overflow:hidden;
margin:0 auto;
}
>> Agar CSS berfungsi maka Sobat harus memasang
kode HTML-nya , caranya Sobat cari kode <body> kemudian letakan kode dibawah ini
tepat , dibawah kode <body> tersebut
HTML
<div id='wrapper'>
>> Sekarang
simpan template dan Sobat lihat
hasilnya , sampai disini Sobat sudah bisa membuat template sederhana , tetapi
hanya ada widget postingan saja ( selanjutnya )
Cara membuat Header
Setelah Sobat membuat wrapper, kini Sobat membuat header dan header untuk iklan caranya
>> Tempatkan kode
CSS Header berikut diatas kode */ ]]></b:skin>
CSS
#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;}
>> Letakkan kode HTML berikut dan letakan dibawah <div id='wrapper'>
HTML
<header id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Firanewbie Template
Blogger (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
Tahapan
berikutnya adalah membuat sidebar dan
postingan , kali ini postingan dan sidebar yang kita buat , letak
sidebarnya berada sebelah kiri ( float:left
) kemudian artikel berada disebelah kanan ( float:right ) caranya :
>> Letakkan kode CSS Postingan dan Sidebar
berikut diatas kode */ ]]></b:skin>
CSS
#artikel-wrapper{float:right;width:724px;overflow:hidden}
#sidebar-wrapper{float:left;width:300px;overflow:hidden}
#sidebar{padding:5px}
#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:-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}
>> Tempatkan kode HTML Sidebar berikut dan letakan di atas <b:section class='main' id='main'>
HTML
<aside id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar'
showaddelement='yes'></b:section>
</aside>
>> Tempatkan kode HTML Artikel berikut dan letakan di atas <b:section class='main' id='main'>
HTML
<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.
HTML
</aside>
Cara Membuat 3 Kolom pada Footer Blog
Langkah
yang terakhir adalah Sobat membuat 3 kolom pada posisi FOOTER , yang letaknya paling bawah , berikut cara
membuat footer
>> Tempatkan kode CSS Footer berikut diatas kode */ ]]></b:skin>
CSS
#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:-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}
>> Tempatkan kode 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>
Jika
langkah diatas telah selesai silahkan simpan template dan lihat hasilnya. Kalau
masih baru ( Newbie ) pertama kali membuat template mungkin jadi pusing , tapi dengan
belajar dan pengalaman ntar jadi ahli bikin template, Oh ya template di atas adalah
tahap permulaan ( dasar ) masih dasar , nanti kita akan membuat menu navigasi ,
auto readmore , breadcrumbs , related post , share artikel dengan design
Responsive
Saya akan lebih senang jika sobat blogger newbie berkenan memberikan komentar, saran, dan tambahan informasi juga pertanyaan seputar artikel Belajar Membuat Template Sendiri dari Dasar. Terima kasih dan semoga bermanfaat…..
