Buku Pintar Blogspot

MENGEDIT TEMPLATE

Navigasi dengan Penomoran
Blogger hadir dengan navigasi yang cukup minimalis.
Pengunjung hanya disediakan tiga buah link utama untuk
navigasi, yaitu: Newer Posts, Home, dan Older Posts.
Newer Posts digunakan untuk navigasi ke posting yang lebih
baru, Home untuk membuka halaman awal blog, sedangkan
Older Posts digunakan untuk navigasi ke posting yang lebih
lama.

Bagaimana jika jumlah posting dalam blog Anda cukup
banyak? Mungkin saja navigasi yang disediakan Google terasa
kurang membantu. Untuk mengatasi hal ini, Anda dapat
menggunakan navigasi dengan penomoran. Jika diterapkan,
pengunjung dapat melompat ke posting-posting di bagian
tengah dengan nomor tertentu.
Praktek: Menerapkan navigasi dengan penomoran
1. Masuk ke dalam kustomisasi blog lalu pilih tab Tata Letak
> Edit HTML.

1

Buku Pintar Blogspot

2. Aktifkan Expand Template Widget sehingga tercentang
.

3. Cari bagian ]]></b:skin> lalu masukkan kode di atasnya.
Anda dapat menyalin kode dari CD buku pada file
\Kode\navigasi-penomoran 1.txt.

Kode yang harus dimasukkan:
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;

2

Buku Pintar Blogspot
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
4. Cari bagian lalu </body> masukkan kode berikut di
atasnya. Anda dapat menyalin kode dari CD buku pada file
\Kode\ navigasi-penomoran 2.txt.

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType !=
&quot;static_page&quot;'>

3

Buku Pintar Blogspot
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script
src='http://blogergadgets.googlecode.com/files/bloggerpage-navi.v1.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->
5. Aturlah jumlah posting di setiap navigasi. Caranya, masuk
ke dalam tab Pengaturan > Format. Ubah nilai pada
bagian Tampilkan sebanyak mungkin. Pada contoh ini,
Penulis ingin menampilkan lima buah posting di setiap
halaman navigasi.

6. Periksa hasilnya dan pastikan sudah sesuai dengan yang
kita inginkan.

Memasang Back to Top
Jika tulisan dalam posting Anda cukup panjang, maka mungkin
sekali Anda membutuhkan link Back To Top. Jika link ini diklik,
maka pengunjung akan kembali ke halaman web di bagian

4

Buku Pintar Blogspot
paling atas. Dengan demikian, link Back To Top dapat
membuat navigasi dalam blog Anda menjadi semakin
nyaman.
Praktek: Memasang link Back to Top
1. Masuk ke dalam kustomisasi blog lalu klik pada tab Tata
Letak > Elemen Laman.
2. Masukkan kode berikut ke dalam gadget Teks atau gadget
HTML/Javascript. Anda dapat menyalin kode tersebut
dari CD buku pada file \Kode\back-to-top.txt.
<a
style="display:scroll;position:fixed;bottom:5px;right:5px;
" href="#" title="Back to Top"><img
src="http://img195.imageshack.us/img195/4669/backtot
op.gif" /></a>
3. Perhatikan hasilnya pada halaman blog. Maka akan
muncul tombol
di bagian kanan bawah. Jika tombol
tersebut diklik, maka scroll bar akan bergeser ke atas dan
Anda kembali ke bagian atas halaman web.

Anda juga dapat menempatkan kode tersebut pada template.
Untuk itu, klik pada tab Tata Letak > Edit HTML. Letakkan
tepat di bawah <body>.

5

Buku Pintar Blogspot
Tutorial ini diambil dari “Buku Pintar Blogspot” yang ditulis
oleh Rachmad Hakim S. dan Roswati Andriyani. Keterangan
selengkapnya dapat dilihat pada website www.binsis.com.

BUKU PINTAR
BLOGSPOT
BAB 1 SEKILAS BLOG
1.1
1.2
1.3

Pengenalan Blogspot.......................................................1
Pendaftaran Blogspot.......................................................4
Membuat Posting Blog....................................................9

BAB 2 MENGATUR TAMPILAN BLOGSPOT
2.1
Favicon..........................................................................11
2.2
NavBar...........................................................................15
2.2.1
Mengenal NavBar..................................................15
2.2.2
Modifikasi Tampilan NavBar................................20
2.2.3
Menghilangkan NavBar.........................................21
2.3
Mengatur Elemen Blogger.............................................23
2.3.1
Tata Letak Elemen Laman.....................................24
2.3.2
Menambahkan Gadget...........................................25
2.3.3
Menemukan Gadget Yang Sesuai..........................28
2.3.4
Menghapus Gadget dari Blog................................31
BAB 3 TEMPLATE BLOGGER
3.1
Website dan Template...................................................31
3.2
Mengatur Template (Templat)......................................35
3.2.1
Template Standar Blogspot...................................35
3.2.2
Template Blogger dengan Draft............................37
3.2.3
Template Generator...............................................43
3.2.4
Download Template..............................................46
3.2.5
Mengatur Warna dan Huruf...................................53
BAB 4 KONFIGURASI BLOGSPOT
6

Buku Pintar Blogspot

