Nofollow-kan Comment Permalink Blogger Agar Tidak Diindeks Google

Hi, all. Let's talk about Blogger SEO again. :), and today let me talk about Blogger Comment Permalinks, how it affects your SEO, and how to resolve the SEO problem caused by them.

Background

Dalam template blogger, ada satu tag yang digunakan sebagai generator dari permalink comment, sehingga masing-masing komentar blog sebenarnya memiliki permalink unik yang apabila di-klik akan langsung menuju ke bagian komentar tertentu di dalam sebuah posting. Permalink ini biasanya menggunakan anchor text tanggal dan atau hari dimana sebuah komentar di-publish di sebuah posting. Letaknya ada yang di bagian atas komentar atau di bawah komentar tergantung susunan tags di dalam template. Secara default, permalink tersebut tidak mengandung atribut relationship apapun, artinya (secara tidak sengaja) search engine "diijinkan" untuk melakukan "follow" atau mengikuti dan mengindeks link tersebut.

Contoh url dalam permalink komentar:

http://buka-rahasia.blogspot.com/2012/11/Cara-memasang-facebook-recommendation-bar-di-blogger.html#comment-4946048359309488959

Dalam warna yang berbeda, ada beberapa perintah yang digunakan untuk engine Blogger membuat permalink komentar secara otomatis di dalam tag a sesuai dengan warna di atas:

"#comment-" + data:comment.id

Kedua perintah di atas kemudian disusun bersama dengan permalink posting dan menghasilkan permalink komentar yang diperintahkan dengan menggunakan atribut href:

expr:href='"#comment-" + data:comment.id'

Yup, cukup untuk teorinya :)

-----------------------------

Nah, kasusnya, ada beberapa teman Blogger yang menghubungi saya, baik melalui akun Facebook maupun email, menyampaikan bahwa permalink komentar di blog mereka terindeks Google, dan bagaimana solusi mengatasi hal tersebut.

Ada beberapa kemungkinan yang akan terjadi bila permalink komentar terindeks:

1. Kemungkinan besar, ini akan berdampak buruk bagi relevansi komentar dengan artikel/posting yang diindukinya, sebab, seperti kita ketahui, tidak semua komentar memiliki isi yang sesuai, hanya berisi satu atau dua kata, dan bahkan komentar itu sama sekali tidak berhubungan (spam).

2. Jika permalink tersebut dianggap menuju ke sebuah halaman unik, maka halaman tujuan bukanlah halaman posting yang sesungguhnya, tidak terpisah dari halaman post, tidak memiliki title, serta tidak memiliki konten yang memadai. Oleh karena itu, permalink komentar tidak akan pernah bisa mencapai SERP yang baik.

3. Kalaupun bisa mencapai SERP bagus, kan sangat jarang pengunjung yang tertarik meng-klik listing indeks yang menuju halaman permalink komentar bukan? 

Solusi Agar Permalink Komentar Tidak Terindeks

Untuk mengatasi masalah tersebut, terutama bagi sobat-sobat pengguna Blogger yang comment permalink-nya ikut terindeks Google, tambahkan atribut rel="nofollow" pada tag comment permalink agar search engine tidak mengikuti link tersebut. Bagi yang tidak mengalami kasus yang sama, tips ini sifatnya opsional, bila sobat yakin harus melakukan hal yang sama, silahkan saja. How?

1. Masuk ke dashboard > template > edit HTML.

2. Jangan lupa centang "expand widgets template"

3. Cari kode/tag berikut:

<a expr:href='"#comment-" + data:comment.id' title='comment permalink'><data:comment.timestamp/></a>

Jika tidak ketemu, ada kemungkinan bagian quote (") diparsing sehingga menghasilkan quote dalam bentuk ASCII (&quote;). Beberapa pembuat template lebih suka menggunakan kode seperti itu sebab lebih cepat dibaca engine atau platform Blogger, jadi cari kode/tag seperti ini:

<a expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'></a>

4. Setelah itu, tambahkan atribut atribut rel=nofollow ke dalam tag a-nya:

<a rel='nofollow' expr:href='"#comment-" + data:comment.id' title='comment permalink'><data:comment.timestamp/></a>
atau,
<a rel='nofollow' expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'></a>

5. Save template and done!

Sekarang permalink komentar sobat sudah memiliki atribut rel=nofollow, yang berfungsi memberi informasi pada google search engine untuk tidak mengikuti dan mengindeksnya. Ingat bahwa perubahan tidak terjadi seketika, butuh waktu bagi Google untuk mengupdate indeks setelah mendapatkan informasi baru dari template blog sobat. Semua tergantung kecepatan indeks serta otoritas web/blog di mata Google.

Well, see you then and have a nice Blogging. :)

� buka-rahasia.blogspot.com. All rights reserved.

Nofollow-kan Comment Permalink Blogger Agar Tidak Diindeks Google

Posted by rike 1 comment

Hi, all. Let's talk about Blogger SEO again. :), and today let me talk about Blogger Comment Permalinks, how it affects your SEO, and how to resolve the SEO problem caused by them.

Background

Dalam template blogger, ada satu tag yang digunakan sebagai generator dari permalink comment, sehingga masing-masing komentar blog sebenarnya memiliki permalink unik yang apabila di-klik akan langsung menuju ke bagian komentar tertentu di dalam sebuah posting. Permalink ini biasanya menggunakan anchor text tanggal dan atau hari dimana sebuah komentar di-publish di sebuah posting. Letaknya ada yang di bagian atas komentar atau di bawah komentar tergantung susunan tags di dalam template. Secara default, permalink tersebut tidak mengandung atribut relationship apapun, artinya (secara tidak sengaja) search engine "diijinkan" untuk melakukan "follow" atau mengikuti dan mengindeks link tersebut.

Contoh url dalam permalink komentar:

http://buka-rahasia.blogspot.com/2012/11/Cara-memasang-facebook-recommendation-bar-di-blogger.html#comment-4946048359309488959

Dalam warna yang berbeda, ada beberapa perintah yang digunakan untuk engine Blogger membuat permalink komentar secara otomatis di dalam tag a sesuai dengan warna di atas:

"#comment-" + data:comment.id

Kedua perintah di atas kemudian disusun bersama dengan permalink posting dan menghasilkan permalink komentar yang diperintahkan dengan menggunakan atribut href:

expr:href='"#comment-" + data:comment.id'

Yup, cukup untuk teorinya :)

-----------------------------

Nah, kasusnya, ada beberapa teman Blogger yang menghubungi saya, baik melalui akun Facebook maupun email, menyampaikan bahwa permalink komentar di blog mereka terindeks Google, dan bagaimana solusi mengatasi hal tersebut.

Ada beberapa kemungkinan yang akan terjadi bila permalink komentar terindeks:

1. Kemungkinan besar, ini akan berdampak buruk bagi relevansi komentar dengan artikel/posting yang diindukinya, sebab, seperti kita ketahui, tidak semua komentar memiliki isi yang sesuai, hanya berisi satu atau dua kata, dan bahkan komentar itu sama sekali tidak berhubungan (spam).

2. Jika permalink tersebut dianggap menuju ke sebuah halaman unik, maka halaman tujuan bukanlah halaman posting yang sesungguhnya, tidak terpisah dari halaman post, tidak memiliki title, serta tidak memiliki konten yang memadai. Oleh karena itu, permalink komentar tidak akan pernah bisa mencapai SERP yang baik.

3. Kalaupun bisa mencapai SERP bagus, kan sangat jarang pengunjung yang tertarik meng-klik listing indeks yang menuju halaman permalink komentar bukan? 

Solusi Agar Permalink Komentar Tidak Terindeks

Untuk mengatasi masalah tersebut, terutama bagi sobat-sobat pengguna Blogger yang comment permalink-nya ikut terindeks Google, tambahkan atribut rel="nofollow" pada tag comment permalink agar search engine tidak mengikuti link tersebut. Bagi yang tidak mengalami kasus yang sama, tips ini sifatnya opsional, bila sobat yakin harus melakukan hal yang sama, silahkan saja. How?

1. Masuk ke dashboard > template > edit HTML.

2. Jangan lupa centang "expand widgets template"

3. Cari kode/tag berikut:

<a expr:href='"#comment-" + data:comment.id' title='comment permalink'><data:comment.timestamp/></a>

Jika tidak ketemu, ada kemungkinan bagian quote (") diparsing sehingga menghasilkan quote dalam bentuk ASCII (&quote;). Beberapa pembuat template lebih suka menggunakan kode seperti itu sebab lebih cepat dibaca engine atau platform Blogger, jadi cari kode/tag seperti ini:

<a expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'></a>

4. Setelah itu, tambahkan atribut atribut rel=nofollow ke dalam tag a-nya:

<a rel='nofollow' expr:href='"#comment-" + data:comment.id' title='comment permalink'><data:comment.timestamp/></a>
atau,
<a rel='nofollow' expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'></a>

5. Save template and done!

Sekarang permalink komentar sobat sudah memiliki atribut rel=nofollow, yang berfungsi memberi informasi pada google search engine untuk tidak mengikuti dan mengindeksnya. Ingat bahwa perubahan tidak terjadi seketika, butuh waktu bagi Google untuk mengupdate indeks setelah mendapatkan informasi baru dari template blog sobat. Semua tergantung kecepatan indeks serta otoritas web/blog di mata Google.

Well, see you then and have a nice Blogging. :)

� buka-rahasia.blogspot.com. All rights reserved.

Cara Mengganti "Post a Comment" Blogger Dengan Teks Lain/Gambar

Teks "Post a Comment" atau "Tambahkan Komentar" yang muncul sebelum/di bagian atas kotak komentar mungkin nampak kurang elegan. Pertanyaannya, apakah bisa mengganti teks "Post a Comment / Tambahkan Komentar" seperti yg terlihat di kotak komentar di bawah ini?

Setelah sekian waktu mengeksplor template XML Blogger, saya menemukan bahwa ada banyak tag yang merupakan perintah kepada host (dalam hal ini, Blogger) untuk menampilkan konten, widget, ataupun sekedar teks pada blog Blogger/Blogspot. Hampir semuanya kemudian dapat dipahami indikasinya melalui arti teks tag-tag tersebut dalam bahasa Inggris. Misalnya <data:post.body/>, berarti perintah untuk menampilkan data yang termuat dalam post body atau data di dalam tubuh posting. Tag ini berfungsi memberikan indikasi permintaan browser kepada host untuk menampilkan isi sebuah posting, serta menentukan posisinya.

Beberapa waktu yang lalu saya pernah membuat posting tentang Cara Mengganti Older/Newer Post-Home Blogger dengan Teks/Gambar Icon. Konsepnya adalah mengganti tag-tag template XML blogger dengan teks ataupun gambar. Demikian pula dengan teks "Post a Comment" atau "Tambahkan Komentar", sobat tinggal mencari tag yang memberi perintah untuk menampilkan teks tersebut.

Sobat Blogger dapat mengubah teks Post a Comment tersebut menjadi seperti contoh berikut:

Bagaimana Cara Ganti "Post A Comment/Tambahkan Komentar" dengan Teks Lain/Gambar?

1. Masuk ke Edit HTML/Edit Template. (jika perlu, backup/download template)

2. Centang/Klik "Expand Widget Templates" (jangan sampai terlewatkan!)

3. Cari tag berikut:

<data:postCommentMsg/>

(tag tersebut berarti: perintah untuk menampilkan pesan tertentu pada fitur comment. Secara default, dalam bahasa Inggris, pesan itu adalah "Post A Comment", atau dalam bahasa Indonesia, "Tambahkan Komentar")

4. Di template Blogger biasanya ada dua tag yang sama, maka cari keduanya dan ganti semuanya dengan cara berikut:

Jika ingin mengganti dengan teks:

Hapus dan ganti tag tersebut dengan teks yang diinginkan. Misalnya: "Berikan Feedback", "Add Your Feedback", "Kasih Komentar Yaw!", atau apapun, asal jangan "Kasih Duit Dong!".

