Membuat template blog secara mandiri. Beberapa blogger sudah ada yang membuat templatenya sendiri. Dan ada juga yang menggunakan template bawaan. Ada juga yang menggunakan template yang sudah jadi. Terkadang kita penasaran bagaimana cara membuat blog sendiri. Sebenarnya tidak terlalu rumit dalam membuat template sendiri. Dengan kemampuan html5 dan css3 kita sudah bisa membuat template sendiri. Pada umumnya komponen penyusun blog adalah sebagai berikut :
- Navigation (berisi home, sitemap, disclaimer, privacy policy dan lain-lain)
- Header (berisi judul blog)
- Dropdown menu (berisi navigasi yang merujuk pada konten blog dan biasanya terdapat tombol pencarian)
- Tempat artikel blog
- Sidebar untuk widget
- Widget di bawah postingan
- Footer (biasanya berisi copyright)
Contoh dari template blog yang lengkap seperti di atas ada pada blog
Lengkap Ada. Screenshotnya ada di bawah ini
Dan pembuatan template blog pada postingan ini tidak langsung membahas keseluruhan cara pembuatan secara langsung, tapi saya akan membahasnya sedikit demi sedikit. Yang akan saya bahas pada pembuatan template blog kali ini adalah untuk membuat template blog kosong.
Untuk melakukannya, anda dapat menghapus isi dari template bawaan blog anda, lalu salin 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 : Nama
*/
#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:#e0e0e0;margin:0;padding:0;font-family: calibri;color:#424242;}
]]></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>
Kode tersebut adalah kode html kosong yang saya dapatkan dari blognya
masyadi.
Salin semua kode di atas pada bagian edit html anda, lalu simpan. Coba untuk melihat blog anda, dan apabila tidak terdapat apa-apa, maka anda sudah berhasil mengikuti langkah ini dengan baik.
Langkah selanjutnya adalah membuat menu navigasi, dapat dilihat di
Membuat Navigation Menu Responsive
Related Posts