Cara Membuat Template Blog Blogger Sendiri Mulai Dari Nol

Cara Membuat Template Blog Blogger Sendiri Mulai Dari Nol
Admin Tuesday, May 23, 2017
Selamat datang di blog Dua Rupa, Blogger!
Sebelum memulai, saya ingin menginformasikan kepada Anda bahwa sebenarnya template blog dengan
platform Blogger sudah tersedia banyak sekali di internet.
Kalau tidak percaya, coba saja lakukan pencarian dengan kata kunci "template blogger" di Google.
Anda akan menemukan ribuan template blogger dengan desain dan fitur yang berbeda satu sama lain, yang
bisa Anda dapatkan baik secara gratis maupun berbayar.
Jika sudah ada sekian banyak template blog yang bertebaran di internet dan bahkan dapat diperoleh secara
gratis, lalu mengapa harus susah-susah belajar membuat template blog sendiri? Bukankah akan lebih praktis
jika kita menggunakan template yang sudah ada saja?
Benar sekali bahwa menggunakan template blog buatan orang lain memang merupakan langkah yang cepat
dan praktis. Kita juga tidak perlu susah-susah belajar coding yang tentu sangat menyita waktu.
Tetapi sobat Blogger, saya ingin sedikit cerita pengalaman saya yang sudah mengenal Blogger sejak tahun
2008. Dibandingkan menggunakan template blog orang lain, saya lebih nyaman dan lebih konsisten
melakukan update posting ketika menggunakan template blog yang saya buat sendiri.
Pada awal mengenal Blogger, saya juga hanya bisa menggunakan template blog buatan orang lain.
Seiring berjalannya waktu, saya sangat senang melakukan modifikasi desain dan fitur template blog orang
lain untuk memenuhi kriteria blog yang saya butuhkan.
Hingga akhirnya sampai saat ini bisa dibilang saya telah berhasil membuat template blog sendiri mulai dari
nol.
Jika dihitung mulai sejak awal pertama kali saya mengenal Blogger, sudah hampir 9 tahun saya menjadi
seorang Blogger. Selama 9 tahun itu pula saya belajar memodifikasi template blogger secara otodidak
(sendiri) dengan sumber tutorial saya cari di Google.
Belajar secara otodidak memang akan memberikan Anda pengalaman yang luar biasa, tetapi mungkin akan
menghabiskan lebih banyak waktu. Belajar kepada seseorang yang memiliki keahlian dan pengalaman akan
membuat Anda paham dengan lebih efektif.
Pada kesempatan ini, izinkan saya untuk membagikan pengalaman selama 9 tahun belajar memodifikasi
template blogger saya ini dalam bentuk panduan membuat template blog Blogger sendiri dari awal.
Merupakan suatu kebanggaan tersendiri bagi saya ketika Anda telah berhasil membuat template blog
Blogger karya Anda sendiri karena mengikuti panduan yang saya tulis ini.
Cara Membuat Template Blog Blogger Sendiri Mulai Dari Nol
Template blog merupakan jantung sebuah blog. Ia mengatur desain dan fitur yang dimiliki sebuah blog.
Dalam panduan ini, kita akan belajar membuat template blog dengan kriteria minimal sebagai berikut :
 Memiliki desain yang mudah diatur

 Mudah menambah dan mengurangi fitur
 Ringan, fast loading
 Tampilan responsive pada berbagai ukuran layar
 Valid HTML5
 SEO Friendly
Template blog memiliki struktur yang kompleks, sehingga untuk dapat memahami tiap bagian dengan baik,
saya telah membagi panduan membuat template blog sendiri ini menjadi beberapa serial.
Jika Anda benar-benar pemula dalam dunia Blogger, saya sarankan Anda untuk melanjutkan membaca
artikel ini sampai selesai dulu, baru kemudian mulai melanjutkan membaca serial berikut :
No Serial Pemahaman
1. Pemahaman Dasar 5%
2. Membuat Blog Ringan, Valid HTML5, dan SEO Friendly 10%
3. Struktur Dasar Template Blog 20%
4. Menu Navigasi 30%
5. Desain Header 40%
6. Desain Posting 50%
7. Desain Kolom Komentar 60%
8. Desain Sidebar 70%
9. Desain Footer 80%
10. Kustomisasi Font 90%
11. Responsive Template 100%
Sekilas Tentang Blogger
Blogger merupakan sebuah layanan blog-publishing yang dirintis oleh Pyra Labs pada tahun 1999, dan
dibeli oleh Google pada tahun 2003.
Semua blog dengan platform Blogger secara default dihosting pada subdomain blogspot.com, namun bisa
di-upgrade menjadi top level domain (seperti www.duarupa.com).
Server penyimpanan data berupa gambar, video, dan script dihosting pada server Google, dan dapat
langsung diunggah melalui Blogger. Data yang dihosting pada server luar atau pribadi tetap dapat dimuat
dan ditampilkan pada blog dengan platform Blogger.
Untuk melihat source code (kode sumber) template blog Blogger dapat dilakukan dengan masuk ke
Template Editor. Caranya pada Dashboard Blogger, pilih Theme, kemudian pilih Edit HTML.
Di dalam kotak Template Editor ini Anda dapat melakukan modifikasi template blog Anda.
XML
Blog dengan platform Blogger dibangun menggunakan XML. XML (Extensible Markup Language) adalah
bahasa markup (manipulasi) untuk keperluan umum yang disarankan oleh W3C (World Wide Web
Consortium) untuk membuat dokumen markup untuk keperluan pertukaran data antar sistem yang beraneka
ragam.
Jadi dokumen yang dibuat menggunakan XML dapat dijalankan pada multi-platform OS seperti Windows,
Linux, Macintosh, Android, dan lain-lain.
Berikut adalah 2 baris script paling atas pada template blogger yang menunjukkan bahwa template tersebut
dibangun menggunakan XML.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
1.
2.
XML sendiri berfungsi mendefinisikan syntax penulisan kode-kode bahasa pemrograman menjadi tidak
standar, yang dapat kita tentukan sendiri. Contohnya :
<penulis>Nama Penulis Blog</penulis>
1.
Fungsi "penulis" disini merupakan fungsi yang kita definisikan sendiri, yang mana jika dipanggil akan
menampilkan nilai berupa Nama Penulis Blog.
XML hanya sebatas melakukan pendefinisian fungsi saja, untuk menampilkan fungsi tersebut harus
dilakukan pemanggilan menggunakan bahasa pemrograman lain.
Pemanggilan fungsi XML dalam template blogger dilakukan menggunakan HTML. Selain itu fungsi XML
juga dapat diatur tampilannya menggunakan CSS.
CSS
Pada dasarnya sebuah template blogger tersusun dari kumpulan fungsi-fungsi XML. CSS (Cascading Style
Sheets) berfungsi untuk mengatur desain atau tampilan fungsi-fungsi tersebut.
Di dalam CSS tampilan (style) template blog didefinisikan dalam bentuk nilai yang diapit dalam kurung
kurawa "{...}" atau bracket.
•CSS_id {style-CSS-satu:nilaipertama;style-CSS-dua:nilaikedua;}
1.
Berikut ini adalah 3 cara penulisan CSS :

1. table { // tanpa awalan apapun
2. width:100%;
3. margin:10px;
4. }
1.
2.
3.
4.
Yang pertama penulisan tanpa awalan tag apapun sebelum CSS table. Penulisan seperti ini akan
mengatur tampilan semua tabel yang dibuat menggunakan fungsi <table>.
5. #keren{ // dengan hashtag
6. width:100%;
7. margin:10px;
8. color:red;
9. }
1.
2.
3.
4.
5.
Yang kedua adalah penulisan CSS diawali dengan tagar (tanda pagar) "#" atau hashtag. CSS seperti
ini dapat dipanggil dengan menyisipkan tag id pada fungsi. Contoh pemanggilannya :
<table id="keren"></table>
1.
Tagar biasanya digunakan untuk menandai bagian-bagian utama template blog.

