User Online Status

How many people is online at your blog? you know that or don't? If you don't know how many people is online at your blog, you can use a free tracker to know it. That is much site provide this service. Once of them is www.histats.com. If you use them tool, you can know how many people online at your blog, how many people was visited to your blog, and any function. This is once of example :




How to get it? please following the steps :

1. Please visit www.histats.com.



2. If you was on the histats site, click Register at the top tab.



3. Content the form with your information, such as email, password, your blog url and etc.



4. Click Continue button.



5. Choose the style of histats counter, click Choose a counter from this category.



6. Please mark the radio button beside the counter style you wanted.



7. Click Continue button at the bottom of page.



8. Click at the drop down menu, choose the category which to display at your counter. the choice is : visitor today, Page views today, User online, Total visitors, and total page views. Choose empty if you want not to display them.



9. Click Continue button.



10. Wait a moment, your counter is updating.



11. Until the process is done, copy your counter code and paste to the Notepad or other text editor. Save into your computer.



12. Logout and close your internet browser.



13. Done. Now you has have a counter code to add at your blog.

Next step is add your counter code to your blog, please following the steps :

1. Login to blogger with your ID.
2. After entering the dasboard page , click Layout.



3. Click at Page Element tab. See the picture below :

4. Click at Add a Page element.
5. After emerging pop up window , Klik add to blog button for the things HTML/JavaScript. See the picture following :

6. Open your Counter code, copy and then paste into available column.



7. Click



8. Done. Please see the result.

Now you have a Counter, and you will know how many people online at your blog.

If you don't like with this counter, you can get at the other site, this is several site provide the same service :

• http://www.neoworx.net


• http://www.webfooted.net


• http://www.fastonlineusers.com

See you next time at my new tips. Happy blogging.

Versi Bahasa Indonesia

Berbicara masalah blog tools, kayanya saya jarang sekali membahasnya. Dari sekian banyak artikel yang telah saya posting, tercatat baru dua artikel yang membahas tentang blog tools. Untuk itu dalam postingan kali ini akan di bahas salah satu blog tools yang banyak di gunakan oleh para blogger yakni tool untuk mengetahui berapa banyak pengguna/user yang sedang online pada blog milik kita.

Disamping berfungsi sebagai blog tools, tool ini berfungsi juga sebagai aksesori blog yaitu untuk menghiasi halaman blog milik kita agar tampak lebih cantik dan menarik untuk dilihat oleh para pengunjung. Oleh karena alasan tadi banyak penyedia tool ini yang menawarkan tampilan-tampilan yang unik serta menarik di samping fungsi utamanya yakni melacak user yang sedang online di blog kita.

Ok, biar ga bosan baca intermezo yang terlalu panjang dan garing, langsung saja pada topik bahasan utama.Untuk mendapat tool user online status, salah satunya kita bisa mendapatkan dari www.Geovisite.com, untuk langkah-langkahnya silahkan ikuti langkah berikut :

1. Silahkan buka www.geovisite.com



2. Klik tulisan Register yang berada di bawah gambar Geo counter Flash



3. Tulis alamat email sobat pada kotak kosong di samping tulisan Email



4. Tulis address blog milik sobat disamping tulisan URL. Contoh : http://rubrik-elektronik.blogspot.com



5. Tulis kata untuk login di samping tulisan Login (4/12). Contoh : amen24



6. Tulis password yang di inginkan disamping tulisan password (4/8). Contoh : kinoy



7. Pilih waktu yang sesuai dengan daerah sobat disamping tulisan Location. contoh :untuk daerah jakarta adalah Asia/Jakarta (GMT+7)



8. Pilih kategori yang sesuai dengan blog sobat di samping tulisan Category. Contoh : Internet



9. Pilih bahasa yang sesuai dengan blog sobat di samping tulisan Language of your site. Contoh : English (soalnya kalo indonesia ga ada, belum di akui bo)



10. Pilih judul blog sobat disamping tulisan Title. Contoh : Rubrik Elektronik



11. Tulis deskripsi dari blog milik sobat pada kotak di samping tulisan Descriptioan. Contoh : All about Electronic, tips, maintenance, until how to service the equipment of electronic



12. Klik tombol yang berlogo disket



13. Copy salah satu kode HTML yang dinginkan, antara lain : GEOGLOBE, GEOCOUNTER, GEOMAP lalu paste pada program notepad



14. Silahkan close window browser sobat



15. langkah selanjutnya adalah memasukan kode HTML tersebut pada kode HTML milik sobat, nah untuk langkah ini sudah saya bahas, silahkan klik di sini untuk membacanya



16. Selesai.

Agar sobat bisa menentukan pilihan mana yang harus di pilih apakah GEOGLOBE, GEOCOUNTER, atau GEOMAP ? Silahkan klik di sini untuk melihat secara nyata gambar dari ketiga pilihan tadi, tunggu beberapa saat,loadingnya lumayan sedikit lama. Kenapa tidak saya cantumkan di sini,alasannya yaitu agar halaman blog ini tidak terlalu berat untuk di akses makanya sengaja saya pisahkan.

Sebagai tambahan, situs penyedia yang lainnya sobat bisa kunjungi di :

• http://www.neoworx.net


• http://www.webfooted.net


• http://www.fastonlineusers.com


• http://www.histats.com

Read more »

Posted in: Blogger,Blogger Widgets,Tutorial

Membuat menu D'tree

User Online Status

English Version

How many people is online at your blog? you know that or don't? If you don't know how many people is online at your blog, you can use a free tracker to know it. That is much site provide this service. Once of them is www.histats.com. If you use them tool, you can know how many people online at your blog, how many people was visited to your blog, and any function. This is once of example :




How to get it? please following the steps :

1. Please visit www.histats.com.



2. If you was on the histats site, click Register at the top tab.



3. Content the form with your information, such as email, password, your blog url and etc.



4. Click Continue button.



5. Choose the style of histats counter, click Choose a counter from this category.



6. Please mark the radio button beside the counter style you wanted.



7. Click Continue button at the bottom of page.



8. Click at the drop down menu, choose the category which to display at your counter. the choice is : visitor today, Page views today, User online, Total visitors, and total page views. Choose empty if you want not to display them.



9. Click Continue button.



10. Wait a moment, your counter is updating.



11. Until the process is done, copy your counter code and paste to the Notepad or other text editor. Save into your computer.



12. Logout and close your internet browser.



13. Done. Now you has have a counter code to add at your blog.

Next step is add your counter code to your blog, please following the steps :

1. Login to blogger with your ID.
2. After entering the dasboard page , click Layout.



3. Click at Page Element tab. See the picture below :

4. Click at Add a Page element.
5. After emerging pop up window , Klik add to blog button for the things HTML/JavaScript. See the picture following :

6. Open your Counter code, copy and then paste into available column.



7. Click



8. Done. Please see the result.

Now you have a Counter, and you will know how many people online at your blog.

If you don't like with this counter, you can get at the other site, this is several site provide the same service :

• http://www.neoworx.net


• http://www.webfooted.net


• http://www.fastonlineusers.com

See you next time at my new tips. Happy blogging.

Versi Bahasa Indonesia

Berbicara masalah blog tools, kayanya saya jarang sekali membahasnya. Dari sekian banyak artikel yang telah saya posting, tercatat baru dua artikel yang membahas tentang blog tools. Untuk itu dalam postingan kali ini akan di bahas salah satu blog tools yang banyak di gunakan oleh para blogger yakni tool untuk mengetahui berapa banyak pengguna/user yang sedang online pada blog milik kita.

Disamping berfungsi sebagai blog tools, tool ini berfungsi juga sebagai aksesori blog yaitu untuk menghiasi halaman blog milik kita agar tampak lebih cantik dan menarik untuk dilihat oleh para pengunjung. Oleh karena alasan tadi banyak penyedia tool ini yang menawarkan tampilan-tampilan yang unik serta menarik di samping fungsi utamanya yakni melacak user yang sedang online di blog kita.

Ok, biar ga bosan baca intermezo yang terlalu panjang dan garing, langsung saja pada topik bahasan utama.Untuk mendapat tool user online status, salah satunya kita bisa mendapatkan dari www.Geovisite.com, untuk langkah-langkahnya silahkan ikuti langkah berikut :

1. Silahkan buka www.geovisite.com



2. Klik tulisan Register yang berada di bawah gambar Geo counter Flash



3. Tulis alamat email sobat pada kotak kosong di samping tulisan Email



4. Tulis address blog milik sobat disamping tulisan URL. Contoh : http://rubrik-elektronik.blogspot.com



5. Tulis kata untuk login di samping tulisan Login (4/12). Contoh : amen24



6. Tulis password yang di inginkan disamping tulisan password (4/8). Contoh : kinoy



7. Pilih waktu yang sesuai dengan daerah sobat disamping tulisan Location. contoh :untuk daerah jakarta adalah Asia/Jakarta (GMT+7)



8. Pilih kategori yang sesuai dengan blog sobat di samping tulisan Category. Contoh : Internet



9. Pilih bahasa yang sesuai dengan blog sobat di samping tulisan Language of your site. Contoh : English (soalnya kalo indonesia ga ada, belum di akui bo)



10. Pilih judul blog sobat disamping tulisan Title. Contoh : Rubrik Elektronik



11. Tulis deskripsi dari blog milik sobat pada kotak di samping tulisan Descriptioan. Contoh : All about Electronic, tips, maintenance, until how to service the equipment of electronic



12. Klik tombol yang berlogo disket



13. Copy salah satu kode HTML yang dinginkan, antara lain : GEOGLOBE, GEOCOUNTER, GEOMAP lalu paste pada program notepad



14. Silahkan close window browser sobat



15. langkah selanjutnya adalah memasukan kode HTML tersebut pada kode HTML milik sobat, nah untuk langkah ini sudah saya bahas, silahkan klik di sini untuk membacanya



16. Selesai.

Agar sobat bisa menentukan pilihan mana yang harus di pilih apakah GEOGLOBE, GEOCOUNTER, atau GEOMAP ? Silahkan klik di sini untuk melihat secara nyata gambar dari ketiga pilihan tadi, tunggu beberapa saat,loadingnya lumayan sedikit lama. Kenapa tidak saya cantumkan di sini,alasannya yaitu agar halaman blog ini tidak terlalu berat untuk di akses makanya sengaja saya pisahkan.

Sebagai tambahan, situs penyedia yang lainnya sobat bisa kunjungi di :

• http://www.neoworx.net


• http://www.webfooted.net


• http://www.fastonlineusers.com


• http://www.histats.com

Read more »

Posted in: Blogger,Blogger Widgets,Tutorial

Menampilkan Beberapa Model Status Online Yahoo Messenger

Jika anda seorang blogger pemula, sangat tepat dan pas untuk membaca artikel yang saya posting ini ...
Saya sendiri sebagai seorang blogger pemula juga sangat butuh informasi tips berikut ini, tetapi lebih tepat sasaranya untuk seorang pemula yang ingin membuat sebuah icon yahoo messenger di blog mereka. Bagi yang sudah profesional, g ush di tanya lagi deeh, pasti mereka ud pada tau, posting semacam ini mungkin ud basi he3 ...

OK langsung aja cara membuatnya :

1. Login to Blogger kemudian pilih "Layout".
2. Klik pada "Page Element" trus pilih "Add a Gadget --> HTML/Javascript" (Tempatnya terserah kamu).
3.Copy Paste Script Berikut :





4. Ganti tulisan yang berwarna merah dengan nama ID_YM Anda.
5. Kode "t=14" (bercetak tebal) menunjukkan model status YM yang ditampilkan, kamu bisa menggantinya.
6. Terus Simpan.

Berikut ini beberapa model status YM yang dapat dipasang dengan mengganti kode yang saya cetak tebal diatas :


Kode yang di pakai adalah t=1


Kode yang di pakai adalah t=2


Kode yang di pakai adalah t=3


Kode yang di pakai adalah t=4


Kode yang di pakai adalah t=5


Kode yang di pakai adalah t=6


Kode yang di pakai adalah t=7


Kode yang di pakai adalah t=8


Kode yang di pakai adalah t=9


Kode yang di pakai adalah t=10


Kode yang di pakai adalah t=11


Kode yang di pakai adalah t=12


Kode yang di pakai adalah t=13


Kode yang di pakai adalah t=14


Kode yang di pakai adalah t=15


Kode yang di pakai adalah t=16



Gantilah kode sesuai dengan tampilan yang anda pilih ... Semoga dapat bermanfaat dan Happy Blogging.

Read more »

Posted in: Blogger Widgets

Pasang Translate di Blog

Kali ini aku akan posting cara pasang Google translate di blog. Widget asli dari google tampilanya tidak semenarik widget ini ... Widget Google translate kali ini hasil kreasi sang master Blogger kita yaitu Kang Rohman... Widget yang akan terpasang dalam bentuk bendera2 yang sangat menarik dan jika mouse anda arahkan ke gambar-gambar bendera yang ada akan terlihat sedikit efek blur sebagai pemanis.

langkah2 untuk membuatnya adalah :

1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Page Element" trus pilih "Add a Gadget --> HTML/Javascript" (Tempatnya terserah kamu).
3. Copy Paste Script Berikut:

by : BTF

4. Klik tombol Simpan dan lihat hasilnya ...

Read more »

Posted in: Blogger Widgets

Menambah Jumlah Kolom Pada Templates Blogspot

Jika anda baru mulai membuat sebuah blog, anda bisa dengan leluasa memilih templates untuk blog anda. bisa memilih dua kolom atau templates 3 kolom. Tapi bagi yang sudah terlanjur memilih templates 2 kolom dan ingin membuatnya menjadi templates tiga kolom, hal itu bukan hal mustahil diwujudkan. Anda bisa merubah templates dua kolom anda menjadi 3 kolom dengan membuat kolom tambahan pada templates dua kolom anda.

Pada artikel ini saya menggunakan templates standar blogspot yaitu dots 2 kolom yang coba saya tambahkan menjadi templates 3 kolom. Ok langsung ajah, Anda harus login dulu ke account Blogger anda, kemudian klik Layout > Edit html. Jangan lupa centang Expand Widget Template. Lalu cari kode-kode dibawah ini

#outer-wrapper {
background:url(“http://www.blogblog.com/dots/bg_3dots.gif”) no-repeat 250px 50px;
width:700px;
margin:0 auto;
text-align:left;
font:$bodyfont;
}
#header-wrapper {
display: none;
}
#main-wrapper {
width:450px;
float:right;
padding:100px 0 20px;
font-size:85%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#main {
background:url(“http://www.blogblog.com/dots/bg_dots2.gif”) -100px -100px;
padding:20px 10px 15px;
}
#sidebar-wrapper {
width:200px;
float:left;
font-size:85%;
padding-bottom:20px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar {
background:url(“http://www.blogblog.com/dots/bg_dots2.gif”) 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}

Kemudian ganti dan tambahkan pada baris2 tersebut, sesuai dengan yg bertanda merah dibawah ini

#outer-wrapper {
background:url(“http://www.blogblog.com/dots/bg_3dots.gif”) no-repeat 275px
width:950px;
margin:0 auto;
text-align:left;
font:$bodyfont;
}
#header-wrapper {
display: none;
}
#main-wrapper {
width:400px;
float:left;
padding:100px 0 20px;
font-size:85%;
margin-left:50px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#main {
background:url(“http://www.blogblog.com/dots/bg_dots2.gif”) -100px -100px;
padding:20px 10px 15px;
}
#sidebar-wrapper {
width:200px;
float:left;
font-size:85%;
padding-bottom:20px;
margin-left:25px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar {
background:url(“http://www.blogblog.com/dots/bg_dots2.gif”) 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}
#newsidebar-wrapper {
width:200px;
float:right;
font-size:85%;
padding-bottom:20px;
margin-right:25px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#newsidebar {
background:url(“http://www.blogblog.com/dots/bg_dots2.gif”) 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}
50px;

Dots Dark Template

Pengguna Dots Dark template akan menemukan baris2 dibawah ini :

#outer-wrapper {
background:url(“http://www.blogblog.com/dots_dark/bg_3dots.gif”) no-repeat 250px 50px;
width:700px;
margin:0 auto;
text-align:left;
font:$bodyfont;
}
#header-wrapper {
display: none;
}
#main-wrapper {
width:450px;
float:right;
padding:100px 0 20px;
font-size:85%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#main {
background:url(“http://www.blogblog.com/dots_dark/bg_minidots2.gif”) -100px -100px;
padding:20px 10px 15px;
}
#sidebar-wrapper {
width:200px;
float:left;
font-size:85%;
padding-bottom:20px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar {
background:url(“http://www.blogblog.com/dots_dark/bg_minidots2.gif”) 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}

Ganti atau tambahkan baris2 diatas jadi seperti ini ( yang bertanda merah )

#outer-wrapper {
background:url(“http://www.blogblog.com/dots_dark/bg_3dots.gif”) no-repeat 275px 50px;
width:950px;
margin:0 auto;
text-align:left;
font:$bodyfont;
}
#header-wrapper {
display: none;
}
#main-wrapper {
width:400px;
float:left;
padding:100px 0 20px;
font-size:85%;
margin-left:50px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#main {
background:url(“http://www.blogblog.com/dots_dark/bg_minidots2.gif”) -100px -100px;
padding:20px 10px 15px;
}
#sidebar-wrapper {
width:200px;
float:left;
font-size:85%;
padding-bottom:20px;
margin-left:25px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar {
background:url(“http://www.blogblog.com/dots_dark/bg_minidots2.gif”) 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}
#newsidebar-wrapper {
width:200px;
float:right;
font-size:85%;
padding-bottom:20px;
margin-right:25px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#newsidebar {
background:url(“http://www.blogblog.com/dots_dark/bg_minidots2.gif”) 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}

Dots dan Dots Dark Template

Modifikasi2 berikut ini berlaku untuk kedua templates diatas,
terus turun kebawah, kita akan menemukan baris2 kode berikut ini

/* Page structure tweaks for layout editor wireframe */
body#layout #sidebar, body#layout #main,
body#layout #main-wrapper,
body#layout #outer-wrapper,
body#layout #sidebar-wrapper {
padding: 0;
}
body#layout #sidebar, body#layout #sidebar-wrapper {
padding: 0;
width: 240px;
}

ganti baris diatas dengan baris2 ini :

/** Page structure tweaks for layout editor wireframe */
body#layout #outer-wrapper {
width: 750px;
padding: 0px;
}

body#layout #main-wrapper,
body#layout #main {
width: 400px;
padding: 0px;
margin: 0px;

}

body#layout #sidebar-wrapper,
body#layout #newsidebar-wrapper,
body#layout #sidebar,
body#layout #newsidebar {
width: 150px;
padding: 0px;
}

Kemudian, terus kebawah, cari baris2 seperti dibawah ini,
dan ganti/tambahkan dengan kode-kode berikut, warna hijau brarti ganti, warna merah brarti tambahkan

Sekarang coba preview template anda, anda akan melihat sidebar baru di sebelah kanan blog anda dengan isi profile anda (jika anda men-nonaktifkan sharing profil anda, aktifkan sementara)
Jika anda sudah puas dengan tampilan baru blog anda, klik Save Template,

Read more »

Posted in: Blogger Widgets

Cara Membuat Read More di Blogspot

Membuat Read More di Blogspot

• Login ke akun blogger anda, pilih blog yang ingin anda edit, klik link Layout kemudian masuk ke Edit HTML
• Jangan lupa centang/tandai/aktifkan Expand Widget Templates Untuk bisa mengedit template secara keseluruhan.
• Masukkan kode berikut sebelum tag atau tepat sesudah kode } ]]>seperti dibawah ini :
• Selanjutnya mengatur supaya postingan terpotong, cari kode
  dalam template anda dan tambahkan kode berikut tepat dibawahnya:


