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

42 Responses to Cara Membuat Template Blogger Sendiri

  1. wah mantap gan artikelnya
    coba buat template dulu ah

    ReplyDelete
    Replies
    1. selamat dapat pertamax :D silahakn dicoba buat:

      Delete
  2. Mantap caranya gan, saya langsung coba tes ah...

    ReplyDelete
    Replies
    1. silahkan di coba dulu :) jagan lupa shalat jum'at :D

      Delete
  3. Cocok untuk pemula yg kesulitan membuat template sendiri :-d

    ReplyDelete
    Replies
    1. benar sekali sis :) seperti saya ini ;)

      Delete
  4. Paling ga bisa nih otak atik html, apalagi bikin template. bisanya langsung pake.
    izin bookmark deh, buat belajar...

    ReplyDelete
    Replies
    1. iya awalnya tidak bisa , kalau niat nanti akan bisa dan mahir :) salam

      Delete
  5. wah lengkap sekali nih tutorialnya...

    ijin kopi kodenya yia bos, buat latihan bikin template..

    ReplyDelete
    Replies
    1. iya mas cell,, silahakn dicoba -coba :D

      Delete
  6. Aku masih belajar, Bang.. Heheh.. Makasih ya infonya, berguna banget ^^

    ReplyDelete
    Replies
    1. selamat belajar beb,, semoga cepet bisanya :)

      Delete
  7. wus , langsung paham gan sama ni tutor :D
    Thank you~

    ReplyDelete
    Replies
    1. cepet banget deh,, selamat mas fikri,,lanjutkan :)

      Delete
  8. ikut belaja di blognya mas mawan dulu, biar bisa buat template sendiri ah :D, di tunggu postingan buat template sendiri berikutnya sob :)

    ReplyDelete
    Replies
    1. mas dafin merendah,padahal udah jago nih buat templatenya :)

      Delete
    2. jago dari mana sob, masih aamburadul ya :) makanya minta ajari

      Delete
    3. iya template yang di pakai itu keren kok :)

      Delete
  9. Wah mantap nih tutorialnya. Izin dipelajari dulu Mas....
    Siapa tau nanti kalo ditekuni bisa bikin template sendiri :)

    ReplyDelete
    Replies
    1. iya mas heri silahkan :) semoga dapat template sedniri ya

      Delete
  10. dan yang terakhir hanya kitanya saja yg mau berkreasi ya maz :)

    ReplyDelete
    Replies
    1. bener sekali mas, eh saya pas buka blognya mas firman kok gak bisa di close ya tabnya.. :(

      Delete
  11. kali kali ane coba ah, supaya bisa bikin template hasil kerja sendiri :D

    ReplyDelete
    Replies
    1. amin, pelajari dulu mas semoga cepet bisa :)

      Delete
  12. This comment has been removed by a blog administrator.

    ReplyDelete
  13. @SIGIT FERIYANTO : sebelumnya minta maaf untuk komentarnya saya hapus, jika ingin naruh link silahkan gunakan OpenID atau link mati saja, dan terima kasih sudah mau berbagi disini :)

    ReplyDelete
  14. mantap sekali gan...
    memang lebih menantang kalo bikin template sendiri.. :)

    ReplyDelete
    Replies
    1. bener mas,, lebih senang jika buat template sendiri walaupun hasilnya biasanya saja

      Delete
  15. thank banget udh kasih ilmu

    kunjungi juga ya di www.rheenoa.blogspot.com onlineshopping
    dan www.musafirmudaislam.blogspot.com ilmu agama

    ReplyDelete
  16. Sangat jelas tutorialnya, singkat dan mudah dimengerti pada cara membuat template blogger. thnks mas

    ReplyDelete
  17. Izin mampir agan :)
    http://goo.gl/mgBCnM

    ReplyDelete
  18. Thanks infonya gan, sangat membantu buat newbie seperti ane..
    barubatu.blogspot.com

    ReplyDelete
  19. Thanks infonya gan, sangat membantu buat newbie seperti ane..
    barubatu.blogspot.com

    ReplyDelete
  20. Mau dapat gem Clash of Clans, diamond get rich, diamond hay day, dan masih banyak lagi dengan mudah tanpa survey dan root? Ini caranya

    1. Download aplikasi Whaff Rewards di playstore
    2. Setelah ke intsall buka appnya
    3. Seteah di buka klik tombol login, login ajaa pake akun facebook kalian
    4. Abis itu ada kotak invitation code
    5. Masukan kode AK92284
    6. Setelah masukan kode diatas kalian bakal dapet $0.3, lumayan kaan, kalian tinggal ngumpulin deh sampe 12$
    7. Cara ngumpulinnya gampang, tinggal invite orang lain atau download aplikasi yang ada di app tersebut
    8. Setiap download aplikasi kalian akan mendapat hadiah sebagai reward, hadiahnya bisa $0.17 sampe $0.66 tergantung app nya
    9. Setiap hari kalian pun akan mendapat reward bila setelah di download aplikasi tersebut tidak di uninstall lumayan kaan setiap hari uang kalian bertambah hehehe
    10. Setelah terkumpul $12 baru deh kalian bisa tukerin ke voucher google play (domisili harus united state)
    11. Nah kalian bisa beli gem CoC. Coba dulu bro jangan nyerah duluan, ngumpulin $12 cepet kok cuma, gk cuma buat gems juga lho, bisa juga untuk aplikasi/games berbayar di playstore, atau juga bisa untuk pay pal, steam gift card, facebook gift card, amazon gift card, macem macem deh pokoknya tergantung gift cardnya hahaha. Cape sih tapi klo udah menikmati hasil, coba liat world rank keren ya. Menggiurkan sekali kan? Jangan percaya yg bilang codenya premium, semua code sama dapet $0.3

    -Selamat Mencoba-
    Jangan lupa share trik berguna ini ya

    ReplyDelete
  21. Cara mau coba otak-atik kode di mana ya ?? Atau langsung di edit HTML nya?

    ReplyDelete
    Replies
    1. Mas buatin video tutorialnya dong kaya gini:
      https://www.youtube.com/watch?v=rg-plkkl9hE
      sayangnya gak sampe kelar tuh video mas, biar gampang buat para newbie kaya saya

      Salam
      Mugianto

      Delete
  22. Mantap Gan !!!

    http://savafarma.com/

    ReplyDelete
  23. ya rata-rata masih sebatas sampai tampilan dasar ya mas. yang lain pun gitu. Yang tingkat lanjut belum diposting ya mas?

    Ohya, saya juga baru belajar bikin template. Ya meski masih jelek. Cara-cara yang saya pakai saya tulis jadi artikel. Selain bisa jadi pengingat buat saya, skalian berbagi kali aja sukses dipakai orang lain juga.
    mungkin mas mawan bersedia memberi masukan.
    ini mas link artikel saya,
    http://www.ganteng.id/2016/08/panduan-membuat-template-blog-sendiri.html

    ohya, kalau nggak berkenan sama linknya, bisa dihapus saja mas komentar saya. terima kasih dan salam kenal

    ReplyDelete
  24. Perkenalkan, saya dari tim kumpulbagi. Saya ingin tau, apakah kiranya anda berencana untuk mengoleksi files menggunakan hosting yang baru?
    Jika ya, silahkan kunjungi website ini www.kbagi.com untuk info selengkapnya.

    Di sana anda bisa dengan bebas share dan mendowload foto-foto keluarga dan trip, music, video, filem dll dalam jumlah dan waktu yang tidak terbatas, setelah registrasi terlebih dahulu. Gratis :)

    ReplyDelete

Note:
► Silahkan Berkomentar Sesuai Tema.✔
► No LINK. SPAM & PROMOSI ✘
► Segala Komentar Yang Masuk tidak Saya Moderasi ✔
► Dilarang Promosi (kecuali Ijin Admin ) ✔
► Link Hidup = Hapus.✔