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. Ba...

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>
buat template sendiri
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.

COMMENTS

BLOGGER: 42
Loading...
Name

Adsense,5,CSS,8,Font,1,HTML,5,Javascript,5,Jquery,1,Lain-lain,5,PHP,1,SEO,3,Template,45,Tips,2,Tutorial,50,Widget,1,
ltr
item
HBT Blog: Cara Membuat Template Blogger Sendiri
Cara Membuat Template Blogger Sendiri
http://3.bp.blogspot.com/-SkyXkR-SEVo/U6zSyyIvOvI/AAAAAAAABvo/NU2LfVmLLOc/s1600/buatthemeyuk.png
http://3.bp.blogspot.com/-SkyXkR-SEVo/U6zSyyIvOvI/AAAAAAAABvo/NU2LfVmLLOc/s72-c/buatthemeyuk.png
HBT Blog
http://hollabacktexas.blogspot.com/2014/06/cara-membuat-template-blogger-sendiri.html
http://hollabacktexas.blogspot.com/
http://hollabacktexas.blogspot.com/
http://hollabacktexas.blogspot.com/2014/06/cara-membuat-template-blogger-sendiri.html
true
4727374246882403435
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy