November 2010

Tutorial : Sign up Nuffnang and put into Blog

Thursday, November 11, 2010

Side income iklan Nuffnang memang paling popular antara blogger .. Pergi mana-mana blog saja mesti ada iklan ini .. tak kira lah di sidebar ke , atas header ke atau pun dicelah-celah post entri diorunk ! wahhh ! semangat betul diorunk buat begitu... Of course lah semangat sebab income masyuk ! siapa yang tak mahu ? ?

1. Masuk website Nuffnag....

2. Fill in registration . Tick semua kotak yang bahagian bawah sekali. . Masukkan huruf yang sepatutnya dan klik sign up !

3. Bila dah sign in akan keluar macam ini :

5. Kan ada Emel Korang tuh ? Log in masuk dekat Emel korang tuh . Tak kiralah . YahooMail ke , Gmail ker . Ikot korang punya emel . Ok ?

6. Lepas dah log in , Check Inbox .. Ada Nuffnang hantar satu email suruh Verify . Klik pada link.

7. Bila dah click , korang patah balik , tengok No.4 ! Ada kotak kan CLICK HERE kan?

8. Korang CLICK HERE dekat situ tak pun , susah-susah , masuk balik webstie nuffnang tu :)

9. Log in balik . Letak Emel Dan Password !

10. Lepas dah log in . Kan ada benda ni kan ? Korang KLIK pada yang dikotakkan tuh :)

11. Korang Fill in Blogger Bio tuh , Then , Click SUBMIT !

12. Lepas tuh , akan keluar warna2 hijau ? Korang fill in lah Blog Name korang , URL dan tekan Add New Blog .

13 . Then , akan keluar SATU SURVEY ~

14 . Fill in SURVEY tu :) Jujur tau ? =,=

15. Then , tekan SUBMIT !:)

Oke , now , cara nak letak iklan dalam blog ! :)

1. Log in , Klik managed :

2. Ada nampakkan kod-kod tuh . (Leaderboard , Sidebar , Between Contants!)

3. Letak di Leaderboard (Atas Header) :

1. Dashboard --> Template --> Edit Html --> Proceed --> Tick Expand Widget
Tekan Ctrl F dan cari kod ini :
Simple Template

<body expr:class='"loading" + data:blog.mobileClass'>

Denim Template

</head>

Copy Kod LeaderBoard , then , paste di bawah kod yang korang carikan tuh :)
SAVE !!

4. Letak Di Sidebar :
Dashboard > Design > add a Gadget > Html/JavaScript
Copy Kod untuk sidebar pulak
Paste pada ruangan Html/JavaScript tuh :)
Then , SAVE !!

5. Letak Between Contents :

Dashboard > Design > Edit Html > Tick Expand Widget Templates
Tekan Ctrl F serentak , dan cari kod ini :
Simple Template

</b:includable>

Denim Template

<data:post.body/>

Copy pulak kod between contents tu.
Paste atas kod yang korang cari tadi tuh , ok ?
SAVE !!!

Tutorial : Add Top Commenter

Wednesday, November 3, 2010

Blog korunk siapa yang selalu comment ? ? Kalau blog aku jarang ada orang comment.. hehe..

Takpelah.. aku tak kisah semua tuh.. hak masing-masing kan ? ? :) Orang nak masuk sini pun jarang... HAHA ! *ayat simpati.. puihhh !*Terima saja ...

Hmm , ada siapa-siapa yang nak tahu siapa top commenter korunk ? ? Jom follow this step !

1. Dashboard --> Layout --> Add a Gadget --> Html JavaScript

2. Korang Copy kod di bawah ni :

<div style="text-align:justify;line-height:1.2;">
<script type="text/javascript">
function cCloud(feed) {
max = 0;
min = 10000;
//finding highest and lowest count
for (i=0;i<feed.count;i++)
{
ccCount = feed.value.items[i].commentcount * 1;
if (ccCount > max)
{
max = ccCount;
}
if (ccCount < min)
{
min = ccCount;
}
}
ccCountD = "";
display = "";
for (j=0;j<feed.count;j++)
{
ccdiff = feed.value.items[j].commentcount - min;
ccFontsize = 80 + (ccdiff * 100) / (max - min) + "%";
ccUrl = "'" + feed.value.items[j].authorurl + "'";
ccCountD = "(" + feed.value.items[j].commentcount + ")";//comment count
ccName = feed.value.items[j].title + ccCountD;
ccLName = "<a style='font-size:" + ccFontsize + "' href=" + ccUrl + " target='_blank'>" + ccName + "</a>";//clickable commentator name
display = display + ccLName + " ";
}
document.write(display);
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=url blog
&Exclusions=nama korunk
&ShowHowMany=10
&Order=frequency
&_callback=cCloud
&_id=cfa196644e1d6159c9183548c4b5e2f5
&_render=json"
type="text/javascript"></script>
</div>

3. Dah paste korunk save... Preview blog !

p/s : Sabar sikit yer kalau widget ini dipasang tapi macam tak berfungsi ...
Benda ini akan keluar nanti bila ada blogger yang komen entry korunk .

Tutorial : Colourful Follower Gadget

Preview :

Nak warna-warni macam nie jugak ? ? Jom follow this step ! :D

1. Go To Layout > Add A gadget > Pergi dekat More Gadget .
2. Scroll ke bawah sampai jumpa Followers ,
3. Click Button + dan gadget follower korunk ada dalam blog..

4. Next step , View Blog awak , kemudian tekan CRTL+U dekat keyboard tuh.. jumpa kan ? Kalau tak boleh , try right click mouse > choose View page source korunk .. ! ada keluar banyak-banyak code ...

5. Seterusnya , gunakan fungsi CRTL+F dan cari dekat situh nama gadget follower korunk yang korunk add tadi.. Contoh " Awesome Fellow" .

6. Nanti korunk akan nampak highlight warna kuning... Okey.. Scroll Perlahan-lahan sampai korunk jumpa code yang ala-ala dalam gambar dekat atas nie...

7. Dah jumpa ? Okey biarkan page tuh , korunk pergi buka notepad korunk , Copy dan paste code di bawah :

<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>

<div id="div-GANTIKAN DENGAN KOD ID KORANG" style="width:200px;"></div>

<script type="text/javascript">
var skin = {};
skin['FONT_FAMILY'] = 'trebuchet ms,sans-serif';
skin['BORDER_COLOR'] = 'transparent';
skin['ENDCAP_BG_COLOR'] = '#E7A7F7';
skin['ENDCAP_TEXT_COLOR'] = '#ffffff';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#transparent';
skin['CONTENT_BG_COLOR'] = '#transparent';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
skin['NUMBER_ROWS'] = '2';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
{ id: 'div-GANTIKAN DENGAN KOD ID KORANG',
site: 'GANTIKAN DENGAN KOD SITE KORANG' },
skin);
</script>