10. .keren{ // dengan dot
11. width:100%;
12. margin:10px;
13. color:red;
14. }
1.
2.
3.
4.
5.
Yang terakhir penulisan CSS yang diawali tanda titik "." atau dot, dapat dipanggil dengan
menyisipkan tag class pada fungsi. Contoh pemanggilannya :
<table class="keren"></table>
1.
Tanda titik ini biasanya digunakan untuk menandai elemen-elemen di dalam bagian-bagian utama
template blog.
HTML
Secara umum HTML berfungsi untuk menampilkan fungsi-fungsi yang telah didefinisikan sebelumnya oleh
XML.
Struktur HTML sendiri terdiri dari 2 bagian yaitu bagian head (kepala) dan body (tubuh).
<HTML>
<head>
// untuk meta, javascript, CSS
</head>
<body>
// untuk memanggil fungsi yang telah didefinisikan pada bagian head
</body>
</HTML>
1.
2.
3.
4.
5.
6.
7.
8.
Bagian head ini berisi pendeklarasian fungsi seperti meta, javascript, dan CSS. Fungsi-fungsi ini hanya
disimpan saja dalam memori head, belum ditampilkan.
Untuk menampilkan fungsi-fungsi di dalam memori head, dilakukan pemanggilan terhadap fungsi-fungsi
tersebut pada bagian body.
Contoh HTML di bawah ini menyimpan CSS wrapper pada bagian head dan dipanggil pada bagian body
untuk ditampilkan.
<HTML>
<head>
#wrapper {background: #fff; width: 90%; padding: 20px;margin:20px}
</head>
<body>
<div id='wrapper'>
isi konten
</div>
</body>
</HTML>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
Membuat Template Blog Sendiri Mulai Dari Nol
Sekarang kita akan langsung praktek. Sebaiknya Anda mengikuti tutorial di bawah sambil
mempraktekkannya. Buatlah blog baru yang khusus digunakan untuk belajar, jangan gunakan blog utama
Anda.
Silahkan hapus seluruh kode template Anda sebelumnya dengan cara seleksi semua kode (Ctrl+A),
kemudian tekan Delete atau Backspace untuk menghapusnya.
Membuat Struktur XML dan HTML
Silahkan copy dan paste kode di bawah ini ke dalam Template Editor, kemudian pilih Save Theme untuk
menyimpannya.
<!DOCTYPE html>
<HTML>
<head>
</head>
<body>
</body>
</HTML>
1.
2.
3.
4.
5.
6.
7.
8.
Apa yang terjadi? Error!
There should be one and only one skin in the theme, and we found: 0
Perhatikan kata skin yang saya cetak tebal. Jika diterjemahkan artinya kulit, tetapi dalam kasus ini berarti
tampilan. Anda tahu kan siapa yang bertanggung jawab mengatur tampilan?
Error di atas muncul karena kita belum mengatur tampilan blog kita. CSS berperan sebagai pengatur
tampilan. Jadi solusi untuk error di atas tentu saja adalah dengan menambahkan CSS.
Menambahkan CSS
Secara default CSS diletakkan di antara tag b:skin dan penutupnya.

