Blogger Tips: Blogger Reader Unable to Comment

Aku baru sadar kalau beberapa pengunjung blog ku ini ternyata mengalami kesulitan untuk meninggalkan / memberikan komen di blog ku ini. Pertama kukira mereka yang speechless / irit komentar :D he5, ternyata ada faktor lain ^^. Thanks to my friend : Ivan (from Sibolga) yang memberikan informasi bahwa blog ku ternyata mempersulit atau bahkan tidak memungkinkan untuk diberi komentar.

Kesan pertama begitu mendapat berita itu tentu saja Heran ^^.
How come !!!!

Setelah meluncur ke TKP sendiri dan setelah menelisik lebih dalam, eh ternyata ada benarnya.
Lebih tepatnya, siapapun yang tidak sedang login ke google / OpenID akan mengalami kesulitan untuk memberikan komentar di blog ku. Hal ini disebabkan embedded comment form yang disediakan oleh paman Google dalam blogspot ternyata ukuran tingginya kurang mencukupi.
Sebagai gambarannya, liat gambar berikut :

Dalam gambar diatas, terlihat bahwa setelah word verification (kode CAPTCHAs) tidak muncul tombol untuk melakukan posting komentar atau submit comment. Seharusnya tombol tersebut ada beserta beberapa informasi tambahan lain seperti gambar berikut :

Dengan tidak munculnya tombol "Post Comment" itu, menyebabkan para pembaca/blogger kesulitan untuk mensubmit komentar yang sudah diketik sebelumnya. Nah bagaimana solusi nya ?

Ada 2 solusi :
1. Meniadakan pilihan "Word Verification" (kode Captcha)
2. Memunculkan scrolling pada embedded comment form Google,
sehingga blogger bisa melakukan scrolling untuk menampilkan tombol "Post Comment"nya.

Untuk solusi pertama yang meniadakan pilihan word verification, silakan masuk ke menu :
Settings lalu Comments, lalu pilihan "Show word verification for comments" dijawab dengan "No".
Dengan cara ini, maka tempat yang tersedia tidak akan "termakan" oleh word verification (kode Captcha) sehingga tombol "Post Comment" tidak tertutupi lagi.

Untuk solusi kedua, harus melakukan modifikasi pada kode HTML dari template yang kita pakai.
Caranya : login ke blog kamu, terus masuk ke menu Layout lalu Edit HTML. Enablekan/centang pilihan Expand Widget Templates. Pada isian kode HTML yang ada dibawahnya, cari kode berikut :

iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'

Perhatikan pada properti "Scrolling" diatas, yang awalnya bernilai "No", yang artinya tidak memunculkan scrollbar apabila tempatnya lebih kecil dari isi yang ada. Ubah nilai properti "Scrolling" tersebut menjadi "Auto" sehingga apabila form komentarnya kekecilan, dia akan memunculkan scrollbar secara otomatis. Kode HTML yang setelah diubah menjadi

iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='auto' src='' width='100%'

Hasil perubahannya akan menjadi seperti :

That's all, tidak terlalu sulit kan.
Tapi aneh juga, Google masih bisa ninggalin bug seperti ini di blogspot he5.
Apakah benar ini bug ? atau karena tidak kompatibel ama perkembangan terkini dari browser ?
Karena masalah ini hanya muncul kalau cookies yang menyimpan username / id pemberi komentarnya masih kosongan.

Kalau masih ada yang bingung atau mau bertanya hal yang lain seputar masalah ini silakan tinggalin pesan di komentar ya.

Happy blogging.

Continue Reading...

Blogger Tips: WordPress Page Number

Hallo Bloggers, tentu sudah familiar dengan istilah Page Number kan ?
Yup, dengan fasilitas Page Number, kita bisa membagi web blog kita dalam beberapa halaman, sehingga tidak scrolling terlalu panjang kebawah.

Kali ini yang akan aku bahas adalah bagaimana membuat/meng-enable-kan page number pada blog yang menggunakan WordPress.

Sejatinya, sangat sederhana untuk menampilkan page number pada blog kita. Cukup dengan menginstall plugins WP Page Numbers pada blog WordPress kita. Yup, nama plugins-nya adalah WP Page Numbers, by Jens Törnell. Plugins nya dapat kalian jumpai pada website berikut : http://www.jenst.se/2008/03/29/wp-page-numbers. Sampai saat artikel ini saya tulis, saya menggunakan WP Page Numbers Versi 0.5 (belum saya jumpai versi selanjutnya, tapi kalau sudah release, tolong kasih tau aku ya.
Setelah plugins nya diinstall, silakan diaktifkan. Dengan settingan standar, page number yang akan muncul pada blog WP kalian akan seperti berikut :

Sudah puas ? Jangan dulu.
Nih aku kasih lihat contoh page number yang sudah di"permak" untuk tampil lebih ok :D

Lebih ok kan ?
Nah gimana tuch caranya melakukan hal diatas ?
Here they are :
1. Set plugins WP Page Number-nya pada halaman wp-admin kalian, tepatnya pada tab Settings yang biasanya ada dibagian kiri bawah

2. Kalau setting tersebut masih kurang memuaskan, silakan setting manual dari langkah pertama tadi dengan mengedit 2 file css yang digunakan dalam tampilan page numbernya, yaitu : style.css dan wp-page-numbers.css. Untuk file css yang kedua (wp-page-numbers.css) letaknya ada di folder theme dari WP Page Number nya, sebagai contoh : /public_html/wp-content/plugins/wp-page-numbers/tiny (saya menggunakan theme 'tiny' untuk page numbernya).

ps: bagi saya, untuk urusan edit html ataupun css, lebih enakan menggunakan Firebug :D.
Bagi yang belum tau apa itu Firebug, silakan baca posting saya ini :  Firebug.
For me, editing got easier when I use Firebug ^_^

Sebagai contoh hasil penerapan Page Number dan hasilnya, bisa dilihat pada webku yang lain ini : Travian Hint.
Selamat mencoba,
dan apabila ada yang ingin share atau bertanya soal fitur page number ini, silakan isi komentar dibawah ini ya.

Continue Reading...

Blogger Tips: Wordpress Possibly Related Posts PlugIn

Baru saja nyoba-nyoba pasang plugin baru di wordpress ku.
Nama plugin nya: Possibly Related Posts.

Dari namanya aja da pada tau kan gunanya apa ? :D
Yup, buat men-generate secara otomatis post-post yang related dengan current post/artikel wordpress kita.

Tampilannya akan seperti ini :

Dengan fitur/plugin ini, kita ga perlu cape-cape neh buat bikin related post dalam setiap posting wordpress kita.

Gimana caranya ?

Mudah saja :

1. masuk aja ke control panel wordpress kamu, 
2. kemudian pilih bagian Plugins
3. lalu pilih Add New
4. search Plugins, masukkan Possibly Related Posts
5. plugin Possibly Related Posts yang saya pakai adalah yang dibuat oleh Travis Ballard.
6. Install

Hmmm....
Plugins apa lagi ya yang bagus ? Ada usulan kawan-kawan ?

Continue Reading...

Blogger Tips: Fix and Retouching My Blog With Firebug

After some period of inactivity for blogging, I found my mood again today.
But, I just got some disappointed with my blog looks, not because the template is not good enough, but I found and feel some bug and misplace section in my blog looks.

here is what I am talking about (shown with the red circle and red rectangle)


Now look at the new looks after some fixing and retouching them :


Now, I feel glad to see my blog again :D lol.

I use some helps from Firebug.

What is Firebug ?
Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

You can find it more details and download here : Get Firebug.

After you success installing it, it will appears like shown in my first picture at the right bottom corner of the Firefox browser, shown as bug picture.

I like firebug, it simplify my works with html, css and inspection of my web easily.

What about you ?
Any experience working using firebug ?
Feel free to share it with us here.

Continue Reading...

Blogger Tips: Showing Post Date on Every Post

As we all know, Blogger’s default templates only show a single date for every post that was posted that day. Some readers will find it convenient to have that quick glance at the date on each post, but some will not even notice. This tips is definitely handy if you plan to use a calendar icon as your post date, since the timestamp can be modified.

If you follow and try my previous tips : Change Post Date Become Calendar Icon, using the "<data:post.dateHeader/>" you will get some calendar icon "blank" (no post date in it) for posts within same date.

This is because in default template, Blogger only show a single date for every post that was posted in that day. How to change it so we can show the post date on every post we have ?

Here are the steps to follow :

1. Follow the instruction to change your post date become calendar icon first. If you haven't do this, feel free to read my previous post about that: Change Post Date Become Calendar Icon.

2. Change the <data:post.dateHeader/> with <data:post.timestamp/> like this section:

<div class='post-date'><div class='warnaCoklatPutih'><script>UbahTanggal('<data:post.timestamp/>');</script></div></div>

3. There is no need more changes in your previous javascript code "UbahTanggal". It still runs well for this changes.