Read More..


• Nah supaya terpotong, setiap kali anda menulis artikel posting, klik pada bagian artikel dimana anda pengen tulisan Read More.. muncul, lalu ketik kemudian lanjutkan sisa artikel sampai selesai, akhiri dengan mengetik . Untuk menmbahkan kode ini, ketika menulis artikel, anda harus dalam mode Edit HTML bukan Compose
• Tulisan Read More.. seperti yang berwarna merah pada kode diatas, bisa anda ganti dengan tulisan lain seperti Baca Selengkapnya.. atau Lanjut Baca..

Contoh Penulisan Posting

Ini adalah awal berita yang ingin saya potong karena terlalu panjang kalo postingan muncul semua, oleh karena itu saya perlu memotong berita sampai disini saja. Dan ini adalah sisa postingan saya yang akan saya sembunyikan dan hanya muncul pada saat post page atau link read more.. diklik

Hasil akhir posting akan tampak seperti ini :

Ini adalah awal berita yang ingin saya potong karena terlalu panjang kalo postingan muncul semua, oleh karena itu saya perlu memotong berita sampai disini saja

Dan ini adalah sisa postingan saya yang akan saya sembunyikan dan hanya muncul pada saat post page atau link read more.. diklik

Read more »

Posted in: Blogger Widgets

Numbered Page Navigation For Blogger

Page Navigation is a really awesome and long awaited feature. You might have seen numbered page navigation on many wordpress blogs(wp-pagenavi by Lester Chan). Muhammad Rias of Techie Blogger had already developed a page navigation system for blogger.It really was an awesome trick which was made at a time when nobody could even think of implementing it on blogger.It had some minor bugs and now Abu Farhan has perfected it and he has now given us the perfect page navigation solution.Here is a little screenshot of what this is all about.

When you use this hack,you will see this kind of navigation on your blog’s home page and label pages(needs little customization).

Implementation of Blogger Page Navigation

Those who are bad at HTML modifications can use my one click installer :)

After installing this widget proceed to the label fix.

The Complex Method. :P

If you installed the widget you shouldn’t be here.. Scroll down to the label fix.

1.Login to Blogger Dashboard and navigate to Layout > Edit Html

2.Don’t click the checkbox which says ‘Expand Widget Templates’

3.Now find

]]>b:skin>

and replace it with

.showpageArea a {

text-decoration:underline;

}

.showpageNum a {

text-decoration:none;

border: 1px solid #cccccc;

margin:0 3px;

padding:3px;

}

.showpageNum a:hover {

border: 1px solid #cccccc;

background-color:#cccccc;

}

.showpagePoint {

color:#333;

text-decoration:none;

border: 1px solid #cccccc;

background: #cccccc;

margin:0 3px;

padding:3px;

}

.showpageOf {

text-decoration:none;

padding:3px;

margin: 0 3px 0 0;

}

.showpage a {

text-decoration:none;

border: 1px solid #cccccc;

padding:3px;

}

.showpage a:hover {

text-decoration:none;

}

.showpageNum a:link,.showpage a:link {

text-decoration:none;

color:#333333;

}

]]>b:skin>

