Forum, Blogger, diskusi, ilmu, berbagi, blogging, sharing, ide, inspirasi Kamu Forum

Cara Membuat Dua Kolom dibawah Kolom Posting (Plus Tambah Gadget)

Anda merasakan ada yang berubah di blog saya? Tentu saja dua kolom dibawah kolom posting seperti gambar diatas.

Ada yang bilang kepada saya "... lebih baik template default ini diganti dengan yang lain? biar keliatan profesional ...". Sebenarnya saya ingin mengganti template ini, tetapi males, ribet gantinya. Meskipun sekarang telah ada fitur pertahankan widget, tetap aja males. Lagipula siapa bilang template default Blogger nggak profesional? asal kreatif template Minima dan template default Blogger lainnya bisa jadi profesional. Itu sebabnya saya keukeuh tetap mempertahankan template default ini. Asal tahu saja, blognya Dewi Lestari (http://dee-idea.blogspot.com) yang terkenal itu, masih menggunakan template default Blogger. Lagipula, asal kita kreatif, hal yang biasa bisa jadi luar biasa.

Ok, back to topic. Kita bahas lagi cara membuat dua kolom dibawah postingan. Ini bisa jadi alternatif multi kolom yang tempo hari pernah saya bahas. Ok. Tertarik membuatnya? Ikuti langkah-langkah berikut ini.

1. Login ke Blogger, lalu klik menu Tata Letak > Edit HTML.

2. Silakan backup template anda.

3. Taruh kode ini diatas kode ]]></b:skin>
#doublecolumnleft, #doublecolumnright{
height:auto;
width:205px;
padding:10px;
background:#81F781;
color:#000000;
}
#doublecolumnleft h2, #doublecolumnright h2{
font-size:large;
font-weight:bold;
}
#doublecolumnright h2{
text-align:right;
}
#doublecolumnleft a, #doublecolumnright a{
color:#0A2A0A; text-decoration:underline;
}
#doublecolumnleft a:hover, #doublecolumnright a:hover{
text-decoration:none;
}
#doublecolumnleft{
float:left;
}
#doublecolumnright{
float:right;
text-align:right
}
Ket: bagian 205px adalah lebar dari masing-masing kolom. Sesuaikan dengan lebar main wrapper anda.

4. Cari bagian main wrapper (kolom posting) anda. Misalkan punya saya:
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='HTML4' locked='false' title='Kotak Pencarian' type='HTML'/>
<b:widget id='HTML16' locked='false' title='' type='HTML'/>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>
5. Lalu sebelum kode </div>, ketikkan kode berikut.
<b:section class='dblcolumn' id='dblcolumnleft' preferred='yes'/>
<b:section class='dblcolumn' id='dblcolumnright' preferred='yes'/>
Sehingga menjadi:
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='HTML4' locked='false' title='Kotak Pencarian' type='HTML'/>
<b:widget id='HTML16' locked='false' title='' type='HTML'/>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
<b:section class='dblcolumn' id='dblcolumnleft' preferred='yes'/>
<b:section class='dblcolumn' id='dblcolumnright' preferred='yes'/>

</div>
7. Simpan.

8. Beralih ke tab Elemen Halaman, anda akan menemukan link Tambah Gadget dibawah kolom posting. Klik link tersebut untuk menambah widget, semisal recent posts atau recent comments.
Berhasil? Selamat! Gagal? Coba lagi! Semoga bermanfaat!
KLIK DISINI UNTUK BACA SELENGKAPNYA

Dasar-dasar CSS #2

Melanjutkan pembahasan dasar-dasar CSS yang lalu, kali ini saya ingin membahas tentang selector. Tetapi sebelum kita menuju bahasan utama, ada baiknya kita berbasa-basi dulu. Ibarat lagu, jangan langsung ke reffrainnya.

Ok, kita mulai basa-basinya. Saya membuat blog baru, bertajuk "Tips N' Trik Blogging". Jangan lupa ya kunjungi di alamat http://tipntrikblogging.blogspot.com/. Maklum masih baru jadi belum ada tutorialnya sama sekali. Tapi saya mengundang 10 orang untuk menjadi guest blogger. Silahkan kirim saya E-mail (di link E-mail me), lalu anda akan menerima E-mail dari Blogger, silakan ikuti langkah-langkah selanjutnya.