<b:skin><![CDATA[
/*CSS di sini...*/
]]></b:skin>
1.
2.
3.
Sekarang coba letakkan CSS berikut pada bagian head, kemudian coba simpan.
<!DOCTYPE html>
<HTML>
<head>
<b:skin><![CDATA[
body {background-color: #cab894;background-position: center center;}
a:link {font-family: 'PT Serif Caption', serif; font-size: 15px; color:#3094db;}
a:hover {color: #4d4544;}
a {color: #3094db;}
]]></b:skin>
</head>
<body>
</body>
</HTML>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
Apa yang terjadi? Error lagi!
We did not find any section in your theme. A theme must have at least one b:section tag.
Perhatikan kata section yang tercetak tebal. Error di atas muncul karena kita belum menampilkan apapun di
dalam blog kita. CSS di atas hanya disimpan di dalam memori head, belum ditampilkan.
Ingat bahwa untuk menampilkan suatu fungsi, maka fungsi tersebut harus dipanggil terlebih dahulu. Untuk
memanggil fungsi salah satunya dilakukan menggunakan tag b:section.
Memanggil Bagian Posting
Contoh tag b:section untuk menampilkan bagian posting.

<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
1.
2.
3.
Sekarang masukkan tag b:section untuk postingan pada bagian body kemudian simpan.
<!DOCTYPE html>
<HTML>
<head>
<b:skin><![CDATA[
a {color: #3094db;}
]]></b:skin>
</head>
<body>
</b:section>
</body>
</HTML>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
Berhasil! Kali ini tidak ada error yang muncul.
Sekarang coba lihat tampilan blog Anda dengan memilih View Blog.
Seharusnya tampilan sementara blog Anda akan seperti gambar di bawah ini.
Perhatikan bagian tab browser yang Anda gunakan untuk membuka blog Anda. Di situ tertera alamat blog
Anda, bukan? Padahal seharusnya judul blog.
Menambah Tag Title
Cara membuat judul blog kita muncul pada tab browser adalah dengan menyisipkan tag title berikut.
<title><data:blog.title/></title>
1.
Masukkan tag title ke bagian head, kemudian simpan.

<!DOCTYPE html>
<HTML>
<head>
<b:skin><![CDATA[
a {color: #3094db;}
]]></b:skin>
</head>
<body>
</b:section>
</body>
</HTML>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
Lihat kembali blog Anda, harusnya sudah seperti gambar di bawah ini.
Penggunaan tag b:skin ternyata telah diatur untuk memuat CSS dasar (bundle.css) yang dihosting di
blogger.com (tidak ditanam langsung pada Template Editor), yang menyebabkan bertambah lamanya waktu
loading blog.
Sampai disini apakah Anda sudah siap untuk membuat template blog Anda sendiri? Jika sudah silahkan
lanjutkan membaca serial kedua panduan membuat template blog sendiri berikut : Membuat Blog yang
Ringan, Valid HTML5, dan SEO Friendly.
Selamat, Anda baru saja menyelesaikan serial pertama dari 11 serial panduan membuat template blog
sendiri. Pemahaman Anda sudah mencapai 5%.
Cara Membuat Blog yang Ringan, Valid HTML5, dan SEO

Friendly
Blog yang baik itu blog yang seperti apa sih?
Sobat Blogger, salah satu cara yang cukup efektif untuk mendatangkan pengunjung ke blog kita adalah
dengan membuat blog kita ditemukan pada halaman pertama mesin pencari (search engine).
Ketika pengunjung mencari informasi melalui Google, Yahoo, Bing, atau mesin pencari lainnya, maka
mereka akan cenderung mengunjungi situs-situs yang berada pada halaman pertama pencarian, bukan?
Hal ini dulu sempat membuat para webmaster berpikir bahwa blog yang baik adalah blog yang terlihat baik
oleh mesin pencari, bukan pengunjung.
Artinya mereka hanya berfokus membuat blog yang disukai oleh mesin pencari, tanpa mempedulikan konten
yang sebenarnya sangat penting untuk pengunjung.
Lain dulu lain sekarang. Mesin pencari juga memiliki algoritma canggih untuk menyeleksi blog-blog mana
saja yang benar-benar bermanfaat untuk pengunjung, mana blog yang dibuat asal-asalan.
Blog yang baik adalah blog yang dapat memberikan informasi yang dicari pengunjung dan mampu membuat
pengunjung betah berlama-lama berada di blog tersebut.
Mesin pencari dapat mengolah waktu yang dihabiskan oleh pengunjung ketika mengunjungi suatu blog
menjadi tingkat kepuasan pengunjung. Artinya blog yang disukai pengunjung akan disukai pula oleh mesin
pencari.
Blog yang baik memiliki 4 kriteria sebagai berikut :
 Desain yang tidak membuat frustasi, struktur dan navigasi yang jelas, font tulisan mudah dibaca.
 Ringan dan cepat loadingnya. Tidak dipenuhi widget-widget yang kurang berguna bagi pengunjung.
 Valid HTML5, penulisan syntax-nya mengikuti aturan yang ditetapkan W3C.
 Search engine friendly, baik di mata mesin pencari (pelengkap).
Tutorial kali ini mungkin akan membuat para master yang berjualan template premium geram, karena saya
akan membagikan tutorial membuat blog dengan 4 kriteria di atas secara gratis!
Cara Membuat Blog yang Ringan, Valid HTML5, dan SEO

Friendly
Ini adalah serial kedua dari 11 seri panduan membuat template blog sendiri, jika Anda belum membaca
serial pertama, silahkan baca terlebih dahulu : Cara Membuat Template Blog Blogger Sendiri Mulai Dari
Nol.
Terakhir kita sudah membuat template blog dengan source code berikut :
<!DOCTYPE html>
<HTML>
<head>
<b:skin><![CDATA[
a {color: #3094db;}
]]></b:skin>
</head>
<body>
</b:section>
</body>
</HTML>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
Percaya atau tidak dengan source code di atas blog kita sudah valid HTML5?
Cara Membuat Template Blog Valid HTML5
Anda dapat mengecek valid tidaknya blog Anda melalui W3C Validation Service. Masukkan alamat blog
Anda, kemudian pilih Check.
Perhatikan tidak ada error yang muncul, yang berarti blog Anda telah valid HTML5.
Meta Tag Dasar Blogger
Meta tag berfungsi sebagai sarana komunikasi pengelola blog untuk menginformasikan sesuatu kepada
mesin pencari.
Di dalam template blogger biasanya akan dipasang meta tag dasar yang dikemas dalam satu baris kode meta
tag all head content di bawah ini.
<b:include data='blog' name='all-head-content'/>
1.
Meta tag all head content berisi informasi dasar berikut sehingga sangat penting untuk diinformasikan
kepada mesin pencari.
1. Favicon
2. Canonical untuk menghindari duplikat konten
3. Atom RSS
4. OpenID delegate untuk berkomentar dengan openID
5. Meta description halaman posting
6. Post thumbnail
Masalahnya adalah ketika kita menyisipkan meta tag all head content ke dalam bagian head, akan muncul
error pada hasil validasi. Coba sisipkan meta tag tersebut pada bagian head, kemudian simpan, dan ulangi
validasi.
<!DOCTYPE html>
<HTML>
<head>
<b:include data='blog' name='all-head-content'/>
<b:skin><![CDATA[
a {color: #3094db;}
]]></b:skin>
</head>
<body>
</b:section>
</body>
</HTML>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
Maka seharusnya akan muncul error seperti gambar di bawah ini.

Lalu solusinya bagaimana? Solusinya adalah dengan mengubah meta tag all head content dengan meta tag
berikut :
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon'
type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"'
expr:title='data:blog.title + " - Atom"' rel='alternate'
type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"'
expr:title='data:blog.title + " - RSS"' rel='alternate'
type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId +
"/posts/default"' expr:title='data:blog.title + " - Atom"'
rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + " - " + data:blog.title'
name='description'/>
</b:if>
</b:if>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
Sehingga source code template blog kita menjadi seperti berikut :

<!DOCTYPE html>
<HTML>
<head>
</b:if>
<b:else/>
</b:if>
</b:if>
<b:skin><![CDATA[
a {color: #3094db;}
]]></b:skin>
</head>
<body>
</b:section>
</body>
</HTML>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
Silahkan cek kembali validasi blog Anda, seharusnya blog Anda sudah kembali valid HTML5.
Cara Membuat Template Blog SEO Friendly
Saya tidak akan membahas SEO secara detail di postingan ini karena SEO itu sangat kompleks dan kita
masih belajar tahap awal. Di sini hanya akan dibahas SEO praktis sebagai langkah awal saja.
Sebelumnya saya pernah berkata bahwa blog yang baik menurut pengunjung maka akan baik juga bagi
mesin pencari.
Pada source code template blog terakhir, dilakukan pemanggilan tag title yang berfungsi menampilkan judul
blog kita pada tab browser.
1.
Tag title di atas tidak dinamis sama sekali. Halaman apapun di dalam blog kita yang dikunjungi, pada tab
browser hanya akan menampilkan judul blog kita.
Sebagai contoh ketika saya mencoba mengakses halaman yang tidak ditemukan atau page not found di
dalam blog kita, maka tab pada browser tetap akan menampilkan judul blog kita.
Padahal seharusnya tab browser menampilkan informasi halaman yang sedang dikunjungi. Jadi misalkan
saya mengakses halaman yang tidak ditemukan dalam blog saya, maka tab pada browser juga menunjukkan
informasi halaman yang sedang saya kunjungi seperti gambar di bawah ini.
Solusinya adalah dengan mengubah tag title sebelumnya,
1.
dengan tag title di bawah ini.


<b:if cond='data:blog.url ==
data:blog.homepageUrl'><title><data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == "item"'><title><data:blog.pageName/> -
<data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == "archive"'><title>Archive for
<data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType ==
"static_page"'><title><data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == "index"'><b:if
cond='data:blog.searchLabel'><title><data:blog.title/> -
<data:blog.pageName/></title></b:if></b:if>
<b:if cond='data:blog.pageType == "error_page"'><title>Page Not
Found</title></b:if>
<b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.url !=
data:blog.homepageUrl'><title><data:blog.pageTitle/> - All Post</title></b:if></b:if>
1.
2.
3.
4.
5.
6.
7.
8.
Akan saya jelaskan satu per satu.
 Ketika yang dikunjungi adalah homepage (halaman utama) blog, maka tab browser akan
menampilkan "Judul Blog" saja, diatur dalam tag berikut.
1.
 Ketika yang dikunjungi adalah halaman posting, akan menampilkan "Judul Posting - Judul Blog".
<b:if cond='data:blog.pageType == "item"'><title><data:blog.pageName/>
- <data:blog.title/></title></b:if>
1.
 Ketika yang dikunjungi adalah halaman arsip, akan menampilkan "Archive for Judul Posting".

1.
 Ketika yang dikunjungi adalah halaman statis, akan menampilkan "Judul Blog".
1.
 Ketika yang dikunjungi adalah halaman index, akan menampilkan "Judul Posting - Judul Blog"
berdasarkan label.

1.
 Ketika yang dikunjungi adalah halaman error (tidak ditemukan), akan menampilkan "Page Not
Found".

1.
 Ketika yang dikunjungi adalah halaman index, akan menampilkan "Judul Posting - All Post".

data:blog.homepageUrl'><title><data:blog.pageTitle/> - All
Post</title></b:if></b:if>
1.
Jadi sekarang, kita sudah memiliki source code template blog dengan title tag yang SEO friendly.
<!DOCTYPE html>
<HTML>
<head>
</b:if>
<b:else/>
</b:if>
</b:if>

<b:skin><![CDATA[
a {color: #3094db;}
]]></b:skin>
</head>
<body>
</b:section>
</body>
</HTML>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
Cara Membuat Template Blog yang Ringan dan Fast Loading
Selanjutnya kita akan membuat template blog kita menjadi sangat ringan dan cepat loadingnya.
Sebelumnya kita cek terlebih dahulu kecepatan loading blog kita melalui Google PageSpeed Insights.
Masukkan alamat blog Anda kemudian pilih Analyze.
Perhatikan perbedaan hasil yang diperlihatkan ketika blog dibuka pada perangkat mobile, dan pada
perangkat desktop. Bedanya sangat signifikan. Pada tampilan mobile didapat nilai 75, sementara pada
tampilan desktop diperoleh nilai 91.
Hal ini terjadi karena secara default Blogger memang membedakan template mobile dan desktop. Jadi
modifikasi template yang telah kita lakukan sampai di sini hanya berlaku jika blog kita dibuka di perangkat
desktop. Ketika blog dibuka pada perangkat mobile, template-nya akan berubah menjadi template bawaan
Blogger.
Menonaktifkan Template Mobile
Solusinya adalah dengan menonaktifkan template mobile, dapat Anda lakukan dengan masuk ke Theme,
kemudian pilih roda gerigi yang terletak di bawah template mobile.
Pilih No. Show desktop theme on mobile devices. Save untuk menonaktifkan template mobile.
Sekarang cek kembali kecepatan blog Anda. Ternyata skornya masih tetap sama! Tidak ada perubahan.
Tetapi setidaknya sekarang ketika blog dibuka pada perangkat mobile akan sama tampilannya dengan
tampilan desktop.
Sekarang perhatikan template blog Anda baik-baik.
Belum ada posting, tidak ada widget, font standar, tidak ada hal-hal yang bisa dikatakan memberatkan
loading. Tetapi kenapa skornya mentok hanya di 91? Padahal source code template blog kita sangat
sederhana.
Hal ini diakibatkan karena tanpa sepengetahuan kita, secara default Blogger memuat Javascript dan CSS
yang dihosting (tidak tertanam langsung di template), sehingga memberatkan loading blog kita.
Lalu bagaimana solusinya?
Selain menunjukkan skor kecepatan blog kita dalam rentang nilai maksimal 100, Google PageSpeed Insights
juga menawarkan solusi yang dapat dilakukan pengelola blog untuk mempercepat kecepatan loading blog
mereka.
Perhatikan pada bagian Possible Optimizations. Ada 2 masalah utama yang menyebabkan template blog kita
lambat dimuat. Yang pertama karena CSS bundle, yang kedua karena Leverage Browser Caching.
Menghapus Javascript Google Plus One
Kita mulai dari Leverage Browser Caching terlebih dahulu. Berisi javascript Google Plus One yang dimuat
oleh blog kita, padahal kita tidak menggunakannya.
Bagaimana cara menghapusnya sedangkan javascript tersebut tidak ada di dalam source code?
Solusinya dengan mengubah tag penutup body di bawah ini.

</body>
1.
Menjadi tag penutup body yang telah dimodifikasi seperti di bawah ini.

1.
Jika Anda mengecek kembali kecepatan loading blog Anda, permasalahan Leverage Browser Caching tidak
akan ditemukan lagi, tetapi skornya tetap, tidak bertambah.
Hal ini disebabkan karena kita belum mengatasi masalah utama yang menyebabkan lemotnya blog kita,
yaitu 2 CSS bundle yang dihosting, bukan ditanam secara langsung di template, sehingga membutuhkan
waktu lebih untuk melakukan kontak server terlebih dahulu.
Menghilangkan CSS Bundle
Kita dapat meningkatkan kecepatan loading blog kita dengan menghilangkan CSS bundle, yang dapat
dilakukan dengan mengubah tag head berikut.
<head>
1.
Menjadi tag head modifikasi di bawah ini.

<head>
1.
Modifikasi juga perlu dilakukan pada tag penutup head.

</head>
1.
Menjadi seperti ini.


1.
Sekarang source code template blog Anda menjadi seperti berikut.

<!DOCTYPE html>
<HTML>
<head>
</b:if>
<b:else/>
</b:if>
</b:if>

<b:skin><![CDATA[
a {color: #3094db;}
]]></b:skin>

<body>
</b:section>
</body>
</HTML>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
Simpan dan lihat tampilan blog Anda, Anda akan menemukan sedikit perubahan.
Perhatikan ada 2 tulisan No Posts di blog kita. Hal ini terjadi karena CSS bundle sebenarnya juga memiliki
peran sebagai pengatur tampilan blog kita. Oleh karena itu, menghilangkan CSS bundle sedikit banyak akan
mempengaruhi tampilan blog kita.
Solusinya adalah dengan menanamkan style CSS yang saya dapatkan dari dalam file CSS bundle berikut
langsung di dalam template kita.
#blog-pager-newer-link {float: left;}
#blog-pager-older-link {float: right;}
#blog-pager {text-align: center;margin: 20px 0px 0px 1px;}
.status-msg-wrap{font-size:110%;width:90%;margin:10px auto;position:relative}
.status-msg-border{border:1px solid #000;filter:alpha(opacity=40);-moz-
opacity:.4;opacity:.4;width:100%;position:relative}
.status-msg-bg{background-color:#ccc;opacity:.8;filter:alpha(opacity=30);-moz-
opacity:.8;width:100%;position:relative;z-index:1}
.status-msg-body{text-align:center;padding:.3em 0;width:100%;position:absolute;z-
index:4}
.status-msg-hidden{visibility:hidden;padding:.3em 0}
.status-msg-wrap a{padding-left:.4em;text-decoration:underline}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
Sehingga source code template blog kita akan menjadi seperti berikut.
<!DOCTYPE html>
<HTML>
<head>
</b:if>
<b:else/>
</b:if>
</b:if>

<b:skin><![CDATA[
a {color: #3094db;}

index:4}
]]></b:skin>

<body>
</b:section>
</body>
</HTML>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
Simpan template blog Anda dan lihat tampilannya sekarang.

Cek kecepatan loading blog Anda sekarang. Seharusnya Anda mendapatkan skor hampir sempurna baik
pada tampilan mobile maupun desktop, 99!
Sampai tahap ini apakah Anda paham dengan langkah-langkah yang saya berikan? Jika belum silahkan
tinggalkan pertanyaan pada kolom komentar. Jika sudah paham silahkan melanjutkan membaca serial ketiga
panduan membuat template blog sendiri berikut : Membuat Struktur Dasar Template Blog Blogger.
Selamat, Anda baru saja menyelesaikan serial kedua dari 11 serial panduan membuat template blog sendiri.
Pemahaman Anda sudah mencapai 10%.
Membuat Struktur Dasar Template Blog Blogger

Saat ini Anda sedang membaca serial ketiga dari 11 seri panduan membuat template blog sendiri. Pada serial
sebelumnya kita telah berhasil membuat blog yang ringan, valid HTML5, dan SEO Friendly dengan source
code template blog sebagai berikut.
<!DOCTYPE html>
<HTML>
<head>
</b:if>
<b:else/>
</b:if>
</b:if>

<b:skin><![CDATA[
/* 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, font, img, ins, kbd, q, s,
samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, fieldset,
form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding:
0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;height:
auto;border-top-width: 0;border-bottom-width: 0;border-left-width: 0;}
blockquote:before, blockquote:after,q:before, q:after {content: ”;content: none;}
blockquote, q {quotes: none;}
:focus {outline: 0;}
.clear {clear: both;display: block;height: 1px;overflow: hidden;margin: 0;padding: 0;}
ins {text-decoration: none;}
del {text-decoration: line-through;}
table {border-collapse: collapse;border-spacing: 0;}

a {color: #3094db;}
index:4}
]]></b:skin>

<body>
</b:section>

</HTML>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
Kali ini kita akan belajar mengatur tampilan struktur dasar atau tata letak template blog, yang tentu saja
dilakukan menggunakan CSS.
Berbicara tentang CSS, sebelumnya kita telah belajar bahwa CSS di dalam template blog di letakkan di
dalam tag b:skin.
<b:skin><![CDATA[
/*CSS di sini...*/
]]></b:skin>
1.
2.
3.
Sebenarnya selain diletakkan di dalam tag b:skin, CSS juga dapat diletakkan di dalam tag style berikut.
<style type='text/css'>
/*CSS di sini...*/
</style>
1.
2.
3.
Semua tag CSS yang diletakkan di dalam tag b:skin memiliki warna yang sama, sedangkan jika diletakkan
di dalam tag style akan berwarna spesifik sehingga memudahkan pengeditan. Perbedaannya silahkan
perhatikan gambar di bawah ini.
Selain itu, berdasarkan pengalaman, CSS yang diletakkan di dalam tag style lebih terjamin ditampilkan pada
browser lintas platform, daripada ketika ditempatkan di dalam tag b:skin.
Oleh karena itu saya sangat merekomendasikan untuk meletakkan CSS template blog Anda di dalam tag
style.
Mengubah tag b:skin Menjadi tag style Untuk Penempatan CSS
Pertama amankan CSS Anda terlebih dahulu dengan mem-backup-nya ke dalam notepad.
Kemudian nonaktifkan tag b:skin dengan cara mengubah tag b:skin berikut.
<b:skin><![CDATA[
]]></b:skin>
1.
2.
Menjadi seperti ini.

<style type="text/css">
<body>
</b:section>

</HTML>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
6 Elemen Utama Template Blog
Berdasarkan tata letaknya, secara umum template blog terdiri dari 6 elemen utama, yaitu :
1. Body
Body atau tubuh merupakan bagian dari HTML yang bertanggung jawab untuk menampilkan
elemen-elemen blog. Semua elemen blog harus berada di dalam body agar dapat ditampilkan.
2. Wrapper
Wrapper atau sering disebut juga sebagai outer-wrapper merupakan wadah pembungkus terluar
elemen-elemen blog setelah body.
3. Header-Wrapper
Header-wrapper merupakan bagian yang bertanggung jawab terhadap tampilan header blog. Header-
wrapper menempati bagian paling atas sebuah blog. Biasanya berisi informasi judul dan deskripsi
blog.
4. Content-Wrapper
Content-wrapper adalah bagian yang mengatur tampilan posting. Posisinya biasanya berada di
tengah dan berfungsi sebagai tempat konten atau isi blog.
5. Sidebar-Wrapper
Sidebar-wrapper adalah bagian yang mengatur tampilan sidebar. Letaknya biasanya berdampingan
dengan content-wrapper karena bertindak sebagai pendukung. Sidebar-wrapper biasanya berisi
widget atau gadget, informasi penulis, kolom pencarian, dan sebagai tempat iklan.
6. Footer-Wrapper
Footer-wrapper merupakan bagian yang bertanggung jawab mengatur tampilan footer blog. Footer-
wrapper menempati bagian paling bawah sebuah blog. Biasanya footer-wrapper dimanfaatkan oleh
pengelola blog sebagai tempat untuk menginformasikan kontak pengelola blog atau sebagai tempat
memasang iklan.
Gambar di atas merupakan susunan elemen-elemen template blog yang akan kita buat.
Sebenarnya Anda bisa menambah atau mengurangi jumlah dan mengatur posisi elemen blog sesuka hati.
Namun sebagai awalan, kita akan membuat template blog dengan susunan elemen blog sederhana seperti
gambar di atas.
Menambahkan CSS Struktur Dasar Template Blog

Pertama yang harus kita lakukan adalah mengatur tampilan struktur dasar template blog kita menggunakan
CSS di bawah ini.
#wrapper {background: #fff; width: 90%; padding: 20px; margin: 20px auto;}
#header-wrapper {background:#fff; width: 100%; height:auto; margin: 0 auto; border:1px
solid #eaeaea;}
.header {text-align:center}
#content-wrapper {background: transparent; width:65%; float:left; border:1px solid
#eaeaea; margin:10px 0;}
#sidebar-wrapper {background: transparent; width:30%; float:right; border:1px solid
#footer-wrapper {background:transparent; width:100%; border:1px solid #eaeaea;
margin:10px 0;}
.clearfix:after {visibility: hidden; display: block; font-size: 0; content: "

"; clear: both; height: 0;}
1.
2.
3.
4.
5.
6.
7.
8.
Penjelasan singkat :
 #wrapper untuk mengatur template secara keseluruhan.

 #header-wrapper mengatur tampilan header.
 .header untuk mengatur bagian header secara lebih spesifik. Misal mengatur judul blog.
 #content-wrapper mengatur bagian konten atau posting.
 #sidebar-wrapper mengatur tempat widget.
 #footer-wrapper mengatur bagian footer.
 .clearfix ditambahkan untuk menghilangkan efek float agar tidak merusak tampilan elemen
selanjutnya.
Memanggil Elemen-elemen Utama Template Blog
Selanjutnya adalah menulis syntax pemanggilan terhadap elemen-elemen utama template blog yang
diletakkan di dalam bagian body.
<div id='wrapper'>
<header id='header-wrapper'><b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Ganteng id (Header)'
type='Header'></b:widget>
</b:section>
</header>
<div class='clearfix'/>
<aside id='content-wrapper'>
</b:section>
</aside>
<aside id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
</aside>
<footer id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'></b:section>
</footer>
</div>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
Jadi sekarang source code template kita menjadi seperti di bawah ini.
<!DOCTYPE html>
<HTML>
<head>
</b:if>
<b:else/>
</b:if>
</b:if>


]]></b:skin>
/* RESET */

a {color: #3094db;}
solid #eaeaea;}
margin:10px 0;}


index:4}
</style>

<body>
<div id='wrapper'>
</b:section>
</header>
</b:section>
</aside>
</aside>
</footer>
</div>

</HTML>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
Sekarang simpan template blog Anda dan lihat hasilnya, seharusnya akan tampak seperti gambar di bawah
ini.
Setelah menyimpan template blog Anda, cobalah menutup tab browser yang sedang Anda gunakan.
Perhatikan peringatan yang muncul seolah Anda belum menyimpan template Anda. Jangan khawatir, pilih
saja Leave Page, template Anda sudah tersimpan, kok.
Peringatan muncul karena secara default Blogger akan menambahkan elemen-elemen pelengkap di dalam
content-wrapper seperti kotak komentar, penanggalan posting, posting mobile, sharing button, dan lain-lain.
Meskipun tidak semua elemen yang ditambahkan tersebut kita gunakan semua, namun hingga sekarang
belum ada yang berhasil menghapus dan mengatur ulang secara total elemen-elemen tersebut. Tapi tenang
saja, elemen-elemen tersebut sudah saya cek tidak mempengaruhi validasi maupun kecepatan blog.
Bahkan pada tahap selanjutnya kita juga akan memodifikasi elemen-elemen tersebut.
Silahkan melanjutkan membaca serial keempat panduan membuat template blog sendiri berikut : Membuat
Menu Navigasi Blog.
Selamat, Anda baru saja menyelesaikan serial ketiga dari 11 serial panduan membuat template blog sendiri.
Pemahaman Anda sudah mencapai 20%. Kini Anda sudah mengerti bagaimana cara membuat struktur dasar
template blog sederhana.
Cara Membuat Menu Navigasi Blog Horizontal Sederhana

Salah satu ciri blog yang disukai oleh pengunjung adalah memiliki menu navigasi yang jelas sehingga tidak
membingungkan pengunjung dalam menelusuri halaman-halaman yang ada di blog tersebut.
Pada serial sebelumnya kita telah berhasil membuat struktur dasar template blog dengan source code
berikut.
<!DOCTYPE html>
<HTML>
<head>
</b:if>
<b:else/>
</b:if>
</b:if>


]]></b:skin>
/* RESET */

a {color: #3094db;}
solid #eaeaea;}
margin:10px 0;}


index:4}
</style>

<body>
<div id='wrapper'>
</b:section>
</header>
</b:section>
</aside>
</aside>
</footer>
</div>

</HTML>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
Pada serial keempat dari 11 seri panduan membuat template blog sendiri ini kita akan belajar bagaimana
cara membuat menu navigasi blog yang sederhana.
Saya sebut sederhana karena menu navigasi ini murni merupakan modifikasi CSS saja, sehingga dijamin
sangat ringan.
Ide dasar menu navigasi ini berasal dari Unordered List HTML, yang dipanggil menggunakan tag ul
(unordered list). Setiap itemnya berada di dalam tag li (list).
Karena kita akan membuat menu navigasi, maka tag ul dan tag li dapat diletakkan di dalam tag nav seperti
berikut.
<nav>
<ul>
<li><a href="https://teknomia.blogspot.co.id/">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
1.
2.
3.
4.
5.
6.
7.
8.
Di sini Anda juga dapat melihat tag a untuk membuat link. Jadi ketika menu navigasi di-klik masing-masing
akan mengarah menuju halaman yang kita tentukan.
Posisi menu navigasi diletakkan di bawah header wrapper, di atas content dan sidebar wrapper. Sehingga di
dalam source code template blog Anda, tag nav diletakkan di bawah tag penutup header.
...
</b:section>
</header>
/* Menu Navigasi di sini */
...
1.
2.
3.
4.
5.
6.
7.
Jika Anda kesulitan mencari tag penutup header, gunakan fitur pencarian dengan menekan Ctrl+F di dalam
Template Editor.
Coba praktekkan dan simpan template blog Anda. Seharusnya tampilan blog Anda akan seperti gambar di
bawah ini.
Selanjutnya akan kita atur tampilannya menggunakan CSS, pertama menghilangkan bullet atau lingkaran
hitam yang berada di depan menu. Caranya adalah dengan menambahkan atribut list-style-type:none di
dalam tag ul.
#menu {width:100%;}
#menu ul {list-style-type: none;}
1.
2.
Width 100% saya tambahkan di sini agar lebar menu navigasi sama dengan lebar wrapper (horizontal).
Jangan lupa menambahkan ID CSS di dalam tag nav agar CSS di atas dapat dimuat.
<nav id='menu'>
1.
Sekarang kita dapat melihat menu navigasi kita sudah tidak ada bullet-nya.
Sekarang kita akan membuat setiap item menu navigasi yang terletak di dalam tag li tersusun secara
horizontal, bukan vertikal. Caranya dapat dilakukan dengan menerapkan CSS float:left pada tag li.
#menu {width: 100%;}
#menu ul li {float: left;}
1.
2.
3.
Sekarang menu navigasi kita telah tersusun menyamping, bukan ke bawah lagi. Tetapi tampilannya masih
kacau, masih perlu sentuhan beberapa CSS lagi untuk mempercantik menu navigasi kita.
Ubah warna background menjadi warna gelap (background-color), dan tentukan ketinggian pasti menu
navigasi (height).
#menu {width: 100%; background-color: #4d4544; height: 35px;}
1.
2.
3.
Tampilan blog Anda sekarang menjadi seperti ini.
Tambahkan CSS berikut untuk mengatur tampilan tag a di dalam kotak menu navigasi.
#menu ul li a {display: block; line-height: 35px; padding: 0 15px;}
1.
2.
3.
4.
Display:block dan line-height ditambahkan agar bukan hanya text link saja yang dapat diklik, tetapi juga
kotak background menunya. Padding ditambahkan untuk mengatur jarak dalam antar menu.
Tambahkan CSS untuk mengatur tampilan tag a:hover di bawah ini, berfungsi mengatur tampilan ketika
kotak menu navigasi disorot oleh kursor (hover).
#menu ul li a:hover {color: #000; background: #BABABA;}
1.
2.
3.
4.
5.
CSS color di atas akan membuat warna link teks berubah menjadi #000 (hitam). Background mengatur
warna kotak menu yang bertindak sebagai latar belakang.
Tampilan blog Anda dengan menu navigasi yang baru saja kita buat seharusnya seperti gambar di bawah ini.
Sekarang saya ingin membuat tulisan di dalam menu navigasi menjadi huruf kapital semua, maka saya
cukup menambahkan text-transform:uppercase di dalam tag menu.
#menu {width: 100%; background-color: #4d4544; height: 35px; text-transform:
uppercase;}
1.
2.
3.
4.
5.
Kemudian saya ingin menghilangkan garis bawah pada tulisan. Caranya dengan menambahkan text-
decoration:none di dalam tag a menu navigasi.
uppercase;}
#menu ul li a {display: block; line-height: 35px; padding: 0 15px; text-
decoration:none;}
1.
2.
3.
4.
5.
Sepertinya tata letak menu navigasi kita agak ke tengah sedikit. Saya ingin menu Home dimulai dari pojok
kiri, berarti saya harus mengatur padding tag ul menjadi nol.
uppercase;}
#menu ul {list-style-type: none; padding: 0;}
decoration:none;}
1.
2.
3.
4.
5.
Kemudian saya ingin menambahkan garis border berwarna biru di bagian bawah menu navigasi. Caranya
adalah dengan menambahkan border bottom pada tag menu.
#menu {width: 100%; background-color: #4d4544; height: 35px; text-transform: uppercase;
border-bottom: 4px solid #3094db;}
decoration:none;}
1.
2.
3.
4.
5.
Sepertinya border bawah kurang cocok, saya ingin memberi pembatas pada tiap-tiap menu. Lakukan dengan
menambahkan saja border-right pada tag a menu navigasi.
uppercase;}
decoration:none; border-right: 1px solid #cab894;}
1.
2.
3.
4.
5.
Saya pikir pembatas antar menu sudah biasa, saya ingin tiap menu memiliki warna background yang
berbeda saja. Caranya tambahkan tag nth-child berikut.
uppercase;}
#menu ul li:nth-child(1){background-color:#4285F4;}
#menu ul li:nth-child(2){background-color:#EA4335;}
#menu ul li:nth-child(3){background-color:#FBBC05;}
#menu ul li:nth-child(4){background-color:#34A853;}
decoration:none;}
1.
2.
3.
4.
5.
6.
7.
8.
9.
Wow, saya suka menu navigasi warna-warni ini, tetapi tulisan menu-menunya jadi sulit untuk dibaca.
Solusinya dengan mengubah warnya tulisannya menjadi lebih kontras dengan memainkan color pada tag a
menu navigasi. Di sini saya akan membuat warnanya menjadi putih.
uppercase;}
decoration:none; color:#fff;}
1.
2.
3.
4.
5.
6.
7.
8.
9.
Sempurna! Saya akan menggunakan menu navigasi warna-warni ini. Sekarang source code template blog
kita menjadi seperti berikut.
<!DOCTYPE html>
<HTML>
<head>
</b:if>
<b:else/>
</b:if>
</b:if>


]]></b:skin>
/* RESET */

