Selamat bertemu kembali. Sudah tidak sabar ingin segera menggunakan Template Desain Sendiri di blog Anda? Sabar, tinggal beberapa langkah lagi Anda sudah bisa menggunakannya.
Silahkan buka desain template Anda dan copy paste kode berikut:
Selanjutnya adalah Save As template yang Anda buat. Klik FILE kemudian Save As. Isi nama untuk template Anda kemudian ganti Save As Type dengan XML (lihat gambar di bawah).
Sekarang template desain sendiri siap untuk dipakai pada blog Anda.
Silahkan buka desain template Anda dan copy paste kode berikut:
- Untuk bagian Header. Cari kode <div id="header">, lalu ganti kata Judul Blog dan Deskripsi Blog dengan kode berikut:
<b:section class='header' id='gadgetheader' preferred='yes'>
<b:widget id='Header1' locked='false' title='JUDUL BLOG ANDA DI SINI (Header)' type='Header'/>
</b:section>
Keterangan: Ganti tulisan berwarna kuning dengan judul blog Anda!
Lihat gambar:
- Untuk bagian Menu. Cari kode <div id="menu">, lalu ganti kata Menu Kiri dan Search dengan kode berikut:
<div id="left">
<a href='http://www.NAMA BLOG ANDA.blogspot.com/' target='_blank' title="Halaman Awal">Home</a>
<a href='http://www.NAMA BLOG ANDA.blogspot.com/' target='_blank' title="Multimedia">Multimedia</a>
<a href='http://www.NAMA BLOG ANDA.blogspot.com/' target='_blank' title="Contact">Contact</a>
<a href='http://www.NAMA BLOG ANDA.blogspot.com/' target='_blank' title="About Me">About Me</a>
</div>
Keterangan: Ganti tulisan berwarna kuning dengan alamat URL blog Anda!
Lihat gambar:
Yang harus dilakukan selanjutnya adalah mencari kode berikut,#menu {
overflow: hidden;
width: 928px; /*panjang menu*/
font-size: 16px; /*ukuran font*/
letter-spacing: 1px;
margin:5px 0 5px 0;
padding:0;
height:30px;
background:#ccc;
text-align: left;
border: 1px inset;
}
Lalu tambahkan kode berikut di bawahnya.#menu a, #menu a:visited {
color: maroon;
text-decoration: none;
padding: 10px;
}
#menu a:hover {
color: red;
text-decoration: none;
padding: 10px;
cursor: default;
}
#left {
width: auto;
float: left;
margin: 5px 0 0 3px;
padding: 0;
}
Jadi, selengkapnya akan seperti gambar di bawah.
- Untuk bagian Postingan. Cari kode <div id="areapost">, lalu ganti kata Judul Postingan, Isi Postingan, Post Footer, Area Komentar dengan kode berikut:
<b:section class="main" id="main" showaddelement="no">
<b:widget id="Blog1" locked="true" title="Posting Blog" type="Blog">
</b:widget>
Lihat gambar:
- Untuk bagian Sidebar. Cari kode <div id="sidebar">, lalu ganti kata Sidebar Left dan Sidebar Right dengan kode berikut:
<b:section class="sidebar" id="sidebar1" preferred="yes">
</b:section>
Lihat gambar:
- Selanjutnya, cari kode berikut. Tempatnya paling awal.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Ganti kode tersebut dengan kode berikut:<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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'>
- Kemudian kode <title>Untitled 1</title> ganti dengan kode berikut:
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
- Cari kode berikut:
<style type="text/css">
<!--
Ganti dengan kode di bawah. Silahkan lihat gambar di atas.<b:skin><![CDATA[
- Kemudian cari kode ini:
-->
</style>
Lalu ganti dengan kode berikut:]]></b:skin>
- Selesai.
Selanjutnya adalah Save As template yang Anda buat. Klik FILE kemudian Save As. Isi nama untuk template Anda kemudian ganti Save As Type dengan XML (lihat gambar di bawah).
Sekarang template desain sendiri siap untuk dipakai pada blog Anda.