4. Make sure you already change the timestamps setting of your blogger template into "mm/dd/yyyy" or "mm/dd/yyyy hh:mm:ss am/pm".

5. Aware for other existence of your <data:post.timestamp/>. If you don't want to show the timestamps anywhere else, just delete that code from your xml template. (Find and delete it).

6. Save your editting, and see the result, is it working? :)

Good Luck ............

Related post :

• Blogger Tips: Change Post Date Become Calendar Icon
  
• Free Blogger Template Selection
  

Continue Reading...

Blogger Tips: Change Post Date Become Calendar Icon

My first tweak in this blogger template is changing the post date become calendar icon.
When you start blogging with blogger, and enable the header post-date function, you should aware of the post date return by "<data:post.dateHeader/>" function of blogger would be like this :

• 8/16/2009
• 8.16.2009
• 16.8.09
• August 16, 2009
• or the complete list :

Bored with those "default" format of the post date function ?
And want some nice calendar icon to replace the normal format of your post date function ?
Here is the final result of your calendar icon would be :

Ok, let me explain the steps :

1. The first thing you have to do is change your "date header format" to become mm/dd/yyyy (8/16/2009). How to do this? go to your blogger account, then chose "Setting --> Formatting, change "date header format" to become what I said before (mm/dd/yyyy) then save your setting.

2. Next step is go to tabs "Template --> Edit HTML". Don't forget to backup your template first. Click on a "Expand Widget Templates" check box. OK lets go to the deep trick.

3. Find this code <TITLE><data:blog.pageTitle/></TITLE> in your HTML. If you found it, put the code below under it :
<SCRIPT type='text/javascript'>
//<![CDATA[
/*********************************/
/* author: Hary Purnomo
/* notes: change your blog date setting into mm/dd/yyyy
/* please do not remove this credit notes
/*********************************/
function UbahTanggal(date) {
var arrayStr = date.split('/');
var bulan = arrayStr[0], tanggal = arrayStr[1], tahun = arrayStr[2];
var strBulan =
['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
document.write("<div class='bulan'>"+strBulan[bulan]+"</div>"+"<div class='tanggal'>"+tanggal+"</div>");
}
//]]>
</SCRIPT>

4. Find your "post" CSS section first, something to be like this :

.post {
background:#fff;
float: left;
width: 475px;
margin-bottom:10px;
padding: 10px;
overflow:hidden;
border:1px solid #cfcfcf;
}

*find the keyword ".post" with search function of your browser.

5. OK, after you found it, put some below codes under it :
/* >>> add by Hary Purnomo */
.post-date
{

}
.post-date .warnaCoklatPutih
{
-x-system-font:none;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaRyzfYv8iSuSyzbodmRf8-5xbCofJiOlYImo5kWpz-7S_nXTLkq-8vhbvgqdiA_1RvVPmTU93uSdgMjuiG9Ru545x_YICwZIHtw84XBt5760JAvXEzd6AxNoDz6pmV7AEgYkju6MAq2s/s400/brown-calendar.gif) no-repeat scroll 0 0;
color:#666666;
float:left;
font-family:Arial;
font-size:22px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
height:50px;
line-height:100%;
padding:0 5px 0 0;
text-align:center;
width:45px;
}
.post-date .tanggal
{
padding:1px 0 0 0;
}
.post-date .bulan
{
-x-system-font:none;
color:#FFFFFF;
display:block;
font-family:Arial;
font-size:11px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
height:16px;
line-height:normal;
padding-top:5px;
text-align:center;
}
/* >>> add by Hary Purnomo */

Code https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaRyzfYv8iSuSyzbodmRf8-5xbCofJiOlYImo5kWpz-7S_nXTLkq-8vhbvgqdiA_1RvVPmTU93uSdgMjuiG9Ru545x_YICwZIHtw84XBt5760JAvXEzd6AxNoDz6pmV7AEgYkju6MAq2s/s400/brown-calendar.gif is the place for calender icon, you can change it with your own image or use my image above. What to do is change the red text with your own pictures code

6. Next step is find this code <data:post.dateHeader/> . The easy way to find it is by copying the code the press Ctrl-F then paste to the shown box, you will found the code immediately. If you didn't anything you can find it manually. OK, If you found it change the code with the below script :

<div class="post-date"><div class="warnaCoklatPutih"><script>UbahTanggal('<data:post.dateHeader/>');</script></div></div>

7. Save your editting, and see the result, is it working? :)

Good Luck ............

Please be respectful and do not remove credit/author remark/comment without my permission.

Related post :

• Free Blogger Template Selection
  

Continue Reading...