Cara Membuat Template Blogger Sendiri

Friday, 27 June 2014

Cara Membuat Template Blogger Sendiri

Membuat template sebenarnya tidak terlalu sulit,hanya saja kita harus bisa mengatur dan memahasi susunan dasar dari template itu sendiri. Bagaimana jika anda bisa membuat template sendiri,apakah akan merasa senang? pastinya dunk. Pada dasarnya struktur pada pembuatan template website atau blog baik itu berupa xml atau file PHP sama saja.

Dalam pembuatan template ada beberapa bagian baik itu 1 kolom, 2 kolom bahkan sampai 3 kolom seperti yang sedang saya pakai sekarang ini,tapi kebanyakan orang menyukai yang 2 kolom. Berikut susunan sederhana dari template yang akan kita buat:

<html>
  <head>
    <title>Yuk Buat Template Sendiri</title>
  </head>
  <body>
  </body>
</html>

Pada gambar diatas kita bisa membuat dengan 2 sidebar atau 1 sidebar seperti yang sudah dijelaskan sebelumnya.
Langsung saja bagaimana cara pembuatan tempalte:
XML (Extensibel Markup Language)

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' expr:class='&quot;v2 &quot; + data:blog.mobileClass' expr:dir='data:blog.languageDirection' id='hollabacktexashtml' itemscope='' itemtype='http://schema.org/Article' 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' xmlns:og='http://ogp.me/ns#'>
<head>

Elemen Head

<head>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>

<b:include data='blog' name='all-head-content'/>
<title>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<data:blog.pageTitle/>
<b:else/>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<data:blog.pageName/> | <data:blog.title/>
<b:else/>
404 | <data:blog.title/> 
</b:if>
</b:if>
</title>
<b:skin><![CDATA[ /* Kode CSS di sini */

  ]]></b:skin>
 </head>

Elemen Body

<body expr:class='data:blog.pageType' itemscope='' itemtype='http://schema.org/WebPage'>

Navbar

<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
  <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>

jika anda ingin menyembunikan navbar ini anda bisa tambahkan kode css berikut:

#navbar-iframe {height:0px;visibility:hidden;display:none;}

Header

<header id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Title (Header)' type='Header'>
<b:includable id='main'>
/* disini judul dan deskripsi atau bisa anda menggabungkan dengan iklan disampignnya */
</b:includable>
</b:section>
</header>

Main

<b:section class='main' id='main' showaddelement='no'>
  <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>

Sidebar

<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>

Jika anda ingin menambahkan 1 sidebar lagi tambahkan class dengan nama sidebar2 atau apa saja.

Footer

<b:section class='footer' id='footer' showaddelement='no'>
<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>
</b:section>

Kurang lebih seperti diatas untuk kelanjutnya pembuatan template tunggu postingan sebelumnya. Silahkan kreasikan template anda , jika anda ingin mengedit template orang silahkan perhatikan bagian-bagian penting diatas, Semoga bermanfaat.

Friday, 27 June 2014