Selasa, 31 Mei 2011

Cara Membuat Akun Twitter

Sama seperti halnya kalau ingin membuat akun di Facebook, di Twitter pun kita harus menyiapkan alamat email terlebih dahulu untuk melakukan pendaftaran. Bagi teman-teman yang ingin mengetahui bagaimana cara melakukan pendaftaran di Twitter, silakan simak langkah-langkahnya di bawah ini.

1. Masuk ke situs Twitter di http://twitter.com/


2 Kemudian isikan Fullname dengan nama Kamu, Email dengan alamat email Kamu, dan Password dengan kata sandi yang kamu inginkan.


3. Selanjutnya klik tombol Sign up. Kemudian Kamu akan dibawa ke laman seperti di bawah ini. Lalu isikan username sesuai keinginan Kamu jika masih tersedia atau Kamu dapat memakai pilihan username yang di-sugges-kan oleh Twitter.


4. Bila sudah yakin dengan pilihan username, silakan klik tombol Create my account.

5. Berikutnya Kamu akan masuk ke laman Interest, Kamu dapat melewati laman ini dengan mengeklik tombol Next Step: Friends>>.

6. Selanjutnya Kamu masuk ke laman Friends. Kamu dapat melewatinya dengan mengeklik tombol Skip import>>.

7. Kemudian buka email Kamu, untuk melihat email konfirmasi yang telah dikirim oleh Twitter yang berjudul "Confirm your Twitter account".

8. Klik tautan atau link yang diberikan untuk melengkapi proses pendaftaran.


9. Akun Twitter Kamu sudah jadi. Selamat ber-Twitter..

Cara Membuat Akun Facebook

Facebook merupakan situs jejaring sosial yang paling populer di dunia. Saat ini Facebook menempati urutan ke-2 di peringkat Alexa global. Untuk membuat akun di Facebook kita diharuskan untuk mendaftar terlebih dahulu. Sebelum mendaftar kita harus menyiapkan sebuah akun email. Jika belum punya, silakan membuat akun email dulu. Kamu bisa menggunakan layanan email dari Google, Yahoo! atau dari yang lainnya.

Berikut ini langkah-langkah dalam membuat akun Facebook.

1. Kunjungi laman Facebook berbahasa Indonesia di http://id-id.facebook.com/



2.Isikan data-data yang diminta pada kolom yang  disediakan, seperti nama depan, nama belakang, email, kata sandi, jenis kelamin dan tanggal lahir.


3. Bila telah selesai mengisi data-data, silakan klik tombol Mendaftar.

4. Kemudian Kamu akan dibawa ke laman Pemeriksaan Keamanan untuk mengisi kode captcha. Isilah kode yang kamu lihat pada tempat yang disediakan, lalu klik tombol Mendaftar.


5. Jika berhasil, Kamu akan dibawa ke laman Memulai pada Langkah 1, yaitu "Cari Teman", Kamu dapat melewati langkah ini dengan cara mengeklik tulisan Lewati langkah ini di bagian bawah.


6. Kemudian Kamu akan masuk ke laman Langkah 2. Isi informasi profil Kamu lalu klik tombol Simpan & Lanjutkan. Jika tidak ingin mengisinya sekarang, silakan klik tulisan Lewati.


7. Berikutnya akan masuk ke Langkah 3. Silakan unggah foto kamu lalu klik tombol Simpan & Lanjutkan atau jika kamu ingin mengunggahnya nanti saja silakan klik tulisan Lewati.


8. Nah, untuk menyelesaikan proses pendaftaran, silakan klik tombol Buka email Anda.


9. Selanjutnya, Kamu akan dibawa ke laman untuk masuk ke email Kamu. Pada contoh ini menggunakan Gmail.


10. Buka email dari Facebook yang berjudul "Tinggal satu langkah lagi untuk mulai menggunakan Facebook". Kemudian klik tautan atau link yang diberikan.


11. Selesai.

Senin, 30 Mei 2011

Cara Membuat Akun Email di Yahoo! Indonesia

Sebelumnya saya pernah menulis bagaimana cara membuat akun Gmail. Kali ini saya akan berbagi informasi tentang cara membuat akun email di Yahoo! Indonesia. Akun Yahoo! ini diperlukan saat kita ingin mendaftarkan blog ke Yahoo!. Sama seperti Gmail, layanan email ini juga gratis alias tidak berbayar. Bagi pembaca yang ingin mengetahui langkah-langkah membuat akun email Yahoo!, silakan simak tulisan berikut ini.
  1. Kunjungi laman Yahoo! Indonesia di http://id.yahoo.com/
  2. Klik tulisan Buat Account pada bagian atas laman.
  3. Anda akan dibawa ke laman Pendaftaran Yahoo!, silakan isi poin-poin pada formulir tersebut.
  4. Nama Saya, isikan dengan nama depan dan nama belakang Anda.
  5. Jenis Kelamin, pilih sesuai dengan jenis kelamin Anda, Laki-laki atau Perempuan.
  6. Tanggal Lahir, isikan dengan tanggal, bulan dan tahun lahir Anda.
  7. Saya tinggal di, pilih Indonesia.
  8. ID Yahoo! dan Email, kemudian isikan ID Yahoo! dan Email sesuai pilihan Anda. Lalu klik tombol Periksa untuk mengecek apakah ID Yahoo! yang Anda isikan tersedia atau tidak. Kalau tidak tersedia, silakan masukkan lagi dengan ID Yahoo! yang lain dan klik tombol Periksa. Ulangi sampai ID Yahoo! yang Anda inginkan tersedia.
  9. Kata Sandi, masukkan kata sandi yang Anda inginkan.
  10. Ketik ulang Kata Sandi, silakan masukkan kembali kata sandi Anda untuk konfirmasi.
  11. Pertanyaan Keamanan 1, pilih satu dari pertanyaan yang tersedia atau buat pertanyaan sendiri. Hal ini berguna kalau suatu saat nanti Anda lupa kata sandi atau ID Anda.
  12. Jawaban Anda, isikan jawaban dari pertanyaan yang anda buat di Pertanyaan Keamanan 1.
  13. Pertanyaan Keamanan 2, pilih atau buat pertanyaan yang kedua.
  14. Jawaban Anda, isikan jawaban dari pertanyaan keamanan 2.
  15. Ketik kode yang terlihat, isikan dengan kode yang Anda lihat.
  16. Klik tombol Buat Account Saya.
  17. Jika semuanya telah benar, maka Anda akan dibawa ke laman ucapan Selamat!.
  18. Bila Anda kembali ke laman Pendaftaran Yahoo!, berarti ada kesalahan, silakan diperiksa kembali, mungkin kode yang Anda masukkan belum tepat.

Minggu, 29 Mei 2011

Memasang Widget Artikel Populer Berdasarkan Komentar Terbanyak

Pada kesempatan terdahulu di blog ini telah dibahas mengenai cara memasang gadget entri populer. Gadget tersebut merupakan gadget kepunyaan Blogger sendiri yang disusun berdasarkan banyaknya tayangan laman dari masing-masing posting yang ada di blog. Nah, kali ini kita akan membahas hal yang serupa. Namun, widget artikel populer yang akan kita pasang ini berdasarkan jumlah komentar terbanyak.

Bila Anda tertarik untuk memasang widget artikel populer berdasarkan banyaknya komentar, berikut ini cara pemasangannya.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Elemen Laman > Tambah Gadget.

3. Pilih HTML/JavaScript.

4. Beri judul sesuai keinginan Anda.

5. Copy dan paste kode di bawah ini di Konten.

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ul style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=a7d3195528df5e96181a3d2712266226&url=http%3A%2F%2Fklikmunadi.blogspot.com&num=10" type="text/javascript"></script>

  • Ganti klikmunadi.blogspot.com dengan url blog Anda.
  • Angka 10 menunjukkan banyaknya posting yang ingin ditampilkan, ini bisa diganti sesuai keinginan Anda.

6. Klik tombol SIMPAN.


7. Pindahkan elemen ke tempat yang Anda inginkan.

8. Klik tombol SIMPAN.

9. Selesai.

Sabtu, 28 Mei 2011

Cara Menghilangkan Icon Obeng dan Tang pada Blogger

Saat kita sedang mengedit template dan melihat hasilnya, maka akan terlihat icon obeng dan tang pada pojok-pojok elemen atau widget blog. Icon tersebut berfungsi untuk melakukan pengeditan widget secara cepat. Jadi, saat kita ingin mengedit kembali elemen tersebut, kita tinggal klik saja shortcut yang bergambar obeng dan tang tersebut tanpa perlu lagi ke tab Elemen Laman.

Sebenarnya, icon obeng dan tang ini hanya muncul apabila kita masuk ke akun Blogger kita. Namun, icon ini tidak akan terlihat di komputer pengunjung lain walaupun kita sedang log in.

Bila Anda tidak menyukai keberadaan icon obeng dan tang ini, Anda dapat menghilangkannya dengan cara menambahkan sedikit kode CSS pada HTML template blog. Berikut ini langkah-langkahnya.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk mem-backup template.

4. Cari kode ]]></b:skin> (Gunakan Ctrl + F untuk mempercepat pencarian.)

5. Copy kode di bawah ini dan paste di atas kode tersebut.

.quickedit{
display:none;

6. Klik tombol SIMPAN TEMPLATE.

7. Selesai dan lihat hasilnya.

Kalau Anda ingin menampilkan kembali icon obeng dan tang, tinggal dihapus saja kode tersebut.

Cara Menghilangkan Garis Bawah pada Link di Blogger

Biasanya setiap link atau tautan yang ada di blog bila disorot oleh mouse akan muncul garis bawah pada link tersebut. Ada juga yang tanpa disorot sudah ada garis bawahnya, tergantung rancangan template blog masing-masing. Sebenarnya, garis bawah link ini dapat dihilangkan bila Anda tidak menyukainya. Yang perlu Anda lakukan adalah mengubah kode CSS template blog pada bagian yang membuat link bergaris bawah.

Kode CSS yang berhubungan dengan link biasanya tampak seperti di bawah ini.

a:link {
color:#007ACC;
text-decoration:underline;
}
a:visited {
color:#007ACC;
text-decoration:underline;
}
a:hover {
color:#5588AA;
text-decoration:underline;
}

Berikut sedikit penjelasan tentang kode di atas:

a:link {
color:#007ACC;
text-decoration:underline;
}

Kode di atas berarti link yang belum pernah dikunjungi atau diklik akan berwarna #007ACC dan bergaris bawah.

a:visited {
color:#007ACC;
text-decoration:underline;
}

Kalau kode yang ini mempunyai arti link yang sudah pernah dikunjungi akan berwarna #007ACC dan bergaris bawah.

a:hover {
color:#5588AA;
text-decoration:underline;
}

Sedangkan kode yang yang ini menunjukkan link pada saat mouse di atasnya akan berwarna #5588AA dan bergaris bawah.

Lalu, yang manakah kode yang membuat link bergaris bawah? Ya, dari penjelasan di atas sudah tergambar kalau yang membuat link bergaris bawah adalah kode text-decoration:underline;. Nah, untuk menghilangkan garis bawah link Anda ubah semua kata underline dengan none sehingga menjadi text-decoration:none;.

Cara Memasang Tombol 'Back to Top' pada Blog

Tombol 'Back to Top' atau 'Kembali ke Atas' merupakan sebuah tombol yang jika diklik akan membawa kita menuju ke bagian atas suatu halaman pada blog. Tombol ini berguna untuk memudahkan pengunjung saat ingin kembali ke bagian atas halaman blog setelah selesai membaca artikel. Terlebih lagi bila isi posting terlalu panjang. Jadi, pengunjung tidak perlu repot-repot mengeklik scroll bar atau memutar scroll pada mouse untuk kembali lagi ke bagian atas halaman.

Letak tombol ini berada di pojok kanan bawah layar monitor dan melayang. Untuk memasang tombol ini, Anda dapat menyimak langkah-langkahnya di bawah ini.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Elemen Laman > Tambah Gadget.

3. Pilih HTML/JavaScript.

4. Copy dan paste kode di bawah ini di kolom Konten.

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Kembali ke Atas"><img src="http://i1119.photobucket.com/albums/k636/klikmunadi/Up.png" /></a>

  • Anda dapat mengganti Kembali ke Atas dengan judul yang Anda inginkan.
  • Bila ingin menggunakan gambar Anda sendiri, silakan ganti http://i1119.photobucket.com/albums/k636/klikmunadi/Up.png dengan url gambar Anda.
5. Klik tombol SIMPAN.

6. Pindahkan elemen ke posisi paling bawah.

7. Klik tombol SIMPAN.

8. Selesai.

Jumat, 27 Mei 2011

Membuat Banner Animasi

Dengan memasang banner animasi pada blog dapat membuat tampilan blog terlihat dinamis dan atraktif. Perhatian mata para pengunjung akan tertuju langsung ke banner animasi sehingga peluang pengunjung melihat dan membaca pesan yang ada di banner akan besar. Bagi para pebisnis, memasang banner animasi ini akan lebih efektif dibanding bila memasang iklan dengan banner biasa.

Untuk membuat banner animasi kita dapat memanfaatkan situs untuk mendesain banner animasi seperti AdDesigner.com. Silakan kunjungi situs tersebut kemudian daftar dan desainlah banner Anda di sana. Di bawah ini merupakan salah satu contoh banner animasi yang di buat di AdDesigner.com.

Cara Mencari Suatu Kata dengan Cepat pada Laman Blog

Salah satu yang biasa kita lakukan saat sedang mengedit HTML template blog adalah kita mencari suatu kata atau kode HTML tertentu guna menambahkan kode HTML yang lain di atas atau di bawah kode HTML yang sedang kita cari tersebut. Bila kita mencarinya secara manual, maka hal ini dapat memakan waktu serta energi.

Sebagaimana kita ketahui bersama bahwa susunan kode HTML template blog itu panjang sekali dan terlihat rumit. Jika kode yang kita cari tersebut berada di tengah-tengah atau di bagian akhir template, tentu hal ini bisa membuat mata kita bekerja keras karena harus membaca baris demi baris.

Nah, agar kita dapat menemukan suatu kode HTML tertentu dengan cepat dan mudah, gunakan saja cara berikut, yaitu tekan tombol Ctrl + F pada keyboard. Kemudian ketikkan atau paste-kan kode HTML yang akan dicari pada kotak yang telah disediakan. Bila kode yang dicari itu ada atau ditemukan, maka akan ada background berwarna hijau pada kode yang dimaksud.

Kita juga dapat menggunakan cara ini untuk mencari suatu kata atau teks dengan cepat pada laman web atau blog yang lainnya. (Gambar di atas merupakan tampilan pencarian pada browser Mozilla Firefox 4.0.)

Kamis, 26 Mei 2011

Cara Membuat Gambar Berjalan

Selain teks atau tulisan, kita juga dapat membuat gambar bisa berjalan atau bergerak dengan marquee. Caranya adalah dengan menyisipkan URL gambar ke kode program marquee. Namun, sebelumnya kita harus mengunggah atau meng-upload gambar ke layanan penyimpan gambar online, semacam Photobucket, untuk mendapatkan link dari gambar tersebut.

Dalam program marquee, kita juga dapat menyisipkan elemen lainnya seperti link atau tautan dengan berprinsip sebagai berikut:

<marquee>
TEKS, GAMBAR, TEKS TAUTAN, GAMBAR TAUTAN, DAN LAIN SEBAGAINYA.
</marquee>

Contoh:

Di bawah ini ada 2 URL gambar yang akan dimasukkan ke program marquee.
  1. <a href="http://s1119.photobucket.com/albums/k636/klikmunadi/?action=view&amp;current=KLIKMUNADI.jpg" target="_blank"><img src="http://i1119.photobucket.com/albums/k636/klikmunadi/KLIKMUNADI.jpg" border="0" alt="Klik Munadi"></a>
  2. <a href="http://s1119.photobucket.com/albums/k636/klikmunadi/?action=view&amp;current=klikmunadi-1.png" target="_blank"><img src="http://i1119.photobucket.com/albums/k636/klikmunadi/klikmunadi-1.png" border="0" alt="Photobucket"></a>
Lalu kedua URL gambar tersebut akan kita sisipkan ke kode marquee di bawah ini.

<marquee align="center" direction="up" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3" width="100%">
<a href="http://s1119.photobucket.com/albums/k636/klikmunadi/?action=view&amp;current=KLIKMUNADI.jpg" target="_blank"><img src="http://i1119.photobucket.com/albums/k636/klikmunadi/KLIKMUNADI.jpg" border="0" alt="Klik Munadi"></a>

<a href="http://s1119.photobucket.com/albums/k636/klikmunadi/?action=view&amp;current=klikmunadi-1.png" target="_blank"><img src="http://i1119.photobucket.com/albums/k636/klikmunadi/klikmunadi-1.png" border="0" alt="Photobucket"></a>
</marquee>

Maka hasilnya akan seperti di bawah ini.


Klik Munadi

Photobucket


Bila kedua gambar tersebut diberi tautan atau link target sesuai keinginan saya, maka hasil akhir dari URL gambar tersebut akan seperti di bawah ini.
  1. <a href="http://klikmunadi.blogspot.com/" target="_blank"><img src="http://i1119.photobucket.com/albums/k636/klikmunadi/klikmunadi-1.png" /></a>
  2. <a href="http://klikmunadi.blogspot.com/" target="_blank"><img src="http://i1119.photobucket.com/albums/k636/klikmunadi/KLIKMUNADI.jpg" /></a>
    Selanjutnya kedua URL di atas kita masukkan ke kode marquee seperti di bawah ini.

    <marquee align="center" direction="up" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3" width="100%">
    <a href="http://klikmunadi.blogspot.com/" target="_blank"><img src="http://i1119.photobucket.com/albums/k636/klikmunadi/KLIKMUNADI.jpg" /></a>

    <a href="http://klikmunadi.blogspot.com/" target="_blank"><img src="http://i1119.photobucket.com/albums/k636/klikmunadi/klikmunadi-1.png" /></a>
    </marquee>

    Hasilnya:







    Contoh kode marquee di atas adalah salah satunya saja. Masih ada lagi ragam marquee yang lain yang dapat Anda pelajari di Cara Membuat Marquee di Blogger. Selain itu, Anda dapat juga menambahkan kode-kode yang lain ke dalam kode marquee sesuai keinginan atau kreativitas Anda sendiri.

    Selasa, 24 Mei 2011

    Seratus Posting

    Alhamdulillah, saat posting ini diterbitkan, blog Klik Munadi telah berisi 100 posting. Isi blog ini didominasi oleh posting-posting yang berlabel Tutorial Blog. Selain itu masih ada lagi beberapa label yang lain, seperti Alexa, Catatan, Link, Alat, Ponsel, Internet, Tukar Link, Alam, Blogging, Jejaring Sosial, Jodoh, Radio, Safety Riding, dan sms.

    Pada saat ini, peringkat Alexa blog Klik Munadi berada di posisi 569,258. Sedangkan Google Pagerank-nya belum pecah telur alias masih nol. Statisitik tayangan laman berada di angka 8542.

    Pada kesempatan yang berbahagia ini, saya ingin kembali mengucapkan terima kasih banyak kepada para pengunjung serta Blogger dan Google.

    Cara Membuat Marquee di Blogger

    Marquee merupakan suatu program HTML untuk membuat teks atau tulisan agar dapat bergerak atau berjalan. Selain dapat menghemat tempat pada halaman blog, program marquee ini juga terlihat menarik karena sifatnya yang dinamis. Marquee ini dapat dibuat dengan menggunakan tag <marquee> ... </marquee>.

    Adapun atribut yang sering digunakan adalah seperti di bawah ini:

    • bgcolor >> berfungsi untuk mengatur warna background (latar belakang) teks.
    • direction >> untuk mengatur arah gerakan teks, bisa left, right, up atau down.
    • behavior >> gunanya untuk mengatur perilaku gerakan, bisa scroll, slide atau alternate.
    • scroll >> menunjukkan teks bergerak berputar.
    • slide >> menunjukkan teks bergerak sekali lalu berhenti.
    • alternate >> menunjukkan teks bergerak dari kiri ke kanan lalu balik lagi.
    • title >> yaitu pesan akan muncul saat mouse berada di atas teks.
    • scrollamount >> yaitu untuk mengatur kecepatan gerakan dalam piksel, semakin besar angka semakin cepat gerakannya.
    • scrolldelay >> berfungsi untuk mengatur waktu tunda gerakan dalam mili detik
    • width >> untuk mengatur lebar blok teks dalam pixel atau persen.
    • height >> untuk mengatur tinggi area marquee.

    Berikut ini beberapa contoh dari marquee:

    Contoh marquee dari gerakan :

    <marquee align="center" direction="left" height="20" scrollamount="3" width="100%">
    INI ADALAH MARQUEE DENGAN DIRECTION LEFT
    </marquee>

    Hasilnya:

    INI ADALAH MARQUEE DENGAN DIRECTION LEFT



    Ganti kata "left" dengan keinginan Anda yaitu bisa right, up, down.


    Contoh marquee dari perilaku gerakan :

    <marquee align="center" behavior="alternate" direction="left" height="20" scrollamount="3" width="100%">
    INI ADALAH CONTOH MARQUEE DARI PERILAKU GERAKAN
    </marquee>

    Hasilnya seperti di bawah ini:


    INI ADALAH CONTOH MARQUEE DARI PERILAKU GERAKAN




    Contoh marquee dengan variasi huruf dan warna latar belakang:

    <div align="left"><span style="color: white; font-family: georgia;"><b><marquee behavior="alternate" bgcolor="blue" scrollamount="3" width="100%">
    MARQUEE DENGAN VARIASI HURUF DAN WARNA LATAR BELAKANG
    </marquee></b></span></div>

    hasilnya :


    MARQUEE DENGAN VARIASI HURUF DAN WARNA LATAR BELAKANG


    Berikut ini adalah variasi lain dari marquee yaitu ketika mouse sedang berada di area marquee teks akan berhenti dan ketika mouse di geser kembali ke tempat lain maka teks akan bergerak kembali.

    Contoh, silakan arahkan mouse Anda ke area marquee di bawah ini:

    <marquee align="center" direction="up" height="90" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="100%">
    ARAHKAN MOUSE ANDA KE SINI
    </marquee>

    hasilnya :


    ARAHKAN MOUSE ANDA KE SINI



    Contoh marquee yang didalamnya terdapat link :

    <marquee align="center" direction="up" height="150" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="100%">
    <a href="http://klikmunadi.blogspot.com/2011/01/daftar-isi_01.html" target="_blank">Daftar Isi</a>
    <a href="http://klikmunadi.blogspot.com/2011/01/tukar-link.html" target="_blank">Tukar Link</a>
    <a href="http://klikmunadi.blogspot.com/2011/05/kode-warna.html" target="_blank">Kode Warna</a>
    </marquee>

    hasilnya :


    Daftar Isi
    Tukar Link
    Kode Warna

    Kode Warna

    Dalam kegiatan blogging, terutama waktu berhubungan dengan kegiatan mengedit HTML, kode-kode warna diperlukan saat ingin memberi warna pada background, teks, link, tabel, garis, dan sebagainya. Memberi unsur warna pada blog bertujuan untuk membuat penampilan blog kita tampak cantik dan menarik. Nah, bila Anda membutuhkan suatu kode warna tertentu, berikut ini tabel kode warna dari beberapa warna.

    Nama WarnaKode WarnaContoh
    Abu-abu#808080
    Biru#0000FF
    Biru laut#000080
    Coklat#964B00
    Emas#FFD700
    Hijau#00FF00
    Hitam#000000
    Jingga#FF7F00
    Kuning#FFFF00
    Magenta#FF00FF
    Mawar#FF007F
    Merah#FF0000
    Merah marun#800000
    Merah jambu#FFC0CB
    Nila#6F00FF
    Perak#C0C0C0
    Putih#FFFFFF
    Sian#00FFFF
    Ungu#BF00FF
    Violet#8F00FF
    Zaitun#808000

    Senin, 23 Mei 2011

    Cara Menampilkan Kode HTML pada Spoiler dalam Posting

    Posting kali ini merupakan kelanjutan dari posting yang berjudul Cara Membuat Spoiler di Blogger. Bila kita meletakkan konten yang berupa tulisan atau teks biasa di kode HTML pembentuk spoiler, maka kita tidak menemukan hambatan yang berarti.

    Contoh:

    Kita akan memasukkan teks "Tuh kan di sini nggak ada apa-apa." ke spoiler.

    <div style="margin: 5px 20px 20px;">
    <div class="smallfont" style="margin-bottom: 2px;">
    <b>Spoiler</b>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup aja deh'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Jangan diklik'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 100px;" type="button" value="Jangan diklik" /></div>
    <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
    <div style="display: none;">

    "Tuh kan di sini nggak ada apa-apa."

    </div>
    </div>
    </div>


    Maka hasilnya seperti ini.

    Spoiler:

    "Tuh kan di sini nggak ada apa-apa."



    Namun, jika kita ingin memasukkan kode HTML, misalnya kode HTML untuk membuat text area, kita tidak dapat meletakkan kode HTML tersebut langsung seperti cara dia di atas. Kita memerlukan beberapa langkah untuk dapat menampilkan kode HTML pada spoiler dalam posting. Berikut ini langkah-langkahnya.

    1. Siapkan kode HTML untuk membuat text area di posisi Compose.

    <div align="center"><textarea cols="25" name="code" rows="5">Silakan tulis teks-teks atau kode-kode HTML Anda di sini. Nanti teks Anda akan muncul di text area</textarea></div>

    2. Kemudian lihat kode HTML tersebut di posisi Edit HTML. Di situ terlihat kode HTML mengalami sedikit perubahan bentuk penulisan.

    &lt;div align="center"&gt;&lt;textarea cols="25" name="code" rows="5"&gt;Silakan tulis teks-teks atau kode-kode HTML Anda di sini. Nanti teks Anda akan muncul di text area&lt;/textarea&gt;&lt;/div&gt;

    3. Selanjutnya, copy dan paste kode HTML tersebut pada tempat yang disediakan di kode HTML spoiler.

    <div style="margin: 5px 20px 20px;">
    <div class="smallfont" style="margin-bottom: 2px;">
    <b>Kode HTML membuat text area</b>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Buka" /></div>
    <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
    <div style="display: none;">

    &lt;div align="center"&gt;&lt;textarea cols="25" name="code" rows="5"&gt;Silakan tulis teks-teks atau kode-kode HTML Anda di sini. Nanti teks Anda akan muncul di text area&lt;/textarea&gt;&lt;/div&gt;

    </div>
    </div>
    </div>

    4. Maka hasilnya seperti di bawah ini.

    Kode HTML membuat text area:

    <div align="center"><textarea cols="25" name="code" rows="5">Silakan tulis teks-teks atau kode-kode HTML Anda di sini. Nanti teks Anda akan muncul di text area</textarea></div>


    Jadi, untuk dapat menampilkan kode HTML pada spoiler diperlukan langkah-langkah seperti di atas. Karena kalau langsung meletakkan kode HTML tersebut pada kode HTML spoiler, maka jadinya seperti di bawah ini.

    Kode HTML membuat text area:


    Cara Menampilkan Hanya Judul Posting di Beranda

    Add caption
    Salah satu cara yang dapat dilakukan untuk menghemat ruangan di halaman beranda atau home page adalah dengan menampilkan postingan berupa judul-judulnya saja. Dengan cara ini kita dapat menampilkan jumlah posting lebih banyak lagi tanpa harus memakan tempat. Bagi yang tertarik untuk menampilkan hanya judul-judul posting saja di beranda, silakan simak langkah-langkahnya di bawah ini.

    1. Masuk ke akun Blogger Anda.

    2. Klik Rancangan > Edit HTML.

    3. Untuk mem-backup template, silakan klik Download Template Lengkap. Hal ini untuk berjaga-jaga kalau nanti terjadi kesalahan dalam pengeditan.

    4. Cari kode ]]></b:skin> (Gunakan Ctrl + F untuk memudahkan pencarian)

    5. Copy kode di bawah ini dan paste di bawah kode ]]></b:skin>

    <style type='text/css'>
         <b:if cond='data:blog.pageType != &quot;item&quot;'>
         <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
         .post-body{display:none;}
         </b:if>
         </b:if>
         </style>

    6. Klik tombol SIMPAN TEMPLATE.

    7. Selesai.

      Pemasangan kode di atas masih menyisakan beberapa elemen seperti tanggal posting, label, komentar dan yang lainnya. Bila Anda ingin menghilangkan semuanya dan yang tersisa hanya judul postingnya saja, Anda dapat mencoba kode di bawah ini.

      <style type='text/css'>
           <b:if cond='data:blog.pageType != &quot;item&quot;'>
           <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
           .post-body, .post-footer, .jump-link,
           .post-timestamp, .reaction-buttons,
           .star-ratings, .post-backlinks,
           .post-icons, .date-header{display:none;}
           </b:if>
           </b:if>
           </style>

      Jumat, 20 Mei 2011

      Cara Mengganti Template di Blogger

      Template blog merupakan sebuah desain tampilan halaman blog dengan berisikan dokumen file model-model tambahan yang dikodekan dalam bahasa pemograman dan siap pakai. Seperti yang Anda lihat pada blog ini,  di situ terlihat tatanan gambar dan tulisan di layar monitor Anda, inilah yang dinamakan template.

      Di Blogger, Anda dapat mengganti template dengan leluasa sesuai selera dan keinginan masing-masing. Bila Anda telah mahir dalam membuat template, Anda dapat menggunakan template tersebut untuk blog Anda. Namun, bila Anda masih awam, Blogger telah menyediakan beberapa template yang dapat Anda pilih sesuai keinginan. Selain itu, Anda dapat pula mengunduh atau men-download template dari penyedia template Blogger.

      Kembali ke bahasan utama, cara mengganti template di Blogger atau Blogspot ada dua macam, yakni mengganti template dengan template yang disediakan oleh Blogger atau mengganti template dengan template yang didapat dari penyedia template Blogger. Berikut ini pembahasannya:


      Cara Mengganti Template dengan Template yang Disediakan Blogger

      1. Masuk ke akun Blogger Anda.
      2. Klik Rancangan > Perancang Template.
      3. Klik pada pilihan template yang tersedia. Selain itu, Anda dapat juga mengedit background-nya, menyesuaikan lebar template, dan lain sebagainya.
      4. Jika telah cocok, klik tombol APPLY TO BLOG.
      5. Selesai.

      Cara Mengganti Template dengan Template dari Penyedia Template

      1. Unduh atau download terlebih dahulu template yang Anda sukai pada situs penyedia template Blogger secara gratis.
      2. File template yang diunduh biasanya masih dalam bentuk terkompresi (.zip atau .rar). Oleh karena itu, Anda perlu mengekstraknya dengan software ekstraktor seperti WinZip atau WinRar.
      3. File yang nantinya diunggah atau di-upload ke Blogger adalah file yang berekstensi .xml.
      4. Masuk ke akun Blogger Anda.
      5. Klik Rancangan > Edit HTML.
      6. Klik Download Template Lengkap terlebih dahulu, untuk berjaga-jaga kalau-kalau Anda nanti ingin kembali ke template yang lama.
      7. Klik tombol Telusuri untuk mencari file template yang sudah Anda ekstrak tadi (file berekstensi .xml)
      8. Klik tombol Unggah.
      9. Bila muncul peringatan tentang widget, klik tombol PERTAHANKAN WIDGET.
      10. Selesai.

      Kamis, 19 Mei 2011

      Cara Membuat Border pada Widget Pengikut atau Follower

      Memberi border atau kotak pada widget Pengikut atau Follower dapat mempermanis penampilan widget tersebut. Berikut ini langkah-langkah membuat border pada widget Pengikut.

      1. Masuk ke akun Blogger Anda.

      2. Klik Rancangan > Edit HTML.

      3. Klik Download Template Lengkap untuk berjaga-jaga kalau nanti terjadi kesalahan dalam pengeditan.

      4. Cari kode ]]></b:skin> (Gunakan tombol Ctrl + F untuk mempercepat pencarian)

      5. Biasanya kode id untuk widget Pengikut adalah seperti di bawah ini.

      <b:widget id='Followers1' locked='false' title='Pengikut' type='Followers'>

      Maka untuk memberi border pada widget Pengikut, silakan copy kode di bawah ini dan paste di atas kode ]]></b:skin>

      #Followers1 .widget-content{
      height:auto;
      width:auto;
      border:1px solid #FF0000;
      }

      6. Klik tombol SIMPAN TEMPLATE.

      • border:1px solid #FF0000; menunjukkan ketebalan garis tepi border sebesar 1 piksel. Bila Anda ingin garis yang lebih tebal lagi, silakan ganti angkanya dengan nilai yang lebih tinggi lagi. Sedangkan solid #FF0000 menunjukkan border bergaya solid, #FF0000 kode untuk warna merah. Silakan diganti kode warnanya untuk mengubah warna border.

      Cara Memberi Scroll pada Arsip Blog dan Label

      Widget Arsip Blog dengan gaya hierarki yang dipasang di sidebar akan terus memanjang ke bawah seiring bertambahnya jumlah postingan atau artikel-artikel yang telah diterbitkan. Bila hal ini dibiarkan tentunya dapat memakan tempat sidebar blog. Begitu pula dengan gadget Label jenis daftar, dia akan terus memanjang sesuai dengan banyaknya label di blog tersebut.

      Nah, salah satu solusi agar menghemat tempat pada sidebar adalah dengan memberikan scroll pada kedua widget tersebut. Scroll merupakan penggulung yang dapat digerakkan ke atas atau ke bawah. Scroll ini juga dapat membuat blog terlihat tertata lebih rapi.

      Berikut ini cara memberi scroll atau penggulung pada widget Arsip Blog dan Label.

      1. Masuk ke akun Blogger Anda.

      2. Klik Rancangan > Edit HTML.

      3. Klik Download Template Lengkap untuk mem-back up template.

      4. Cari kode ]]></b:skin> (Gunakan tombol Ctrl + F untuk memudahkan pencarian)

      5. Biasanya kode id untuk widget Arsip Blog seperti di bawah ini.

      <b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>

      Maka untuk memberi scroll pada widget Arsip Blog silakan copy kode di bawah ini dan paste di atas kode ]]></b:skin>

      #BlogArchive1 .widget-content{
      height:200px;
      width:auto;
      overflow:auto;
      }

      6. Sedangkan kode id untuk widget Label umumnya seperti di bawah ini.

      <b:widget id='Label1' locked='false' title='Label' type='Label'/>

      Maka untuk memberi scroll pada widget Label silakan copy kode di bawah ini dan paste di atas kode ]]></b:skin>

      #Label1 .widget-content{
      height:200px;
      width:auto;
      overflow:auto;
      }

      7. Klik tombol SIMPAN TEMPLATE.

      • Angka 200 menunjukkan tinggi scroll sebesar 200 piksel, Anda dapat menggantinya sesuai keinginan Anda. Makin besar angkanya makin tinggi scroll-nya.

      Senin, 16 Mei 2011

      Cara Membuat Border di Blogger

      B
      order biasanya digunakan untuk menandai suatu teks atau tulisan yang dianggap penting di postingan pada blog. Dengan kata lain, pembaca diajak untuk lebih memperhatikan kalimat yang diberi border tersebut. Selain itu, adanya border ini juga dapat mempercantik tampilan postingan.

      Untuk membuat border di postingan, diperlukan kode CSS atau Casscading Style Sheets. Border ini mempunyai beberapa macam atau style, diantaranya adalah border style solid dan border style dot. Berikut ini kode CSS untuk kedua macam style border tersebut.

      Border Style Solid

      <div style="border: 2px solid red; height: 20px; padding: 5px; text-align: left; width: 200px;">
      Border Style Solid</div>

      Maka hasilnya seperti di bawah ini.

      Border Style Solid

      • border: 2px solid red; menunjukkan ketebalan tepi border sebesar 2 piksel dan bergaya solid dengan warna merah (red). Bila ingin lebih tebal lagi, silakan ganti angka 2 dengan angka yang lebih besar lagi. Kalau mau ganti warna, silakan ganti kata red dengan warna yang lain, misalnya blue untuk biru, dan lain sebagainya.
      • height: 20px; menunjukkan tinggi border sebesar 20 piksel. Bila ingin lebih tinggi lagi, silakan ubah angka 20 dengan angka yang lebih tinggi lagi nilainya.
      • padding: 5px; menunjukkan jarak antara tulisan dengan tepi border sebesar 5 piksel. Jika ingin diubah, silakan diganti angkanya. Makin besar angkanya makin renggang jaraknya.
      • text-align: left; menunjukkan perataan tulisan. Left untuk rata kiri, right untuk rata kanan, center untuk rata tengah, justify untuk rata kanan kiri.
      • width: 200px; menunjukkan lebar border sebesar 200 piksel. Jika ingin lebih lebar lagi, silakan diganti angka 200 dengan angka yang lebih tinggi lagi nilainya.

      Border Style Dot

      <div style="border: 2px dotted green; height: 20px; padding: 5px; text-align: center; width: 200px;">
      Border Style Dot</div>

      Maka hasilnya seperti di bawah ini.

      Border Style Dot


      Selain dua jenis border di atas masih ada lagi beberapa tipe border yang lainnya. Berikut ini beberapa style border yang lainnya.


      Border Style Dash

      <div style="border: 2px dashed blue; height: 20px; padding: 5px; text-align: right; width: 200px;">
      Border Style Dash</div>

      Maka hasilnya seperti di bawah ini.

      Border Style Dash


      Border Style Outset

      <div style="border: 2px outset yellow; height: 20px; padding: 5px; text-align: left; width: 200px;">
      Border Style Outset</div>

      Maka hasilnya seperti di bawah ini.

      Border Style Outset


      Border Style Inset

      <div style="border: 2px inset yellow; height: 20px; padding: 5px; text-align: right; width: 200px;">
      Border Style Inset</div>

      Maka hasilnya seperti di bawah ini.

      Border Style Inset


      Border Style Double

      <div style="border: 5px double green; height: 20px; padding: 5px; text-align: center; width: 200px;">
      Border Style Double</div>

      Maka hasilnya seperti di bawah ini.

      Border Style Double


      Border Style Multiple

      <div style="border-color: purple; border-style: dotted dashed solid double; border-width: 6px; height: 20px; padding: 5px; text-align: center; width: 200px;">Border Style Multiple</div>

      Maka hasilnya seperti di bawah ini.

      Border Style Multiple


      Border Style Ridge

      <div style="border: 10px ridge red; height: 20px; padding: 5px; text-align: left; width: 200px;">
      Border Style Ridge</div>

      Maka hasilnya seperti di bawah ini.

      Border Style Ridge

      Minggu, 15 Mei 2011

      Cara Membuat Gadget Label Menjadi Dua Kolom

      Apakah Anda sudah memasang gadget atau widget label tipe daftar atau list di sidebar blog Anda? Jika sudah, apakah gadget label tipe daftar tersebut masih menyisakan ruang kosong pada bagian kanannya sehingga memungkinkan bila dijadikan 2 kolom? Bila iya, jadikan saja gadget label daftar Anda menjadi dua kolom agar menghemat tempat pada sidebar blog Anda.


      Nah, untuk membuat gadget label daftar menjadi 2 kolom, silakan ikuti langkah-langkahnya di bawah ini. Namun, sebelumnya pastikan Anda telah memasang gadget label jenis daftar di sidebar blog Anda.

      1. Masuk ke akun Blogger Anda.

      2. Klik Rancangan > Edit HTML.

      3. Klik Download Template Lengkap utnuk mengantisipasi kalau nanti terjadi kesalahan dalam pengeditan.

      4. Cari kode ]]></b:skin> (Gunakan Ctrl + F untuk mempercepat pencarian)

      5. Copy kode di bawah ini dan paste di atas kode tersebut.

      #Label1 li {
      float:left;
      width:50%;
      }

      6. Klik tombol PRATINJAU. Bila gadget label belum berhasil menjadi 2 kolom, silakan ganti angka 50 dengan angka yang lebih kecil lagi, misalnya 45, lalu klik tombol PRATINJAU. Jika belum berhasil juga, silakan ubah lagi angka tersebut dengan angka yang lebih kecil sampai label terbentuk menjadi dua kolom.

      7. Bila label sudah berhasil menjadi 2 kolom, klik tombol SIMPAN TEMPLATE.

      Cara Memasang Gadget Label di Blogger

      Gadget atau widget label ini akan menampilkan semua label dari posting dalam blog kita. Di widget ini kita juga dapat memilih apakah semua label ditampilkan atau hanya label-label tertentu saja yang mau ditampilkan. Label-label dapat disusun berdasarkan alfabet atau frekuensinya. Gadget ini terdiri dari dua tipe yaitu label daftar atau list dan label cloud. Di sini kita juga dapat menampilkan jumlah entri per label.

      Berikut ini langkah-langkah memasang gadget atau widget label di sidebar pada Blogger.

      1. Masuk ke akun Blogger Anda.

      2. Klik Rancangan > Elemen Laman > Tambah Gadget.

      3. Di Dasar-dasar, silakan pilih Label.


      4. Kemudian konfigurasikan label sesuai dengan keinginan Anda.


      5. Jika sudah, silakan klik tombol SIMPAN.

      6. Pindahkan elemen ke tempat yang Anda inginkan.

      7. Klik tombol SIMPAN.

      8. Selesai.

      Cara Membatasi Jumlah Posting yang Tampil pada Label

      Kita dapat mengatur berapa jumlah posting yang ingin ditampilkan di halaman beranda atau home page blog kita. Apakah kita juga dapat membatasi jumlah posting yang tampil dalam satu halaman ketika sebuah label diklik? Jawabannya bisa.

      Memang sebuah label jika diklik akan menampilkan semua posting di bawah label tersebut. Bila sebuah label telah mempunyai jumlah posting yang cukup banyak, tentu hal ini akan membuat loading blog terasa berat, kita batasi saja jumlah posting yang tampil di satu halamannya sesuai dengan keinginan kita.

      Untuk membatasi jumlah posting yang tampil dalam satu halaman saat label diklik, kita perlu menambahkan kode pembatas seperti di bawah ini.

      + &quot;?max-results=5&quot;

      Angka 5 di atas menunjukkan berapa banyak jumlah posting yang ditampilkan per halamannya. Silakan ganti sesuai dengan keinginan Anda.

      Berikut ini akan kita praktikkan di template blog kita. Namun, sebelumnya pastikan bahwa Anda sudah memasang widget label di sidebar blog Anda. Labelnya bisa label berbentuk daftar atau list atau label yang berbentuk cloud.

      1. Masuk ke akaun Blogger Anda.

      2. Klik Rancangan > Edit HTML.

      3. Klik Download Template Lengkap untuk mem-back up template. Hal ini dilakukan untuk mengantisipasi kalau nanti terjadi kesalahan dalam pengeditan.

      4. Beri tanda centang pada Expand Template Widget.

      5. Cari kode seperti di bawah ini. Gunakan Ctrl + F untuk memudahkan pencarian.

      <ul>
            <b:loop values='data:labels' var='label'>
              <li>
                <b:if cond='data:blog.url == data:label.url'>
                  <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
                <b:else/>
                  <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
                </b:if>
                <b:if cond='data:showFreqNumbers'>
                  <span dir='ltr'>(<data:label.count/>)</span>
                </b:if>
              </li>
            </b:loop>
            </ul>

      6. Tambahkan kode pembatas + &quot;?max-results=5&quot;

      7. Sehingga hasilnya akan seperti di bawah ini.

      <ul>
            <b:loop values='data:labels' var='label'>
              <li>
                <b:if cond='data:blog.url == data:label.url'>
                  <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
                <b:else/>
                  <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=5&quot;'><data:label.name/></a>
                </b:if>
                <b:if cond='data:showFreqNumbers'>
                  <span dir='ltr'>(<data:label.count/>)</span>
                </b:if>
              </li>
            </b:loop>
            </ul>

      8. Kode di atas adalah kode untuk label yang berbentuk list. Sedangkan untuk label cloud, silakan cari kode seperti di bawah ini. Letaknya di bawah kode label list.

      <b:loop values='data:labels' var='label'>
              <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
                <b:if cond='data:blog.url == data:label.url'>
                  <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
                <b:else/>
                  <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
                </b:if>
                <b:if cond='data:showFreqNumbers'>
                  <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
                </b:if>
              </span>
            </b:loop>

      9. Tambahkan kode pembatas + &quot;?max-results=5&quot;

      10. Maka hasilnya akan tampak seperti di bawah ini.

      <b:loop values='data:labels' var='label'>
              <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
                <b:if cond='data:blog.url == data:label.url'>
                  <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
                <b:else/>
                  <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=5&quot;'><data:label.name/></a>
                </b:if>
                <b:if cond='data:showFreqNumbers'>
                  <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
                </b:if>
              </span>
            </b:loop>

      11. Klik tombol SIMPAN TEMPLATE.

      12. Selesai.

      Cara di atas berlaku pada sebuah label yang diklik di widget label, baik label daftar atau label cloud. Namun, untuk link label yang terdapat di menu navigasi breadcrumbs dan post footer line, link label tersebut bila diklik masih menampilkan semua posting. Nah, bila Anda ingin membatasi juga jumlah posting yang tampil pada label di kedua lokasi tersebut, silakan simak langkah-langkahnya di bawah ini.

      1. Lakukan langkah no. 1 - 4 pada langkah di atas.

      2. Cari kode seperti di bawah ini  atau yang mirip dengan kode tersebut, yaitu kode untuk menu navigasi breadcrumbs.

      <div id='breadcrumbs'>
      Browse: <a expr:href='data:blog.homepageUrl'>Home</a> &gt; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
      <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'> &gt; </b:if>
      </b:loop>
      </b:if> &gt; <a expr:href='data:post.link'><data:post.title/></a>
      </div>

      3. Tambahkan kode pembatasnya, maka hasilnya seperti di bawah ini.

      <div id='breadcrumbs'>
      Browse: <a expr:href='data:blog.homepageUrl'>Home</a> &gt; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
      <a expr:href='data:label.url + &quot;?max-results=5&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'> &gt; </b:if>
      </b:loop>
      </b:if> &gt; <a expr:href='data:post.link'><data:post.title/></a>
      </div>

      4. Cari kode seperti ini di bawah ini atau yang mirip dengan kode tersebut, yaitu kode untuk label pada post footer line.

      <div class='post-footer-line post-footer-line-2'><span class='post-labels'>
              <b:if cond='data:post.labels'>
                <data:postLabelsLabel/>
                <b:loop values='data:post.labels' var='label'>
                  <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
                </b:loop>
              </b:if>
            </span> </div>

      5. Kemudian tambahkan kode pembatasnya, maka jadinya akan seperti di bawah ini.

      <div class='post-footer-line post-footer-line-2'><span class='post-labels'>
              <b:if cond='data:post.labels'>
                <data:postLabelsLabel/>
                <b:loop values='data:post.labels' var='label'>
                  <a expr:href='data:label.url + &quot;?max-results=5&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
                </b:loop>
              </b:if>
            </span> </div>

      6. Klik tombol SIMPAN TEMPLATE.

      7. Selesai.