Tahunet

Cara Membuat Template Blogger Sendiri

Tahunet - Template blogger adalah pola acu yang digunakan blogger untuk menyediakan tampilan yang konsisten terhadap semua halaman posting. Perubahan terhadap tampilan dapat dilakukan hanya dengan mengganti beberapa kode HTML atau CSS yang tersedia di template blogger.

Blogger sudah menyiapkan beberapa template standar yang bisa kita pakai dengan percuma. Tetapi kebanyakan dari pengguna blogger ingin membuat sendiri template blogger. Beberapa alasan mengapa membuat template sendiri adalah:

Menunjukkan kreatifitas mengutak-atik kode
Gampang diatur untuk keperluan penambahan widget
Ikut serta meramaikan dunia pencipta template

Hal - hal yang dibutuhkan untuk membuat Template Blogger

Template dasar dari Blogger Simple Template
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html><html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head>   <b:if cond='data:blog.isMobile'> <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> <b:else/> <meta content='width=960' name='viewport'/> </b:if> <b:include data='blog' name='all-head-content'/> <title> <b:if cond='data:blog.homepageUrl == data:blog.url'> <data:blog.title/> <b:else/> <data:blog.pageName/> | <data:blog.title/> </b:if> </title> <b:skin> </b:skin> </head> <body expr:class='"loading" + data:blog.mobileClass'> </body></html>
Reset CSS dari DTE.web.id
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ 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,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, article,aside,canvas,details,embed, figure,figcaption, footer,header,hgroup,menu,nav, output,ruby, section,summary, time,mark,audio,video { margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; } /* HTML5 display-role reset for older browsers */ article,aside,details, figcaption,figure,footer, header,hgroup,menu,nav,section { display:block; } body, .body-fauxcolumn-outer { line-height:1; } ol,ul { list-style:none; } blockquote,q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } table { border-collapse:collapse; border-spacing:0; } /* =============== FRAMEWORK START =============== */ body, .body-fauxcolumn-outer { font:normal normal .8125em/1.4 Arial,Sans-Serif; background-color:white; color:#333; } strong,b { font-weight:bold; } cite,em,i { font-style:italic; } a { text-decoration:none; } a:hover { text-decoration:underline; } a img { border:none; } abbr, acronym { border-bottom:1px dotted; cursor:help; } sup, sub { vertical-align:baseline; position:relative; top:-.4em; font-size:86%; } sub { top:.4em; } small { font-size:86%; } kbd { font-size:80%; border:1px solid #999; padding:2px 5px; border-bottom-width:2px; border-radius:3px; } mark { background-color:#ffce00; color:black; } p,blockquote,pre, table,figure,hr,form, ol,ul,dl { margin:1.5em 0; } hr { height:1px; border:none; background-color:#666; } h1,h2,h3,h4,h5,h6 { font-weight:bold; line-height:normal; margin:1.5em 0 0; } h1 {font-size:200%} h2 {font-size:180%} h3 {font-size:160%} h4 {font-size:140%} h5 {font-size:120%} h6 {font-size:100%} ol,ul,dl {margin-left:3em} ol {list-style:decimal outside} ul {list-style:disc outside} li {margin:.5em 0} dt {font-weight:bold} dd {margin:0 0 .5em 2em} input, button, select, textarea { font:inherit; font-size:100%; line-height:normal; vertical-align:baseline; } textarea { display:block; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } pre, code { font-family:"Courier New",Courier,Monospace; color:inherit; } pre { white-space:pre; word-wrap:normal; overflow:auto; } blockquote { margin-left:2em; margin-right:2em; border-left:4px solid #ccc; padding-left:1em; font-style:italic; } table[border="1"] th, table[border="1"] td, table[border="1"] caption { border:1px solid; padding:.5em 1em; text-align:left; vertical-align:top; } th { font-weight:bold; } table[border="1"] caption { border:none; font-style:italic; }.hidden,[hidden] { display:none; } .invisible { visibility:hidden; } .visually-hidden { position:absolute !important; overflow:hidden; clip:rect(0px 0px 0px 0px); clip:rect(0px,0px,0px,0px); height:1px; width:1px; margin:-1px 0 0; padding:0; border:0; } .clear { display:block; clear:both; } .clearfix:before, .clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom:1; } .pull-left { float:left; } .pull-right { float:right; } .centered { clear:both; display:block; text-align:center; margin-left:auto; margin-right:auto; } .text-center { text-align:center; } .text-left { text-align:left; } .text-right { text-align:right; } .text-justify { text-align:justify; } .btn { color:white; background-color:black; /* ... */ } .btn:hover { /* ... */ } .btn:active { /* ... */ }
Blogger Element
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'> <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/></b:section> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'/></b:section> <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/></b:section> <b:section class='sidebar' id='sidebar' preferred='yes'/>

Pembuatan Layout

Dalam pembuatan layout, kita harus merencanakan apakah akan dibuat template biasa atau responsive. Untuk membuat layout biasa/ fixed bisa menggunakan layout generator berikut:

Jika kita ingin membuat layout yang responsive bisa menggunakan:

Setelah kita mengetahui kode dasar template blogger, reset CSS, element blogger dan pembuatan layout, kita akan menggabungkan itu semua sehingga menjadi sebuah template utuh. Penggabungan secara utuh akan kita bahas di postingan berikutnya.

Cara Membuat Template Blogger Sendiri

Hal - hal yang dibutuhkan untuk membuat Template Blogger

Pembuatan Layout

Tidak ada komentar:

Posting Komentar

Blog Archive

Tag Cloud

Labels

Iklan Atas Artikel

Popular Posts

Iklan Tengah Artikel 1

Related Ongoing

Iklan Tengah Artikel 2

Related Anime

About Me

Iklan Bawah Artikel

Latest Anime

News Anime Episodes

Latest BD

Popular Posts