Memasang widget Recent comments dengan avatar

on Saturday, September 1, 2012

Mungkin anda sudah jemu dengan widget recent comment yang macam dibawah ini
apa kata anda dengan recent comments yang ini pula?
Menarik bukan?so kepada anda yang berminat untuk memasang widget ini ke blog anda,sila ikut arahan dibawah.widget ini dibawakan oleh maribinablog.

1)Seperti biasa,login ke akaun blogger anda,dashboard>design>page elements>Add a Gadget>HTML/Java Script
2)Masukkan kode dibawah ini

<style type="text/css">
.recent-comment{
margin-bottom:3px;
padding-bottom:2px;
background-color:#FFF;
border:solid #ddd 1px
}
.recent-comment-ico{
height:26px;
width:26px;
background-color:#FFF;
border:solid #ddd 1px;
float:left;
margin:2px 6px 0px 2px;
padding:2px
}
.recent-comment-body{
padding:3px;
font-size:11px
}
.recent-comment a,.recent-comment a:hover{
font-weight:bold;
font-weight:11px
}
</style>

<script src='http://javscript-code.googlecode.com/files/recentcommentavt.js' type='text/javascript'></script>

3)Klik save,dan lihat hasilnya

Tukar Cursor Dalam Blog

Menggunakan default cursor asal mungkin agar membosankan,jika anda menukar cursor yang anda minati sudah tentu blog anda nampak lain dari yang lain.Anda boleh memilih senarai cursor yang disediakan percuma dengan cara memilih cursor anda di sini .Pastikan anda tidak memilih cursor yang beranimasi (bergerak-gerak)kerana cursor jenis ini cuma berfungsi pada web browser internet explorer sahaja.
Setelah memilih cursor yang menambat hati anda,sila copy code yang diberikan,dan delete code yang telah diwarnakan seperti dibawah

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), progress;}</style><a href="http://www.cursors-4u.com/cursor/2008/12/17/cool-blue-outer-glow-pointer.html" target="_blank" title="Cool Blue Outer Glow Pointer"><img src="http://cursors-4u.com/support.gif" border="0" alt="Cool Blue Outer Glow Pointer" style="position:absolute; top: 0px; right: 0px;" /></a>

Sepatutnya akan jadi seperti ini
<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), progress;}</style>

1)Kemudian,login ke akaun blogger anda,dashboard>design>page elements>Add a Gadget>HTML/Java Script
2) Masukkan code yang telah diubah diatas kedalam HTML/Java Script anda
3) Save..Siap

Meletakkan Widget Popular Post With Thumbnail

Tutorial kali ini akan mengajar anda semua bagaimana cara untuk memasukkan widget popular post with thumbnail,mungkin anda sudah pernah meletakkan widget ini di blog anda tetapi tanpa image thumbnail blog anda kelihatan suram,berikut adalah contoh widget yang telah dipasang di blog ini.
1)Login ke akaun blogger anda,dashboard>Design>Page elements>Add a Gadget
2)Pilih popular post
3)Selepas itu,dibahagian show --> Post title and,tick pada bahagian  image thumbnail seperti gambar dibawah
nota : Title : masukkan tajuk widget anda,sebagai contoh kiriman popular
          Most Viewed : Anda boleh tetapkan samaada sepanjang masa,30 hari yang lalu mahupun seminggu                                        yang lalu,untuk dipaparkan pada widget popular post anda.
          Show : Tick pada image thumbnail untuk paparkan image pada popular post anda
4)Klik save dan selesai.

Daftar Blog Anda Ke Enjin Carian

Seperti tajuk diatas,kali ini saya akan buat satu tutorial khas untuk ada mendaftarkan blog anda ke enjin carian agar mudah blog anda di indekskan kedalam enjin carian seperti google,yahoo,bing dll enjin carian.Tahukah anda,apa itu enjin carian?

Enjin carian adalah laman pengkalan data yang mana fungsi utamanya adalah untuk memberi maklum balas terhadap keyword (kata kunci) atau frasa yang dimasukkan ke dalam ruangan yang disediakan. Maklum balas ini adalah hasil carian. Hasil carian akan dipaparkan dalam SERP atau bahasa melayunya hasil muka carian dalam enjin carian.

 Mendaftar dengan Google

1)Buka browser web anda dan masukkan url ini --> http://www.google.com/addurl/
2)Isikan maklumat yang diperlukan

URL: masukkan URL blog anda.
Comments: Masukkan keyword (kata kunci) yang berkaitan dengan blog anda.
Word verification : Masukkan huruf verifikasi untuk mengesahkan anda bukan spam.

