Cara Memasang Mesin Pencari Google Di Blog


cara memasang Widget google search di blog ini. Bagi anda yang memerlukan mesin pencari tersikronisasi terus dengan google, mungkin anda tidak puas hati dengan search engine yang disediakan oleh blogspot, kali ini saya akan berkongsi tips cara memasang google search engine widget yang tersikronisasi terus dengan server  google sehingga anda tidak perlu membuka situs google terlebih dahulu, dan anda boleh terus mencari kata kunci yang hasilnya 100% sama dengan anda membuka situs www.google.


Gambar google search di blog seperti dibawah ini :






Cara memasang Widget Google Search di Blog

1.Sign blog.
2.klik Design.
3.Add a Gaget.
4.HTML/ Javascript.
5.Copy kod dibawah ini.

   
<form action="http://www.google.com/search" method="get">

<input onfocus="this.style.background='#fff';" maxlength="255" value=""
type="text"onblur="if(this.value=='')this.style.background='#fff
url(http://tbn1.google.com/images?q=tbn:NTYparYmYXvKAM:http://www.itenas.ac.id/tpls/home/images/logo_google.gif)
3px center no-repeat'" style="height:18px;border: solid 1px black; background:#fff
url(http://tbn1.google.com/images?q=tbn:NTYparYmYXvKAM:http://www.itenas.ac.id/tpls/home/images/logo_google.gif)
3px center no-repeat; position:relative;" size="25" name="q"/>

<input id="btn_undefined" style="position:absolute;padding-left:5px;"
value="Search" src="http://bloggerplugins.googlepages.com/yahoo-search-widget-button.png"
type="image"/><br/>

<div style="margin-top:5px;">

<li style="display:inline;padding-right:10px;margin-top:5px;">
<input checked="checked" value="" name="sitesearch" type="checkbox"/> Web</li>

<li style="display:inline;padding-right:10px;margin-top:5px;">
<input checked="checked" value="http://yoeqelate.blogspot.com" name="sitesearch"
type="checkbox"/> Blog Anda</li>

</div>
</form>



Nota :
-Gantikan perkataan yang berwarna biru dengan alamat blog anda dan warna merah anda boleh masuk nama blog atau terserah kepada anda.

6.Simpan.


Selamat Mencuba..

Cara Membuat Like Dan Unlike Di Blogspot



Cara memasang Widget Like dan Unlike Rating Facebook di Blog.Dengan memasang widget ini  akan membuat Blog menjadi lebih interaktif di mata pengunjung. Salah satu kelebihan widget ini, pengunjung dapat menilai kualiti sesebuah artikal yang terdapat di sesebuah blog.Ok serba sedikit maklumat tentang widget ini.Ratting kali ini berbentuk Like this dan Unlike this yang mempunyai persamaan dengan facebook.

1.singn blog.
2.klik design.
3.Klik Edit HTML.
4.Tanda "Expand Widget Template"

5. Cari kode ini <div class='post-header-line-1'/> (tekan ctrl+f , bagi memudah pencarian)
6. Jika sudah jumpa kod diatas sila Copy kode di bawah ini, dan terus paste di bawah kod tadi. 


<div style="float:left; margin-right:3px;"></div>
<div class="js-kit-rating"
expr:path="data:post.url"
expr:permalink="data:post.url"
expr:title="data:post.title" view="score">
</div> 
7.  Langkah berikutnya caril kod ini </body>
8.  Paste kode ini tepat diatasnya

<script src="http://js-kit.com/ratings.js"></script>

9.  Simpan Template.


Selamat Mencuba..

Cara Menambah Post Divider





1.Sign blog.
2.Klik Design.
3.Edit HTML.
4.Cari kod ini .post.
5.Gantikan kod diatas 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;
}

Nota: Gantikan perkataan yang berwarna merah dengan url image yang anda kehendaki.

Disini ada beberapa contoh image dan url image..

1.
http://1.bp.blogspot.com/_tgUOxznghPA/SxDE3AHigFI/AAAAAAAAAX0/jGNyRV3TsJA/s400/bar54.gif


2.

http://1.bp.blogspot.com/_tgUOxznghPA/SxDH01U7uXI/AAAAAAAAAYc/euIc755kOto/s400/chain.gif


3.






http://1.bp.blogspot.com/_tgUOxznghPA/SxDGd27LwaI/AAAAAAAAAYE/yLP07AP80vw/s400/astarl7s.gif


4.
http://4.bp.blogspot.com/_tgUOxznghPA/SxDF0mWXBnI/AAAAAAAAAX8/9rYPdgcM9sM/s400/flowerbar.gif


5.
http://1.bp.blogspot.com/_tgUOxznghPA/SxDHP8hfRNI/AAAAAAAAAYU/bJM9GaAsm08/s400/bloodrose.gif


6.

http://2.bp.blogspot.com/_tgUOxznghPA/SxDIQDCTVeI/AAAAAAAAAYk/WfkGnBSRDaE/s400/dividers_96.gif



7.
http://4.bp.blogspot.com/_tgUOxznghPA/SxDIs8fOK1I/AAAAAAAAAYs/0eYgxNgv2Zk/s400/irish-border4.gif



8.

http://2.bp.blogspot.com/_tgUOxznghPA/SxDJHBuLNpI/AAAAAAAAAY0/4mkrVKNG4xk/s400/resfiles_output.php.gif




9
http://3.bp.blogspot.com/_tgUOxznghPA/SxDJ1wwF2VI/AAAAAAAAAY8/NxUObMlAY9c/s400/resfileszcp.png


6.Simpan..


Selamat Mencuba..

Memasang Heart Comment Count


1. Sign blog anda.
2. Pilih Design --> Edit HTML.
3. Klik pada Expand Widget Template.
5. Cari kod ini ]]></b:skin>.
6. Copy kod di bawah dan paste di atas kod tadi.

.heart-comment-count{
background:transparent url(http://3.bp.blogspot.com/_znjmv4LDwck/S1d8wf1s_6I/AAAAAAAABQk/eIn0PY1BRbU/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;
}

Nota : Gantikan url icon yang berwarna merah.

Contoh :
1. Heart Pink.
http://3.bp.blogspot.com/-G0kCs528G-M/TcLp1zO9cBI/AAAAAAAAACI/tmwP8G5kC9E/s1600/heart-pink-icon.png

2. Heart Gold.
http://4.bp.blogspot.com/-R6uw3se-MNY/TcLp-jy9IGI/AAAAAAAAACM/oPVSb3a9NEY/s1600/heart-gold-icon.png

7. Cari kod ini <b:if cond='data:post.link'>.
9. Copy kod dibawah dan paste 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>

11. Save Template.


Selamat Mencuba..

Menukarkan Post Date Dengan Calendar Icon



1. Sign blog anda.
2. Pilih Settings --> Formatting dan ganti "date header format".
3. Pastikan format tarikh seperti ini (mm.dd.yyyy) contoh : 7.14.2010.
4. Kemudian Save Setting.
4. Langkah seterusnya, pilih Design --> Edit HTML --> Expand Widget Templates.
5. Cari kod ini </head>.
6. Copy kod di bawah dan paste diatas kod tadi.

<SCRIPT type='text/javascript'>
//<![CDATA[
function date_replace(date) {
var da = date.split('.');
var day = da[1], mon = da[0], year = da[2];
var month =
['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
document.write("<div class='month'>"+month[mon]+"</div> <div class='day'>"+day+"</div>");
}
//]]>
</SCRIPT>
<script type='text/javascript'>
if (window.jstiming) window.jstiming.load.tick(&#39;headEnd&#39;);
</script>

7. Cari kod ini ]]></b:skin>.
8. Copy kod dibawah dan paste diatas kod tadi.

.dateblock {
background:url(http://4.bp.blogspot.com/_1_qkt6bisvU/S-58k0iEQwI/AAAAAAAAAKc/i8SYesJ2ciM/s1600/dateblock.gif); background-repeat:no-repeat; width:66px; height:75px; text-align:center; float:left; color:#fff; font-size:10px; font-weight:bold; margin:0px; margin-top:3px; margin-right:10px; padding-top:7px}
.day{font-size:35px; font-weight:bold; color:#000; padding-top:5px; letter-spacing:-1px}
.month{font-size:12px; font-weight:bold; color:#fff; padding:0px; letter-spacing:1px
}

9. Cari kod ini <data:post.dateHeader/>.
10. Sekiranya anda sudah jumpa kod diatas, gantikan dengan kod ini.

<DIV class='dateblock'>
<SCRIPT>date_replace('<data:post.dateHeader/>');</SCRIPT></DIV>

11. SAVE.

Selamat Mencuba...

Cara Membuat Tulisan Berjalan “MARQUEE”



Langkah-langkah Membuat Tulisan Berjalan “MARQUEE”:

1.Sign blog anda.
2.Klik Design.
3.Klik Add a Gadget.
4.Klik HTML / Javascript.
5.Copy kod dibawah ini, paste pada kotak HTML / Javascript.

Contoh MARQUEE :

1.Bergerak dari kanan ke kiri.


Selamat Datang Di Tips Blog


Kod : <marquee> Selamat Datang Di Tips Blog</marquee>




2.Bergerak dari kiri ke kanan.


Selamat Datang Di Tips Blog


 Kod : <marquee direction="right">Selamat Datang Di Tips Blog</marquee>




3.Bergerak kekanan dan kekiri.


Selamat Datang Di Tips Blog


Kod : <marquee behavior="alternate">Selamat Datang Di Tips Blog</marquee>




4.Bergerak dari kanan ke kiri, akan berhenti ketika mouse berada atas tulisan.


Selamat Datang Di Tips Blog


Kod : <marquee onmouseover="this.stop()" onmouseout="this.start()">Selamat Datang Di Tips Blog</marquee>


5.Bergerak dari kanan ke kiri yang boleh diubah kecepataannya.

Selamat Datang Di Tips Blog


Kod : <marquee behavior="alternate" scrollamount="18">Selamat Datang Di Tips Blog</marquee>
Nota : Gantikan angka mengikut kelajuan yang anda inginkan.




6.Bergerak ke atas.
Selamat Datang Di Tips Blog Kod : <marquee direction="up">Selamat Datang Di Tips Blog</marquee>




7.Bergerak ke bawah.
Selamat Datang Di Tips Blog Kod : <marquee direction="down">Selamat Datang Di Tips Blog</marquee>




8.Bergerak dari atas ke bawah yang boleh diubah kecepatannya.
Selamat Datang Di Tips Blog Kod : <marquee direction="up" behavior="alternate" scrollamount="18">Selamat Datang Di Tips Blog</marquee>



9.Bergerak urutan agar dapat menjimatkan ruang, bergerak ke atas dan akan berhenti ketika mouse berada atas tulisan.
Assalamualaikum
Selamat Datang
Ke
Tips Blog
Terima Kasih
Datang Lagi



Kod : <marquee direction="up" onmouseover="this.stop()" width="200" scrollamount="3" onmouseout="this.start()" height="100">
Assalamualaikum <br>Selamat Datang<br>Ke<br>Tips Blog<br>Terima Kasih<br>Datang Lagi<br></marquee>


10.Bergerak ke bawah.
Assalamualaikum
Selamat Datang
Ke
Tips Blog
Terima Kasih
Datang Lagi



Kod : <marquee direction="down" width="200" scrollamount="4" height="100">
Assalamualaikum <br>Selamat Datang<br>Ke<br>Tips Blog<br>Terima Kasih<br>Datang Lagi<br></marquee>


11.Bergerak di posisi tengah.


















Assalamualaikum
Selamat Datang
Ke
Tips Blog
Terima Kasih
Datang Lagi


Kod : <center><marquee direction="up" onmouseover="this.stop()" width="200" scrollamount="1" onmouseout="this.start()" height="100">Assalamualaikum <br>Selamat Datang<br>Ke<br>Tips Blog<br>Terima Kasih<br>Datang Lagi<br></marquee>




6.Save.


Selamat Mencuba...

TinGaLkan Jejak