Belajar Membuat Template Blog
Berbicara tentang TEMPLATE pasti yang tebayang adalah sebuah tampilan dari sesuatu. Bisa tampilan, Buku, Majalah, Koran, Handphone, tak terkecuali tampilan sebuah Website atau Blog.
Tetapi terkadang kita ingin tau bagaimana Cara Membuat Tempalate dari yang disebutkan tadi. Mungkin, untuk membuat desain template dari sebuah buku atau majalah tidak begitu sulit karna bisa dilakukan secara manual dan tidak perlu memakai Code-Code tertentu.
![]() |
Image by Google |
Tapi bagaimana Cara Membuat Templat sebuah Handphone atau Template Website/Blog ???
Template Handphone
Membuat Template handpone/smartphone memang sulit harus memiliki keahlian khusus, karna dalam Membuat Template sebuah Handphone memerlukan Code-Code khusus. Akan tetapi jika ingin Membuat Template sebuah handhphone/smarphone kini bisa menggunakan sebuah Aplikasi dan tidak perlu ribet lagi soal Code-Code khusus, karna hanya perlu melakuan perintah dalam Aplikasi tersebut.
Template Website atau Blog
Sama seperti halnya template pada handphone, template website menggunakan Code-Code khusus yang rumit. Jika ingin Membuat Template Website harus memiliki kemampuan khusus dibidang Coding, jadi tidak sembarangan orang bisa membuatnya, dan untuk Membuat Template Website atau Blog sejauh ini belum ada Aplikasi untuk Membuat Template Website/Blog, walaupun ada mungkin hanya membuat template sederhana saja.
Jadi bagaimana Cara Membuat Template Blog/Website sendiri ??, mari kita belajar sama-sama disini untuk membuat Template sebuah Website/Blog !!!!
Mengenal lebih dulu bagian-bagian dari sebuah Website atau Blog
1. Header
Header Website/Blog terletak pada bagian atas sebuah Website/Blog, yang biasanya berisi, Informasi Blog, Judul Blog, Deskripsi Blog, atau Gambar Blog. Penjelasan lebih detail Nex >>
2. Menu Navigasi
Menu Navigasi umumnya berada dibawah Header, tapi ada juga yang letaknya tidak selalu dibawah Header tergantung dari jenis Template yang dipakai. Penjelasan lebih detail Nex >>
3. Kotak Posting
Kotak posting biasanya berada ditengah body Website/blog, dan berisi postingan yang kita buat. Nex >>
4. SIDEBAR
SIDEBAR biasanya berisi kelengkapan Website/Blog seperti, Blog Archive, Popular Post, Label Blog, Scrip HTML, dan kelengkapan pendukung lainnya.
5. FOOTER
Footer adalah element paling terakhir dalam seuah Website/Blog, yang biasanya berisi Credit title sebuah Website/Blog. Nex >>
Itulah pengertian singkat dari bagian-bagian sebuah Website/blog. Jika sudah sedikit memahami dari bagian-bagiannya kita lanjut ketahap berikutnya Cara Membuat Template Blog/Website.
Berikut Langkah-Langkap Membuat Template Blog/Website
1. Masuk ke Akun Blogger, pilih menu template > edit HTML Template
Hapus semua kode pada editor HTML templat, untuk mempermudah penghapusan bisa gunakan CTRL+A+delete, selanjutnya Copy kode berikut dan tempel/paste pada kolom editor HTML yang sudah dihapus tadi.
<?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='Belajar Bikin Template' 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='isi Keyword blog' 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 Name Template : Nama
Template Anda Date : Tanggal Pembuatan Template
Design by : Belajar Bikin Template
Url : belajarbikintemplat3.blogspot.com
*/ #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>
<!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='Belajar Bikin Template' 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='isi Keyword blog' 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 Name Template : Nama
Template Anda Date : Tanggal Pembuatan Template
Design by : Belajar Bikin Template
Url : belajarbikintemplat3.blogspot.com
*/ #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>
Selanjutnya silahkan sesuaikan Code template diatas, sesuaikan dengan Website/Blog yang Anda kelola.
2. Membuat WRAPPER Website/Blog
Setelah Code diatas terpasang dan sudah disesuaikan, kita lanjut pada pembuatan Wrapper Website/Blog.
Pasang Code CSS dibawah ini, dan letakan diatas Code </style>.
#wrapper{
background:#FFF;
width:1024px;
overflow: hidden;
margin:0 auto;
}
background:#FFF;
width:1024px;
overflow: hidden;
margin:0 auto;
}
Kemudian pasang HTML Wrapper agar Code diatas yang sudah terpasang berfungsi, caranya dengan memasang Code dibawah ini dan letakan dibawah Code <body>
<div id='wrapper'>
Kemudian pasang Code penutupnya dibawah ini, kemudian letakan dibawah Code </body>.
</div>
setelah semua sudah terpasang dengan benar, lanjut ketahap berikutnya.
3. Membuat Header Website/Blog
Setelah dibagian Wrapper selesai, selanjutnya membuat Header Blog, pertama kita pasang terlebih dahulu CSS-nya. Pasang Code dibawah ini dan tempatkan diatas Code </style>.
#header-wrapper{width:100%;overflow
:hidden;}
#header{width:262px;overflow:hidden;float:left;}
#header-ads{width:728px;overflow:hidden;float:right;}
.header
.widget{pading:10px;}
:hidden;}
#header{width:262px;overflow:hidden;float:left;}
#header-ads{width:728px;overflow:hidden;float:right;}
.header
.widget{pading:10px;}
Kemudian pasang Code HTML dibawah ini dan letakan dibawah Code <div id='wrapper'>
<header id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' locked='true' title='Belajar Bikin Template(header)' type='header'>
</b:widget>
</b:section>
<b:section class='header' id='header-ads' maxwidgets='1'/>
</header>
<b:section class='header' id='header' maxwidgets='1' locked='true' title='Belajar Bikin Template(header)' type='header'>
</b:widget>
</b:section>
<b:section class='header' id='header-ads' maxwidgets='1'/>
</header>
Setelah semua terpasang dengan benar klik simpan template.
Untuk membuat element template yang lain seperti :
- Membuat Kotak Posting
- Membuat Footer Website/Blog
Belum ada tanggapan untuk "Cara Membuat Template Blog/Website"
Post a Comment