Sudah cukup basa-basinya, sekarang kita ke bahasan pokok. Ada beberapa macam sselector. Diantaranya:

1. Class selector

Class selector adalah selector yang boleh diulang-ulang, dan cara penulisannya dengan cara menambahkan tanda titik (.) diikuti dengan nama classnya. Contoh:
.namaclass{color:blue}
Dan cara pengaplikasiannya adalah dengan menggunakan atribut class="...". Contoh:
<html>
<head>
<title>Belajar CSS</title>
<style type="text/css">
<!--
.namaclass{color:blue;}
-->
</style>
</head>
<body>
Ini adalah teks biasa.
<div class="namaclass">
Ini adalah teks dengan class selector "namaclass".
</div>
</body>
</html>
2. ID selector.

ID selector adalah selector yang hanya bisa dipakai untuk satu elemen, dengan kata lain, tidak boleh diulang-ulang. Cara penulisannya adalah dengan menuliskan tanda kres/pagar (#) sebelum nama selector. Contoh:
#namaid{background:black;color:white;}
Lalu cara pengaplikasiannya adalah dengan menambahkan atribut id="...". Contoh:
<html>
<head>
<title>Belajar CSS</title>
<style type="text/css">
<!--
#namaid{background:black;color:white;}
-->
</style>
</head>
<body>
Ini adalah teks biasa.
<div id="namaid">
Ini adalah teks dengan id selector "namaid".
</div>
</body>
</html>
3. Tag selector

Tag selector adalah selector yang diaplikasikan kepada tag yang menjadi nama selectornya. Contoh:
body{background:black;}
Anda tidak perlu menambahkan atribut tertentu untuk membuatnya bekerja karena secara otomatis akan diaplikasikan kepada tag yang dijadikan nama selectornya. Pada contoh diatas, berarti tag <body> akan berlatar belakang hitam. Secara lengkap seperti ini.
<html>
<head>
<title>Belajar CSS</title>
<style type="text/css">
<!--
body{background:black;}
-->
</style>
</head>
<body>
Body akan berlatar belakang hitam.
</div>
</body>
</html>
4. Pseudo class

Ada beberapa pseudo class. Yaitu:
  • active: Properti untuk link/sesuatu yang sedang diklik.
  • hover: Properti untuk link/sesuatu ketika kursor mouse berada di atasnya.
  • visited: Properti untuk link yang sudah dikunjungi.
Cara menulisnya adalah:
(tag/id/class selector):pseudo class{properti:nilai;}
Contoh:
<html>
<head>
<title>Belajar CSS</title>
<style type="text/css">
<!--
a{color:blue;}
a:active{color:red;}
a:hover{color:green;}
a:visited{color:purple;}
.contohcss{background:lime;}
.contohcss:hover{background:yellow;}
#contohcss2{color:blue;}
#contohcss2:hover{color:purple;}
-->
</style>
</head>
<body>
<a href="#">Link 1</a><br/>
<a href="#">Link 2</a><br/>
<a href="#">Link 3</a><br/>
<div class="contohcss">
Ini adalah teks dengan class "contohcss".
</div><br/>
<div id="contohcss2">
Ini adalah teks dengan id "contohcss2".
</div>
</body>
</html>
Catatan:

Pada Internet Explorer, pseudo class dengan selector selain a tidak didukungnya.

Kontekstual selector

Kontekstual selector adalah kondisi dimana selector akan diaplikasikan kepada selector yang konteksnya tepat (nggak mudeng yak? bingung juga...). Contoh:
b i{color:blue;}
Contoh lengkapnya:
<html>
<head>
<title>Belajar CSS</title>
<style type="text/css">
<!--
b{color:blue;}
i{color:green;}
b i{color:purple;}
i b{color:orange;}
#css1{background:green;}
#css1 #css2{background:purple;}
#css1 #css2 #css3{background:yellow;}
-->
</style>
</head>
<body>
<b>Warna teks ini akan biru</b><br/>
<i>Warna teks ini akan hijau</i><br/>
<b><i>Warna teks ini akan ungu</i></b><br/>
<i><b>Warna teks ini akan jingga</b></i><br/>
<b>yang ini akan biru <i>kecuali yang ini</i> yang tadi berwarna ungu</b>
<div id="css1">
Warna latar belakang akan hijau
<div id="css2">
Nah, kalau yang ini akan berwarna ungu
<div id="css3">
Yang ini? berwarna kuning
</div>
Kembali ke warna ungu lagi latar belakangnya
</div>
</div>
</body>
</html>
Bingung ya? Semoga saja mudah dipahami. Pada tutorial berikutnya saya akan membahas tentang beberapa properti dalam CSS. Semoga bermanfaat!
KLIK DISINI UNTUK BACA SELENGKAPNYA

Dasar-dasar CSS #1

CSS, Tutorial CSS
Untuk mempercantik template, kita harus berurusan dengan yang namanya kode CSS. Tapi, banyak pemula masih bingung dengan kode CSS. Nah, untuk itu saya berikan dasar-dasarnya dulu. Dasar-dasar CSS ini akan diterbitkan secara berurutan dan nantinya akan muncul secara berseri. Sebelum belajar CSS, anda perlu mengetahui dulu tentang HTML dan diharapkan membaca dulu dasar-dasar kode HTML bagian 1, bagian 2, bagian 3, dan bagian 4. Untuk permulaan, saya bertanya. Apa sih yang namanya CSS itu?

CSS adalah singkatan dari Cascading Style Sheet. Bisa digunakan untuk menentukan style dari situs web, misalnya layout, warna, latar belakang, dan lain-lain. Cara penulisan kode CSS seperti ini.
selector{properti:nilai;}
Selector adalah "nama" dari kode CSS (bingung nyebutnya apa jadi anggap aja begitu...). Properti adalah sifat-sifat dari selector. Sedangkan nilai adalah nilai dari properti. Misalnya:
body{color:#FFFFFF;}
Artinya: selector body akan mempunyai sifat warna teks yang berwarna putih.

Lalu ada juga yang namanya komentar. Komentar diawali dengan kode /* dan diakhiri dengan kode */. Panjangnya boleh satu atau beberapa baris. Kode CSS yang ditaruh diantara kedua kode tersebut tidak akan diproses oleh browser. Contoh:
/* Ini contoh komentar pada CSS
bisa satu baris atau lebih. */
body{/* ini adalah nama selector */
color:white; /* artinya selector body akan bersifat warna teks putih */
}
CSS bisa dimasukkan pada situs web dengan beberapa cara.

1. Dengan kode <style type="text/css">.

Penulisannya begini.
<style type="text/css">
<!--
/* Masukkan kode CSS disini. */
-->
</style>

2. Dengan kode style="..." (inline style).

Contoh:
<div style="background-color:black;">
Bagian ini akan berlatar belakang warna hitam.
</div>
Anda bisa saja menggunakannya pada elemen selain div. Yang penting, kode CSS-nya ditaruh diantara kode style="...".

3. Dengan metode impor style.

Kodenya seperti berikut.
<link href="URLFILECSS" type="text/css" rel="stylesheet"/>
Kode tersebut ditaruh diantara kode <head> dan kode </head>. Yang penting ganti bagian URLFILECSS dengan URL dari file CSS yang anda simpan di web hosting.

Untuk kali ini segitu dulu. Kapan-kapan dilanjutkan dengan pembahasan tentang selector. Terima kasih dan silakan komentar untuk kemajuan blog ini. Terima kasih.
KLIK DISINI UNTUK BACA SELENGKAPNYA

Perbaikan pada Show/Hide Komentar

Beberapa waktu lalu saya pernah memberitempetahu cara membuat show/hide komentar. Tetapi ada beberapa masalah dengan show/hide tersebut. Apabila komentarnya berjumlah 0, tetap akan muncul tulisan [Lihat semua komentar] dan [Tutup semua komentar]. Masalahnya buat apa fitur ini kalau tidak ada komentarnya?

Untuk memperbaikinya, silakan login ke Blogger, lalu klik Tata Letak > Edit HTML. Lalu backup dulu template anda. Lalu beri tanda centang pada kotak kecil Expand Template Widget. Kalau sudah, ikutilah langkah-langkah berikut.

1. Saya asumsikan anda sudah membuat kode untuk show/hide komentar (bila belum ada, klik disini untuk membuatnya).

2. Cari kode berikut.
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/> <a id='showcomments' onclick='bukakomen()'>[Lihat semua komentar]</a><a id='closecomments' onclick='tutupkomen()'>[Tutup semua komentar]</a>
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/> <a href='#nogo' id='showcomments' onclick='bukakomen()'>[Lihat semua komentar]</a><a href='#nogo' id='closecomments' onclick='tutupkomen()'>[Tutup semua komentar]</a>
</b:if>
3. Ganti dengan kode berikut.
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/> <a href='#nogo' id='showcomments' onclick='bukakomen()'>[Lihat semua komentar]</a><a href='#nogo' id='closecomments' onclick='tutupkomen()'>[Tutup semua komentar]</a>
</b:if>
<b:if cond='data:post.numComments &gt; 1'>
<data:post.numComments/> <data:commentLabelPlural/> <a href='#nogo' id='showcomments' onclick='bukakomen()'>[Lihat semua komentar]</a><a href='#nogo' id='closecomments' onclick='tutupkomen()'>[Tutup semua komentar]</a>
</b:if>
<b:if cond='data:post.numComments == 0'>
Tidak ada komentar.
</b:if>
Ket: Tulisannya boleh anda ganti sesuka hati.

4. Klik Simpan Template.

Nah, sekarang, pada posting yang tidak ada komentarnya, tidak akan ada lagi tulisan [Lihat semua komentar] dan [Tutup semua komentar].
KLIK DISINI UNTUK BACA SELENGKAPNYA

Utak-atik Tampilan Blockquote Anda

Blockquote biasanya digunakan sebagai kutipan dari suatu kalimat, atau kata-kata mutiara, atau intisari dari sebuah teks. Biasanya tampilan blockquote berbentuk agak menjorok ke dalam kolom posting (aku nggak ngerti istilahnya apa).

Kita bisa mengubahnya agar tampak sedap dipandang mata. Anda perlu sedikit pengetahuan tentang CSS untuk mengubahnya.

Langsung saja. Pertama-tama, kita pecahkan telurnya, lalu kita masukkan adonan kuenya, kocok sebentar, lalu masukkan ke dalam oven dan tunggu selama 15 menit (lha ini mau ngutak-atik tampilan blockquote apa mau bikin kue? ). Maksudnya, langsung saja login ke Blogger, lalu klik Tata Letak > Edit HTML. Lalu backup dulu template anda. Kalau sudah cari kode berikut.
.post blockquote{
....................
}
Ket: Yang dititik-titikkan itu adalah properti blockquote default dari template anda.

Kalau tidak ada, gimana?

Kalau tidak ada, buat saja kode tersebut. Buatnya dimana? Buatnya diatas kode ]]></b:skin>.