a {color: #3094db;}
solid #eaeaea;}

uppercase;}
decoration:none; color:#fff;}

margin:10px 0;}


index:4}
</style>

<body>
<div id='wrapper'>
</b:section>
</header>
<nav id='menu'>
<ul>
<li><a href="https://teknomia.blogspot.co.id/">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</b:section>
</aside>
</aside>
</footer>
</div>

</HTML>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
Selamat, Anda baru saja menyelesaikan serial keempat dari 11 serial panduan membuat template blog
sendiri. Sekarang Anda dapat melanjutkan membaca serial kelima panduan membuat template blog sendiri
berikut : Membuat Desain Header.
Pemahaman Anda sudah mencapai 30%. Kini Anda sudah mengerti bagaimana cara membuat menu
navigasi blog horizontal sederhana.
Cara Mudah Mengganti Nama dan Alamat URL Blog
Admin Wednesday, October 26, 2016
Cara Mudah Mengubah Mengganti Nama dan Alamat URL Blog - Jika Anda pemilik blog ber-platform
Blogger, mengubah nama dan alamat URL blog adalah hal yang sangat mudah untuk dilakukan.
Meskipun sangat mudah dilakukan, bukan berarti saya menyarankan Anda untuk sering mengganti nama
atau alamat blog Anda karena keduanya merupakan identitas Anda di dunia maya.
Blog yang konsisten menyediakan informasi bermanfaat bagi para pengunjungnya akan mudah untuk
dikenal dan diingat. Karena itulah identitas blog baiknya dipertahankan mulai dari awal pembuatan blog.
Namun jika Anda memang memiliki alasan yang kuat sehingga harus mengubah nama atau alamat blog
Anda, simak caranya di bawah ini.
Cara mengganti nama dan alamat URL blog dapat dilakukan bersamaan karena pengeditan dapat dilakukan
dalam satu sub menu yang sama, yaitu pada Basic Setting.
Nah kali ini blog Dua Rupa akan berbagi cara tentang mengubah nama dan alamat blog. Baca juga Cara
Membuat Tulisan Berjalan di Blog (Marquee).
Cara Mengganti Nama Blog
Nama blog atau judul blog merupakan identitas yang paling sering diingat oleh pengunjung, seperti halnya
sebuah merk pada produk.
Biasanya pemilik blog memberi judul blog mereka dengan nama mereka sendiri atau nama yang
merepresentasikan isi dari blog mereka.
Untuk mengubah nama blog, klik Edit pada bagian Title.
Klik tombol Save changes untuk menyimpan perubahan.
Cara Mengganti Alamat URL Blog
Alamat URL blog atau bisa disebut dengan domain blog merupakan identitas unik yang digunakan untuk
berkunjung ke blog Anda. Sifatnya unik karena memang hanya ada satu saja di dunia.
Alamat blog yang menggunakan platform Blogger akan selalu diikuti kata blogspot pada domainnya. Dapat
diganti dengan domain dotcom atau domain lain tanpa embel-embel blogspot, namun Anda harus membayar
penyedia domain untuk menyewa domain tersebut.
Untuk mengubah alamat URL blog, klik Edit pada bagian Blog Address.
Anda hanya dapat menggunakan alamat blog yang belum digunakan oleh orang lain.
Tekan Save untuk menyimpan.
Sekian tutorial mudah cara mengganti nama dan alamat URL blog. Jika menemui kesulitan, jangan sungkan
untuk bertanya pada kolom komentar di bawah.
Cara Mudah Mengganti Template Blog Blogger Terbaru