4.1
Mengatur Profil..............................................................55
4.2
Pengaturan Blog............................................................61
4.2.1
Pengaturan Dasar Blog..........................................61
4.2.2
Pengaturan Format.................................................66
4.2.3
Pengaturan Komentar............................................68
4.2.4
Pengaturan Arsipkan..............................................72
4.2.5
Pengaturan Feed Situs...........................................73
4.2.6
Pengaturan Penulis dan Pembaca Blog.................77
BAB 5 ISI BLOG: POSTING
5.1
Manajemen Posting.......................................................81
5.1.1
Membuat Posting (Entri Baru)..............................82
5.1.2
Menggunakan Editor.............................................82
5.1.3
Posting dengan Email dan SMS............................91
5.1.4
Mengatur Format Posting......................................93
5.1.5
Membuat Halaman Web........................................94
5.2
Aneka Konten dalam Posting........................................96
5.2.1
Posting Berisi Gambar...........................................96
5.2.2
Posting Berisi Video............................................101
5.2.3
Posting Berisi Audio............................................107
5.2.4
Posting Berisi Flash.............................................110
5.3
Trik HTML Dalam Posting.........................................115
5.3.1
Memasukkan Tabel..............................................115
5.3.2
Marquee...............................................................116
5.3.3
Membuat Drop Cap.............................................120
BAB 6 GADGET BLOGSPOT
6.1
Gadget Penting Blogger...............................................122
6.1.1
Mengatur Drop Down pada Gadget Arsip...........124
6.1.2
Menggunakan Label Clouds (Tag Clouds)..........126
6.1.3
Menampilkan Avatar pada Komentar..................127
6.2
Statistik Blog...............................................................128
6.2.1
Web Counter........................................................129
6.2.2
Melacak No IP Pengunjung.................................134
6.2.3
Informasi Trafik dengan Lokasi..........................136
6.3
Internet Messaging dan Facebook...............................138
7

Buku Pintar Blogspot

6.3.1
Yahoo Messenger................................................138
6.3.2
Google Talk.........................................................141
6.3.3
Facebok Profil Badge..........................................142
6.4
Gadget Interaksi User..................................................145
6.4.1
ShoutBox.............................................................145
6.4.2
Komunitas............................................................149
6.4.3
Tanya Jawab........................................................149
6.4.4
Form Kontak........................................................153
6.5
RSS Feed.....................................................................159
6.5.1
FeedBurner..........................................................159
6.5.2
Memasang Feed dari Website Lain.....................164
6.6
Hak Cipta.....................................................................166
6.6.1
Disable klik kanan blog.......................................166
6.6.2
Disable Seleksi.....................................................167
6.6.3
Copyscape............................................................168
6.6.4
Creative Commons..............................................169
6.6.5
Tynt......................................................................170
6.7
Gadget Unggulan Lainnya...........................................173
6.7.1
Menambahkan Sistem Rating..............................173
6.7.2
Snap Shots...........................................................176
6.7.3
Pilihan Bahasa.....................................................179
6.7.4
Relasi Posting Bergambar....................................181
6.7.5
PageRank.............................................................183
6.7.6
Kalender dan Jam pada Blog...............................185
6.7.7
Toolbar Blog........................................................188
6.7.8
Donasi PayPal......................................................192
6.7.9
Memasang Mesin Pencari Google.......................195
6.7.10 Memasang Blogroll Bergerak..............................196

BAB 7 MENGEDIT TEMPLATE
7.1
Mengubah Template....................................................198
7.1.1
Navigasi dengan Penomoran...............................198
7.1.2
Memasang Back to Top.......................................201
7.1.3
Menghilangkan Quick Edit..................................202
8

Buku Pintar Blogspot

7.1.4
Navigasi Breadcrumb..........................................203
7.1.5
Menggunakan Emoticons pada Editor.................205
7.1.6
Menambah Gadget Di Atas Posting....................209
7.1.7
Menambahkan Iklan Melayang...........................210
7.2
Social Bookmark.........................................................211
7.2.1
Retweet................................................................212
7.2.2
Digg It..................................................................214
7.2.3
Google Buzz........................................................216
7.2.4
Facebook Share....................................................216
7.2.5
Social Bookmark: Add This................................217
7.2.6
Membuat Tombol Social Bookmark Sendiri.......219
7.3
Menambahkan Kode di Setiap Posting........................221
7.3.1
Menambahkan Print Printer.................................221
7.3.2
Membuat Print PDF.............................................222
7.3.3
Konten Setiap Kali Membuat Posting.................225
BAB 8 SETELAH BLOGSPOT
8.1
Dasar-Dasar Promosi Blog..........................................226
8.2
Search Engine dan Blog..............................................227
8.2.1
Membuat Sitemap................................................227
8.2.2
Submit Blog ke Google.......................................229
8.2.3
Submit Blog ke Yahoo........................................231
8.3
Pelengkap Search Engine............................................233
8.3.1
Direktori Blog......................................................233
8.3.2
Pinging.................................................................237
8.3.3
Mencari dan Menghilangkan Broken Link..........239
8.3.4
Bertukar Link (Exchange Link, Barter Tautan). .240
8.3.5
Membuat Newsletter............................................246
8.3
Nama Domain..............................................................254
8.3.1
Nama Domain Gratis...........................................254
8.3.2
Menggunakan Nama Domain..............................259
8.3.3
Menggunakan Nama Sub Domain.......................265
8.4
Backup dan Ekspor/Impor...........................................267
8.4.1
Ekspor Blogger....................................................267
8.4.2
Impor Blogger......................................................269
8.4.3
Aplikasi Blogger Backup.....................................271
9

Sign up to vote on this title
UsefulNot useful