Jika ingin mengganti dengan gambar/image:

Hapus dan ganti tag tersebut dengan tag gambar/image berikut:

<img border="0" src="http://urlgambar.com/gambarcomment.jpg" />

Ganti http://urlgambar.com/gambarcomment.jpg dengan url (direct link) dimana sobat telah mengupload gambar.

5. Save Template. Done!

Tips Trik Blogger. Tersaji dengan Esensi.
mencuri adalah pekerjaan pengecut! � buka-rahasia.blogspot.com

Cara Mengganti "Post a Comment" Blogger Dengan Teks Lain/Gambar

Posted by rike No comments

Teks "Post a Comment" atau "Tambahkan Komentar" yang muncul sebelum/di bagian atas kotak komentar mungkin nampak kurang elegan. Pertanyaannya, apakah bisa mengganti teks "Post a Comment / Tambahkan Komentar" seperti yg terlihat di kotak komentar di bawah ini?

Setelah sekian waktu mengeksplor template XML Blogger, saya menemukan bahwa ada banyak tag yang merupakan perintah kepada host (dalam hal ini, Blogger) untuk menampilkan konten, widget, ataupun sekedar teks pada blog Blogger/Blogspot. Hampir semuanya kemudian dapat dipahami indikasinya melalui arti teks tag-tag tersebut dalam bahasa Inggris. Misalnya <data:post.body/>, berarti perintah untuk menampilkan data yang termuat dalam post body atau data di dalam tubuh posting. Tag ini berfungsi memberikan indikasi permintaan browser kepada host untuk menampilkan isi sebuah posting, serta menentukan posisinya.

Beberapa waktu yang lalu saya pernah membuat posting tentang Cara Mengganti Older/Newer Post-Home Blogger dengan Teks/Gambar Icon. Konsepnya adalah mengganti tag-tag template XML blogger dengan teks ataupun gambar. Demikian pula dengan teks "Post a Comment" atau "Tambahkan Komentar", sobat tinggal mencari tag yang memberi perintah untuk menampilkan teks tersebut.

Sobat Blogger dapat mengubah teks Post a Comment tersebut menjadi seperti contoh berikut:

Bagaimana Cara Ganti "Post A Comment/Tambahkan Komentar" dengan Teks Lain/Gambar?

1. Masuk ke Edit HTML/Edit Template. (jika perlu, backup/download template)

2. Centang/Klik "Expand Widget Templates" (jangan sampai terlewatkan!)

3. Cari tag berikut:

<data:postCommentMsg/>

(tag tersebut berarti: perintah untuk menampilkan pesan tertentu pada fitur comment. Secara default, dalam bahasa Inggris, pesan itu adalah "Post A Comment", atau dalam bahasa Indonesia, "Tambahkan Komentar")

4. Di template Blogger biasanya ada dua tag yang sama, maka cari keduanya dan ganti semuanya dengan cara berikut:

Jika ingin mengganti dengan teks:

Hapus dan ganti tag tersebut dengan teks yang diinginkan. Misalnya: "Berikan Feedback", "Add Your Feedback", "Kasih Komentar Yaw!", atau apapun, asal jangan "Kasih Duit Dong!".

Jika ingin mengganti dengan gambar/image:

Hapus dan ganti tag tersebut dengan tag gambar/image berikut:

<img border="0" src="http://urlgambar.com/gambarcomment.jpg" />

Ganti http://urlgambar.com/gambarcomment.jpg dengan url (direct link) dimana sobat telah mengupload gambar.

5. Save Template. Done!

Tips Trik Blogger. Tersaji dengan Esensi.
mencuri adalah pekerjaan pengecut! � buka-rahasia.blogspot.com

Cara Membuat Fitur Reply Comment (Balas Komentar) di Blogger

Fitur Reply to Comment (Balas Komentar) sering kita temui di blog-blog Wordpress maupun Blogger. Perbedaannya, WordPress telah menyediakannya sebagai fitur bawaan. Selain itu, fitur reply comment WordPress mengandung threads yang independen. Masing-masing komentar dapat memiliki kesinambungan urutan seperti thread forum atau board. Di Blogger, fitur reply to comment pun dapat ditambahkan, namun sifatnya masih sangat sederhana. Hasil balasan komentarnya pun berupa komentar terbaru dan bukan thread. Tapi, tidak ada salahnya menambahkan fitur ini sebagai bagian dari tampilan desain blog yang tentunya akan memberikan kesan profesional pada blog Blogger anda.

Cara Membuat Reply To Comment (Balas Komentar) di Blogger/Blogger

Hack ini digunakan untuk menambahkan link fitur balas komentar Blogger. Ketika link tersebut di klik, maka akan muncul pop up window komentar baru, sama dengan jika anda melakukan setting kotak komentar agar muncul sebagai window baru dan bukan menyatu dengan bagian posting (berada di bawah posting).

Langkah-langkah menambah fitur reply to comment:

1. Copy kode berikut ke notepad atau text editor yang lain:

<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=ID-BLOG-MU&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'>Reply</a></span>

2. Cari ID blog anda. Dari dashboard, buka halaman design, comment, post, atau yang lainnya. Lihat ke kotak url di bagian atas browser. Lihat bagian belakang url. Di bagian itu akan terlihat ID blog.

Contoh:

http://www.blogger.com/post-create.g?blogID=3293775847481849705 

Di bagian berwarna merah itulah ID blog anda. Copy angka ID blog tersebut. Jangan sampai ada kekeliruan dalam meng-copy.
3. Ganti  ID-BLOG-MU  dengan angka ID blog yang telah di copy tadi.
4. Ganti Reply dengan text lain yang diinginkan.
5. Masuk ke edit HTML/Template.
6. Centang/klik 'Expand Widget Templates' (ni yg sering banget kelupaan, bis tu komen marah2 bilang kode yang harus dicari ga ada meskipun berulang2 dicari pe jenggotnya tambah panjang 5 meter)
7. Cari kode berikut:

<data:commentPostedByMsg/>

8. Masukkan seluruh kode yang telah diganti ID-nya tadi tepat DI BAWAH / SETELAH-nya.

9. Save Template.

Mengganti Text 'Reply' Comment dengan Gambar/Image Button

Jika ingin mengganti text 'Reply' dengan gambar, cukup ganti text tersebut dengan script gambar.

<img src='http://urlgambar.com/gambar.jpg' />

Selengkapnya, copy kode berikut:

<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=ID-BLOG-MU&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'><img border="0" src='http://urlgambar.com/gambar.jpg' style='float:right;padding:4px;' title="Balas Komentar Ini"/></a></span>

Ganti dengan url gambar tombol/icon reply untuk blog.

Kostumisasi Posisi Tombol/Gambar Reply Button 

Ganti http://urlgambar.com/gambar.jpg  dengam url gambar reply button. Ganti right dengan left jika ingin gambar berada di sebelah kiri (tepat di sebelah nama komentator). Atur nilai padding 4px untuk memberi besaran ruang kosong di sekeliling gambar. Ganti Balas Komentar Ini dengan kalimat atau perintah lain. Atau, tinggalkan begitu saja.

Gambar Tombol/Button Comment Reply

Untuk mendapatkan gambar reply button yang sesuai, anda dapat dengan mudah mencarinya di Google atau gunakan gambar berikut sebagai tombol reply komentar:

Penting! Upload dan host sendiri gambar-gambar tersebut karena sewaktu-waktu gambar-gambar tersebut  dapat dihapus. Klik kanan, pilih 'save as'. Upload gambar ke Blogger (Picasa) atau lainnya.

Catatan: Beberapa problem yang muncul biasanya bersumber pada pencantuman ID blog yang keliru dan kesalahan dalam mencari kode yang sama persis. Pastikan benar mencentang 'Expand Widget Templates',  jika tidak ketemu, cari tanpa tanda < dan >.

DOnE! 

Thanks to Paul Crowe yang sudah mengajarkan membuat hack ini step by step. 
mencuri adalah pekerjaan pengecut! � buka-rahasia.blogspot.com

Cara Membuat Fitur Reply Comment (Balas Komentar) di Blogger

Posted by rike No comments

Fitur Reply to Comment (Balas Komentar) sering kita temui di blog-blog Wordpress maupun Blogger. Perbedaannya, WordPress telah menyediakannya sebagai fitur bawaan. Selain itu, fitur reply comment WordPress mengandung threads yang independen. Masing-masing komentar dapat memiliki kesinambungan urutan seperti thread forum atau board. Di Blogger, fitur reply to comment pun dapat ditambahkan, namun sifatnya masih sangat sederhana. Hasil balasan komentarnya pun berupa komentar terbaru dan bukan thread. Tapi, tidak ada salahnya menambahkan fitur ini sebagai bagian dari tampilan desain blog yang tentunya akan memberikan kesan profesional pada blog Blogger anda.

Cara Membuat Reply To Comment (Balas Komentar) di Blogger/Blogger

Hack ini digunakan untuk menambahkan link fitur balas komentar Blogger. Ketika link tersebut di klik, maka akan muncul pop up window komentar baru, sama dengan jika anda melakukan setting kotak komentar agar muncul sebagai window baru dan bukan menyatu dengan bagian posting (berada di bawah posting).

Langkah-langkah menambah fitur reply to comment:

1. Copy kode berikut ke notepad atau text editor yang lain:

<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=ID-BLOG-MU&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'>Reply</a></span>

2. Cari ID blog anda. Dari dashboard, buka halaman design, comment, post, atau yang lainnya. Lihat ke kotak url di bagian atas browser. Lihat bagian belakang url. Di bagian itu akan terlihat ID blog.

Contoh:

http://www.blogger.com/post-create.g?blogID=3293775847481849705 

Di bagian berwarna merah itulah ID blog anda. Copy angka ID blog tersebut. Jangan sampai ada kekeliruan dalam meng-copy.
3. Ganti  ID-BLOG-MU  dengan angka ID blog yang telah di copy tadi.
4. Ganti Reply dengan text lain yang diinginkan.
5. Masuk ke edit HTML/Template.
6. Centang/klik 'Expand Widget Templates' (ni yg sering banget kelupaan, bis tu komen marah2 bilang kode yang harus dicari ga ada meskipun berulang2 dicari pe jenggotnya tambah panjang 5 meter)
7. Cari kode berikut:

<data:commentPostedByMsg/>

8. Masukkan seluruh kode yang telah diganti ID-nya tadi tepat DI BAWAH / SETELAH-nya.

9. Save Template.

Mengganti Text 'Reply' Comment dengan Gambar/Image Button

Jika ingin mengganti text 'Reply' dengan gambar, cukup ganti text tersebut dengan script gambar.

<img src='http://urlgambar.com/gambar.jpg' />

Selengkapnya, copy kode berikut:

<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=ID-BLOG-MU&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'><img border="0" src='http://urlgambar.com/gambar.jpg' style='float:right;padding:4px;' title="Balas Komentar Ini"/></a></span>

Ganti dengan url gambar tombol/icon reply untuk blog.

Kostumisasi Posisi Tombol/Gambar Reply Button 

Ganti http://urlgambar.com/gambar.jpg  dengam url gambar reply button. Ganti right dengan left jika ingin gambar berada di sebelah kiri (tepat di sebelah nama komentator). Atur nilai padding 4px untuk memberi besaran ruang kosong di sekeliling gambar. Ganti Balas Komentar Ini dengan kalimat atau perintah lain. Atau, tinggalkan begitu saja.

Gambar Tombol/Button Comment Reply

Untuk mendapatkan gambar reply button yang sesuai, anda dapat dengan mudah mencarinya di Google atau gunakan gambar berikut sebagai tombol reply komentar:

Penting! Upload dan host sendiri gambar-gambar tersebut karena sewaktu-waktu gambar-gambar tersebut  dapat dihapus. Klik kanan, pilih 'save as'. Upload gambar ke Blogger (Picasa) atau lainnya.