Admin Thursday, November 10, 2016
Cara Mudah Mengubah Template Blog Blogger Untuk Pemula - Setelah sebelumnya kita telah belajar
membuat blog di Blogger, kali ini blog Dua Rupa akan berbagi tutorial mengubah template blog.
Template merupakan source code secara keseluruhan dari sebuah blog yang menggunakan bahasa HTML
sebagai bahasa pemrogramannya. Source code tersebut terdiri dari CSS yang mengatur desain dan tampilan
blog, serta script-script yang memanggil widget dan elemen blog serta menjalankan perintah sehingga
terbentuklah sebuah blog secara utuh.
Pada kesempatan kali ini kita tidak akan membahas terlalu dalam mengenai template blog. Kita hanya akan
belajar bagaimana cara mengganti template blog kita dengan template yang telah tersedia banyak sekali di
internet.
2 Cara Mudah Mengganti Template Blog Blogger Terbaru
Ada 2 cara untuk mengubah template Blogger, dan keduanya gampang sekali dilakukan. Namun
sebelumnya, download terlebih dahulu template Blogger secara gratis di internet. File template tersebut
berformat XML. Biasanya file template dikompres dalam bentuk RAR, jadi Anda perlu mengekstraknya
terlebih dahulu hingga Anda dapati file template berformat XML.
1. Upload Template Baru Blogger
Cara pertama adalah dengan mengupload file template XML tersebut ke Blogger.
1. Masuk ke dashboard Blogger, kemudian pilih Template. Pilih Backup/Restore yang terletak di pojok
kanan atas.
2. Akan muncul jendela pop up. Silahkan klik Download Template untuk mem-backup template Anda
sebelumnya. Jika sudah, klik Browse untuk memilih file XML template baru blog Anda.
3. Pilih file XML template baru blog yang telah Anda miliki. Kemudian klik Open.
4. Klik Upload untuk mengunggah template baru Anda.
Tunggu hingga proses upload selesai.

