Cara Memasang Yahoo Emotion Di Atas Kotak Komen

Posted by Borong Shop | Labels: , ,


Memasang emoticon smiley ini rasanya dah banyak diposting oleh blog blog lain.Namun saya masukkan pada entri kali ini bagi kemudahan rakan rakan yang blogger yang ingin memasukkan nya pada komen di blog.

Berikut adalah caranya:

1. Masuk ke Blogger -->> Design -->> Edit HTML

2. kemudian tandakan pada "Expand Widget Template"
3. Sekarang kembali ke template, cari kod ini :

</body>

4.Gunakan kemudahan search Ctrl +F untuk membuat pencarian

5. salin kod dibawah dan letakkan diatas kod </body>


<script src='http://oom.blog.googlepages.com/smiley.js' type='text/javascript'/>

6. setelah selesai seterusnya cari kod ini pula :

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

7. Pastekan kod dibawah ini dibawah kod diatas(no. 6)



<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'>
<b>

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(

<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))

</b>


</div>


8)Preview dulu hasilnya,jika tiada sebarang error,klik butang dan save template

P/S : Tidak semua template sesuai untuk cara ini. Pastikan anda sentiasa back up template sebelum melakukan sebarang perubahan






Cara Buat Border Melengkung

Posted by Borong Shop | Labels: , ,


Menukar tampilan bagi mengindahkan blog tentunya merupakan antara yang tidak dapat tidak dilakukan oleh seseorang blogger.Selain dari cantik dan tidak memberatkan loading blog adalah antara yang perlu diberi perhatian bila melakukan sesuatu perubahan pada template.Sebelum ini saya ada membuat entri tentang membuat border disekeliling posting.tapi dalam bentuk persegi.Kali ini pula dipenjuru border adalah dalam bentuk bulat.


Untuk membuatnya:

1.Masukk ke blogger dan pilih design
2.Klik edit HTML dan tandakan pada Expand template widget
3.Cari kod h2.date header{ 

dan letakkan kod ini dibawahnya


border-left:3px solid #0000FF; 
border-right:3px solid #0000FF; 
border-top:3px solid #0000FF; 
border-bottom:0px solid #0000FF; 
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;

pada template blog ini saya letakkan pada kod: post },jadi tarikhnya terletak berasingan

4.cari kod . post-body { 

dan letakkan kod ini dibawahnya

border-right:3px solid #0000FF; 
border-left:3px solid #0000FF;

5. Kemudian cari kod ini pula, .post-footer {
Tambah kod ini dibawahnya

border-left:3px solid #0000FF; 
border-right:3px solid #0000FF; 
border-top:0px solid #0000FF; 
border-bottom:3px solid #0000FF; 
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;


6.Untuk mengganti border pada sidebar pula cari kod ini:

.sidebar .widget { 

dan letakkan kod ini dibawahnya

border:1px solid #0000FF; 
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px

Kod berwarna kuning adalah kod untuk warna biru,boleh ditukarkan dengan kod warna yang bersesuaian dengan template anda.

7.klik dahulu preview,jika tiada error maka seterusnya save template .


Cara Pasang Video Secara Autoplay & Suara Tanpa Video

Posted by Borong Shop | Labels: , ,

Tutorial yang pertama ini saya ingin tunjukkan bagaimana ingin membuat video youtube secara autoplay bila pengunjung masuk ke website kita.pertama sekali yg anda perlukan adalah seperti contoh di bawah :

1)copy kod embed bagi video yg anda inginkan(untuk melihat tutorial mendapatkan kod embed sila klik di sini)

2)selepas itu tambah kod embed yg asal menjadi seperti ini :

Ini adalah kod asal :

<object width="660" height="405"><param name="movie" value="http://www.youtube.com/v/R-6rDLJlGCI?fs=1&amp;hl=en_US&amp;color1=0xe1600f&amp;color2=0xfebd01&amp;border=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/R-6rDLJlGCI?fs=1&amp;hl=en_US&amp;color1=0xe1600f&amp;color2=0xfebd01&amp;border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="660" height="405"></embed></object>


Tambah kod di atas menjadi seperti ini :

<object width="660" height="405"><param name="movie" value="http://www.youtube.com/v/R-6rDLJlGCI?fs=1&amp;hl=en_US&amp;color1=0xe1600f&amp;color2=0xfebd01&amp;border=1&amp;autoplay=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/R-6rDLJlGCI?fs=1&amp;hl=en_US&amp;color1=0xe1600f&amp;color2=0xfebd01&amp;border=1&amp;autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="660" height="405"></embed></object>


Nota : Kod yang di highligt berwarna merah adalah kod yg perlu ditambah

Untuk membuat video yang hanya mengeluarkan suara tanpa gambar anda juga perlu menambah beberapa kod. Sebagai contoh,pada page saya,about me anda boleh lihat di situ hanya terdengar lagu tanpa video..Ini adalah salah satu cara yg dilakukan oleh pemilik website yang biasanya anda cuma mendengar suara mereka setiap kali anda membuka laman website mereka.Untuk melakukannya anda ikut cara di bawah :

Ini kod asal :

<object width="660" height="405"><param name="movie" value="http://www.youtube.com/v/R-6rDLJlGCI?fs=1&amp;hl=en_US&amp;color1=0xe1600f&amp;color2=0xfebd01&amp;border=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/R-6rDLJlGCI?fs=1&amp;hl=en_US&amp;color1=0xe1600f&amp;color2=0xfebd01&amp;border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="660" height="405"></embed></object>


Tukar & tambah kod di atas menjadi seperti ini :

<object width="0" height="0"><param name="movie" value="http://www.youtube.com/v/R-6rDLJlGCI?fs=1&amp;hl=en_US&amp;color1=0xe1600f&amp;color2=0xfebd01&amp;border=1&amp;autoplay=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/R-6rDLJlGCI?fs=1&amp;hl=en_US&amp;color1=0xe1600f&amp;color2=0xfebd01&amp;border=1&amp;autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="0" height="0"></embed></object>


Nota : Kod yg berwarna merah adalah kod yg perlu ditambah atau di ubah

Jika anda meletakkannya di side bar maka setiap page akan kedengaran suara video.Jika anda mahu kedengaran cuma di page yg anda kehendaki,anda cuma perlu copy kod yg telah di edit tadi dan paste di page yg anda kehendaki..



Cara Masukkan Video You Tube

Posted by Borong Shop | Labels: , ,

pertama sekali macam biasa,layari laman web you tube..lepas tue korang pilih la mana video yg korang berkenan...dah dapat korang cari kod embeb(tengok gambar kt bawah nie :



ok dah dapat tue macam biasa la copy(nie gambar kalau x jelas lagi x taula..haha


dah copy tadi,korang gi paste kt post korang pastu save cm biase..

Meletak Border DI Sekeliling Post

Posted by Borong Shop | Labels: , ,

Membuat border disekeliling posting ini selain dari menambahkan seri pada posting juga sebagai pemisah diantara posting.Pada kebanyakan template sekarang sudah ada border ini.Bagaimanapun saya buat juga tutorial nie..mana la tau ada yg memerlukan..


Cara membuatnya:

1.Log in ke blogger
2.pilih Design--->>Edit HTML

3.Dengan menggunakan Ctrl + F Cari kod ini .post {

Kemudian letak kod berikut dibawah kod .post {


border: 1px solid #000000;


jika inginkan border yang berlainan gunakan kod ini:

border-top: 1px solid #000000; border-bottom: 2px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000;

Note :

1)Border boleh ditukar dengan menukar perkataan solid kepada dotted,dashed,outset,inset,groove,double dan ridge
2)Kod: #000000 adalah untuk warna hitam,boleh tukarkan dengan warna yang diinginkan.Begitu juga dengan ketebalan border .
3)Jika hendak letak warna latar belakang pada posting tambah kan kod berikut pada bahagian bawah kod tadi:

background: #000000;

atau nak letak imej sebagai background masukkan kod ini:

background:url (url image anda disini);

Cuma tukarkan kod warna yang sesuai supaya tampilan lebih menarik


klik preview dahulu,jika tiada sebarang error seterusnya klik dan save template




CARA PASANG FLOATING BUTTON

Posted by Borong Shop | Labels: , ,

Jika sebelum ini saya menjagar bagaimana ingin sorokkan shoutbox di sisi blog,tutorial kali nie pula saya ingin mengajar bagaimana cara memasang floating button seperti contoh di bawah :



ok untuk membuatnya pertama sekali pergi LOGIN BLOG => DESIGN =>ADD A GADGET => HTML/JAVA SCRIPT

pastu masukkan kod di bawah

<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

<div style='display:scroll; position:fixed; top:240px; right:-12px;'>

<a class='linkopacity' href='http://gengblogger.com/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='gengblogger'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK3OOagSmKx2qTlFw1a4nIjWLBg6sTdxAsyDPGubpyPsf_hECleZn8Rvxja_9GvETTcGSr2-RuuBMnwdNZ_Iuc6SRa0Ni6uCuuEFn7KCVE2zaUWUF5z6W0o5WJkAa6ltRdpR8l3TSpheYY/s320/icongb.PNG" /></a><br />

<a class='linkopacity' href='http://facebook.com/akaun facebook anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDlfoWzrUM0t0ttk3wrVtPCsWuTVgHeHZQi4sxh8Vcxl_MwrsNvNez7mDz30YgUXIuya-IsO6DNsSzneSNPfHkL1duwF4WUxECUPA3QZ-vHlK0hiKF0OzQoF3mltlDfeB5qK2ofWkNBy1u/s320/facebook.png" /></a><br />

<a class='linkopacity' href='http://twitter.com/akaun twitter anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL1h5F92aWvOLeomgnIfRuAkYgahacCqTDmJzntQ_yb7sjCjBVY5CisE691bK1RbRKM39DA2aePYckmyI1qdGqmw35zbIMMyS8LAYWpKZ5VIqLv50bv7GR_8b20pF1-Q-atfMOxabhNquQ/s320/twitter.png" /></a><br />

<a class='linkopacity' href='http://probuatblog.blogspot.com/feed blog' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feed'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPxahCREIQn5TrBmtD4erpYtOsgSJJgOUXrQ0psRM4d2l7WO0Oq2dmRf69Kbx8yc9nas6ufKw1m5Gg-XTYX0JluinUpmbbMG0pqvqGGfIzvgcJ9OPN0u6GIv9OahzF7FkqkqEhTEPfwYpe/s320/feedblogger.png" /></a><br />

<a class='linkopacity' href='http://feedburner.com/akaun feedburner anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feedburner'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ3-JL2HPpxeKDzoe653777OyEbf_nDqi58cAdtbWS3cFd_zjNkexIR9sIlHoQl0L3V1SDCriZF0ohWAiUZkcuJ5M5jZwZWQcFOp4ieT-8ximzCXzqCJoAHsVHn1orkghaAA3owipP4E0J/s320/feedburner.png" /></a><br />

<a class='linkopacity' href='http://youtube.com/akaun youtube anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='youtube'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJvLNqQuViO17CRsQYzZXaADww41ntxhkMgCz9JkrpInaLQb1fH-gii2aPIoquUZHo5p_VFatzsRbN48jmYNmJ6W261Ue89GlCAejRazAjC_SP_bm4rO1OzNDc0q-eqAXrRxqRgcSfzNnS/s320/youtube.png" /></a><br />

<a class='linkopacity' href='http://flickr.com/akaun flickr anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='flickr'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihCPE-qzJUJECTu6BDxUWvL8fj1WohPug5q9yaPFM0gx_M5BP_nsAfUN5tINR9ZeMCeUA6Ojea1dCsyldZjIvIeW0Hj88Tb0LICIUTftiwJTjz8-mYSwf1qqXQBOtoyvFqX1LzAWdnHnX7/s320/flickr.png" /></a><br />

</div>


nota:

1)kod yg berwarna merah itu adalah posisi kedudukan floating button anda..anda boleh mengubah kedudukan dengan menambah atau mengurangkan nombor tersebut
2)semakin tinggi nilai yg anda letakmaka semakin rendah kedudukan butoon itu..

selamat mencuba