Memasang 'Heart 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/AVvXsEhFQvKo-JIzehMlZvP4JANNOwZb6i11I9a1pfYZgSJ1sGGnj0SU7WXGli2DUiL97KA7j07_msKYXgsRMKfRi5Xq823JYZAP_E2OMoqDPTOiICqmQ0IXdi9cXjkuJFIQrPSZopyheVl2e4aB/' 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/AVvXsEjW_-RaDeWtm4WeBr-gWete5PVZn4lU4IKtbZJ6b7WK5F7aWfutBZ54tiyPCQ1iC56-8H5aKjIdZPEcqHpGDVgn0XfJkbCpSQK-FrOlJO5xwWSKi6O2m0g5qpYG788j11L3isqaNmqk6VkQ/' 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/AVvXsEipMbo2cc9ysW_Xb9vRJTrl1s6ibGhk7ETG1Aan0faCNxndl95LvPBwBvqdgbsyRZCV15NaTSbgxNnVq8jzswadrHnWkXZ88jO4AnMQ6OKIyvk_96POTI5SpDhXGc_i2Pj9hntE7X829a3D/' 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/AVvXsEgkXw_zXBEkDwxrd4IqCAIUfMmmTOgUouGRtdMLHKlz1ihTaO0v_LlXauFjlnI9N0BT-hM_0odr17j_UfDtokFeRGwiMl-kiOFKhODJ_gN9KW-1r0uboF4bLyNkFVCOpK8DJgeQUMihRHqo/' 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/AVvXsEjV3ZT0b-7LchKnI0goEAohmSTpK8vt7F4X9OAmoYIS0baOtHjBbIFW-Q5x5RVJVY2wnAXjXTXW_TQvpO5dTnJeaDwyvTcw0gcDK35AUTZe3SvSqYg77D2IgEPF_HprniFvT6HaTdS5FQBe/' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?u=&quot; + data:post.url + &quot;&amp;=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Yahoo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij9jDW4EGoePSPt0BGcWhu2j54PGVLl66nJXixw7ENNKmo4Sebi4Yq_GpGeBgA_cUf_NfDrxJwTzVGHTC9O2u847s445ZbwfIjtQ8_cBJu2ewiYMvIpmRa7k_-J6XbNL5KWBN0M63nn1DB/' 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/AVvXsEjwBoCZ6cndNlZVkdpA-wv0KKba3MpByxCqDsnHr6TG6B5-BamI_18jNj6tozWaV20xMkYonF-aVSUvFa_9U09d_sQpdqbMDje90yGgNPhcpGtP-pvsiat9HqUkzJb39QDXHwGFYbv-zEiO/' 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/AVvXsEhkNKmSxIPKtwDV2obdkKrhiegyBhTxDEWNpWW9rthqsg1SYLDolWZXxLz_vuw9qHP918IrQydBcXCY89aR8uqNrYhn8gJ7zo1IdsWy0Fnik8fctEdYMMLiY7WwuwT1FHaFBgGU7y8z9O2P/' 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...

Memasang Retweet Counter Buttons.

1. Sign in akaun blogger anda.

2. Pilih LAYOUT --> EDIT HTML.

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

4. Cari kod ini.

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

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

( Large Button. )

<div style='padding: 4px; float: right;'>
<script src='http://button.topsy.com/widget/retweet-big?nick=TWITTER-USERNAME&amp;url=' type='text/javascript'/>
</div>

atau

( Small Button. )

<div style='padding: 4px; float: right;'>
<script src='http://button.topsy.com/widget/retweet-small?nick=TWITTER-USERNAME&amp;url=' type='text/javascript'/>
</div>

Perhatian !!! Gantikan TWITTER-USERNAME dengan username anda.

6. Sekiranya anda tidak menjumpai kod no.4. Cari kod ini dan letakkan di sebelumnya.

<data:post.body/>

7. Setelah selesai pilih PREVIEW.

8. Sekiranya anda berpuas hati pilih SAVE TEMPLATE.

9. Selamat Mencuba.

READ MORE...

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...