This is the CSS part which defines the look and feel of the page navigation.You can modify it according to your need

4.Next is the JavaScript part. Find

body>

and replace it with

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:blog.pageType != "static_page"'>

<script type='text/javascript'>

var pageCount=5;

var displayPageNum=5;

var upPageWord ='Previous';

var downPageWord ='Next';

script>

<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>

b:if>

b:if>



body>

As you can see,there are some customizable parameters in this code

var pageCount=5;

This code determines the number of posts that would be displayed per page.

var displayPageNum=5;

This code determines the number of additional page navigation numbers that will be displayed on the page.

var upPageWord ='Previous';

var downPageWord ='Next';

These two lines determine the text that would be shown for the previous page and next page respectively.

Label Fix

Now we have another problem.By default,the blogger label pages will show 20 posts.We will have to cut this down to the value that we gave for the variable pageCount (or the posts per page).For this we will have to edit our template

How to Edit the template to cut short the posts per page?

Go to the Edit HTML page and expand the Widget Templates

Now find each occurrence of

'data:label.url'

(including the quotes) and replace each of it with

'data:label.url + "?&max-results=5"'

Here 5 is the number of posts to be displayed per page.

Now if you are using the label cloud widget by phydeaux3,then find

a.href = '/search/label/'+encodeURIComponent(t);

and replace it with

a.href = '/search/label/'+encodeURIComponent(t)+'?&max-results=5';

Here also 5 is the number of posts to be displayed per page.

Now you should have the Blogger Page Navigation working perfectly on your blog. :)

Read more »

Posted in: Blogger Widgets

Show avatars on Blogger Comments

Implementation of Comment Avatars

1.First of all Go to Blogger > Settings >Comments and enable “Show profile images on comment”

2.Now if you have a normal un customized template you will see the avatars on the comments on your blog.

3.If you have a customized template you will have to add some codes and play around with your template.For that first go to Blogger Layout >Edit HTML and backup your template.

4.Expand the widget templates and check if you can find this line there

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

If you can’t then that means we have something to do..

If you couldn’t find this,then do the following steps.

a)Find

<dl id='comments-block'>

and replace it with

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

b)Now Find all occurrences of

<a expr:name='data:comment.anchorName'/>

and replace each of it with

<b:if cond='data:comment.favicon'>

<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>

b:if>

<a expr:name='data:comment.anchorName'/>

<b:if cond='data:blog.enabledCommentProfileImages'>

<div expr:class='data:comment.avatarContainerClass'>

<data:comment.authorAvatarImage/>

div>

b:if>

If you are using the author comment highlighting trick and if doesn’t work out with that trick,then leave a comment and i will try to help you out..

Further Styling.

If you want to add a default avatar for the ones with no profile pics,then place the CSS code just above

]]>b:skin>

CSS Code

.avatar-image-container {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2kwS2GaUf1Bjo5514X79dUyGTYZrarK1Qc0NGwVby3wATBIkRl6aYpc_UUtAqK4P_0iIca_7d2dxAV8I0nq32vB7GT1DczmD5M6TXQfCx51JfLICO4EaeYvFEDjQsp3P6pr1AAXUwgQ/s400/default.gif); width:35px;height:35px; }

.avatar-image-container  img { border:none;}

You can customize the CSS according to what you need.

If you need bigger avatars instead of smaller ones,then use the following CSS instead of the one above.

.avatar-image-container{width:50px;height:50px;margin-top:-5px;}

.avatar-image-container img {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf4s2WCo1PnE20zApceRiSNfEsEpIZULB3dU6a96TVcB-obg911_fanntBULJPp4gHg5VautBXn-7Tislgj7QSXJAlOP374x0_94g-wHt_WINcR1aQrFjf5hAMxr2fx4F_sB-d4wtPc0g/s400/grav.png);width:50px;height:50px;}

