Memasang 'Leaves Fall Social Bookmark'.

1. Sign in akaun blogger.

2. Pilih LAYOUT --> EDIT HTML.

3. Klik pada EXPAND WIDGET TEMPLATE seperti screenshot di bawah.

4. Cari kod ini.

<data:post.body/>

5. Copy kod di bawah dan letakkan selepas kod di atas.

<div style='clear:both; '>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3m3JUT_LqD5pRZNSpdz2V0sJxbYmSOtDk09FVaK3lt_zJzi8mulFuO-8KZ70I8eyu6IsAT-sHqEKRTCrcVlbS9ipQvQCqDywFIituGx70m2ykauzIR4_j1v1UfgGonCRk44zmTBSm5YCh/' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8AoHkFNwnBfUgyzG46W2nThMYZOK-LQL4P01Mvahd8OGcQ3kOeVpJ-8qusJfPzMT_DzWoM9Jo7T7XpHEnwsED8CVP97zJ82J9MqQLGGy9YfsMprtZo1crW8Tv_eQT05mn1vBwUWrg_PUJ/' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiffVIz5sTUYUyeOEdu12uIoUmjSdXmnvMtYcjncVv10Y8-CYyqRBQ-g_tPpT0hM7wjD2tTRNyBRqeBkgAmV81j107r1rrQQ4-lzRpBCZ0O6YRWnNXVcJYK1fAnev0mmO7aYRzX64QvCbT2/' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxOSiPc92fUW8HchJk6Fdt0roxnyIcqvL4K2T-a5VRH1OqPB0xKGuXFILxbIEIqbb2qFiFyaplWzs0JKY8eE8F1kj-w3u1DOUHOogLCE7SyFw-9CSWWFUp2HbVyeaa6adBatjbluuR4lCP/' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Digg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOytMNn7ggEdRHVSZDLGsXXvZU5l7oBEqKzkHYLuMCsbdzHB6Iu3ALk0xyncPX80V0Rp0xfUyvBo-RDvO9RtRgMsrU5bPo7bgm5D7fIGLf07qNh6k3fJRN1gCl3-S9Ium8F05uL8XdP6A5/' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimv_MG_G8vXYonlIDLcnzSiR4pprdfLnwSZGzJQhpVX9-OBszkBy2_6OEJGAFsJuxiUV0P0vzP1PDTqiRvPsH-8IdM811AD17lBvpXxW1Q8XSILG_6pjTsCYi9Ge974B2NbI_kstKKSQdT/' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://reddit.com/submit?&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Reddit' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5xm1B-_Yd2A9TT7u7SXgeVAv1V9JW2HcXNW9KkOOuOzbosUL48mg_ogsIhmKTuZ7xIocAH8eHdKQJgAaRCBDZ7p9b4a65s9QBLIL3H5UpUrG6ZKoJdvPymOrjrgOQ_7s19clg1mGCGKtA/' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' rel='external nofollow' target='_blank'><img alt='Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjskUcaYnE6nlF8A5jM-cMv0GKERIZ0FqJCxcRONl6bYsHtMz2BL2ZmDoAa6KkfPaGhkM5EkT1m45-pp-TI01QLrqSPWQk2Oxxjr4LgHzT8bEvRfzAyOfkI65eju1dpKLkM5iE_i3X7At8Y/' style='padding:0;margin:0;border:none;'/></a>
</div>
</div>

6. Setelah selesai pilih PREVIEW.

7. Sekiranya anda berpuas hati pilih SAVE TEMPLATE.

8. Selamat Mencuba.

READ MORE...

CSS Bubble Tooltips.

Untuk melihat demo CSS Bubble Tooltips klik di sini.

Bagaimana untuk memasang CSS Bubble Tooltips? Sila ikuti langkah-langkah mudah di bawah.

1. Sign in akaun blogger.

2. Pilih LAYOUT --> EDIT HTML.

3. BACKUP TEMPLATE anda dahulu untuk mengelakkan sebarang masalah.

4. Klik pada EXPAND WIDGET TEMPLATE seperti screenshot di bawah ini.

5. Cari kod ini.

]]></b:skin>

6. Copy kod di bawah dan letakkan di atas kod tadi.

/*---------- bubble tooltip -----------*/
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaHxGRynWHT7LqnQGA-Ol2TtycOmIK6DZwT0fEHCRM2daG7eq4bmtvbWBr7UniXYt7OvDqHTQZ8mSJIwktXkHo_DI6QiLbu24yUhuIivBalmsfqaCSw5CpkNurTdgFSukPYZEP5nU7YdA/) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvJMRlanmjFYNCjS4t4vkFmxw-UUqkUubMeRjFlNK0OF_5EP-HYh3m2_XG4kVJPTQNRkztEIqaq4s2BFJVAaAkOdBSs9Ennt1tK-cSHhqmBLouSGRIpJG9Cr35iXAFePCQcgTyb-XvvXI/) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaHxGRynWHT7LqnQGA-Ol2TtycOmIK6DZwT0fEHCRM2daG7eq4bmtvbWBr7UniXYt7OvDqHTQZ8mSJIwktXkHo_DI6QiLbu24yUhuIivBalmsfqaCSw5CpkNurTdgFSukPYZEP5nU7YdA/) no-repeat bottom;
}

7. Pilih SAVE TEMPLATE.

8. Untuk melihat / mencuba kesan CSS Buble Tooltips.

9. Pilih 'Layout' --> 'Add a Gadget' --> 'Html / Javascript'.

10. Copy kod di bawah dan Paste.

<a href="link_tujuan" class="tt">Teks link yang akan muncul<span class="tooltip"><span class="top"></span><span class="middle">Pesan yang akan muncul</span><span class="bottom"></span></span></a>

Perhatian!!! Anda perlu menambah sedikit kod HTML yang berwarna merah pada link untuk mendapatkan kesan CSS Bubble Tooltips, lihat contoh di atas.

10. SELAMAT MENCUBA.

Credit : Kolom Tutorial, trentrichardson.

READ MORE...

Memasang FaceBook Share Button.

Untuk Memasang FaceBook Share Button.

1. Mula-mula anda perlu memilih button klik di sini.

2. Setelah selesai memilih button.

3. Sign in akaun blogger anda.

4. Pilih LAYOUT --> EDIT HTML.

5. Klik pada EXPAND WIDGET TEMPLATE seperti screenshot di bawah.

6. Cari kod ini.

<div class='post-header-line-1'/>

7. Copy kod button yang anda pilih tadi dan letakkan selepas kod di atas.

8. Sekiranya anda tidak menjumpai kod di atas letakkan kod button sebelum kod ini.

<data:post.body/>

9. Setelah selesai pilih PREVIEW.

10. Sekiranya anda berpuas hati pilih SAVE TEMPLATE.

11. Selamat Mencuba.

READ MORE...

Menambah Post Divider.

01. Sign In akaun blogger.

02. Pilih Dashboard >> Layout >> Edit html.

03. Cari kod ini.

.post

04. Gantikan kod di atas dengan kod ini.

.post{
margin: 0 0 40px 0;
width: 90%;
background: url(http://www.imagehost.com/separator.jpg);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;
}

Perhatian !!! Gantikan url image berwarna merah dengan url image anda (Url image di bawah juga boleh digunakan).

1.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwv7ghEUgyuyMPAYjlKJZ_82Mhr3_ncQ1eenF5liGLPMACwWew9VQxe7_9J4duHZwQUZgzhVZ1t6T-46gVG0rdaBhIpixW7Pa83wMEKkVcisEBQcIVLgWHYFWkFqJ6HG5aiPvZ4xFeKvA/s400/bar54.gif

2.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz0XVzpi_jnKsoHxLsP5R4zsSNBRTZmW0nCBh8k0-GR8N7d7PFEVNhfVzfw1xVyZR-oBn43-E96P2koVJoDK9YvCODH0SkIZMUzZAjn3iBe8vBApvE1YJv-IhjpacLPiVdaewi8wcKcTs/s400/flowerbar.gif

3.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl_7eD4wFwmOpMxFD68vcg-VBNc8ctruI1NeVvNDRwyH3xblURdbdFlXfiuhb9nqrai7aBYFPvhvkgvQ9Cb_pekNJYwTkDu_mXpOrM8hkJv2Ks1M-vSCt-Tg3bSHdAmWbtEnXzFHk4r1Y/s400/astarl7s.gif

4.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijEkvaIRsyTyUssUVi6m_RcBa18-zkw2EBi_Xb05-tP1uXFyxuRZ-4G8MeXmJF4Zvn_y4wiXc_XQqNNo71aWeRnk4unasHVVqDnw9n7eczOOompl8C-K5eDXTxUIIYkQU-e8dgzx_FNvg/s400/bloodrose.gif

5.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQJYY_WHLtn5pmr0VJ2ai8MpaTGASN8O9tTTZOIiD06cznRg2RTWC6gsoFV8arTHQGq5uF_S7Yu4P4hgWOKaA69DoEWEpD_lQ0M8qlr-9c1_OLATaZOEnhOYjU5UhS5ge-PvxHpoVIMO0/s400/chain.gif

6.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXY8iJ7U-dN3I4Z_awMyrmFBm9Z0OyQOBrWjZ8Xlilvai3BrBzYjZZJt1IOaWS54OdRFOu7BbF6Uuryy_8p9SBhyphenhyphenLr-DH-4T_9KW3Ep2BiqqDsRL0JgTiNL1BmXSV0jqhb240gWEHLJIM/s400/dividers_96.gif

7.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_QB8chikf04xB4jUL2ZCA-XDuhbF5cMGLP6gZiyy52CXnKXxil1_6NSArDq_Tkd5LvnE2leb7WQoQK6SM1TaaciKWvI949c9hN4zcqZ-h0-WgxT1rwAZ3inFXUmf0NUL1vp7Dv-r1k_w/s400/irish-border4.gif

8.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFCpwxshH6xRrN2z15KVTu-aYmCYfCN2b0C5sA2jeWVxueHFpqIUhkowTypa_eWSgjYXiV5PYfJ3xVcR7Nt2EX3xFRSapTwb9f9GGjaTUsHypbh_Zc268uuLXD4WDI90yUF2stSISllUY/s400/resfiles_output.php.gif

9.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1R6kK1mZ4WQ-6JkRnxSGX_SXmpCI5wZSulR-g-a8LAsxvf2G_ON2wd9KEebc-CQPKeKPOaKhKXuz7L072CLStVgw1GDRcp239wcJ_QsvxMiGhXsYjwQRWa397qfaUNRccbSSG79smbDQ/s400/resfileszcp.png

05. Pilih Preview, Sekiranya anda berpuas hati pilih Save Template.

06. Selamat Mencuba.

07. Sumber AllBlogTools.

READ MORE...