Jika berhasil maka template blog Anda secara otomatis telah berganti.
2. Copy Paste Script Template

Jika menemui error atau kegagalan seperti gambar di atas, Anda dapat menggunakan cara kedua. Cara kedua
adalah dengan meng-copy semua script di dalam file template XML, kemudian mem-paste-kannya ke dalam
Edit HTML template blog.
1. Klik kanan pada file XML template blog yang Anda miliki, kemudian pilih Open with. Pilih Notepad.
2. Copy semua script dalam notepad tersebut. Gunakan shortcut Ctrl+A untuk mem-blok semua teks,
kemudian shortcut Ctrl+C untuk meng-copy script tersebut.
3. Masuk ke dashboard Blogger, kemudian pilih Template, pilih Edit HTML.
4. Blok semua script pada kotak Edit HTML dengan cara klik kanan, Select All. Atau dengan shortcut
Ctrl+A.
5. Delete semua script tersebut untuk diganti dengan script template baru.
6. Paste-kan script dari notepad ke dalam kotak HTML menggantikan script template sebelumnya.
7. Klik Save Template untuk menyimpan template.

Cek template baru blog Anda dengan mengklik View Blog.
Sekian artikel Cara Mudah Mengganti Template Blog Blogger. Jika belum paham, silahkan sampaikan
pertanyaan Anda di kotak komentar di bawah.
Cara Membuat Blog Gratis di Blogger untuk Pemula Terbaru

