Sitemap.

1. SIGN IN akaun blogger

2. Pilih NEW POST.

3. Pilih EDIT HTML.

4. Copy kod di bawah dan paste.

<script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
<script src="http://www.abufarhan.co.cc/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

5. Tukarkan text berwarna merah.

6. Sebelum PUBLISH POST,jangan lupa meletakkan tajuk SITEMAP atau apa sahaja mengikut pilihan anda.

7. Pilih POST OPTIONS dan tukarkan tarikh menjadi tarikh lama.

Sumber ABU FARHAN.

READ MORE...

Memasang 'Heart Comment Count'.

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.

.heart-comment-count{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGjEjO8yMyHELOP0WieEJ1YVE4ndjXE0HKJaTBoY7z8yxK5qLItjYmZ3-waBIpBy0KrkTpOLlXtWc1nYMuLxxfW-346QZRMTeo-aTP4QrO8DLaCLtphyG3K2hL7u6arYDBD28Z4sKwi2UH/s400/heart-gold-icon.png) no-repeat;
float:right;top:0;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
height:31px;
width:34px;
text-align:center;
margin-left:10px;
padding:6px 0 0 0;
}

Anda boleh memilih salah satu icon di bawah untuk digunakan.

Gantikan url icon yang berwarna merah.

01. Heart Pink.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsJwi0fuR-1YdEf-6wgk9-OgXQRwKU8ph0OJoq2PfBasRGcokSsYTqdQqnesETqZBK8vWD_hY4mA859x7yoowLeHZvVVPvb0stWnGI2RKL2Fhhda8Z5Y_eZIisijUARBA466tMbPReRGvD/s400/heart-pink-icon.png

02. Heart Gold.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGjEjO8yMyHELOP0WieEJ1YVE4ndjXE0HKJaTBoY7z8yxK5qLItjYmZ3-waBIpBy0KrkTpOLlXtWc1nYMuLxxfW-346QZRMTeo-aTP4QrO8DLaCLtphyG3K2hL7u6arYDBD28Z4sKwi2UH/s400/heart-gold-icon.png

7. Setelah selesai memilih icon.

8. Cari kod ini.

<b:if cond='data:post.link'>

9. Copy kod dibawah dan letakkan diatas kod tadi.

<span class='heart-comment-count'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>
</span>

10. Pilih PREVIEW untuk melihat hasilnya.

11. Sekiranya berpuas hati SAVE TEMPLATE.

Perhatian !!! Anda boleh mengubah kepada Comment Bubble dengan menggantikan url icon berwarna merah dan kod dibawah.

padding:3px 0 0 0;

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipg5Bpvowr3MvIVFQXsZL1Cw1EzYdy-nUYDn7KbbnS67-gzUsHz-HJc_HsndzQu3UwX96PmzeFCvw3-zdpfHkyf9wfqC1VwGhaoeK5YiI5DiKbTWaXo-erSqWtyNUFvcFCENNWwfr2VSVT/s400/comment-icon+2.png

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