Selasa, 22 Mei 2012

Hilangkan Navigator Bar

Kebiasaanya akan ada satu nav bar warna biru pada bahagian paling atas blog. Mungkin korang rasa nav bar tu mengganggu ruang dalam blog atau nampak tak cantik. Cara nak remove nav bar ni senang je. Ikuti tutorial di bawah
*kalau tak jadi juga, cuba tutorial yang ni pula ye.


1) Sign in akaun blogger

2) Dashboard > Design > Template Designer

3) Di bahagian Template Designer, klik Advanced > Add CSS

4) Copy kod di bawah dan paste pada ruang Add CSS tadi

 #navbar-iframe {                          
 display: none !important;               
 }                                                  


Contoh:
















5) Kemudian klik "apply to blog" dan "view blog" untuk lihat hasilnya.


Selamat mencuba!  :)

Senin, 21 Mei 2012

refer video sye (ameba pico)
  
Beri koment juga ye

Selamat refer video :)

Senin, 14 Mei 2012

Letak Signature Pada Setiap Post

      
first sekali, korang kena create signature dulu kat sini mylivesignature.com 


     







1) Klik dekat "click here to start"

2) Kemudian klik "using signature creation wizarad" dan teruskan dengan step yang seterusnya

3) Last sekali, bila signaturekorang dah siap, right click pada image signature tu, kemudian save

4) image signature yang korang save tadi, upload dekat mana-mana image hosting, contohnya imageshack.us. Kemudian dapatkan url gambar.


Seterusnya, ikuti Tutorial di bawah untuk cara pasang signature pada setiap post entri dalam blog:

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

 <data:post.body/>

4) Copy paste kod di bawah selepas kod <data:post.body/> tadi

 <p><div align="left"><img src="URL image signature anda"/></div></p>

Rupa kod akan jadi camni:

 <data:post.body/>                                                                                       
                                                                                                                      
 <p><div align="left"><img src="URL image signature anda"/></div></p>

Nota:
- Pada URL image signature anda, masukkan url gambar signature yang korang upload dekat imageshack tadi
- left adalah kedudukan signature. Tukar kepada kedudukan yang korang prefer, sama ada left, right atau center

5) Klik preview, jika tiada eror, klik save

Selamat Mencuba :)

Sumber:jombinabelog.blogspot.com

Kamis, 03 Mei 2012

Efek Link Bergoyang / Nudging

                            Demo:
               

Cuba korang lakukan cursor pada mana-mana link dalam blog ni, apa jadik? ada goyang tak? :) efek menarik ni korang boleh cuba apply 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 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 :)

Cursor Love Sparkling

Tutorial ini akan menunjukkan anda cara bagaimana untuk menjadikan cursor di dalam blog berkilauan / sparkle berbentuk love seperti preview yang di tunjukkan di atas. Sila ikuti tutorial berikut:

1) Sign in akaun blogger 

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

3) Copy Dan Paste kod berikut pada ruangan HTML / Javascript

<script type='text/javascript'>
// <![CDATA[
var colour="#
FF0033";
var sparkles=40;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(5, 5);
var rdow=createDiv(5, 5);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*5;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"49px";
div.style.width=width+"50px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>


FF0066 - Tukar kepada kod warna yang anda suka. Rujuk kod warna di bawah:

(untuk paparan lebih besar, klik di sini)


4) Save dan lihat hasilnya

Selamat mencuba :)

Sumber:jombinabelog.blogspot.com

Cara Disable Right Click / Disable Copy

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

Caranya:

1) Sign in akaun blogger

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) Kemudian Save

Selamat Mencuba :)

Masukkan Mesej Anda Disini - Masukkan mesej anda sesuai selera

Sumber:jombinabelog.blogspot.com

Rabu, 02 Mei 2012

Sweet tooltips

Apakah Sweet tooltips? nak tahu refer gambar di bawah:
           
Bila korang mouse over link, sweet tooltips akan muncul, macam dalam gambar kat atas (yang kotak purple tu)       . Nak cuba pasang dalam blog tak? ok, ikuti tutorial di bawah:

1) Sing in akaun blogger

2) Dashboard > Design > Edit HTML

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod </head>

4) Kemudian copy kod di bawah, dan paste SELEPAS / DI BAWAH kod </head> yang korang cari tadi

(pilih warna sweet tooltips)

Pink:

 <link href='https://sites.google.com/site/jombinabelogsweettooltips/pink.css' media='screen' rel='stylesheet' type='text/css'/><br /> <script src='https://sites.google.com/site/jombinabelogsweettooltips/tooltips.js' type='text/javascript'/><br /> <script src='https://sites.google.com/site/jombinabelogsweettooltips/sweettiles.js' type='text/javascript'/>

Blue:

<link href='https://sites.google.com/site/jombinabelogsweettooltips/blue.css' media='screen' rel='stylesheet' type='text/css'/><br /> <script src='https://sites.google.com/site/jombinabelogsweettooltips/tooltips.js' type='text/javascript'/><br /> <script src='https://sites.google.com/site/jombinabelogsweettooltips/sweettiles.js' type='text/javascript'/>

Orange:

<link href='https://sites.google.com/site/jombinabelogsweettooltips/orange.css' media='screen' rel='stylesheet' type='text/css'/><br /> <script src='https://sites.google.com/site/jombinabelogsweettooltips/tooltips.js' type='text/javascript'/><br /> <script src='https://sites.google.com/site/jombinabelogsweettooltips/sweettiles.js' type='text/javascript'/>

Green:

<link href='https://sites.google.com/site/jombinabelogsweettooltips/green.css' media='screen' rel='stylesheet' type='text/css'/><br /> <script src='https://sites.google.com/site/jombinabelogsweettooltips/tooltips.js' type='text/javascript'/><br /> <script src='https://sites.google.com/site/jombinabelogsweettooltips/sweettiles.js' type='text/javascript'/>

Purple:

<link href='https://sites.google.com/site/jombinabelogsweettooltips/purple.css' media='screen' rel='stylesheet' type='text/css'/><br /> <script src='https://sites.google.com/site/jombinabelogsweettooltips/tooltips.js' type='text/javascript'/><br /> <script src='https://sites.google.com/site/jombinabelogsweettooltips/sweettiles.js' type='text/javascript'/>

Black:

<link href='https://sites.google.com/site/jombinabelogsweettooltips/black.css' media='screen' rel='stylesheet' type='text/css'/><br /> <script src='https://sites.google.com/site/jombinabelogsweettooltips/tooltips.js' type='text/javascript'/><br /> <script src='https://sites.google.com/site/jombinabelogsweettooltips/sweettiles.js' type='text/javascript'/>

5) Lasty, klik preview, jika tiada eror, klik save template dan lihat hasilnya.

Selamat mencuba :)


Selasa, 01 Mei 2012

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 :)

Sumber:jombinabelog.blogspot.com

Cursor buih / bubble

Untuk membuat effect cursor mengeluarkan buih di dalam blog anda, sila ikuti tutorial di bawah:

1) Log in akaun blogger anda

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

3) Pada ruang HTML / Javascript, copy paste kod di bawah
<script type="text/javascript" src="https://sites.google.com/site/jombinabelogcursorbuih/bubble%20cursor.js"></script><script type="text/javascript">
// <![CDATA[
var colours=new Array("#FFFF33", "#FFFF33", "#FFFF33", "#FFFF33", "#FFFF33"); // colours for top, right, bottom and left borders and background of bubbles

var bubbles=100; // maximum number of bubbles on screen
/****************************

* JavaScript Bubble Cursor *

* (c) 2010 mf2fm web-design *

* http://www.mf2fm.com/rv *

* DON'T EDIT BELOW THIS BOX *

****************************/

var x=ox=400;

var y=oy=300;

var swide=800;

var shigh=600;

var sleft=sdown=0;

var bubb=new Array();

var bubbx=new Array();

var bubby=new Array();

var bubbs=new Array();

window.onload=function() { if (document.getElementById) {

var rats, div;

for (var i=0; i<bubbles; i++) {

rats=createDiv("3px", "3px");

rats.style.visibility="hidden";

div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.top="1px";

div.left="0px";

div.bottom="1px";

div.right="0px";

div.borderLeft="1px solid "+colours[3];

div.borderRight="1px solid "+colours[1];

div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.top="0px";

div.left="1px";

div.right="1px";

div.bottom="0px"

div.borderTop="1px solid "+colours[0];

div.borderBottom="1px solid "+colours[2];

div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.left="1px";

div.right="1px";

div.bottom="1px";

div.top="1px";

div.backgroundColor=colours[4];

div.opacity=0.5;

if (document.all) div.filter="alpha(opacity=50)";

document.body.appendChild(rats);

bubb[i]=rats.style;

}

set_scroll();

set_width();

bubble();

}}

function bubble() {

var c;

if (x!=ox || y!=oy) {

ox=x;

oy=y;

for (c=0; c<bubbles; c++) if (!bubby[c]) {

bubb[c].left=(bubbx[c]=x)+"px";

bubb[c].top=(bubby[c]=y)+"px";

bubb[c].width="3px";

bubb[c].height="3px"

bubb[c].visibility="visible";

bubbs[c]=3;

break;

}

}

for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);

setTimeout("bubble()", 40);

}

function update_bubb(i) {

if (bubby[i]) {

bubby[i]-=bubbs[i]/2+i%2;

bubbx[i]+=(i%5-2)/5;

if (bubby[i]>sdown && bubbx[i]>0) {

if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {

bubb[i].width=bubbs[i]+"px";

bubb[i].height=bubbs[i]+"px";

}

bubb[i].top=bubby[i]+"px";

bubb[i].left=bubbx[i]+"px";

}

else {

bubb[i].visibility="hidden";

bubby[i]=0;

return;

}

}

}

document.onmousemove=mouse;

function mouse(e) {

set_scroll();

y=(e)?e.pageY:event.y+sleft;

x=(e)?e.pageX:event.x+sdown; }

window.onresize=set_width;

function set_width() {

if (document.documentElement && document.documentElement.clientWidth) {

swide=document.documentElement.clientWidth;

shigh=document.documentElement.clientHeight;

}

else if (typeof(self.innerHeight)=="number") {

swide=self.innerWidth;

shigh=self.innerHeight;

}

else if (document.body.clientWidth) {

swide=document.body.clientWidth;

shigh=document.body.clientHeight;

}

else {

swide=800;

shigh=600;

}

}

window.onscroll=set_scroll;

function set_scroll() {

if (typeof(self.pageYOffset)=="number") {

sdown=self.pageYOffset;

sleft=self.pageXOffset;

}

else if (document.body.scrollTop || document.body.scrollLeft) {

sdown=document.body.scrollTop;

sleft=document.body.scrollLeft;

}

else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

sleft=document.documentElement.scrollLeft;

sdown=document.documentElement.scrollTop;

}

else {

sdown=0;

sleft=0;

}

}

function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height;
div.style.width=width;
div.style.overflow="hidden";
return (div);
}

// ]]>
</script>

* Untuk menukar warna bubble, tukarkan kod berwarna kuning di atas kepada kod warna pilihan anda. Pilih kod warna di sini
4) Klik Save dan lihat hasilnya
.
Sumber:jombinabelog.blogspot.com

Cara Backup Template Blog

Template blog yang terletak di bahagian Edit HTML adalah merupakan script Html yang memberi wajah kepada pattern/ rupa blog anda. Sebarang penambahan gadget atau sebarang trick blog kebiasaannya dilakukan/ diubahsuai di template (edit Html).

Oleh itu, sebelum melakukan sebarang pengubahsuian pada template blog anda, adalah penting untuk anda backup template terlebih dahulu supaya senang untuk backup jika berlaku sebarang kesilapan nanti. Untuk mengetahui bagaimana cara backup template, sila ikuti tutorial di bawah:

1) Sign in akaun blogger anda, seterusnya ikuti tuto bergambar di bawah:





Kemudian, akan muncul paparan seperti di bawah, klik ok :

Done! :)

Sumber:jombinabelog.blogspot.com

Efek round hover pada image apabila dilalukan cursor



Untuk membuat kesan khas pada gambar seperti preview di atas, sila ikuti tutorial di bawah:

1) Login akaun blogger anda

2) Dashboard > Design > Edit HTML > Backup template terlebih dahulu (untuk lagkah berjaga-jaga)

3) Tekan ctrl + F serentak, cari kod 
/* Headings
atau
/* Header

Copy kod di bawah dan paste SEBELUM kod /* Headings atau /*Header
a img {
-webkit-transition-duration:.4s;}
img:hover {filter: alpha(opacity=60);
opacity: .9.9;
border-radius:50px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}

Contoh:
a img {
-webkit-transition-duration:.4s;}
img:hover {filter: alpha(opacity=60);
opacity: .9.9;
border-radius:50px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}

/*Header


4) Save dan lihat hasilnya.

Selamat mencuba! :)

Sumber:jombinabelog.blogspot.com