Admin Monday, October 17, 2016
Bagaimana Cara Membuat Blog Pribadi Sendiri di Blogger? - Blog adalah sebuah media untuk
mengekspresikan kreatifitas di dunia maya.
Anda dapat menulis pengalaman pribadi, mengunggah gambar dan video, mempromosikan produk,
membuat berita, dan masih banyak yang dapat Anda lakukan melalui sebuah blog.
Bahkan jika Anda jeli melihat peluang, Anda dapat menggunakan blog Anda sebagai lahan yang
menghasilkan uang. Banyak sekali orang-orang di luar sana yang sudah menghasilkan dolar hanya dari blog
gratisan.
Namun sebelum bicara lebih jauh, para Blogger senior juga melakukan langkah pertama yang sama dengan
yang dilakukan oleh Blogger pemula, yaitu membuat blog baru.
Nah, kali ini blog Dua Rupa akan sharing tentang bagaimana cara membuat blog baru gratis di Blogger.
Simak tutorialnya di bawah ini.
Cara Membuat Blog Baru Gratis di Blogger
1. Pastikan Anda sudah memiliki akun Google. Untuk mendaftar, silahkan ikuti tutorial berikut Cara
Membuat Email Baru di Google untuk Pemula.
2. Masuk ke https://www.blogger.com. Pilih Create Your Blog.

Karena Blogger adalah mesin blog milik Google, Anda cukup menggunakan akun Google Anda untuk Sign
in. Masukkan password Anda di sini, kemudian klik Sign in.
3. Jika akun Google Anda belum diverifikasi, Anda akan diminta untuk memverifikasi akun Anda. Caranya
cukup mudah, masukkan nomor HP Anda pada kotak Phone number, pilih Get code. Tunggu sejenak SMS
yang berisi kode verifikasi dari Google, kemudian lakukan verifikasi.
4. Untuk akun Blogger Anda, Anda akan diminta memilih akun dalam bentuk Google+ atau profil Blogger
biasa. Akun Google+ memungkinkan Anda untuk dapat berinteraksi dengan pembaca blog Anda melalui
media sosial milik Gogle, Google Plus. Di sini saya memilih menggunakan akun Blogger biasa saja.
5. Setelah itu Anda akan diminta untuk membuat username akun Blogger Anda. Username ini digunakan
untuk Login Blogger, bersifat unik dan usahakan singkat untuk mempercepat proses Login. Pilih Continue
to Blogger.
6. Akun Blogger Anda telah dibuat. Mulailah untuk membuat blog pertama Anda. Pilih New Blog.
7. Pada tahap ini Anda akan membuat judul, alamat, dan template blog baru Anda. Semuanya dapat diubah
di kemudian hari, namun khusus untuk alamat blog usahakan komitmen di awal, jangan diganti-ganti lagi.
Jika sudah semua pilih Create blog!
 Title : judul blog
 Address : alamat blog
 Template : desain blog
7. Blog Anda sudah jadi. Kini orang-orang di seluruh dunia bisa mengunjungi blog Anda. Klik View
blog untuk melihat blog Anda.
Cara Membuat Link Aktif di Kotak Komentar Blog

