Cara Membuat Template Blogspot – Part 1

Halo buat teman-teman pengguna platform Blogger, bosan dengan template blogspot yang kamu miliki sekarang, atau belum menemukan template yang cocok dengan keinginan kamu?

Hmm… engak ada salahnya loh kamu mulai coba-coba belajar membuat template blogspot sendiri dan mempelajari prosesnya dari awal.

Dalam tutorial ini saya akan berbagi tentang cara membuat template blogspot, dan Insya Allah saya akan membuatnya sesederhana dan seminimalis mungkin agar mudah dimengerti.

Tertarik untuk mencobanya? Yuk kita mulai kelasnya…

Membuat Dummy Blog

Agar tidak menggangu tampilan dan fungsi yang ada dalam blog yang sedang kamu gunakan sekarang maka proses belajar cara membuat template sendiri ini dilakukan di blog baru yang berbeda.

…nah dalam kasus ini blog baru tersebut kita sebut dengan dummy blog, karena hanya digunakan sebagai mockup dan percobaan saja.

1. Masuk ke akun Blogger kamu, klik bilah kiri atas lalu pilih menu ‘New blog’.

2. Selanjutnya isi kolom judul blog beserta alamatnya, lalu klik ‘Create blog’. Karena ini hanya blog untuk latihan membuat template maka kamu bisa mengisinya sesuai keinginan kamu.

Karena ini adalah blog yang hanya digunakan dalam latihan membuat template, maka saya sarankan untuk melakukan pengaturan agar blog-nya tidak terindeks di daftar mesin pencari ataupun di list Blogger.

3. Masuk kedalam Settings >> Basic. Rubah privasinya menjadi not listed, lalu klik save…

Blank Template

Secara teknis jika ingin membuat template blog dari awal kita akan memerlukan sebuah template kosong atau blank template, dimana format yang ada didalamnya hanyalah format dasar.

Nah karena itu kamu harus merubah template yang sekarang digunakan menjadi sebuah template kosong.

1. Masuk ke bilah Template dan pilih Edit HTML.

2. Setelah itu hapus seluruh kode yang ada didalamnya (untuk menyeleksi semua kode gunakan CTRL+A), pastikan jangan sampai ada yang tersisa ya 🙂

3. Copy kode dibawah ini, lalu paste di dalam kode editor template yang kosong tadi…

<?xml version="1.0" encoding="UTF-8" ?>
<HTML prefix='og: http://ogp.me/ns#'>
<head>
</head>
<body>
<div id='outer-wrapper'>
    <div id='main-wrapper'>
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <aside>
        </aside>
        <footer>
        </footer>
    </div>
</div>
</body>
</HTML>

Kode di atas adalah sebuah struktur HTML dasar dari sebuah template blogspot standar, dimana nanti bagian fisiknya terdiri dari

  • Header, <header></header>  yaitu bagian dimana judul blog atau logo berada.
  • Navigasi, <nav></nav>  yaitu tempat untuk menampilkan menu navigasi blog.
  • Posting, <article></article>  bagian utama dari posting/konten utama blog.
  • Sidebar, <aside></aside> bagian untuk menyimpan widget di sisi kanan.
  • Footer, <footer></footer>  yaitu bagian paling bawah di blog.

Semua elemen yang berada di bidang ini akan diapit oleh kode-kode tersebut, tapi sebelumnya ada yang harus kita lakukan, yaitu memberikan template meta data, yang akan di simpan di antara <head> dan </head>.

4. Copy kode berikut ini, lalu simpan tepat dibawah <head> atau sebelum  </head>

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> 
     <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=1100' name='viewport'/> 
     </b:if> 
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/>
</title>
<b:skin>
</b:skin>
<!-- fonts -->
  <link href='https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i' rel='stylesheet'/> 
  <link href='https://fonts.googleapis.com/css?family=Advent+Pro:300,400,700' rel='stylesheet'/> 
  <link href='https://fonts.googleapis.com/css?family=Arvo:400,400i,700,700i' rel='stylesheet'/>
  <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'/> 

Sebelum melanjutkannya saya akan menjelaskan beberapa fungsi penting dari kode yang baru saja kamu copy tadi…

  • Pada baris ke 7 terdapat <b:include data='blog' name='all-head-content'/> , kode tersebut berfungsi memanggil tag, atribut dan elemen standar yang memang diwajibkan dalam sebuah template Blogger.
  • Sedangkan <title><data:blog.pageTitle/> pada baris ke 8, berfungsi sebagai kode untuk memunculkan judul dan meta tag setiap halaman blog secara otomatis.
  • Nah pada baris 12-15 adalah link eksternal untuk font dan icon yang akan digunakan di template ini.

Kamu belum bisa menyimpan/save kode tersebut karena dalam struktur template standar, Blogger mewajibkan template untuk memiliki minimal 1 bagian widget.

Jadi sebelum menyimpan format kode tadi kamu harus menambahkan kode untuk menampilkan widget posting, caranya…

5. Copy kode dibawah ini, dan simpan tepat setelah tag <article> atau sebelum </article>

<b:section class='main' id='main' showaddelement='yes'>
    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1' visible='true'>
    </b:widget>
</b:section>

Jika sudah yakin tidak ada yang kamu lewatkan dari langkah-langkah tadi, silahkan klik Save Template, lalu klik view blog untuk melihat penampakan blog kamu sekarang.

blank template

