Tutorial : Sign up Nuffnang and put into Blog

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='&quot;loading&quot; + 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


Tutorial : Add Top Commenter

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 :
<!-- Top Commentators Cloud Start
(c) 2010 Blogger Sentral. Original code by http://www.bloggersentral.com/. Please do not remove this credit and the &#8220;Get this commentators widget&#8221; link at the bottom of the code.-->
<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>
<!-- Top Commentators Cloud End -->
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 :
<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-GANTIKAN DENGAN KOD ID KORANG" style="width:200px;"></div>
<!-- Render the gadget into a 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>

EDIT :
ABC : gambar welcome korunk

4. preview dan save :)


Tutorial : Make your Blog Private !

Private blog ? ? Macam tak bagi orang tengok blog kita lah kan ....
Contoh , kalau seseorang tuh nak edit blog diorang ke kan ?
Sementara tuh , korang boleh lah Privatekan blog korang tuh kejap .
Tapi , jangan PVT lama sangat ! takot orang ingat kita dah tak guna blog pulak :)


1.Dashboard --> Setting --> Basic

2. Scroll ke bawah jumpa blog Reader :

3. Tick pada Only Blog Authors

5. Then , blog korang dah tak boleh VIEWS oleh other people :)

Tapi , bila nak open balik . Tick pada Anybody balik ok ?



Tutorial : Sticky Post

ENTRY INI DILEKATKAT OLEH GLU GAM ! ! !SCROLL Ke bawah untuk melihatnya :)
CONTEST : SIAPA MAKAN PALING GEMPAK ! ! 
tipu , tak ada pun.. contoh saja. hehe

Selalu tak korang blogwalking nampak ada blogger tulis macam dekat tepi kiri enrty ini ? ?
itulah namanya sticky post !
Stick post selalunya blogger buat untuk Buat Segmen , GA , Contest .... 
nak tahu macam mana.. korunk buat dulu lahh....


1. Korang tulis macam biasa kat post korang tuh . Dah siap tulis . Publish Post .
2. Then , korang pergi kat edit post tadi ..( Buat macam ni)



1 . Klik Post Option.
2. Tick dekat Scheduled at
3. Type tarih yang korang nak post korang sampai bila
4. Masa korang nak post korang sampai bila
5. Da siap . Publish Post :)


Tutorial : Get widget Link Within and change the word



1. Korang kena tekan link sini untuk permulaan...

2. Then , fill in form dekat bawah ini : 


3. Tekan Get Widget !

4. Tekan Install widget  

5. Click add widget. Automatik akan keluar macam ini :

6. Drag atau tarik gadget linkwithin  dari atas ke bawah post.

7. Okeyh , Now kita tukar ayat yang macam aku gariskan hijau dekat 
8. Tekan Edit dekat bahagian gadget linkwithin tu.
9. Copy kod dibawah 
<script>linkwithin_text='AYAT GEMPAK KORANG'</script>
EDIT :
ABC : Ayat korunk

10. Paste dibahagian atas kod tadi...


11. Jangan lupa tekan save dekat bahagian oren dulu.. paste view blog korunk...: )