EDIT :

ABC : Untuk gantikan kod ID dan kod SITE korunk sila refer pada gambar di atas, ambil kod pada yang dikotakkan merah saja..

ABC : Tukar kod warna ikut suka korunk , kod warna , sila godeh satu per satu kod tersebut.

ABC : Row follower korunk , tukarlah 3 ke 4 tak nak tukar pun takpe..

8. Dah siap edit pergi dekat layout , remove follower gadget yang korunk masukkan first tadi .

9. Then click Add A gadget > Edit Html/JavaScript..

10. Paste code yang korunk edit di notepate tadi.. Save , [ Untuk yang warna warni tuh , korunk godeh satu per satu dekat sini.. ikut warna kesukaan korunk oke.. :) ]

Hmm , jadi tak ? ? Harap-harap korunk punya menjadi macam aku punya follower warna purple tuh :) Kalau ada masalah.. sila inform insy'Allah Nurrul bantu..

Tutorial : Welcome Images

Sebelum masuk sesetengah blog oleh blogger mesti ada yang kena klik gambar dulu ,

baru boleh masuk dalam blog diorunk..

Itulah nama nya welcome images.. hehehe..

Hmm , korunk nak juga tak ? nak ? follow this step !

1. Dashboard --> Template --> Edit Html --> Proceed

2. korang click Ctrl + F dan search

]]></b:skin>

3. kalau dah jumpe, korang paste kan code bawah nieyh di atas code yang korang cari tadi.

</style></head>

<script language="javascript" type="text/javascript">

/* toggle() checks to see if the images has already been faded

or not and sends the appropriate variables to opacity(); */

function toggle(el,milli) {

// Get the opacity style parameter from the image

var currOpacity = document.getElementById(el).style.opacity;

if(currOpacity != 0) { // if not faded

fade(el, milli, 100, 0);

} else { // else the images is already faded

fade(el, milli, 0, 100);

}

}

/* changeOpacity() uses three different opacity settings to

achieve a cross-browser opacity changing function. This

function can also be used to directly change the opacity

of an element. */

function changeOpacity(el,opacity) {

var image = document.getElementById(el);

// For Mozilla

image.style.MozOpacity = (opacity / 100);

// For IE

image.style.filter = "alpha(opacity=" + opacity + ")";

// For others

image.style.opacity = (opacity / 100);

}

/* fade() will fade the image in or out based on the starting

and ending opacity settings. The speed of the fade is

determined by the variable milli (total time of the fade

in milliseconds)*/

function fade(el,milli,start,end) {

var fadeTime = Math.round(milli/100);

var i = 0; // Fade Timer

// Fade in

if(start < end) {

for(j = start; j <= end; j++) {

// define the expression to be called in setTimeout()

var expr = "changeOpacity('" + el + "'," + j + ")";

var timeout = i * fadeTime;

// setTimeout will call 'expr' after 'timeout' milliseconds

setTimeout(expr,timeout);

i++;

}

}

// Fade out

else if(start > end) {

for(j = start; j >= end; j--) {

var expr = "changeOpacity('" + el + "'," + j + ")";

var timeout = i * fadeTime;

setTimeout(expr,timeout);

i++;

}

}

}

</script>

<div class="input" onClick="javascript:toggle('wise', 3000); this.style.display='none';

document.getElementById('june').style.display=''">

<center><img src="URL IMAGE ANDA"

style="opacity:0.4;filter:alpha(opacity=40)"

onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"

onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=40"/></center>

</div>

<div id="wise" style="filter : alpha(opacity=0); -moz-opacity : 0; opacity : 0;">

<div id="june" style="display : none;">

<body>