Jangan kaget bila melihat tampilannya hanyalah halaman putih seperti gambar diatas, karena alasan itulah template dasar ini disebut blank template.

Nah supaya tidak terlalu polos yuk kita beri sedikit sentuhan sentuhan awal dengan menambahkan CSS di template tersebut.

6. Simpan kode dibawah ini tepat sebelum tag </head>

<style></style>

Kode <style> dan penutupnya</style> adalah sebuah tag HTML yang berfungsi untuk menyimpan kode CSS.

CSS yang akan kita gunakan  untuk memoles template ini akan di apit oleh kode tersebut.

7. Copy CSS berikut ini dan simpan tepat setelah <style> atau sebelum </style>

 

/* -------------------------------- 
Pure &amp; Simple
Name			:   Pure &amp; Simple Blogger Template
Version			:	1.0.0
Author 			:	Meutia Rahmah
Website			:	https://www.meutiarahmah.com
-------------------------------- */

/* reset */

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: none;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, hgroup, menu, nav, section, main {
	display: block;
}

.quickedit {
    display: none;
}


HTML {
	font-size: 62.5%;
}


body {
	font-size: 1.6rem;
	font-family: "PT Sans", sans-serif;
	color: #33414a;
	background-color:#f6f6f6;
}


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;
}

*, *::after, *::before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.clear {
clear:both;
}

iframe{
	border:none;
	overflow:hidden;
	overflow-x:hidden;
	overflow-Y:hidden;
	width:100%;
	margin: 0 auto;
}


*::-moz-selection {
	background: #c33067;
	color: #fff;
	text-shadow: none;
}

::selection {
	background: #c33067;
	color: #fff;
	text-shadow: none;
}


*, *::after, *::before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


a {
	color: #c33067;
	text-decoration: underline;
}

.status-msg-wrap {
	display:none
  }

Pada baris ke 9 kamu akan menemukan tulisan /* reset */ yang merupakan teks penanda bahwa kode CSS dibawahnya merupakan CSS reset.

Pada dasarnya CSS reset itu adalah serangkaian style sheet yang akan mengatur tampilan elemen-elemen dasar/pondasi dari HTML yang dibutuhkan dalam template.

Contohnya pada tag <body> akan diatur oleh CSS pada baris ke 47 sampai 52, dimana di dalamnya terdapat selektor, atribut dan nilai yang mengatur tag body.

Lanjut…

Yuk kita bentuk pondasi blog ini dengan memberikan style untuk elemen <div id='outer-wrapper'> dan <div id='main-wrapper'>.

Elemen outer-wrapper adalah keseluruhan bidang yang menutupi layar browser, sedangkan main-wrapper adalah bidang yang akan menyimpan konten, dimana didalamnya terdapat header, menu navigasi, konten utama, sidebar dan footer.

8. Sisipkan kode di bawah ini tepat sebelum </style>

/* Outer Wrapper */

#outer-wrapper {
    width: 100%;
	margin: 0 auto;
	padding: 0;
	text-align: left;
	overflow: hidden;
}

Perhatikan kode di atas…

  • Properti width berfungsi untuk mengatur ukuran lebar, dalam template ini saya akan memberikan nilainya dengan ukuran persen, dengan kata lain 100% akan membuat outer-wrapper menutupi seluruh layar browser.
  • Margin akan mengatur posisi bidang. Nilai 0 artinya bidang tidak akan mempunyai jarak dari semua sisi layar browser, sedangkan auto akan membuat posisinya presisi.
  • Untuk mengatur ruang elemen yang berada di dalamnya saya mendeklarasikannya dengan atribut padding, dalam hal ini nilai 0 membuat elemen yang ada di dalam outer-wrapper bisa memiliki ukuran sama persis tanpa dibatasi ruang.
  • Text-align berfungsi untuk mengatur rata teks, nilai left akan membuat teks menjadi rata kiri.
  • Atribut overflow  akan mengatur elemen yang ukurannya melebihi dari outer-wrapper, dalam kasus ini jika memang ada maka nilai ‘hidden’ akan menyembunyikan elemen yang overlap.

9. Selanjutnya ambil kode dibawah ini dan simpan tepat sebelum </style>

/* Main Wrapper */

#main-wrapper {
	background-color: #fff;
	width: 1200px;
	margin: 0 auto;
	padding: 0;
	text-align: left;
	display: table;
}

Perhatikan lagi satu persatu kode CSS diatas

  • Untuk memberikan warna latar kita akan menggunakan atribut background-color, untuk nilainya saya akan menggunakan kode warna hex, dimana nilai #fff akan dideklarasikan menjadi warna putih.
  • Kali ini ukuran width atau lebar untuk main-wrapper yang akan digunakan sebagai bidang utama meyimpan konten adalah 1200px.
  • Agar posisinya tepat berada di tengah maka untuk margin  saya berikan nilai 0 auto.

Klik save, dan lihat tampilan blognya

You’re good to go to…

Jika ada yang ditanyakan pada sesi pertama membuat template blogspot ini, jangan ragu untuk meninggalkannya di kolom komentar.

Pada minggu depan saya akan melanjutkannya membuat template blogspot sesi header dan navigasi.

See you…

 

24 replies
  1. Rahma
    Rahma says:

    Masih intro… Aku tunggu kelanjutanya deh. Sebagai pengguna blogger, utak atik template itu emang seru. . . Sampai ada yang eror di tampilan blog baru deh gak seru. . . Delete and create blog lagi,, mulai dr awal hahaha

    Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *