Widget Misterlinky

Widget Misterlinky adalah widget yang berfungsi untuk memudahkan pelawat blog meninggalkan link blog mereka pada mana-mana blog yang memasang widget ini. Dengan adanya senarai blog pengunjung, mudah untuk anda melakukan aktiviti "blogwalking". Selain dari itu, dengan widget Misterlinky, pemilik blog diberi pilihan untuk delete mana-mana link yang mereka tidak kehendaki.

Dapatkan widget ini di www.misterlinky.net. Anda perlu mendaftar terlebih dahulu untuk mendapatkan widget ini.Cara nak daftar:

Akan muncul paparan pemberitahuan email telah dihantar kepada anda:

 

Cek email yang dihantar oleh Misterlinky. Kemudia copy kod yang diberi dan paste dalam kotak confirmation code tadi:

 

Login akaun menggunakan id dan password yang anda daftar tadi:

 

Lastly, copy kod widget yang diberikan:

Add kod html widget yang anda copy tadi pada blog anda. Jika tak tahu cara nak add kod HTML pada blog, sila refer tutorial ini.

Selamat mencuba! :)

Read more »

Posted in: Tips nGEBLOg

Efek Link Bergoyang / Nudging

Cuba korang lalukan cursor pada mana-mana link dalam blog ni, apa jadik? ada goyang tak? :) efek menarik ni korang boleh cuba apply dekat blog masing-masing.. kalau berminat la, kalo tak berminat jangan paksa diri ok,he2..caranya:

1) Sign in akaun blogger

2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript

3) Copy dan paste kod di bawah pada ruang Html / Javascript tadi:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><script type='text/javascript'> $(document).ready(function() { $('a').hover(function() { $(this).animate({ marginLeft: '10px' }, 400); }, function() { $(this).animate({ marginLeft: 0 }, 400); }); });</script>

400 - speed / laju efek nudging. Korang boleh adjust nilai ni untuk kelajuan efek, lagi kecik nilai, lagi laju efek goyang.

4) Lastly macam biasa, klik save dan lihat hasilnya.

Selamat mencuba! :)

Read more »

Posted in: Tips nGEBLOg

Efek animated image apabila cursor menyentuh link

review:


Caranya:

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod   

a:hover

4) Kemudian copy paste kod di bawah selepas kod  a:hover  yang korang cari tadi:

 color:#FF6699; background:url(URL IMAGE) ;background-repeat: repeat;
text-decoration:underline;

 contoh:

 a:hover
color:#FF6699; background:url(URL IMAGE) ;background-repeat: repeat;
text-decoration:underline;

Nota:
pada URL IMAGE masukkan url image yang korang mahu. korang boleh search image animated kat sini . Cara nak dapatkan url image di Glitter Graphic pula, refer di sini . Ataupun korang just pilih dan copy url image yang disediakan di bawah:

http://dl5.glitter-graphics.net/pub/590/590935ankbyj1xx4.gif

http://dl7.glitter-graphics.net/pub/474/474167l68h9nknqq.gif

http://dl4.glitter-graphics.net/pub/1102/1102514nugaxacg8m.gif

http://dl9.glitter-graphics.net/pub/690/690739pesbqr6dqw.gif

http://dl2.glitter-graphics.net/pub/1455/1455682apvfgvhztr.gif

http://i603.photobucket.com/albums/tt117/misdollymie/rainbowhover.gif

5) Klik preview, jika tiada error, klik save dan lihat hasilnya.

Selamat mencuba! :)

Read more »

Posted in: Tips nGEBLOg

Cara buat efek zoom pada image dalam post - Efek 2 (opacity image)

Apabila mouse over, gambar tersebut akan auto zoom in dan zoom out. Ikuti tutorial di bawah untuk mengaplikasikan trick ini pada blog anda:

1) Sign in akaun blogger anda

2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod  

]]></b:skin>

4) Copy paste kod di bawah sebelum kod ]]></b:skin> yang anda cari dalam langkah 3 tadi

.post img {
filter:alpha(opacity=60); /* Internet Explorer */
opacity:0.6; /* standard CSS3 */
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-webkit-transform: scale(1.3);
}

Contoh, rupa kod anda akan kelihatan seperti ini:

.post img {
filter:alpha(opacity=60); /* Internet Explorer */
opacity:0.6; /* standard CSS3 */
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-webkit-transform: scale(1.3);
}
  

]]></b:skin>

5) Akhir sekali, klik Preview dan jika tiada error, klik Save.

Selamat mencuba! :)

Read more »

Posted in: Tips nGEBLOg

Cara buat efek zoom pada image dalam post - Efek 2 (opacity image)

Apabila mouse over, gambar tersebut akan auto zoom in dan zoom out. Ikuti tutorial di bawah untuk mengaplikasikan trick ini pada blog anda:

1) Sign in akaun blogger anda

2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod  

]]></b:skin>

4) Copy paste kod di bawah sebelum kod ]]></b:skin> yang anda cari dalam langkah 3 tadi

.post img {
filter:alpha(opacity=60); /* Internet Explorer */
opacity:0.6; /* standard CSS3 */
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-webkit-transform: scale(1.3);
}

Contoh, rupa kod anda akan kelihatan seperti ini:

.post img {
filter:alpha(opacity=60); /* Internet Explorer */
opacity:0.6; /* standard CSS3 */
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-webkit-transform: scale(1.3);
}
  

]]></b:skin>

5) Akhir sekali, klik Preview dan jika tiada error, klik Save.

Selamat mencuba! :)

Read more »

Posted in: Tips nGEBLOg

Cara Disable Right Click / Disable Copy

Salah satu cara untuk megelakkan entry post / imej dalam blog di copy, adalah dengan cara disable right click, seperti preview di bawah:



Caranya :

1) Sign in akaun blogger anda

2) Dashboard > Design > Add A Gadget > Html / Javascript

3) Copy paste kod di bawah pada ruangan Html / Javascript tadi

<script language=JavaScript>
<!--

//jombinabelog


var message="Masukkan Mesej Anda Disini";

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")

// -->
</script>

4) Masukkan mesej anda, kemudian save.

Selamat mencuba! :)

Read more »

Posted in: Tips nGEBLOg

Cara Disable Highlight Text Dalam Blog

Selain disable right click, anda juga boleh disable highlight text untuk mengelakkan artikel / entry post anda di copy bulat-bulat dengan mudahnya.

Caranya:

1) Sign in akaun blogger

2) Dashboard > Design > Add A Gadget > Html / Javascript

3) Copy paste kod di bawah pada ruang Html / Javascript tadi

<script type="text/javascript">
function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
target.style.MozUserSelect="none"
else //All other route (ie: Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
//Sample usages
//disableSelection(document.body) //Disable text selection on entire body
//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv"
</script>
<script type="text/javascript">
disableSelection(document.body) //disable text selection on entire body of page
</script>

4) Save dan lihat hasilnya.

Nota : Untuk kesan disable highlight yang lebih cepat (sebelum habis loading blog) drag html tadi ke bahagian atas post atau header. Selamat mencuba! :)

Read more »

Posted in: Tips nGEBLOg

Cara Dapatkan URL Gambar

Cara dapatkan url image di Google search

Ada kalanya korang memerlukan url gambar terutamanya apabila melibatkan trick yang hendak diletakkan pada blog. URL gambar biasanya boleh di ambil dengan hanya search gambar di image google, right klik pada image tersebut, dan copy image location / copy image url.

 

 Cara dapatkan url image di dalam post
URL gambar juga boleh diambil di dalam post. Apabila anda upload gambar dalam post, kod seperti di bawah akan muncul di ruang edit html (sebelah compose)

<div class="separator" style="clear: both; text-align: center;">

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKSPgUdwchZUeHCMgepkOURCPqtUufONCQ7myHeFlHJq9oqlELIZ_J_wzOmPMvtQr2mgpclcaaBIRHGWGDS3oZAuelh_Oouwev1q2I9IIh8aerguWoR2isvFs-TO1yhcMyxDUzv6lBHpw/s1600/040.gif" imageanchor="1" style=""><img border="0" height="130" width="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKSPgUdwchZUeHCMgepkOURCPqtUufONCQ7myHeFlHJq9oqlELIZ_J_wzOmPMvtQr2mgpclcaaBIRHGWGDS3oZAuelh_Oouwev1q2I9IIh8aerguWoR2isvFs-TO1yhcMyxDUzv6lBHpw/s400/040.gif" /></a></div>

Pada bahagian src dalam kod gambar tersebut,  terdapat url (berwarna merah dalam kod di atas). Url itulah yang perlu anda copy sebagai mewakili gambar yang anda upload tadi.

Selain itu, URL gambar juga boleh diambil di mana-mana image hosting, contohnya imageshack, photobucket dan lain-lain lagi. Buka akaun, upload gambar anda sendiri dan kemudian dapatkan url gambar yang anda upload tu.

Cara dapatkan url image di Imageshack
Search gambar / upload gambar sendiri, kemudian right click pada gambar dan copy image location. Ataupun anda create akaun terlebih dahulu, kemudian just copy direct link yang telah disediakan pada setiap gambar yang anda cari atau upload di Imageshack.

Imageshack

Cara dapatkan url image di Photobucket
Di Photobucket, anda tak perlu register untuk copy direct link. Just search gambar dan terus copy direct link yang disediakan. Jika nak upload gambar sendiri, kena sign up terlebih dahulu.

Photobucket

Cara dapatkan url image di Glitter Graphics

1) Buka Glitter Graphics, search dulu image yang korang nak

2) Dah pilih, klik pada image, scroll ke bawah dan korang akan jumpa kod html yang disediakan. Copy kod tersebut

3) Buka Notepad, paste kod yang korang copy tadi dalam notepad.

4) Pada kod tu, korang akan jumpa src="http://dl7.glitter-graphics.net/xxxxxxxxxxxx.jpg" . Itu la url gambar yang korang kena ambil.

5) Copy url tersebut ( cth: http://dl7.glitter-graphics.net/pub/332/332097ydjn3p1rep.jpg )

6) Done! :)

Read more »

Posted in: Tips nGEBLOg

Cara Daftar Blog

Sebelum mendaftar di blogspot, anda perlulah mempunyai akaun google terlebih dahulu memandangkan blogspot itu sendiri adalah produk dari google. Untuk mendapatkan akaun google, sila daftar di sini http://mail.google.com/mail/signup  Cuma masukkan maklumat yang diperlukan.

 

Kemudian, ikuti langkah-langkah mudah di bawah untuk mendaftar akaun blogger :

 

 1. Buka http://www.blogger.com/ seterusnya, ikuti tutorial bergambar di bawah:

4) Pada blog address (url) pastikan anda klik pada "check availability" untuk memastikan url blog yang anda ingin daftar belum lagi digunakan / belum lagi didaftarkan oleh orang lain.

6) Anda sudah mempunyai akaun blogspot anda sendiri dan klik "start blogging" untuk menaip entri pertama anda :)

Read more »

Posted in: Tips nGEBLOg

Cara Buat Text Box

Biasanya text box digunakan untuk mempamerkan kod html banner, kod html widget, text atau apa-apa sahaja yang anda ingin kongsi dengan pengunjung blog.

Contohnya banner blog seperti yang ditunjukkan di bawah. Jika anda ingin bertukar banner dengan blogger lain, anda haruslah menyediakan kod html banner blog anda bagi memudahkan blogger lain mengambil kod banner tersebut untuk di pasang pada blog mereka. Untuk itu, penggunaan aplikasi text box adalah diperlukan.

 

Terdapat pelbagai jenis text box yang boleh anda pilih. Tiap-tiap jenis text box telah disediakan kod dalam kotak masing-masing, anda cuma perlu copy sahaja. Untuk "select all kod", hanya dengan sekali klik pada text box :

<textarea style="height: 100px; width: 200px; overflow: scroll; background: #ffffff;" onclick="this.focus();this.select()">TEKS/KOD HTML ANDA DISINI

<textarea name="code" rows="3" cols="20" style="background:#BFFAFF; color:#FF0000; border-bottom: 4px solid #40FF1F; border-right: 4px solid #40FF1F; border-top: 4px solid #FFE900; border-left: 4px solid #FFE900; line-height:1.5em; padding:5px; -moz-border-radius:10px;" onclick="this.focus();this.select()" >TEKS/KOD HTML ANDA DISINI


<textarea cols="20" name="code" rows="3" style="background: #DAFFBF; border: 2px #295F00 dashed; color: #295f00; line-height: 1.5em; padding: 5px;" onclick="this.focus();this.select()" >TEKS/KOD HTML ANDA DISINI


<textarea name="code" rows="3" cols="20" style="background: #EF0090; color: #FFEFF9; border: 3px dotted #FFEFF9; line-height: 1.5em; padding: 5px;" onclick="this.focus();this.select()" >TEKS/KOD HTML ANDA DISINI


<textarea name="code" rows="3" cols="20" style="background: #FBEFFF; color: #CA3DD9; border: 1px solid #CA3DD9; border-left: 20px solid #CA3DD9; line-height: 1.5em; padding: 5px; -moz-border-radius: 7px;" onclick="this.focus();this.select()">TEKS/KOD HTML ANDA DISINI


<textarea name="code" rows="3" cols="20" style="background:#FF000A; color:#fff; border:3px double #ffaf; line-height:1.5em; padding:5px;" onclick="this.focus();this.select()">TEKS/KOD HTML ANDA DISINI


<textarea name="code" rows="3" cols="20" style="background: #FFDAAF; color: #7F4500; border: 2px ridge #7F4500; line-height: 1.5em; padding: 5px; -moz-border-radius-topleft: 15px; -moz-border-radius-bottomright: 15px;" onclick="this.focus();this.select()">TEKS/KOD HTML ANDA DISINI


<textarea name="code" rows="3" cols="20" style="background: #000; color: #fff; border: 2px inset #ccc; line-height: 1.5em; padding: 0 7px; -moz-border-radius: 5px;" onclick="this.focus();this.select()">TEKS/KOD HTML ANDA DISINI


<textarea cols="20" name="Bptxt" rows="3" style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; -moz-border-radius-bottomleft: 15px; -moz-border-radius-bottomright: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-box-shadow: 5px 0px 8px rgb(129, 129, 129); background: white none repeat scroll 0% 0%; border-left: 20px solid red; color: black; line-height: 150%; padding: 5px;" onclick="this.focus();this.select()">TEKS/KOD HTML ANDA DISINI


<textarea cols="20" name="Bptxt" rows="3" style="-moz-background-inline-policy: continuous; -moz-border-radius: 15px 15px 15px 15px; -moz-box-shadow: 5px 0px 8px rgb(129, 129, 129); background: none repeat scroll 0% 0% Pink; border-left: 20px solid red; color: black; line-height: 150%; padding: 5px;" onclick="this.focus();this.select()">TEKS/KOD HTML ANDA DISINI

Untuk pasang text box ini pada blog, ikuti tutorial di bawah :

1) Sign in akaun blogger

2) Dashboard > Design > Add A Gadget > Html / Javascript (atau boleh juga paste di ruang entri post)

3) Paste kod text box yang anda copy tadi pada ruang Html / Javascript

Contoh:

<textarea style="height: 100px; width: 200px; overflow: scroll; background: #ffffff;" onclick="this.focus();this.select()">TEKS/KOD HTML ANDA DISINI</textarea>

 4) Pada tulisan berwarna merah di atas, gantikan dengan kod html banner anda/ text /apa sahaja kod yang anda ingin pamerkan dalam text box tersebut.

Contoh kod banner anda:

<center><a href="http://santaisini.blogspot.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcpV5j96YpZgqVSUXMwBpiwG8JKSShxhzbuae9slIuWsGjGQqqfUTKbBr5BbNJ5YI8wMqp1Sm7sk-OquTVdDXOpy2flqbP0fCmhOMxRt_7POFs1l2_zrmDH6J9Z-RTFgalb1FJhMpGta4/s400/banner.png" /></a></center>

Rupa kod text box setelah dimasukkan kod banner akan jadi seperti ini:

<textarea style="height: 100px; width: 200px; overflow: scroll; background: #ffffff;" onclick="this.focus();this.select()"><center><a href="http://santaisini.blogspot.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcpV5j96YpZgqVSUXMwBpiwG8JKSShxhzbuae9slIuWsGjGQqqfUTKbBr5BbNJ5YI8wMqp1Sm7sk-OquTVdDXOpy2flqbP0fCmhOMxRt_7POFs1l2_zrmDH6J9Z-RTFgalb1FJhMpGta4/s400/banner.png" /></a></center></textarea>

4) Save dan lihat hasilnya.

Read more »

Posted in: Tips nGEBLOg

Button Like Facebook Pada Sidebar Blog

Button like ini boleh diletakkan untuk anda mengetahui berapa banyak like yang anda dapat untuk blog anda atau apa sahaja topik yang ingin ajukan pada button like tersebut .

Ikuti tutorial di bawah:

1) Sign in akaun blogger

2) Dashboard > Design > Add A Gadget > Html / Javascript

3) Copy paste kod di bawah pada ruang Html / Javascript tadi

<iframe scrolling="no" frameborder="0" allowtransparency="true" style="border: medium none; overflow: hidden; width: 280px; height: 40px;" src="http://www.facebook.com/plugins/like.php?href=http://url-bloganda.blogspot.com&layout=standard&show_faces=false&width=280&action=like&font=arial&colorscheme=light&height=40"></iframe>

Nota : Gantikan perkataan yang dihighligtkan merah di atas dengan url blog anda. Letakkan topik yang ingin anda ajukan pada ruang title

4) Save dan lihat hasilnya.

Read more »

Posted in: Tips nGEBLOg

Blockquote

Apakah "Blockquote"? "Blockquote" digunakan untuk menunjukkan petikan teks/perenggan daripada sumber yang lain atau dari entri post-post anda yang lama."Blockquote" juga digunakan untuk menunjukkan satu petikan atau kata-kata yang hendak di'tekan'kan kepada pengunjung sesebuah blog. Contoh:

Cara nak buat Blockquote:

1) Buka new post

2) Taip entri post macam biasa, kemudian bila ada petikan atau perenggan yang nak dihighlightkan sebagai blockquote, klik ikon quote:

3) Klik preview untuk lihat hasilnya.

Selamat mencuba! :)

Read more »

Posted in: Tips nGEBLOg

Border dan bayang-bayang pada sidebar title

Preview:

Caranya:

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod  

h2 {

4) Kemudian copy dan paste kod di bawah SELEPAS / DI BAWAH kod h2 { tadi
* kod ini adalah untuk border bentuk segiempat. Kalau korang nak bentuk border yang lain, just pilih kat sini

background: #FFECF5;
border: 2px dashed #000000;
-moz-box-shadow: 0 0 3px 3px #C0C0C0;
-webkit-box-shadow: 0 0 3px 3px #C0C0C0;
box-shadow: 0 0 2px 2px #C0C0C0;

nota: FFECF5  - kod warna untuk warna background title sidebar korang
        000000 - kod warna untuk warna border title
        C0C0C0 - kod warna untuk warna bayang-bayang border

Read more »

Posted in: Tips nGEBLOg

Border & bayang-bayang pada tajuk post

Preview:

Caranya:
1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod untuk title post seperti berikut

untuk pengguna template watermark, Picture Window dan Travel, cari kod:

h3.post-title {  

untuk pengguna template Ethereal dan Awesome Inc., cari kod:

h3.post-title, h4 {

untuk pengguna template Simple, cari kod:

h3.post-title, .comments h4 {

4) Kemudian copy paste kod di bawah SELEPAS kod yang korang cari tadi
* kod ini adalah untuk border bentuk segiempat. Kalau korang nak bentuk border yang lain, pilih kat sini

background: #FFECF5;
border: 2px dashed #000000;
-moz-box-shadow: 0 0 3px 3px #C0C0C0;
-webkit-box-shadow: 0 0 3px 3px #C0C0C0;
box-shadow: 0 0 2px 2px #C0C0C0;

contoh rupa kod korang:

h3.post-title, .comments h4 {
background: #FFECF5;
border: 2px dashed #000000;
-moz-box-shadow: 0 0 3px 3px #C0C0C0;
-webkit-box-shadow: 0 0 3px 3px #C0C0C0;
box-shadow: 0 0 2px 2px #C0C0C0;

nota: FFECF5  - kod warna untuk warna background title post korang
        000000 - kod warna untuk warna border title
        C0C0C0 - kod warna untuk warna bayang-bayang border

Read more »

Posted in: Tips nGEBLOg