3)Klik add URL.Done

 Mendaftar bersama Yahoo!
1)Buka browser dan taipkan URL ini --> https://siteexplorer.search.yahoo.com/submit
nota : pastikan anda sudah mempunyai akaun dengan yahoo,jika belum ada sila daftar secara percuma disini
2)Isikan maklumat yang diperlukan
-- Klik Submit a Website or Webpage.
-- URL: masukkan URL blog anda.
-- Kemudian, klik Submit URL. Done.
3)Selepas itu,klik Submit A Website Feed.
-- URL: Masukkan URL blog anda.
--klik Submit Feed.
--Anda hanya perlu masukkan atom.xml dan klik Add Feed.

Submit Blog ke Bing

1)Masuk ke http://www.bing.com/webmaster/SubmitSitePage.aspx
2)Isikan maklumat yang diperlukan
  - Word verification: untuk mengesahkan yang anda bukan spam,isikan.
  - URL: Masukkan URL blog anda.
3)Done



Letak 'Recent Comments' Dalam Blog

Ingin memasang recent comments widget kat blog?caranya sangat senang.

1) Login ke akaun blogger,dashboard>Design>Page Elements>Add a Gadget
2) Klik pada more Gadgets,diruangan search taipkan 'Recent Comments' dan tekan search
3)Klik pada gadgets recent comments dan tetapkan apa yang anda inginkan
nota :
Title : tukarkan kepada tajuk yang anda inginkan,sebagai contoh Komen Terkini
Height : ketinggian gadget,sesuaikan dengan yang inginkan
Number of Comments to Display : Memaparkan jumlah komen yang ingin dipaparkan
Summary lenght : Jumlah bilangan perkataan komen dari pengunjung,sesuaikan ikut citarasa anda

4)Done

Memasang Butang 'Back To Top'


 Pemasangan butang back to top ke dalam blog kita dapat memudahkan pengunjung blog untuk pergi ke atas blog anda tanpa menggunakan scroll secara automatik.Berikut adalah langkah-langkah untuk memasang widget ini.

contoh demo anda boleh klik disini

1)Macam biasa,login to akaun blogger,Dashboards>Design>Page Elements>Add a Widget>HTML/Java Script

2)Seterusnya copy code dibawah
<style type="text/css">.backtotop a:hover {background:none;}</style><div class="backtotop"><a style="display:scroll;position:fixed;bottom:5px;right:5px;" class="backtotop" href="#" rel="nofollow" title="Back to Top"><img style="border:0;" src="http://www3.picturepush.com/photo/a/9132936/640/9132936.png"/></a></div>

nota :
Hijau : anda boleh ubah samaada mahu meletakkan widget ini kira atau kanan
Merah : Url butang back to top yang anda upload,jika ingin menggunakan yang default,abaikan sahaja

3)Done..senang kan?

Bagaimana Memasang iklan Melayang


Tutorial kali ini akan mengajar anda untuk memasang iklan melayang kedalam blog anda.
Sebagai contoh kali ini,saya menggunakan nuffnang sebagai pengiklanan di dalam blog.
mungkin anda ingin menggunakan adverlets,terpulang pilihan hati masing-masing.

Sebelum itu,anda perlu copy dulu kode yang anda ingin masukkan untuk dijadikan iklan melayang
sebagai contoh code iklan dari nuffnang :-
<!-- nuffnang -->
<script type="text/javascript">
        nuffnang_bid = "2cfa4c2822ab10f8d62fe584d003f1fe";
        document.write( "<div id='nuffnang_ss'></div>" );
        (function() {  
                var nn = document.createElement('script'); nn.type = 'text/javascript';   
                nn.src = 'http://synad2.nuffnang.com.my/ss.js';   
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(nn, s.nextSibling);
        })();
</script>
<!-- nuffnang-->
                        

1)Login ke akaun blogger>Dashboard>Design>page elements>Add a Widget>HTML/Java Script
2)Copy code dibawah ini dan gantikan tulisan merah dengan code pengiklanan yang anda dapat diatas,sebagai contoh yang digunakan iklan dari nuffnang.

<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}


.gbcontent{
float:right;
border:2px solid #000000;
background:#F1DEDE;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<div style="text-align:right">
<a href="javascript:showHideGB()">
.:<img src="http://www5.picturepush.com/photo/a/9132823/640/9132823.png" title="tawaran menarik" alt="tutup" />:.
</a>
</div>
<center>

masukkan code yang anda dapat dari syarikat pengiklanan disini

</center>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

3)Preview dan jika berpuas hati klik save.done