Memasang Google Buzz Button.

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.

<div style="float:right;padding:4px;">
<script type='text/javascript'>
njuice_buzz_url = '<data:post.title/>';
njuice_buzz_title = '<data:post.url/>';
njuice_buzz_share = 'reader';
</script>
<script type='text/javascript' src='http://button.njuice.com/buzz.js'/>
</div>

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.

Sumber NJuice.com

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

Sekiranya anda tidak mengetahui apa itu 'Snapshots'?

Gambarannya adalah seperti screenshot diatas.

Untuk melihat demo snapshots letakkan mouse anda di sini SyamZone™.

Panduan Untuk memasang 'Snapshots'.

01. Daftar akaun percuma anda di sini www.snap.com

02. Untuk mendaftar sila ikuti arahan yang disediakan.

Perhatian !!! Selepas mendaftar pastikan anda menyemak email anda untuk melakukan pengesahan.

Sekiranya anda mahu memasang kod snapshots secara manual.Sila ikuti langkah di bawah.

1. Sign in akaun blogger anda.

2. Pilih LAYOUT --> EDIT HTML.

3. Cari kod ini.

</body>

4. Letakkan kod snapshots anda di atas kod tadi.

Bagaimana hendak mendapatkan kod snapshots?

Sila rujuk screenshot di bawah.

READ MORE...