This will give you a bigger avatar and also a default gravatar image but it has a little drawback.It will also resize the small blogger favicons to a big size.(blooger favicon is displayed when a blogger user doesn’t have a profile avatar.Similarly OpenId also has a similar small icon.. ).

BTW to set you avatar pic you can use two methods.You can choose the edit profile link on your blogger profile and upload an image there,The second method is to enter a blogger comment somewhere in any blogger comment form and then click the Preview button instead of the Post Comment button.Now you will see an option to upload your avatar.

In case anything bad happens restore the template backup.. and comment here..:)

Read more »

Posted in: Blogger Widgets

Blogger Pages are finally out

Blogger has now released the pages feature just like in Wordpress blogs. You can use these pages for about me, contact me etc. The blogger pages are more or less like the blogger posts. But these pages wont appear in the blog archives and the blog feeds.

How to create a Blogger Page?

1. Login to your Blogger Account

2. In the posting Tab you will find an Edit Pages option

3.Click on the New Page button and you will get a new page editor(same as the post editor that you normally use)

4.You can make the page, in the same way as you create a post.If you want to enable commenting on the page, then you can do so from the post options

5. When you hit the Save And Publish Page button, you will be asked if you would like to add the Page Gadgets onto your blog

You can add the page gadget on the sidebar or as Top navigation Tabs.These widgets may not properly sync with your blog template.So i would advise you to choose the No Gadget option and add the links manually to your blogger template. You can obtain the links to the newly created pages from the Edit Pages Tab.

If you opt to add any of Pages gadget, then you will get an easy interface to add the page links to your blog. (now available on draft.blogger.com only) Here is what the Gadget options will look like

Limitations

1. You can only create a maximum of 10 pages.

2. Separate templating for pages would be a little too difficult(but not impossible :) )

3. The Static Pages are not included in the Post Exports till now.(at the time when this post is made)

Advanced options.

If you are familiar with the usage of blogger’s conditional tags and want to do something special with the pages, then you can use the following conditional tag for that

When condition is true this will be done

eg: If you want to hide the sidebar on the Static Pages, then you can use these conditional tags properly to implement that

Here is the incomplete sample code for the same

This code should be placed above in your template.

you will have to add some more CSS definitions to make it complete(you should increase the width of the post area.. ) these will be different from template to template. So you will have to figure it out :)

So are some of my Blogger Pages. – Subscribe , Contact Me

Misbehaviour

1. If you are using the automatic post summaries hack, then your pages might not be properly displayed. I have updated the Automatic Post Summaries Trick so that it does not conflict with the static pages. So if you are using an older version of this trick, then do update

2. If you are using some trick to hide the post contents on non-post pages,then also you might end up with problems on your new Static Blogger Page. You can either undo the trick or update the codes properly to avoid conflicts :)

Read more »

Posted in: Blogger Widgets

Add Signature to Blogger Blog

1. Create a Signature using Photoshop or some online Generators like My Live Signature

2. Upload this signature image to blogger.Once its uploaded hit preview and copy the image location(Note down the URL of the image).

3.Now Go to Layout > Edit HTML and Expand your Widget Templates

4.Now Find

<div class='post-footer-line post-footer-line-1'>

If you cant find it then try finding this one

<p class='post-footer-line post-footer-line-1'>

or this one

/>

a) If you are using a Single author blog, paste the following code below the code you found

url_of_your_signature_image' style='border:0px;'/>

Code should be edited with your signature image URL

b) If you are on a Team Blog, paste the following code just below the code you found

Author1Name"'>
url_of_author1_signature_image' style='border:0px;'/>

Author2Name"'>
url_of_author2_signature_image' style='border:0px;'/>

If you have more number of authors, you can repeat the blocks accordingly(here i have mentioned 2 blocks[blue and brown] one for each of the two authors).Codes should be edited with the author names and the signature image urls.

5.Save your template and you should see the signature in action :)

Read more »

Posted in: Blogger Widgets