Lalu apa?

Lalu ya utak-atik tampilannya. Misalnya mau buat backgroundnya jadi biru ya ubah jadi:
.post blockquote{
....................
color:blue;
}
Kalau kamu mahir CSS, kamu bisa modifikasi lebih jauh lagi.

Kalau sudah, klik tombol Simpan Template.

Sudah segitu aja. Soalnya lagi nggak enak badan nggak bisa lama-lama didepan komputer. Semoga bermanfaat!
KLIK DISINI UNTUK BACA SELENGKAPNYA

Merancang Template Sendiri dengan Perancang Template

ETauNggakSiLo (kayak iklan yang ada di TV-TV aja yah
)? Sekarang ada fitur perancang template Blogger yang memungkinkan kita untuk merancang template sendiri. Dulu pada artikel konsultasi matematika ke-12 (tentang simetri lipat dan simetri putar), saya telah memberitahu tentang fitur perancang template Blogger. Nah, pada postingan ini saya akan menjelaskan langkah-langkah/tutorial untuk merancang template anda.

1. Pertamax-tamax (kecanduan pertamax di blog akhirnya pertama jadi pertamax ), kita login ke Blogger lewat http://draft.blogger.com (jangan lewat http://blogger.com tapi http://draft.blogger.com). Lalu klik Tata Letak > Perancang Template.