Catatan: Beberapa problem yang muncul biasanya bersumber pada pencantuman ID blog yang keliru dan kesalahan dalam mencari kode yang sama persis. Pastikan benar mencentang 'Expand Widget Templates',  jika tidak ketemu, cari tanpa tanda < dan >.

DOnE! 

Thanks to Paul Crowe yang sudah mengajarkan membuat hack ini step by step. 
mencuri adalah pekerjaan pengecut! � buka-rahasia.blogspot.com

Cara Membuat Efek Transparan Pada Gambar Blog (CSS Image Opacity)

Efek transparan pada gambar (image transparency/opacity) sering digunakan di Blog/web sebagai efek hover (mouse over) yaitu tampilan transparansi gambar (atau sebaliknya) ketika mouse diarahkan di atas gambar. Transparansi gambar merupakan salah satu efek yang dapat dibuat dengan CSS dan dimodifikasi sedemikian rupa, sama halnya dengan efek-efek yang lain, misalnya efek bayangan gambar (CSS 3 Box Shadow).

Dasar CSS Transparansi Gambar (CSS Image Transparency/Opacity)

Properti CSS yang digunakan sebagai perintah efek transparansi gambar adalah opacity:x. Properti ini digunakan oleh Mozilla Firefox dan beberapa browser lain. Sedang pada IE (Internet Explorer) digunakan properti filter:alpha(opacity=x). X adalah nilai transparansi, pada Mozilla Firefox dan beberapa browser lain, nilai defaultnya adalah 1.0, sedangkan pada IE adalah 100. Untuk memberikan besaran efek transparan, kecilkan nilai x-nya. Pengurangan dengan value yang sama antara browser lain dengan IE adalah 1/10, jadi kurangi 0.1 pada opacity dan kurang 10 pada filter untuk mendapatkan efek transparansi yang sama. Semakin kecil nilai x semakin besar transparansinya.

Contoh:

img {opacity:0.5;filter:alpha(opacity=50;}

Penggunaan Transparansi Gambar sebagai Efek Hover (Mouse Over)

Seperti yang telah dijelaskan di atas, efek ini sering digunakan dan dipadukan sebagai hover effect. Maka, posting kali ini akan berfokus pada penggunaan transparansi gambar sebagai efek hover.

Sebagaimana pada link (a) dan hover link (a:hover), kita pun dapat menerapkannya pada gambar.

img {opacity:1.0;filter:alpha(opacity=100;}
img:hover {opacity: 0.5;filter:alpha(opacity=50;}

Contoh (arahkan mouse ke atas gambar):

Atau sebaliknya, jika ingin gambar berubah jadi terang (tidak transparan) ketika mouse diarahkan diatasnya, tukar nilai transparansinya:

img {opacity: 0.5;filter:alpha(opacity=50;}
img:hover {opacity:1.0;filter:alpha(opacity=100;}

Contoh (arahkan mouse ke atas gambar):

 

Membuat Efek Hover Transparan Pada Gambar Secara Individual (tanpa link)

Jika ingin membuat efek transparan gambar yang ingin diberi efek tanpa mengandung link (diapit tag <a> dan </a>):

1. Masukkan script berikut di atas ]]></b:skin>

.brl-transparan {opacity:1.0;filter:alpha(opacity=100);}
.brl-transparan:hover {opacity: 0.5;filter:alpha(opacity=50);}

 atau sebaliknya,

.brl-transparan {opacity: 0.5;filter:alpha(opacity=50);}
.brl-transparan:hover {opacity:1.0;filter:alpha(opacity=100);}

2. Save template.

3. Pada tag gambar, baik di edit HTML post editor atau di edit HTML template, tambahkan class="brl-transparan"

Contoh:

<img class="brl-transparan" border="0" src="http://urlgambar.com/image.jpg" />

 

Membuat Efek Hover Transparan Pada Gambar yang Mengandung Link

Jika yang ingin diberi efek hover transparan adalah gambar yang mengandung link, maka dibutuhkan deklarator link (a) dan image (img) pada CSSnya:

1. Masukkan script berikut di atas ]]></b:skin>

a.brl-transparan img {opacity:1.0;filter:alpha(opacity=100);}
a.brl-transparan:hover img {opacity: 0.5;filter:alpha(opacity=50);}

 atau sebaliknya,

a.brl-transparan img {opacity: 0.5;filter:alpha(opacity=50);}
a.brl-transparan:hover img {opacity:1.0;filter:alpha(opacity=100);}

2. Save template.

3. Pada tag link gambar, baik di edit HTML post editor atau di edit HTML template, tambahkan class="brl-transparan"

Contoh:.

<a class="brl-transparan" href="http://buka-rahasia.blogspot.com"><img  border="0" src="http://urlgambar.com/image.jpg" /></a>

 Berikut contoh gambar yang mengandung link beserta efek transparansi gambar-nya:

Klik untuk Memperbesar Gambar

Good Luck and Enjoy!
mencuri adalah pekerjaan pengecut! � buka-rahasia.blogspot.com

Cara Membuat Efek Transparan Pada Gambar Blog (CSS Image Opacity)

Posted by rike No comments

Efek transparan pada gambar (image transparency/opacity) sering digunakan di Blog/web sebagai efek hover (mouse over) yaitu tampilan transparansi gambar (atau sebaliknya) ketika mouse diarahkan di atas gambar. Transparansi gambar merupakan salah satu efek yang dapat dibuat dengan CSS dan dimodifikasi sedemikian rupa, sama halnya dengan efek-efek yang lain, misalnya efek bayangan gambar (CSS 3 Box Shadow).

Dasar CSS Transparansi Gambar (CSS Image Transparency/Opacity)

Properti CSS yang digunakan sebagai perintah efek transparansi gambar adalah opacity:x. Properti ini digunakan oleh Mozilla Firefox dan beberapa browser lain. Sedang pada IE (Internet Explorer) digunakan properti filter:alpha(opacity=x). X adalah nilai transparansi, pada Mozilla Firefox dan beberapa browser lain, nilai defaultnya adalah 1.0, sedangkan pada IE adalah 100. Untuk memberikan besaran efek transparan, kecilkan nilai x-nya. Pengurangan dengan value yang sama antara browser lain dengan IE adalah 1/10, jadi kurangi 0.1 pada opacity dan kurang 10 pada filter untuk mendapatkan efek transparansi yang sama. Semakin kecil nilai x semakin besar transparansinya.

Contoh:

img {opacity:0.5;filter:alpha(opacity=50;}

Penggunaan Transparansi Gambar sebagai Efek Hover (Mouse Over)

Seperti yang telah dijelaskan di atas, efek ini sering digunakan dan dipadukan sebagai hover effect. Maka, posting kali ini akan berfokus pada penggunaan transparansi gambar sebagai efek hover.

Sebagaimana pada link (a) dan hover link (a:hover), kita pun dapat menerapkannya pada gambar.

img {opacity:1.0;filter:alpha(opacity=100;}
img:hover {opacity: 0.5;filter:alpha(opacity=50;}

Contoh (arahkan mouse ke atas gambar):

Atau sebaliknya, jika ingin gambar berubah jadi terang (tidak transparan) ketika mouse diarahkan diatasnya, tukar nilai transparansinya:

img {opacity: 0.5;filter:alpha(opacity=50;}
img:hover {opacity:1.0;filter:alpha(opacity=100;}

Contoh (arahkan mouse ke atas gambar):

 

Membuat Efek Hover Transparan Pada Gambar Secara Individual (tanpa link)

Jika ingin membuat efek transparan gambar yang ingin diberi efek tanpa mengandung link (diapit tag <a> dan </a>):

1. Masukkan script berikut di atas ]]></b:skin>

.brl-transparan {opacity:1.0;filter:alpha(opacity=100);}
.brl-transparan:hover {opacity: 0.5;filter:alpha(opacity=50);}

 atau sebaliknya,

.brl-transparan {opacity: 0.5;filter:alpha(opacity=50);}
.brl-transparan:hover {opacity:1.0;filter:alpha(opacity=100);}

2. Save template.

3. Pada tag gambar, baik di edit HTML post editor atau di edit HTML template, tambahkan class="brl-transparan"

Contoh:

<img class="brl-transparan" border="0" src="http://urlgambar.com/image.jpg" />

 

Membuat Efek Hover Transparan Pada Gambar yang Mengandung Link

Jika yang ingin diberi efek hover transparan adalah gambar yang mengandung link, maka dibutuhkan deklarator link (a) dan image (img) pada CSSnya:

1. Masukkan script berikut di atas ]]></b:skin>

a.brl-transparan img {opacity:1.0;filter:alpha(opacity=100);}
a.brl-transparan:hover img {opacity: 0.5;filter:alpha(opacity=50);}

 atau sebaliknya,

a.brl-transparan img {opacity: 0.5;filter:alpha(opacity=50);}
a.brl-transparan:hover img {opacity:1.0;filter:alpha(opacity=100);}

2. Save template.

3. Pada tag link gambar, baik di edit HTML post editor atau di edit HTML template, tambahkan class="brl-transparan"

Contoh:.

<a class="brl-transparan" href="http://buka-rahasia.blogspot.com"><img  border="0" src="http://urlgambar.com/image.jpg" /></a>

 Berikut contoh gambar yang mengandung link beserta efek transparansi gambar-nya:

Klik untuk Memperbesar Gambar

Good Luck and Enjoy!
mencuri adalah pekerjaan pengecut! � buka-rahasia.blogspot.com

Membuat Textarea 3D Cantik di Blogger/Blogspot: (Light-Yellow)

Textarea adalah bagian dari form yang berfungsi sebagai space/ruang bagi teks/konten khusus yang ingin diberi posisi/penempatan tertentu. Ada banyak jenis textarea berdasarkan fungsi form, yaitu untuk mengisi data, submission/pendaftaran, polling, search, dan lain-lain. Namun pada posting kali ini akan dikhususkan pada texarea yang berfungsi sebagai space bagi konten tertentu untuk digunakan olh pengunjung dan bersifat read-only, baik pada posting blog/website maupun pada widget/sidebar.

Pada posting terdahulu, saya pernah berbagi tentang textarea sederhana dengan menggunakan tag div dan beberapa aturan CSS yang sederhana pula. Di posting ini, saya share textarea dengan tag originalnya (textarea tag) dan beberapa sentuhan style CSS3. Posting ini akan dilanjutkan dengan posting-posting selanjutnya tentang textarea dengan berbagai macam styling yang nantinya dapat dipilih dan disesuaikan dengan warna dan template blog sehingga akan tampak lebih indah.

Dasar tag textarea adalah:

<textarea>teks/konten disini</textarea>

Nah, dengan memasukkan beberapa atribut dan style CSS, kita dapat mempercantik tampilan textarea tersebut. Contoh

<textarea style="width: 300px;height:60px; border:1px solid red;" readonly="readonly">teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini</textarea>

Hasilnya: 
teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini

Itu adalah sebagian contoh sederhana styling pada text area. Selanjutnya berikut adalah textarea dengan menggunakan styling CSS3 yang sedikit agak rumit. Anda dapat meenggunakan script/kodenya di blog anda dan melakukan beberapa kostumisasi sesuai kebutuhan.

Textarea: LightYellow 3D Hover Effect With Shadow (CSS3 Styling):

teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini

Cara membuatnya:

1. Copy kode CSS berikut:

<style type="text/css">
.bukarahasia-textarea1 {padding:3px;margin:0;width:400px;height:60px;color:#FFCC00;font:12px arial;background:#000;border:2px outset #FFCC00;-moz-box-shadow: 7px 7px 3px #888;-webkit-box-shadow: 7px 7px 3px #888; box-shadow: 7px 7px 3px #888;}
.bukarahasia-textarea1:hover {color:#FFFF00;border:3px double #FFB200;-moz-box-shadow: 0 0 0; -webkit-box-shadow: 0 0 0; box-shadow: 0 0 0;"}
</style>

Kostumisasi: atur nilai width (lebar) dan height (tinggi) sesuai dengan keinginan.

2. Jika ingin menggunakan textarea yang sama pada semua posting/widget, paste kode CSS tersebut tepat di atas </head> pada edit HTML template kemudian save.

3. Jika ingin memakainya pada satu posting saja, masukkan kode CSS di bagian bawah posting melalui menu Edit HTML posting (letaknya di pojok kanan atas kotak editor posting) atau HTML/Javascript pada widget.

4. Kopi kode HTML berikut:

<textarea class="bukarahasia-textarea1" readonly="readonly">teks/konten textarea disini</textarea>

5. Ganti teks/konten textarea disini dengan konten anda. 

6. Masukkan ke editor posting melalui melalui menu Edit HTML posting (letaknya di pojok kanan atas kotak editor posting) HTML/Javascript pada widget dimana anda sebelumnya telah memasukkan kode CSS.

7. Done. Anda dapat mempreviewnya langsung melalui "compose".

Wait for other beautiful textarea designs from Tips-Tricks Blogger!
mencuri adalah pekerjaan pengecut! � buka-rahasia.blogspot.com

Membuat Textarea 3D Cantik di Blogger/Blogspot: (Light-Yellow)

Posted by rike No comments

Textarea adalah bagian dari form yang berfungsi sebagai space/ruang bagi teks/konten khusus yang ingin diberi posisi/penempatan tertentu. Ada banyak jenis textarea berdasarkan fungsi form, yaitu untuk mengisi data, submission/pendaftaran, polling, search, dan lain-lain. Namun pada posting kali ini akan dikhususkan pada texarea yang berfungsi sebagai space bagi konten tertentu untuk digunakan olh pengunjung dan bersifat read-only, baik pada posting blog/website maupun pada widget/sidebar.

Pada posting terdahulu, saya pernah berbagi tentang textarea sederhana dengan menggunakan tag div dan beberapa aturan CSS yang sederhana pula. Di posting ini, saya share textarea dengan tag originalnya (textarea tag) dan beberapa sentuhan style CSS3. Posting ini akan dilanjutkan dengan posting-posting selanjutnya tentang textarea dengan berbagai macam styling yang nantinya dapat dipilih dan disesuaikan dengan warna dan template blog sehingga akan tampak lebih indah.

Dasar tag textarea adalah:

<textarea>teks/konten disini</textarea>

Nah, dengan memasukkan beberapa atribut dan style CSS, kita dapat mempercantik tampilan textarea tersebut. Contoh

<textarea style="width: 300px;height:60px; border:1px solid red;" readonly="readonly">teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini</textarea>

Hasilnya: 
teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini

Itu adalah sebagian contoh sederhana styling pada text area. Selanjutnya berikut adalah textarea dengan menggunakan styling CSS3 yang sedikit agak rumit. Anda dapat meenggunakan script/kodenya di blog anda dan melakukan beberapa kostumisasi sesuai kebutuhan.

Textarea: LightYellow 3D Hover Effect With Shadow (CSS3 Styling):

teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini

Cara membuatnya:

1. Copy kode CSS berikut:

<style type="text/css">
.bukarahasia-textarea1 {padding:3px;margin:0;width:400px;height:60px;color:#FFCC00;font:12px arial;background:#000;border:2px outset #FFCC00;-moz-box-shadow: 7px 7px 3px #888;-webkit-box-shadow: 7px 7px 3px #888; box-shadow: 7px 7px 3px #888;}
.bukarahasia-textarea1:hover {color:#FFFF00;border:3px double #FFB200;-moz-box-shadow: 0 0 0; -webkit-box-shadow: 0 0 0; box-shadow: 0 0 0;"}
</style>

Kostumisasi: atur nilai width (lebar) dan height (tinggi) sesuai dengan keinginan.

2. Jika ingin menggunakan textarea yang sama pada semua posting/widget, paste kode CSS tersebut tepat di atas </head> pada edit HTML template kemudian save.

3. Jika ingin memakainya pada satu posting saja, masukkan kode CSS di bagian bawah posting melalui menu Edit HTML posting (letaknya di pojok kanan atas kotak editor posting) atau HTML/Javascript pada widget.

4. Kopi kode HTML berikut:

<textarea class="bukarahasia-textarea1" readonly="readonly">teks/konten textarea disini</textarea>

5. Ganti teks/konten textarea disini dengan konten anda. 

6. Masukkan ke editor posting melalui melalui menu Edit HTML posting (letaknya di pojok kanan atas kotak editor posting) HTML/Javascript pada widget dimana anda sebelumnya telah memasukkan kode CSS.

7. Done. Anda dapat mempreviewnya langsung melalui "compose".

Wait for other beautiful textarea designs from Tips-Tricks Blogger!
mencuri adalah pekerjaan pengecut! � buka-rahasia.blogspot.com

Tips Mengedit Template HTML Blogger/Blogspot: Mudah dan Aman

Blogger adalah layanan blog gratis yang memberikan keleluasaan bagi user untuk mengedit tampilan dan fungsi blognya. Secara mendasar, Blogger berplatform HTML/XML dengan didukung pengaturan tampilan CSS dan fungsi-fungsi javascript. Kita mengenal adanya fitur edit template HTML Blogger dimana kita dapat dengan bebas melakukan modifikasi, desain ulang, hack, penambahan fitur dari pihak ketiga (third party) berupa widget, dan lain-lain.

Note: Fitur edit HTML Blogger diakses melalui dashboard > design/rancangan > edit HTML.

Beberapa kasus saya temui dari pengunjung dan beberapa teman blogger (khususnya newbie) yang mengeluh karena gagal memasukkan hack/script tambahan, tidak menemukan kode tertentu seperti yang ada di tutorial, bahkan ada pula yang templatenya "kacau" karena salah mengedit template HTMLnya.

Tips ini saya buat untuk memberi masukan dan ide dalam melakukan editing Template HTML agar hasilnya sesuai dengan yang diinginkan. Semoga bermanfaat.

1. Memahami elemen dasar dari template blogger/blogspot sangat penting, pada dasarnya ada 5 elemen penting pada template Blogger yang hampir sama dengan elemen dasar web HTML pada umumnya:

a. HTML/XML tag, yang menandakan bagian dari keseluruhan halaman, diawali dengan <html> dan diakhiri dengan </html>. Khusus untuk tag-tag XML, untuk template Blogger dan HTML editor setelah tahun 2007, selalu diakhiri dengan /, contoh: <data:post.body/>.

b. Head tag, merupakan bagian dari keseluruhan head halaman, di dalamnya dimasukkan aturan-aturan yang mengatur banyak hal, termasuk tampilan (CSS), diawali dengan <head> dan diakhiri dengan </head>.

c. Body tag, merupakan isi dari halaman web/blog, di dalamnya terdapat konten/isi inti halaman, termasuk pula widget-widget yang menjadi bagian dari isi halaman, diawali dengan <body> dan diakhiri dengan </body>.

d. CSS, elemen pengatur tampilan halaman, baik dari segi warna, font, posisi, lebar luas, dan masih banyak lagi. Letaknya diantara <b:skin><![CDATA[ dan ]]></b:skin> dan berada pada bagian head. Pada beberapa kasus kode CSS juga dimasukkan tepat di atas </head> sebagai aturan tambahan.

e. Javascript, merupakan elemen yang sebenarnya mengandung software (web widget) yang berisi perintah-perintah tertentu. Biasanya digunakan untuk memasukkan elemen tambahan seperti popular post, auto readmore, dan sebagainya. Ada dua jenis javascript yang dapat digunakan: internal, yang diupload dan di-host langsung di Blogger, dan eksternal, yang diupload dan dihosting di server lain. Letaknya relatif, tergantung jenisnya. Untuk yang berjenis widget biasanya ada di dalam body.

2. Biasakan back up template terlebih dahulu sebelum editing, klik "Backup Full Template" di atas kotak "Edit HTML". Jika ada kesalahan dan anda tidak tahu script mana yang harus dibenahi, anda dapat dengan mudah mengupload file back-up template dan mengembalikan seperti semula.

3. Perhatikan benar-benar tutorial yang dibaca, jangan sampai ada yang terlewatkan. Sebagai contoh, jika harus mencentang/klik "expand widget templates", maka pastikan sudah melakukannya. Fungsi dari perintah tersebut adalah untuk membuka bagian-bagian body yang mengandung widget. Jika tidak dicentang, bagian-bagian tersebut akan "disembunyikan" oleh Blogger karena memang ditujukan untuk keamanan.

4. Ketika meng-copy script dari halaman tutorial yang anda baca, pastikan semua bagian script sudah tercopy atau jangan ada bagian selain dari script yang ikut ter-copy.

5. Jika harus mengubah isi script/kode, misalnya mengganti url blog/feed, value, dan lain-lain, salin/paste terlebih dahulu kode/script tersebut ke editor semacam notepad, wordpad, word. Setelah melakukan pengubahan script dan memastikan semuanya beres, baru masukkan script tersebut ke template HTML.

6. Agar lebih mudah dan cepat mencari kode tertentu seperti yang diminta di dalam tutorial, gunakan fitur pencarian browser, tekan Ctrl + F, setelah kotak pencarian muncul masukkan kode yang ingin dicari dan tekan next (enter).

7. Perhatikan benar-benar istilah di bawah/setelah serta di atas/sebelum, itu berarti letakkan kode benar-benar setelah atau sebelum kode yang dicari. Kode-kode dibaca oleh browser dari kiri ke kanan sebagai urutan. Atas bawah hanya digunakan untuk memberi kenyamanan dalam mengurutkan. Bagi browser, dia tetap dibaca dari kiri ke kanan. Contoh:

<b:include data='top' name='status-message'/><data:adStart/>

Kita lihat di situ ada 2 tag bersisian, jika harus memasukkan tag/kode baru <b:include data='posts' name='breadcrumb'/> di bawah/setelah <b:include data='top' name='status-message'/>, itu berarti anda harus meletakkan benar-benar setelahnya, sehingga <data:adStart/> harus digeser posisinya, atau kode/tag baru disisipkan di antara keduanya, jadinya: 

<b:include data='top' name='status-message'/>

<b:include data='posts' name='breadcrumb'/> 

<data:adStart/>

atau,

<b:include data='top' name='status-message'/><b:include data='posts' name='breadcrumb'/><data:adStart/>

8. Jika memang masih belum yakin dan terbiasa, buatlah blog baru yang fungsinya untuk eksperimen dan uji coba script (trial and error). Anda bisa dengan bebas melakukan uji coba tanpa ada ketakutan template blog anda rusak atau pembaca kabur. Agar hasilnya akurat, gunakan jenis template yang sama seperti blog anda. Saya memiliki 3 blog untuk eksperimen dan mencoba script baru sehingga bisa dengan bebas melakukan apapun tanpa rasa khawatir.

9. Khusus untuk hack/script tertentu di mana tampilannya bisa langsung dilihat di homepage/beranda (misalnya: memasang readmore atau background), setelah memasukkan script dan selesai meng-edit, jangan langsung di-save dulu. Gunakan/klik fitur preview/pratinjau untuk melihat hasilnya. Jika sudah beres dan sesuai yang diinginkan, baru lah di-save.

10. Pada beberapa template, ada yang bagian tertentunya di apit oleh tag paragraf: <p> dan </p>, sehingga ketika bagian tertentu tersebut dicari, seolah tidak ketemu. Jika template anda berjenis seperti ini, jangan menyerah terlebih dahulu.
Contoh:

Ketika harus mencari <data:post.body/>, dan tidak ketemu, maka ada kemungkinan tag paragraf mengapitnya (<p><data:post.body/></p>), atau ada beberapa kondisi lain (misalnya, anda lupa mencentang "expand widget templates"). Agar lebih mudah lagi, jangan sertakan < dan /> ketika mencari (Ctrl + F), cukup gunakan data:post.body saja.

Masih ada beberapa lagi yang hendak saya sampaikan, namun sekiranya 10 poin di atas cukup lengkap untuk menjadi tips dan petunjuk agar lancar dan aman dalam mengedit Template HTML Blogger/Blogspot. Selanjutnya, sobat Blogger dapat mengembangkan dan membiasakan diri dengan template dan template editor Blogger serta melakukan editing secara mandiri (Do It Yourself [DIY]). Keep on learning and learning.

Salam.

mencuri adalah pekerjaan pengecut! � buka-rahasia.blogspot.com

Tips Mengedit Template HTML Blogger/Blogspot: Mudah dan Aman

Posted by rike No comments

Blogger adalah layanan blog gratis yang memberikan keleluasaan bagi user untuk mengedit tampilan dan fungsi blognya. Secara mendasar, Blogger berplatform HTML/XML dengan didukung pengaturan tampilan CSS dan fungsi-fungsi javascript. Kita mengenal adanya fitur edit template HTML Blogger dimana kita dapat dengan bebas melakukan modifikasi, desain ulang, hack, penambahan fitur dari pihak ketiga (third party) berupa widget, dan lain-lain.

Note: Fitur edit HTML Blogger diakses melalui dashboard > design/rancangan > edit HTML.

Beberapa kasus saya temui dari pengunjung dan beberapa teman blogger (khususnya newbie) yang mengeluh karena gagal memasukkan hack/script tambahan, tidak menemukan kode tertentu seperti yang ada di tutorial, bahkan ada pula yang templatenya "kacau" karena salah mengedit template HTMLnya.

Tips ini saya buat untuk memberi masukan dan ide dalam melakukan editing Template HTML agar hasilnya sesuai dengan yang diinginkan. Semoga bermanfaat.

1. Memahami elemen dasar dari template blogger/blogspot sangat penting, pada dasarnya ada 5 elemen penting pada template Blogger yang hampir sama dengan elemen dasar web HTML pada umumnya:

a. HTML/XML tag, yang menandakan bagian dari keseluruhan halaman, diawali dengan <html> dan diakhiri dengan </html>. Khusus untuk tag-tag XML, untuk template Blogger dan HTML editor setelah tahun 2007, selalu diakhiri dengan /, contoh: <data:post.body/>.

b. Head tag, merupakan bagian dari keseluruhan head halaman, di dalamnya dimasukkan aturan-aturan yang mengatur banyak hal, termasuk tampilan (CSS), diawali dengan <head> dan diakhiri dengan </head>.

c. Body tag, merupakan isi dari halaman web/blog, di dalamnya terdapat konten/isi inti halaman, termasuk pula widget-widget yang menjadi bagian dari isi halaman, diawali dengan <body> dan diakhiri dengan </body>.

d. CSS, elemen pengatur tampilan halaman, baik dari segi warna, font, posisi, lebar luas, dan masih banyak lagi. Letaknya diantara <b:skin><![CDATA[ dan ]]></b:skin> dan berada pada bagian head. Pada beberapa kasus kode CSS juga dimasukkan tepat di atas </head> sebagai aturan tambahan.

e. Javascript, merupakan elemen yang sebenarnya mengandung software (web widget) yang berisi perintah-perintah tertentu. Biasanya digunakan untuk memasukkan elemen tambahan seperti popular post, auto readmore, dan sebagainya. Ada dua jenis javascript yang dapat digunakan: internal, yang diupload dan di-host langsung di Blogger, dan eksternal, yang diupload dan dihosting di server lain. Letaknya relatif, tergantung jenisnya. Untuk yang berjenis widget biasanya ada di dalam body.

2. Biasakan back up template terlebih dahulu sebelum editing, klik "Backup Full Template" di atas kotak "Edit HTML". Jika ada kesalahan dan anda tidak tahu script mana yang harus dibenahi, anda dapat dengan mudah mengupload file back-up template dan mengembalikan seperti semula.

3. Perhatikan benar-benar tutorial yang dibaca, jangan sampai ada yang terlewatkan. Sebagai contoh, jika harus mencentang/klik "expand widget templates", maka pastikan sudah melakukannya. Fungsi dari perintah tersebut adalah untuk membuka bagian-bagian body yang mengandung widget. Jika tidak dicentang, bagian-bagian tersebut akan "disembunyikan" oleh Blogger karena memang ditujukan untuk keamanan.

4. Ketika meng-copy script dari halaman tutorial yang anda baca, pastikan semua bagian script sudah tercopy atau jangan ada bagian selain dari script yang ikut ter-copy.

5. Jika harus mengubah isi script/kode, misalnya mengganti url blog/feed, value, dan lain-lain, salin/paste terlebih dahulu kode/script tersebut ke editor semacam notepad, wordpad, word. Setelah melakukan pengubahan script dan memastikan semuanya beres, baru masukkan script tersebut ke template HTML.

6. Agar lebih mudah dan cepat mencari kode tertentu seperti yang diminta di dalam tutorial, gunakan fitur pencarian browser, tekan Ctrl + F, setelah kotak pencarian muncul masukkan kode yang ingin dicari dan tekan next (enter).

7. Perhatikan benar-benar istilah di bawah/setelah serta di atas/sebelum, itu berarti letakkan kode benar-benar setelah atau sebelum kode yang dicari. Kode-kode dibaca oleh browser dari kiri ke kanan sebagai urutan. Atas bawah hanya digunakan untuk memberi kenyamanan dalam mengurutkan. Bagi browser, dia tetap dibaca dari kiri ke kanan. Contoh:

<b:include data='top' name='status-message'/><data:adStart/>

Kita lihat di situ ada 2 tag bersisian, jika harus memasukkan tag/kode baru <b:include data='posts' name='breadcrumb'/> di bawah/setelah <b:include data='top' name='status-message'/>, itu berarti anda harus meletakkan benar-benar setelahnya, sehingga <data:adStart/> harus digeser posisinya, atau kode/tag baru disisipkan di antara keduanya, jadinya: 

<b:include data='top' name='status-message'/>

<b:include data='posts' name='breadcrumb'/> 

<data:adStart/>

atau,

<b:include data='top' name='status-message'/><b:include data='posts' name='breadcrumb'/><data:adStart/>

8. Jika memang masih belum yakin dan terbiasa, buatlah blog baru yang fungsinya untuk eksperimen dan uji coba script (trial and error). Anda bisa dengan bebas melakukan uji coba tanpa ada ketakutan template blog anda rusak atau pembaca kabur. Agar hasilnya akurat, gunakan jenis template yang sama seperti blog anda. Saya memiliki 3 blog untuk eksperimen dan mencoba script baru sehingga bisa dengan bebas melakukan apapun tanpa rasa khawatir.

9. Khusus untuk hack/script tertentu di mana tampilannya bisa langsung dilihat di homepage/beranda (misalnya: memasang readmore atau background), setelah memasukkan script dan selesai meng-edit, jangan langsung di-save dulu. Gunakan/klik fitur preview/pratinjau untuk melihat hasilnya. Jika sudah beres dan sesuai yang diinginkan, baru lah di-save.

10. Pada beberapa template, ada yang bagian tertentunya di apit oleh tag paragraf: <p> dan </p>, sehingga ketika bagian tertentu tersebut dicari, seolah tidak ketemu. Jika template anda berjenis seperti ini, jangan menyerah terlebih dahulu.
Contoh:

Ketika harus mencari <data:post.body/>, dan tidak ketemu, maka ada kemungkinan tag paragraf mengapitnya (<p><data:post.body/></p>), atau ada beberapa kondisi lain (misalnya, anda lupa mencentang "expand widget templates"). Agar lebih mudah lagi, jangan sertakan < dan /> ketika mencari (Ctrl + F), cukup gunakan data:post.body saja.

Masih ada beberapa lagi yang hendak saya sampaikan, namun sekiranya 10 poin di atas cukup lengkap untuk menjadi tips dan petunjuk agar lancar dan aman dalam mengedit Template HTML Blogger/Blogspot. Selanjutnya, sobat Blogger dapat mengembangkan dan membiasakan diri dengan template dan template editor Blogger serta melakukan editing secara mandiri (Do It Yourself [DIY]). Keep on learning and learning.

Salam.

mencuri adalah pekerjaan pengecut! � buka-rahasia.blogspot.com

Cara Menampilkan Judul Posting Saja Pada Label dan Arsip Blog

Trik Menampilkan Judul Artikel/Posting Saja Pada Halaman Label dan Archive Blogger.

Tips-tricks Blogger kembali lagi dengan urusan coding.nih, bermain-main lagi dengan b if cond, b else dan b include. 

Terkadang akan sangat lama dan menjemukan apabila kita membuka halaman label atau arsip blog yang jumlah postingnya sudah banyak. Bahkan, semakin tidak efisien lagi jikamembuka halaman lain untuk melihat daftar/list posting yang lebih lama. So, menampilkan judul posting saja pada bagian label dan arsip dapat membuat loading halaman lebih cepat dan visitor dapat lebih cepat melihat daftar semua judul posting yang ingin dibaca. Contohnya kaya gini:

Siap mengubah tampilan halaman label dan arsip blog anda dengan cara tersebut?

Oke, kalo begitu lanjuuut ke cara menampilkan judul posting saja di label dan arsip Blogspot:

1. Masuk ke dashboard > Design/Rancangan > Klik 'expand widget template'.

2. Cari kode: <b:include data='post' name='post'/> (Ctrl+F)

3. Ganti dengan script ini:

<!--Judul post saja di label dan arsip-->
<b:if cond='data:blog.searchLabel'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
</b:if>
<!--Buka-rahasia.blogspot.com-->

4. Save template HTML.

5. Done! (done itu artinya Yang terjadi maka Terjadilah! olret..)

6. Coba dicek hasilnya pada halaman label dan archive blog.

Update (04-05-11):  
Kemarin ada yang bertanya lewat Contact Form: "Gimana cara menampilkan judul di label saja atau di arsip saja? Thanks."

Oke, saya jawab sekaligus update disini sekalian:

*Jika ingin menampilkan judul posting saja khusus di label, ambil perintah pada b if cond label dan b include posting saja:

<!--Judul posting saja di label-->
<b:if cond='data:blog.searchLabel'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
 <!--Buka-rahasia.blogspot.com-->

*Jika ingin menampilkan judul posting saja khusus di arsip, ambil perintah pada b if cond archive dan b include posting saja:

 <!--Judul posting saja di arsip-->
<b:if cond='data:blog.pageType == "archive"'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<!--Buka-rahasia.blogspot.com-->

-Cara memasukkan scriptnya sama dengan cara yang telah disebutkan di atas.

Demikian tips menampilkan judul post saja di bagian label dan archive. Harap maklum.

Jika ada permasalahan atau ada hal yang ingin ditanyakan tentang "merias" tampilan judul tersebut (CSS styling), bapak ibu sekalian bisa sampaikan melalui komentar, karena setiap template blog tidak sama aturan dasar pada tampilan, font, link, margin, dan lain-lain. Feel free to use the comment form, I will be ready to help and do the best I can. 

Cheers!

mencuri adalah pekerjaan pengecut! � buka-rahasia.blogspot.com

Cara Menampilkan Judul Posting Saja Pada Label dan Arsip Blog

Posted by rike No comments

Trik Menampilkan Judul Artikel/Posting Saja Pada Halaman Label dan Archive Blogger.

Tips-tricks Blogger kembali lagi dengan urusan coding.nih, bermain-main lagi dengan b if cond, b else dan b include. 

Terkadang akan sangat lama dan menjemukan apabila kita membuka halaman label atau arsip blog yang jumlah postingnya sudah banyak. Bahkan, semakin tidak efisien lagi jikamembuka halaman lain untuk melihat daftar/list posting yang lebih lama. So, menampilkan judul posting saja pada bagian label dan arsip dapat membuat loading halaman lebih cepat dan visitor dapat lebih cepat melihat daftar semua judul posting yang ingin dibaca. Contohnya kaya gini:

Siap mengubah tampilan halaman label dan arsip blog anda dengan cara tersebut?

Oke, kalo begitu lanjuuut ke cara menampilkan judul posting saja di label dan arsip Blogspot:

1. Masuk ke dashboard > Design/Rancangan > Klik 'expand widget template'.

2. Cari kode: <b:include data='post' name='post'/> (Ctrl+F)

3. Ganti dengan script ini:

<!--Judul post saja di label dan arsip-->
<b:if cond='data:blog.searchLabel'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
</b:if>
<!--Buka-rahasia.blogspot.com-->

4. Save template HTML.

5. Done! (done itu artinya Yang terjadi maka Terjadilah! olret..)

6. Coba dicek hasilnya pada halaman label dan archive blog.

Update (04-05-11):  
Kemarin ada yang bertanya lewat Contact Form: "Gimana cara menampilkan judul di label saja atau di arsip saja? Thanks."

Oke, saya jawab sekaligus update disini sekalian:

*Jika ingin menampilkan judul posting saja khusus di label, ambil perintah pada b if cond label dan b include posting saja:

<!--Judul posting saja di label-->
<b:if cond='data:blog.searchLabel'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
 <!--Buka-rahasia.blogspot.com-->

*Jika ingin menampilkan judul posting saja khusus di arsip, ambil perintah pada b if cond archive dan b include posting saja:

 <!--Judul posting saja di arsip-->
<b:if cond='data:blog.pageType == "archive"'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<!--Buka-rahasia.blogspot.com-->

-Cara memasukkan scriptnya sama dengan cara yang telah disebutkan di atas.

Demikian tips menampilkan judul post saja di bagian label dan archive. Harap maklum.

Jika ada permasalahan atau ada hal yang ingin ditanyakan tentang "merias" tampilan judul tersebut (CSS styling), bapak ibu sekalian bisa sampaikan melalui komentar, karena setiap template blog tidak sama aturan dasar pada tampilan, font, link, margin, dan lain-lain. Feel free to use the comment form, I will be ready to help and do the best I can. 

Cheers!

mencuri adalah pekerjaan pengecut! � buka-rahasia.blogspot.com

Cara Mempercepat Loading Blog (5 Kiat Optimalisasi Elemen Blog)

Kiat dan cara lengkap membuat blog di-load dengan cepat (Tutorial Lengkap)

Kecepatan loading blog adalah hal yang sangat penting, baik bagi kenyamanan pengunjung dan juga SEO. Waktu load (load time) yang terlalu lama dapat membuat pengunjung ngacir sebelum dapat membaca seluruh isi sebuah halaman.

Sebenarnya, wajar apabila blog memiliki waktu load yang agak lebih lama daripada website, karena blog identik dengan beberapa widget yang dipasang baik sebagai alat navigasi maupun untuk fungsi/fitur yang lainnya. Rata-rata semua widget tersebut banyak yang memakai javascript, otomatis waktu loading cenderung lebih lama. Ada baiknya juga jika kita melakukan minimalisasi ukuran file yang dimuat.
Kecepatan internet di Indonesia rata-rata lebih lambat dibanding negara lain, sehingga load time halaman sejauh di bawah 2 menit saya kira masih wajar dan ditolerir (mengingat banyaknya provider internet yang lemot).

Ada beberapa poin yang dapat kita lakukan untuk mengurangi waktu loading blog berdasarkan elemen-elemennya:

1. CSS

CSS (Cascading Style Sheets) adalah bahasa styling yang seringkali kita tambahkan pada HTML. Untuk mengurangi ukuran CSS pada template HTML, lakukan kompresi CSS baik secara manual ataupun dengan tool. Fungsinya adalah mengurangi besar file dan waktu baca browser. Lalu, letakkan aturan-aturan CSS di bagian atas.

2. JavaScript

JavaScript memiliki waktu baca yang cenderung lebih lama, sehingga apabila diletakkan di atas, browser akan membaca lebih dahulu, sedangkan elemen yang lain akan menunggu hingga loading tersebut selesai. Akibatnya, elemen yang ingin segera dilihat menjadi terpengaruh, terutama bagian posting/artikel. Oleh karena itu, elemen-elemen yang mengandung javascript (terutama di bagian widget) sebaiknya diletakkan di bagian bawah.

Gunakan widget-widget keluaran Blogger dan Google karena javascript-nya dapat dimuat dengan cepat. Apabila terpaksa harus menggunakan javascript eksternal, upload dan hosting file js-nya hanya untuk penggunaan pribadi. Gunakan layanan upload dan host javascript dengan load cepat dan untuk pribadi.

3. Posts (Bagian Posting)

Pada halaman utama (homepage), jumlah posting atau artikel yang ditampilkan juga mempengaruhi loading blog. Apabila posting/artikel yang ditampilkan terlalu banyak, maka waktu loading pun akanbertambah. Tampilkan artikel-artikel pada halaman utama dengan jumlah yang sewajarnya, misalnya 5. Untuk mengesetnya, buka dashboard >> Design/Rancangan >> klik 'edit' pada badan blog post >> tulis jumlah/angka posting yang ingin ditampilkan. Lihat gambar berikut:

Untuk lebih mengoptimalkannya, potong sebagian isi posting/artikel pada halaman utama dengan menggunakan fitur "auto readmore/baca selanjutnya".

4. Gambar/Image/Picture

Gambar berfungsi untuk memperindah tampilan, memberikan kesan, dan menjadi simbol perwakilan dan interpretasi isi artikel. Namun, gambar yang berukuran besar juga menghambat loading blog, oleh karena itu diperlukan adanya taktik dalam menggunakan gambar. Gambar berformat PNG memang lebih disukai karena transparansinya akan tetapi ukuran file yang dibutuhkan jauh lebih besar tapi usahakan untuk menggunakan gambar berformat JPG. Bila tetap harus menggunakan file gambar PNG, seperti pada header, background  blog maupun posting, kurangi/kompres ukurannya dengan PNG compression tool yg mengurangi kualitas gambar.

Ketka menambahkan gambar pada posting, berikan ukuran yang fixed atau buatlah thumbnail, agar browser dapat langsung membacanya dengan cepat. Misalnya:

<img width="80%" src="http://www.xxxxxx.com"/>

Ini berarti, gambar akan berukuran 80% dari gambar aslinya. Atau bisa juga dengan ukuran pixel (px), misalnya width="100px" height="100 px". Ini untuk membuatnya menjadi thumbnail (gambar preview).

Jika harus mengupload gambar ke pihak ketiga, gunakan situs upload dan hosting gambar yang load-nya cepat, misalnya Photobucket. Lihat pula list situs upload dan hosting gambar gratis lainnya yang bisa juga digunakan untuk gambar favicon (ico).

5. Widget/Gadget

Widget merupakan bagian penting dari sebuah blog. Akan tetapi jika widget yang digunakan terlalu banyak, semakin lama pula waktu loading halaman. Gunakan widget-widget yang penting dan terutama menunjang navigasi. Hindari widget-widget yang tidak begitu penting dan bahkan tidak mendukung isi blog, misalnya widget jam, kalender, photoshow, dan lain-lain. Widget tersebut saya sebut tidak penting karena sebenarnya pengunjung tidak membutuhkan itu, waktu loading jadi lebih berat, dan tidak memberikan efek apapun bagi performa blog.

Optimalkan ke-lima poin atau elemen tersebut untuk mempercepat waktu loading blog dan meningkatkan performa-nya.


mencuri adalah pekerjaan pengecut! � buka-rahasia.blogspot.com

Cara Mempercepat Loading Blog (5 Kiat Optimalisasi Elemen Blog)

Posted by rike No comments

Kiat dan cara lengkap membuat blog di-load dengan cepat (Tutorial Lengkap)

Kecepatan loading blog adalah hal yang sangat penting, baik bagi kenyamanan pengunjung dan juga SEO. Waktu load (load time) yang terlalu lama dapat membuat pengunjung ngacir sebelum dapat membaca seluruh isi sebuah halaman.

Sebenarnya, wajar apabila blog memiliki waktu load yang agak lebih lama daripada website, karena blog identik dengan beberapa widget yang dipasang baik sebagai alat navigasi maupun untuk fungsi/fitur yang lainnya. Rata-rata semua widget tersebut banyak yang memakai javascript, otomatis waktu loading cenderung lebih lama. Ada baiknya juga jika kita melakukan minimalisasi ukuran file yang dimuat.
Kecepatan internet di Indonesia rata-rata lebih lambat dibanding negara lain, sehingga load time halaman sejauh di bawah 2 menit saya kira masih wajar dan ditolerir (mengingat banyaknya provider internet yang lemot).

Ada beberapa poin yang dapat kita lakukan untuk mengurangi waktu loading blog berdasarkan elemen-elemennya:

1. CSS

CSS (Cascading Style Sheets) adalah bahasa styling yang seringkali kita tambahkan pada HTML. Untuk mengurangi ukuran CSS pada template HTML, lakukan kompresi CSS baik secara manual ataupun dengan tool. Fungsinya adalah mengurangi besar file dan waktu baca browser. Lalu, letakkan aturan-aturan CSS di bagian atas.

2. JavaScript

JavaScript memiliki waktu baca yang cenderung lebih lama, sehingga apabila diletakkan di atas, browser akan membaca lebih dahulu, sedangkan elemen yang lain akan menunggu hingga loading tersebut selesai. Akibatnya, elemen yang ingin segera dilihat menjadi terpengaruh, terutama bagian posting/artikel. Oleh karena itu, elemen-elemen yang mengandung javascript (terutama di bagian widget) sebaiknya diletakkan di bagian bawah.

Gunakan widget-widget keluaran Blogger dan Google karena javascript-nya dapat dimuat dengan cepat. Apabila terpaksa harus menggunakan javascript eksternal, upload dan hosting file js-nya hanya untuk penggunaan pribadi. Gunakan layanan upload dan host javascript dengan load cepat dan untuk pribadi.

3. Posts (Bagian Posting)

Pada halaman utama (homepage), jumlah posting atau artikel yang ditampilkan juga mempengaruhi loading blog. Apabila posting/artikel yang ditampilkan terlalu banyak, maka waktu loading pun akanbertambah. Tampilkan artikel-artikel pada halaman utama dengan jumlah yang sewajarnya, misalnya 5. Untuk mengesetnya, buka dashboard >> Design/Rancangan >> klik 'edit' pada badan blog post >> tulis jumlah/angka posting yang ingin ditampilkan. Lihat gambar berikut:

Untuk lebih mengoptimalkannya, potong sebagian isi posting/artikel pada halaman utama dengan menggunakan fitur "auto readmore/baca selanjutnya".

4. Gambar/Image/Picture

Gambar berfungsi untuk memperindah tampilan, memberikan kesan, dan menjadi simbol perwakilan dan interpretasi isi artikel. Namun, gambar yang berukuran besar juga menghambat loading blog, oleh karena itu diperlukan adanya taktik dalam menggunakan gambar. Gambar berformat PNG memang lebih disukai karena transparansinya akan tetapi ukuran file yang dibutuhkan jauh lebih besar tapi usahakan untuk menggunakan gambar berformat JPG. Bila tetap harus menggunakan file gambar PNG, seperti pada header, background  blog maupun posting, kurangi/kompres ukurannya dengan PNG compression tool yg mengurangi kualitas gambar.

Ketka menambahkan gambar pada posting, berikan ukuran yang fixed atau buatlah thumbnail, agar browser dapat langsung membacanya dengan cepat. Misalnya:

<img width="80%" src="http://www.xxxxxx.com"/>

Ini berarti, gambar akan berukuran 80% dari gambar aslinya. Atau bisa juga dengan ukuran pixel (px), misalnya width="100px" height="100 px". Ini untuk membuatnya menjadi thumbnail (gambar preview).

Jika harus mengupload gambar ke pihak ketiga, gunakan situs upload dan hosting gambar yang load-nya cepat, misalnya Photobucket. Lihat pula list situs upload dan hosting gambar gratis lainnya yang bisa juga digunakan untuk gambar favicon (ico).

5. Widget/Gadget

Widget merupakan bagian penting dari sebuah blog. Akan tetapi jika widget yang digunakan terlalu banyak, semakin lama pula waktu loading halaman. Gunakan widget-widget yang penting dan terutama menunjang navigasi. Hindari widget-widget yang tidak begitu penting dan bahkan tidak mendukung isi blog, misalnya widget jam, kalender, photoshow, dan lain-lain. Widget tersebut saya sebut tidak penting karena sebenarnya pengunjung tidak membutuhkan itu, waktu loading jadi lebih berat, dan tidak memberikan efek apapun bagi performa blog.

Optimalkan ke-lima poin atau elemen tersebut untuk mempercepat waktu loading blog dan meningkatkan performa-nya.


mencuri adalah pekerjaan pengecut! � buka-rahasia.blogspot.com

Memberi Warna Berbeda pada Link yang Dikunjungi/Di-klik (Visited Link)

Trik CSS ini digunakan untuk memberikan warna khusus pada visited link & berlaku untuk semua link yang ada di halaman blog/website kecuali untuk link yang menggunakan external script, misalnya widget-widget tambahan. Cara ini unik dan cukup berpengaruh karena sangat berguna bagi pengunjung agar tidak bingung ketika melakukan browsing, terutama pada website/blog yang memiliki link-link navigasi pada halaman-halaman yang hampir sejenis. Selain itu, pengunjung juga dapat mengetahui link mana yang telah ia klik sebelumnya jika ia ingin melihat kembali halaman tersebut karena ada sesuatu yang tadinya terlewatkan.

Cara ini merupakan override pada aturan link yang telah ada sebelumnya di template HTML. Jadi anda tidak perlu lagi mencari urutan aturan link di dalamnya. Cukup tambahkan aturan CSS berikut sebelum </head> di template HTML:

<style type='text/css'>
a:visited {color:#808080;text-decoration:none;}
</style>

Ganti #808080 dengan kode warna yang diinginkan. Ganti none dengan jenis properti text-decoration yang lain, misalnya underline (garis bawah) atau overline (garis atas), atau properti yang lain. But just remember, make it natural 'cuz kadang-kadang yang terlalu berlebihan malah tidak asyik .^_^

pewarnaan visited link Done!


mencuri adalah pekerjaan pengecut! � buka-rahasia.blogspot.com

Memberi Warna Berbeda pada Link yang Dikunjungi/Di-klik (Visited Link)

Posted by rike No comments

Trik CSS ini digunakan untuk memberikan warna khusus pada visited link & berlaku untuk semua link yang ada di halaman blog/website kecuali untuk link yang menggunakan external script, misalnya widget-widget tambahan. Cara ini unik dan cukup berpengaruh karena sangat berguna bagi pengunjung agar tidak bingung ketika melakukan browsing, terutama pada website/blog yang memiliki link-link navigasi pada halaman-halaman yang hampir sejenis. Selain itu, pengunjung juga dapat mengetahui link mana yang telah ia klik sebelumnya jika ia ingin melihat kembali halaman tersebut karena ada sesuatu yang tadinya terlewatkan.

Cara ini merupakan override pada aturan link yang telah ada sebelumnya di template HTML. Jadi anda tidak perlu lagi mencari urutan aturan link di dalamnya. Cukup tambahkan aturan CSS berikut sebelum </head> di template HTML:

<style type='text/css'>
a:visited {color:#808080;text-decoration:none;}
</style>

Ganti #808080 dengan kode warna yang diinginkan. Ganti none dengan jenis properti text-decoration yang lain, misalnya underline (garis bawah) atau overline (garis atas), atau properti yang lain. But just remember, make it natural 'cuz kadang-kadang yang terlalu berlebihan malah tidak asyik .^_^

pewarnaan visited link Done!


mencuri adalah pekerjaan pengecut! � buka-rahasia.blogspot.com

Cara -Trik CSS: Membuat Scroll Text Area di Blog/Website dan Style-nya

Scroll text adalah text yang berada di dalam kotak yang luas dan tingginya di batasi dalam ukuran tertentu sehingga untuk melihatnya hingga ke bawah dibutuhkan mouse scrolling. Trik ini lazim digunakan untuk menghemat ruang di dalam post body maupun sidebar, sehingga keseluruhan halaman yang dimuat oleh browser menjadi tidak terlalu panjang.

Ini adalah contoh text yang menggunakan efek manual scrolling text. Secara normal, text ini akan terlihat sebagai paragraf di dalam post body seperti text di atas, dimana batas kiri, kanan, atas, dan bawah dibatasi oleh margin atau alignment yang telah diberi pengaturan default di dalam template HTML.

Style diatas dibentuk dengan menggunakan div styling, dengan menambahkan atribut pembatasan lebar (width) dan tinggi (height) pada area text, dimana area text tersebut sebenarnya lebih tinggi dan atau lebih lebar dari batasan yang diberikan. Lalu, untuk memberikan notifikasi pada browser bahwa elemen text harus dapat dilihat tetapi dalam luas area yang telah ditentukan tersebut, digunakanlah atribut overflow: scroll untuk memberikan efek scroll, ataupun overflow: auto yang secara otomatis akan memberikan efek scroll jika area text disempitkan. Logikanya, hal ini sama dengan area suatu halaman blog /website atau dokumen-dokumen lain di PC. Jika halaman tersebut lebih panjang dari area browser (juga berdasarkan resolusi layar monitor), maka akan muncul scroller di sebelah kanan browser, dan jika lebih lebar, maka akan muncul scroller di bagian bawah browser.

So, kita bisa menggunakan dasar tag <div style="....">text yang hendak diberi style</div> sama seperti text styling yang lainnya, dengan menambahkan tiga atribut penting: height, overflow:scroll/auto, dan weight:

<div style="height xx; overflow: auto; weight: xx">text yang hendak diberi efek scroll text</div>

Sebagai contoh hasil dasarnya seperti ini:

text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text

Dan ini tag serta atribut yang digunakan untuk contoh di atas:
<div style="height: 70px; overflow: auto; width: 200px;">text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text</div>

Nah, kemudian agar scroll text tersebut menjadi bagus atau indah dan muncul pada posisi sesuai dengan keinginan, tambahkan atribut-atribut styling yang lain, misalnya: border, margin, padding, text-align, atau background. Sebagai contoh:

Ini adalah contoh Scroll Text dengan tinggi 80px, border berukuran 2px berjenis solid dan berwarna lightblue, dengan menggunakan overflow berjenis auto, text-align berjenis justify(rata kanan kiri), dengan batas margin kiri sebesar 30px, padding sebesar 3px, dan memiliki luas sebesar 300px.

Ini tag dan atribut yang digunakan:
<div style="border: 2px solid lightblue; height: 80px; margin-left: 30px; overflow: auto; padding: 3px; text-align: justify; width: 300px;">
Ini adalah contoh Scroll Text dengan tinggi 80px, border berukuran 2px berjenis solid dan berwarna lightblue, dengan menggunakan overflow berjenis auto, text-align berjenisjustify (rata kanan kiri), dengan batas margin kiri sebesar 30px, padding sebesar 3px, dan memiliki luas sebesar 300px.</div>

Untuk praktisnya, anda dapat meng-copy yang di bawah ini:

<div style="border: 2px solid #000000; height: 100px; margin-left: 20px; overflow: auto; padding: 3px; text-align: left; width: 320px;">Text anda disini</div>

Yang berwarna biru adalah value atau ukuran border, tinggi, margin, padding, dan luas area. Anda dapat mengubahnya sesuai keinginan.

Yang berwarna merah adalah nilai warna border, anda dapat pula mengubahnya. Untuk panduan code warna hex, bisa dilihat disini.
Text-align memiliki 4 value: left, center, justify, dan right.

Anda dapat mengutak-atik atribut-atribut di atas; bahkan menambah atau menghapus atribut yang tidak diperlukan, kecuali 3 atribut inti: height, overflow, dan width untuk mendapatkan bentuk scroll text blog yg diinginkan.
Untuk bagian posting gunakan edit HTML, untuk sidebar pilih gadget HML/JavaScript.

Have a nice experiment and be creative.

Tersaji dengan Esensi

mencuri adalah pekerjaan pengecut! � buka-rahasia.blogspot.com

Cara -Trik CSS: Membuat Scroll Text Area di Blog/Website dan Style-nya

Posted by rike No comments

Scroll text adalah text yang berada di dalam kotak yang luas dan tingginya di batasi dalam ukuran tertentu sehingga untuk melihatnya hingga ke bawah dibutuhkan mouse scrolling. Trik ini lazim digunakan untuk menghemat ruang di dalam post body maupun sidebar, sehingga keseluruhan halaman yang dimuat oleh browser menjadi tidak terlalu panjang.

Ini adalah contoh text yang menggunakan efek manual scrolling text. Secara normal, text ini akan terlihat sebagai paragraf di dalam post body seperti text di atas, dimana batas kiri, kanan, atas, dan bawah dibatasi oleh margin atau alignment yang telah diberi pengaturan default di dalam template HTML.

Style diatas dibentuk dengan menggunakan div styling, dengan menambahkan atribut pembatasan lebar (width) dan tinggi (height) pada area text, dimana area text tersebut sebenarnya lebih tinggi dan atau lebih lebar dari batasan yang diberikan. Lalu, untuk memberikan notifikasi pada browser bahwa elemen text harus dapat dilihat tetapi dalam luas area yang telah ditentukan tersebut, digunakanlah atribut overflow: scroll untuk memberikan efek scroll, ataupun overflow: auto yang secara otomatis akan memberikan efek scroll jika area text disempitkan. Logikanya, hal ini sama dengan area suatu halaman blog /website atau dokumen-dokumen lain di PC. Jika halaman tersebut lebih panjang dari area browser (juga berdasarkan resolusi layar monitor), maka akan muncul scroller di sebelah kanan browser, dan jika lebih lebar, maka akan muncul scroller di bagian bawah browser.

So, kita bisa menggunakan dasar tag <div style="....">text yang hendak diberi style</div> sama seperti text styling yang lainnya, dengan menambahkan tiga atribut penting: height, overflow:scroll/auto, dan weight:

<div style="height xx; overflow: auto; weight: xx">text yang hendak diberi efek scroll text</div>

Sebagai contoh hasil dasarnya seperti ini:

text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text

Dan ini tag serta atribut yang digunakan untuk contoh di atas:
<div style="height: 70px; overflow: auto; width: 200px;">text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text</div>

Nah, kemudian agar scroll text tersebut menjadi bagus atau indah dan muncul pada posisi sesuai dengan keinginan, tambahkan atribut-atribut styling yang lain, misalnya: border, margin, padding, text-align, atau background. Sebagai contoh:

Ini adalah contoh Scroll Text dengan tinggi 80px, border berukuran 2px berjenis solid dan berwarna lightblue, dengan menggunakan overflow berjenis auto, text-align berjenis justify(rata kanan kiri), dengan batas margin kiri sebesar 30px, padding sebesar 3px, dan memiliki luas sebesar 300px.

Ini tag dan atribut yang digunakan:
<div style="border: 2px solid lightblue; height: 80px; margin-left: 30px; overflow: auto; padding: 3px; text-align: justify; width: 300px;">
Ini adalah contoh Scroll Text dengan tinggi 80px, border berukuran 2px berjenis solid dan berwarna lightblue, dengan menggunakan overflow berjenis auto, text-align berjenisjustify (rata kanan kiri), dengan batas margin kiri sebesar 30px, padding sebesar 3px, dan memiliki luas sebesar 300px.</div>

Untuk praktisnya, anda dapat meng-copy yang di bawah ini:

<div style="border: 2px solid #000000; height: 100px; margin-left: 20px; overflow: auto; padding: 3px; text-align: left; width: 320px;">Text anda disini</div>

Yang berwarna biru adalah value atau ukuran border, tinggi, margin, padding, dan luas area. Anda dapat mengubahnya sesuai keinginan.

Yang berwarna merah adalah nilai warna border, anda dapat pula mengubahnya. Untuk panduan code warna hex, bisa dilihat disini.
Text-align memiliki 4 value: left, center, justify, dan right.

Anda dapat mengutak-atik atribut-atribut di atas; bahkan menambah atau menghapus atribut yang tidak diperlukan, kecuali 3 atribut inti: height, overflow, dan width untuk mendapatkan bentuk scroll text blog yg diinginkan.
Untuk bagian posting gunakan edit HTML, untuk sidebar pilih gadget HML/JavaScript.

Have a nice experiment and be creative.

Tersaji dengan Esensi

mencuri adalah pekerjaan pengecut! � buka-rahasia.blogspot.com

2 Cara Menampilkan Widget/Iklan/Link/Script HANYA di Bagian Posting (Post Body)

Let's go straight to the point! Jika anda ingin menampilkan widget, iklan, link, ataupun script anda hanya di bagian bawah posting saja (menyembunyikan widget dari homepage) dan tidak ingin menampilkannya di bagian lain, termasuk halaman muka, you can follow these two tricks.

Ada dua cara yang bisa digunakan:

1. Jika blog anda berplatform blogger, anda dapat memanfaatkan fitur dalam setting. Login ke dashboard anda, dan::

Klik Setting

 Klik Formatting/format

Scroll ke bawah hingga post template. Anda dapat memasukkan script, link aktif , atau sekedar tulisan saja ke dalam form di sebelahnya. Save settings. That's it.

2. Anda dapat mengedit template html blog dan memasukkan tag b if cond, yang berfungsi sebagai perintah untuk menampilkan suatu hanya pada bagian tertentu. Cara ini saya dapat sebagai salah satu trik untuk menyembunyikan Google Adsense di blog yang lain dan ternyata bisa juga digunakan untuk script lain, misalnya widget-widget tambahan, baik dalam HTML murni maupun java. Masuk ke edit HTML, centang expand widget templates, dan masukkan kode berikut Tepat SEBELUM </body> (gunakan Ctrl+F untuk mencari):

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

script widget/iklan/script lain anda disini

</b:if>

Ganti  script widget/iklan/script lain anda disini dengan script atau link aktif anda dan save.

Analisis, kelebihan, dan kekurangan:

Cara 1: Cara ini mudah dan cenderung tidak beresiko. Cara ini sama saja dengan menyisipkan script ke dalam edit HTML anda di dalam posting (sebelah compose), sehingga script anda merupakan bagian posting. Dengan demikian, widget ataupun iklan anda akan muncul setelah anda membuat posting baru. Anda harus mengedit posting lama untuk menyisipkan script. Selain itu karena bersifat eksternal, load time yang dibutuhkan relatif lebih banyak. Cara ini pada akhirnya bersifat jauh lebih  manual dari cara 2.

Cara 2: Memasukkan script secara manual ke dalam template HTML blog memang hal yang sering dihindari, apalagi setelah Blogger memiliki banyak fitur instan. Namun yakinlah hasilnya akan berbeda dan lebih baik. Cara ini berarti mengintegralkan script dengan template blog, sehingga secara otomatis akan muncul dalam semua bagian blog yang diberi perintah untuk dimunculkan. Dengan demikian, semua posting lama anda pun akan 'terinfiltrasi' secara otomatis. Load time yang dibutuhkan relatif lebih cepat (catatan: tergantung dari jenis file widget dan server dari widget tersebut).

Have a nice try, then. ^^

Sebagai contoh adalah widget myfreecopyright di bawah ini:

mencuri adalah pekerjaan pengecut! � buka-rahasia.blogspot.com

2 Cara Menampilkan Widget/Iklan/Link/Script HANYA di Bagian Posting (Post Body)

Posted by rike No comments

Let's go straight to the point! Jika anda ingin menampilkan widget, iklan, link, ataupun script anda hanya di bagian bawah posting saja (menyembunyikan widget dari homepage) dan tidak ingin menampilkannya di bagian lain, termasuk halaman muka, you can follow these two tricks.

Ada dua cara yang bisa digunakan:

1. Jika blog anda berplatform blogger, anda dapat memanfaatkan fitur dalam setting. Login ke dashboard anda, dan::

Klik Setting

 Klik Formatting/format

Scroll ke bawah hingga post template. Anda dapat memasukkan script, link aktif , atau sekedar tulisan saja ke dalam form di sebelahnya. Save settings. That's it.

2. Anda dapat mengedit template html blog dan memasukkan tag b if cond, yang berfungsi sebagai perintah untuk menampilkan suatu hanya pada bagian tertentu. Cara ini saya dapat sebagai salah satu trik untuk menyembunyikan Google Adsense di blog yang lain dan ternyata bisa juga digunakan untuk script lain, misalnya widget-widget tambahan, baik dalam HTML murni maupun java. Masuk ke edit HTML, centang expand widget templates, dan masukkan kode berikut Tepat SEBELUM </body> (gunakan Ctrl+F untuk mencari):

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

script widget/iklan/script lain anda disini

</b:if>

Ganti  script widget/iklan/script lain anda disini dengan script atau link aktif anda dan save.

Analisis, kelebihan, dan kekurangan:

Cara 1: Cara ini mudah dan cenderung tidak beresiko. Cara ini sama saja dengan menyisipkan script ke dalam edit HTML anda di dalam posting (sebelah compose), sehingga script anda merupakan bagian posting. Dengan demikian, widget ataupun iklan anda akan muncul setelah anda membuat posting baru. Anda harus mengedit posting lama untuk menyisipkan script. Selain itu karena bersifat eksternal, load time yang dibutuhkan relatif lebih banyak. Cara ini pada akhirnya bersifat jauh lebih  manual dari cara 2.

Cara 2: Memasukkan script secara manual ke dalam template HTML blog memang hal yang sering dihindari, apalagi setelah Blogger memiliki banyak fitur instan. Namun yakinlah hasilnya akan berbeda dan lebih baik. Cara ini berarti mengintegralkan script dengan template blog, sehingga secara otomatis akan muncul dalam semua bagian blog yang diberi perintah untuk dimunculkan. Dengan demikian, semua posting lama anda pun akan 'terinfiltrasi' secara otomatis. Load time yang dibutuhkan relatif lebih cepat (catatan: tergantung dari jenis file widget dan server dari widget tersebut).

Have a nice try, then. ^^

Sebagai contoh adalah widget myfreecopyright di bawah ini:

mencuri adalah pekerjaan pengecut! � buka-rahasia.blogspot.com

Mengenal Elemen-elemen Wrapper CSS di Blogger/Blogspot

Blogger/blogspot memungkinkan penggunanya melakukan styling melalui edit html. Dengan demikian ini memberi peluang bagi anda, pemilik blog di blogger, untuk memodifikasi tampilan blog anda. Salah satunya adalah memberikan sentuhan CSS styling pada wrapper elements. Elemen dasar dari wrapper tersebut digambarkan sebagai berikut:

 

1. #outer-wrapper atau #outer-wrap atau #outer
2. #header-wrapper atau #header-wrap atau #header
3. #content wrapper atau #content-wrap atau #content
4. #main-wrapper atau main-wrap atau #main
5. #sidebar-wrapper atau #sidebar-wrap atau #sidebar, ada juga #lsidebar (l=left) dan #rsidebar (r=right)
(nama-nama tersebut relatif sifatnya)

Anda akan menemui declaration dibelakangnya, misalnya:

#outer-wraper {width: 960px;margin: 0 10px 0;border:3px solid #666666, dst....}

Di declaration itulah anda bisa memodifikasi/menambah/mengatur banyak hal. diantaranya adalah:

background (warna atau gambar/image), margin, padding, border, width, height (untuk header)

mencuri adalah pekerjaan pengecut! � buka-rahasia.blogspot.com

Mengenal Elemen-elemen Wrapper CSS di Blogger/Blogspot

Posted by rike No comments

Blogger/blogspot memungkinkan penggunanya melakukan styling melalui edit html. Dengan demikian ini memberi peluang bagi anda, pemilik blog di blogger, untuk memodifikasi tampilan blog anda. Salah satunya adalah memberikan sentuhan CSS styling pada wrapper elements. Elemen dasar dari wrapper tersebut digambarkan sebagai berikut:

 

1. #outer-wrapper atau #outer-wrap atau #outer
2. #header-wrapper atau #header-wrap atau #header
3. #content wrapper atau #content-wrap atau #content
4. #main-wrapper atau main-wrap atau #main
5. #sidebar-wrapper atau #sidebar-wrap atau #sidebar, ada juga #lsidebar (l=left) dan #rsidebar (r=right)
(nama-nama tersebut relatif sifatnya)

Anda akan menemui declaration dibelakangnya, misalnya:

#outer-wraper {width: 960px;margin: 0 10px 0;border:3px solid #666666, dst....}

Di declaration itulah anda bisa memodifikasi/menambah/mengatur banyak hal. diantaranya adalah:

background (warna atau gambar/image), margin, padding, border, width, height (untuk header)

mencuri adalah pekerjaan pengecut! � buka-rahasia.blogspot.com

Memperindah Kotak Comment Blogger/Blogspot Dengan CSS

Cara ini saya dapat setelah sedikit belajar otak-atik CSS dengan teman karena pengen banget membuat kotak comment (yang sebelumnya terkesan "biasa" di dalam template Blogger ini) terlihat lebih "berwarna" dan "senada" dengan warna template blog ini.
Akhirnya kita menggunakan konsep frame untuk menghias sekeliling kotak comment tersebut. Caranya pun sangat sederhana dan mudah. Berikut langkah-langkah dan kodenya:

1. Masuk ke dashboard Blogger  => Design => Edit HTML/Edit Template

2. Jangan lupa backup dulu template yang lama untuk berjaga-jaga apabila ada kesalahan dalam editing.

3. Centang expand widget template di sebelah kanan.

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

5.Copy kode CSS dibawah ini dan letakkan tepat sebelum/diatas tag tersebut.

#comment-form iframe{
background:#7f9db9;
border:7px solid #eeeeee;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#000000;
width:95%;
height:250px;
}
#comment-form iframe:hover{
background:#7f9db9;
border:7px solid #bababa;
}

6. Setelah itu save dan coba dilihat hasilnya.

Ganti width dan height sesuai dengan ukuran yang anda inginkan. Begitu pula dengan warna, ganti kode background sesuai dengan keinginan. Untuk kode-kode warna, silakan lihat Hex Color Code Chart Generator.

Memperindah Kotak Comment Blogger/Blogspot Dengan CSS

Posted by rike No comments

Cara ini saya dapat setelah sedikit belajar otak-atik CSS dengan teman karena pengen banget membuat kotak comment (yang sebelumnya terkesan "biasa" di dalam template Blogger ini) terlihat lebih "berwarna" dan "senada" dengan warna template blog ini.
Akhirnya kita menggunakan konsep frame untuk menghias sekeliling kotak comment tersebut. Caranya pun sangat sederhana dan mudah. Berikut langkah-langkah dan kodenya:

1. Masuk ke dashboard Blogger  => Design => Edit HTML/Edit Template

2. Jangan lupa backup dulu template yang lama untuk berjaga-jaga apabila ada kesalahan dalam editing.

3. Centang expand widget template di sebelah kanan.

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

5.Copy kode CSS dibawah ini dan letakkan tepat sebelum/diatas tag tersebut.

#comment-form iframe{
background:#7f9db9;
border:7px solid #eeeeee;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#000000;
width:95%;
height:250px;
}
#comment-form iframe:hover{
background:#7f9db9;
border:7px solid #bababa;
}

6. Setelah itu save dan coba dilihat hasilnya.

Ganti width dan height sesuai dengan ukuran yang anda inginkan. Begitu pula dengan warna, ganti kode background sesuai dengan keinginan. Untuk kode-kode warna, silakan lihat Hex Color Code Chart Generator.