Admin Thursday, November 17, 2016
Cara Membuat Link Hidup di Kotak Komentar Blog - Blogwalking adalah komunikasi antar admin blog
dengan cara saling mengunjungi blog masing-masing.
Agar blog kita juga dikunjungi, kita harus memberitahukan link blog kita kepada orang lain. Hal ini dapat
dilakukan dengan "meninggalkan jejak" berupa link blog kita pada kotak komentar, atau pada chat box blog
jika tersedia.
Nah, khusus untuk link di kotak komentar, butuh kode HTML khusus untuk membuat link tersebut aktif
(dapat di-klik). Kali ini blog Dua Rupa akan berbagi cara untuk membuat link aktif pada kotak komentar
blog.
Cara Membuat Link Hidup di Kotak Komentar Blog
Untuk membuat link aktif pada kotak komentar blog dilakukan dengan cara menuliskan link dengan kode
HTML di bawah ini.
<a href="https://duarupa.blogspot.co.id/">Blog Dua Rupa</a>

Hasil : Blog Dua Rupa
Penjelasan :
 Ganti https://duarupa.blogspot.co.id/ dengan URL link blog atau postingan

 Ganti Blog Dua Rupa dengan kata yang merepresentasikan link
Untuk lebih memahami HTML untuk membuat link, silahkan baca Cara Membuat Link HTML di Postingan
Blog.
Jika Komentar Tidak Otomatis Publish
Kemudahan meninggalkan link pada kotak komentar blog orang lain sudah diantisipasi para admin blog
dengan fitur moderasi komentar yang telah disediakan oleh Blogger. Jadi komentar hanya akan ditampilkan
jika sudah disetujui oleh pemilik blog.
Ini wajar dilakukan selain untuk mencegah spamming, juga untuk mencegah link menuju situs berkonten
negatif tertanam di dalam blog.
Untuk tetap dapat meninggalkan link aktif di kotak komentar dengan komentar yang telah dimoderasi
pemilik blog, simak tutorial di bawah ini.
Link Aktif di Blogger
Jika Anda ingin menanam link aktif pada kotak komentar Blogger yang telah dimoderasi, cantumkanlah
pada Nama Anda. Cara ini tidak dapat mem-bypass moderasi komentar, namun setidaknya ini merupakan
cara paling halus untuk meninggalkan link di kotak komentar blog orang lain. Kemungkinan komentar Anda
di-approve menjadi lebih besar.
1. Pastikan blog yang ingin Anda komentari mengizinkan Anonymous dan Name/URL untuk memberikan
komentar. Klik pada Name/URL.
2. Isikan data nama dan URL yang diminta, kemudian klik Continue.
 Name : isi dengan keyword yang merepresentasi blog atau postingan

 URL : isi dengan link yang ingin dituju
3. Silahkan isi kotak komentar dengan komentar Anda, tidak perlu meninggalkan link HTML lagi di dalam
kotak komentar karena akan dianggap spam oleh pemilik blog. Klik Publish untuk mem-publish komentar.
Link Aktif di Wordpress
Untuk menanamkan link pada kotak komentar di Wordpress, lebih aman juga meninggalkannya pada Nama
komentator. Memiliki kesan lebih halus daripada meninggalkan link HTML langsung di dalam komentar.
Bedanya, memberi komentar di blog Wordpress wajib meninggalkan email.
Sekian artikel Cara Membuat Link Aktif di Kotak Komentar Blog, jika ada pertanyaan silahkan sampaikan
di kotak komentar di bawah.
Tampilan blog baru Anda, dengan template bawaan Blogger dan belum ada posting sama sekali. Kini
saatnya untuk mengembangkan blog Anda.
Sekian tutorial Membuat Blog Baru Gratis di Blogger, jika ada pertanyaan silahkan sampaikan di kotak
komentar. Jangan lupa bagikan artikel ini ke teman-teman Anda, ya!

Cara Membuat Template Blog Blogger Sendiri Mulai Dari Nol

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Cara Membuat Template Blog Blogger Sendiri Mulai Dari Nol

Diunggah oleh

Hak Cipta:

Format Tersedia

Cara Membuat Template Blog Blogger Sendiri Mulai Dari Nol

Admin Tuesday, May 23, 2017

Selamat datang di blog Dua Rupa, Blogger!

 Memiliki desain yang mudah diatur

Sekilas Tentang Blogger

Berikut ini adalah 3 cara penulisan CSS :

Tagar biasanya digunakan untuk menandai bagian-bagian utama template blog.

Membuat Template Blog Sendiri Mulai Dari Nol

Membuat Struktur XML dan HTML

Apa yang terjadi? Error!

Secara default CSS diletakkan di antara tag b:skin dan penutupnya.

Apa yang terjadi? Error lagi!

Memanggil Bagian Posting

Contoh tag b:section untuk menampilkan bagian posting.

Berhasil! Kali ini tidak ada error yang muncul.

Menambah Tag Title

Masukkan tag title ke bagian head, kemudian simpan.

Cara Membuat Blog yang Ringan, Valid HTML5, dan SEO

Blog yang baik itu blog yang seperti apa sih?

Blog yang baik memiliki 4 kriteria sebagai berikut :

Cara Membuat Blog yang Ringan, Valid HTML5, dan SEO

Cara Membuat Template Blog Valid HTML5

Meta Tag Dasar Blogger

Maka seharusnya akan muncul error seperti gambar di bawah ini.

Sehingga source code template blog kita menjadi seperti berikut :

Cara Membuat Template Blog SEO Friendly

dengan tag title di bawah ini.

Akan saya jelaskan satu per satu.

<b:if cond='data:blog.pageType == &quot;archive&quot;'><title>Archive for

<b:if cond='data:blog.pageType == &quot;index&quot;'><b:if

<b:if cond='data:blog.pageType == &quot;error_page&quot;'><title>Page Not

<b:if cond='data:blog.pageType == &quot;index&quot;'><b:if cond='data:blog.url !=

Cara Membuat Template Blog yang Ringan dan Fast Loading

Menonaktifkan Template Mobile

Sekarang perhatikan template blog Anda baik-baik.

Lalu bagaimana solusinya?

Menghapus Javascript Google Plus One

Solusinya dengan mengubah tag penutup body di bawah ini.

Menghilangkan CSS Bundle

Menjadi tag head modifikasi di bawah ini.

Modifikasi juga perlu dilakukan pada tag penutup head.

Menjadi seperti ini.

Sekarang source code template blog Anda menjadi seperti berikut.

#blog-pager-newer-link {float: left;}

Simpan template blog Anda dan lihat tampilannya sekarang.

Membuat Struktur Dasar Template Blog Blogger

a:link {font-family: 'PT Serif Caption', serif; font-size: 15px; color:#3094db;}

Mengubah tag b:skin Menjadi tag style Untuk Penempatan CSS

Menjadi seperti ini.

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*<b:skin><![CDATA[

a:link {font-family: 'PT Serif Caption', serif; font-size: 15px; color:#3094db;}

#blog-pager-newer-link {float: left;}

6 Elemen Utama Template Blog

Menambahkan CSS Struktur Dasar Template Blog

.clearfix:after {visibility: hidden; display: block; font-size: 0; content: &quot;

 #wrapper untuk mengatur template secara keseluruhan.

Memanggil Elemen-elemen Utama Template Blog

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*<b:skin><![CDATA[

<b:if cond='data:blog.pageType == "archive"'><title>Archive for

<b:if cond='data:blog.pageType == "index"'><b:if

<b:if cond='data:blog.pageType == "error_page"'><title>Page Not

<b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.url !=

<style type="text/css"><!-- /*<b:skin><![CDATA[

.clearfix:after {visibility: hidden; display: block; font-size: 0; content: "

<style type="text/css"><!-- /*<b:skin><![CDATA[

.clearfix:after {visibility: hidden; display: block; font-size: 0; content: "

<style type="text/css"><!-- /*<b:skin><![CDATA[

.clearfix:after {visibility: hidden; display: block; font-size: 0; content: "

<style type="text/css"><!-- /*<b:skin><![CDATA[

.clearfix:after {visibility: hidden; display: block; font-size: 0; content: "