2. Pada menu Templates, anda bisa memilih template yang akan digunakan pada blog anda.
3. Klik pada menu Background. Jika ingin memberi gambar pada background, klik pada gambar dibawah tulisan Background Image. Nah, lalu pilihlah gambar yang diinginkan. Gambar-gambarnya terdiri dari beberapa kategori dan bila salah satu kategori diklik, maka akan muncul gambar yang berkaitan dengan kategori tersebut. Kalau sudah, klik Done
5. Pilihlah warna utama yang diinginkan pada bagian Main Color theme.
6. Klik pada menu Layout. Lalu, aturlah tata letak sidebar yang diinginkan. Bisa dikiri atau dikanan atau kedua-duanya.
7. Kliklah menu Footer Layout, lalu aturlah jumlah footer yang diinginkan. Apa hanya satu buah, dua, atau tiga.
8. Klik menu Adjust Width, lalu aturlah lebar dari kolom posting dan kolom sidebar (Entire Blog untuk lebar keseluruhan kolom posting dan kolom sidebar, Left Sidebar untuk lebar kolom sidebar kiri, dan Right Sidebar untuk lebar kolom sidebar kanan. Apabila hanya memilih layout dengan sidebar hanya disebelah kanan, maka yang akan muncul hanya pengaturan Right Sidebar. Begitu juga sebaliknya, jika anda memilih layout di sebelah kiri, maka pengaturan yang akan muncul hanyalah pengaturan Left Sidebar. Jika anda memilih layout dengan sidebar disebelah kiri dan kanan, maka akan muncul dua-duanya. Sedangkan jika anda memilih layout 1 kolom, maka dua-duanya tidak akan muncul dan yang hanya muncul hanya pengaturan Entire Blog)
9. Klik menu Advanced. Maka anda akan mendapatkan pengaturan seperti pada menu Font dan Warna.
10. Kliklah submenu Add CSS. Maka anda bisa menambahkan CSS kustom kedalam blog anda. Misalnya saya menambahkan kode CSS untuk help/keterangan.
11. Kalau sidah, klik Apply to Blog
12. Tunggu sebentar. Lalu klik Back to Blogger untuk kembali ke Blogger, atau klik View Blog untuk menampilkan blog anda sesudah templatenya dimodifikasi.
Selesai. Itu dia tutorial menggunakan perancang template Blogger. Semoga bermanfaat!
KLIK DISINI UNTUK BACA SELENGKAPNYA

Mengecek Statistik Blog dengan Indostats

Indostats. Nama itu mungkin terdengar asing di telinga anda. Nah, sekarang saya akan mengenalkan Indostats kepada anda. Indostats adalah tool yang bisa anda gunakan untuk menganalisa statistik blog anda. Berikut hal-hal yang bisa dilihat dan dianalisa dengan Indostats:

  • Berapa pengunjung blog anda.
  • Pengunjung blog anda datang dari mesin pencari apa dan mengetikkan kata kunci apa.
  • Pengunjung blog anda datang dari link yang ada di blog/situs mana.
  • Pengunjung blog anda dari negara mana dan dari kota mana
  • Apa sistem operasi, browser, resolusi, warna, dan flash yang dipakai oleh pegunjung blog anda. Dan apakah browsernya mendukung javascript atau tidak.
  • Pengunjung blog anda masih jomblo atau sudah punya pacar (kalau yang ini bohong deng... Hehehe... )
Kelebihannya adaah, Indostats menggunakan bahasa Indonesia. Jadi, sangat mudah untuk mengelolanya.

Muncul pertanyaan: "Gimana sih caranya ngecek statistik blog saya di Indostats?". Kalo begitu, nggak usah panjang x lebar lagi (hehehe... panjang x lebar = luas di persegi panjang ), kita mulai!!!

1. Pertama-tama kita buka dulu situs http://www.indostats.com


2. Klik link Daftar Disini.


3. Masukkan alamat E-mail, password (dan konfirmasi password. Isikan kedua-duanya dengan password yang sama), dan negara. Lalu klik Daftar.


4. Masukkan alamat situs dan ID situs anda. Atur juga Jenis Report. Sebaiknya pilih Publik biar nggak usah repot-repot login ke Indostats kalau mau ngeliat statistik blog anda. Lalu klik Tambah Situs.


5. Copy kode HTML yang diberikan oleh Indostats, lalu paste di layout blog anda. Caranya gimana? Ya tinggal login ke Blogger, klik Tata Letak > Elemen Halaman > Tambah Gadget > HTML/Javascript, lalu paste kode yang diberikan oleh Indostats. Lalu klik Simpan.


6. Untuk mengecek statistik anda, klik kanan pada gambar/ikon dari Indostats, lalu klik Copy Link Location.


7. Lalu paste link tersebut pada address bar pada browser anda. Lalu akan muncul halaman statistik anda (jika anda memilih Privat pada Jenis Report, maka anda harus login dulu untuk melihat statistik anda).


8. Silakan cek statistik blog anda. Misalnya klik pada tulisan Pengunjung untuk mengetahui banyak pengunjung blog anda, atau klik pada tulisan Kata Kunci untuk mengetahui kata kunci yang diketikkan pengunjung di mesin pencari.

Nah, itu dia cara yang bisa dilakukan untuk mengecek statistik blog anda. Semoga bermanfaat.
KLIK DISINI UNTUK BACA SELENGKAPNYA

Konsultasi Matematika Part 12: Simetri Lipat dan Simetri Putar

Kembali ke laptop konsultasi matematika. Perasaan sudah lama kita tak berjumpa tak kuat menahan rindu pengen posting konsultasi matematika lagi nih... BTW, udah pada tahu nggak kalo di Blogger ada fitur perancang template? Tapi fitur ini masih ada di Blogger Draft. Jadi kalo mau nyoba, silakan masuk ke Blogger Draft, lalu login, lalu klik Tata Letak > Perancang Template.

Waduh... kok jadi nyambung-nyambung ke fitur perancang template yak??? Ok, langsung saja...

Simetri Lipat

Simetri lipat adalah... bingung saya jelasinnya (barangkali ada yang tahu pengertian simetri lipat, bisa dishare pengetahuannya di kotak komentar...) tapi mungkin akan terbantu dengan gambar dibawah ini (klik pada gambar untuk lebih jelas).


Intinya, apabila suatu bangun/bentuk memiliki simetri lipat, maka ketika dilipat menurut sumbu simetri bangun tersebut, akan terbentuk suatu bangun yang saling menutupi satu sama lain. Dengan kata lain tidak ada sisa pada lipatan tersebut.

Simetri Putar

Simetri putar adalah kesamaan bentuk jika diputar. Misalnya persegi panjang ABCD dibawah ini (sekali lagi, klik pada gambar untuk melihat lebih jelas).


Nah, persegi panjang tersebut memiliki 2 simetri putar. Pada saat diputar 180 derajat searah jarum jam, dan saat tidak diputar. Bangun datar dikatakan mempunyai simetri putar jika mempunyai paling sedikit 2 simetri putar. Jika hanya memiliki 1 simetri putar (yaitu pada saat bangun datar tersebut tidak diputar), maka bangun datar tersebut tidak memiliki simetri putar.

Simetri lipat dan simetri putar pada bangun datar biasa

Ini dia banyak simetri lipat dan simetri putar pada bangun datar biasa.

Bangun datarSimetri lipatSimetri putar
Persegi44
Persegi panjang22
Segitiga sama sisi33
Segitiga sama kaki10
Segitiga siku-siku00
Segitiga sembarang00
Trapesium sama kaki10
Trapesium siku-siku00
Trapesium sembarang00
Jajar genjang02
Belah ketupat22
Layang-layang10
LingkaranTak terhinggaTak terhingga

Sekian konsultasi matematika kali ini. Bila ada kesalahan mohon maaf dan koreksi saya dengan berkomentar dibawah. Semoga bermanfaat!
KLIK DISINI UNTUK BACA SELENGKAPNYA

Cara Membuat Show/Hide Komentar

Kembali lagi di postingan Modifikasi Template, kali ini kita akan membahas tentang cara membuat show/hide pada komentar. Anda mengerti? Kalau belum, begini. Pertama-tama semua komentar akan disembunyikan, dan akan terlihat jika pengunjung mengklik link untuk membukanya. Sebagai contoh ada di blog http://siapayangpantas.blogspot.com. Buka salah satu postingan yang ada komentarnya, lalu lihat. Ada tulisan [Lihat semua komentar] untuk membukanya. Seperti ini nih screenshoot-nya (klik pada gambar untuk lebih jelas).


Lalu, ketika sudah diklik, semua komentar akan terbuka. Nah, lalu akan ada link [Tutup semua komentar] untuk menyembunyikan semua komentar yang masuk. Nah, seperti ini (klik pada gambar juga untuk lebih jelas).


Gimana? Bagus nggak? Kalo iya, pengen nggak supaya ada di blog kamu? Ya iya laah... Masa ya iya dong... Duren aja dibelah bukan dibedong... Kita mulai aja yuk tutorialnya, lama-lama basa-basi jadi garing!!!

1. Login ke Blogger dengan akun anda (jangan pake akun orang, apalagi akun saya! Kan yang mau anda bukan saya... )

2. Lalu klik Tata Letak > Edit HTML.

tata letak, edit HTML

3. Backup dulu template anda untuk menghindari pencurian, maksudnya template anda rusak setelah melakukan pengeditan. Klik Download Template Lengkap lalu ikuti langkah selanjutnya untuk mengunduh file XML dari template anda.


4. Beri tanda centang pada partai yang anda pilih, maksudnya checkbox Expand Template Widget.


5. Cari kode ]]></b:skin>, lalu masukkan kode berikut diatasnya.
/* Show-Hide Comments */
#showcomments{
display:inline;
}
a#showcomments:hover, a#closecomments:hover{
cursor:hand;
}
#closecomments, #komentar{
display:none;
}
6. Cari kode </head>, lalu ketikkan kode ini diatasnya.
<script>
function tutupkomen()
{
document.getElementById(&#39;komentar&#39;).style.display=&#39;none&#39;;
document.getElementById(&#39;showcomments&#39;).style.display=&#39;inline&#39;;
document.getElementById(&#39;closecomments&#39;).style.display=&#39;none&#39;;
}
function bukakomen()
{
document.getElementById(&#39;komentar&#39;).style.display=&#39;inline&#39;;
document.getElementById(&#39;showcomments&#39;).style.display=&#39;none&#39;;
document.getElementById(&#39;closecomments&#39;).style.display=&#39;inline&#39;;
}
</script>
7. Cari kode seperti kode dibawah.
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
8. Hapus semua kode tersebut, lalu ganti dengan kode:
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/> <a id='showcomments' onclick='bukakomen()'>[Lihat semua komentar]</a><a id='closecomments' onclick='tutupkomen()'>[Tutup semua komentar]</a>
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/> <a href='#nogo' id='showcomments' onclick='bukakomen()'>[Lihat semua komentar]</a><a href='#nogo' id='closecomments' onclick='tutupkomen()'>[Tutup semua komentar]</a>
</b:if>
Ket: Yang berwarna merah adalah link untuk membuka komentar. Sedangkan yang berwarna biru adalah link untuk menutup komentar. Anda bisa menggantinya dengan teks yang diinginkan. Perhatikan! Ada dua bagian yang berwarna merah dan biru. Isikan keduanya dengan teks yang sama.

9. Cari kode berikut.
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
10. Ganti sehingga menjadi seperti ini.
<div id='komentar'>
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>
Ket: kode yang ditambahkan hanya kode yang dicetak tebal.

11. Klik Simpan Template.

Selsai! Akhirnya... Capek juga nih tangan nulis dari tadi... Silahkan mencoba. Bila belum berhasil, cek lagi, barangkali ada satu-dua langkah yang terlewatkan. Semoga bermanfaat!
KLIK DISINI UNTUK BACA SELENGKAPNYA

Pengikut

Follow via NetworkedBlogs



Jangan lupa jadi fans Muhammad Rizki Fadillah's Blog di Facebook. Klik link di bawah ini.

http://www.facebook.com/pages/Tips-Trik-Matematika-Tutorial-Blogging-Muhammad-Rizki-Fadillahs-Blog/277782561876

Setelah mengklik link diatas, klik tombol Become A Fan untuk menjadi fans Muhammad Rizki Fadillah's Blog.