! -Jeritan Blog | Pro Tutorial Blog | Panduan Blogspot | Membina Blog- !

Buku Tamu Ala Facebook

2011-12-24T07:45:00.011+08:00

Disebabkan ada orang ramai kata dia tidak faham tutorial yang nik buat yang dahulu dan ada jugak yang kata tidak menjadi.Oleh itu Abe ada masa lapang nie akan membuat kamu semua supaya faham dengan tutorial ini...Semoga berjaya :)

Langkah 1

Anda perlu register app dahulu
Anda dijemput hadir kelaman ini. :)
Jangan lupa copy app id tu.

Langkah 2

Edit Kode dibawah ini dan copy.

Anda perlu ubah kode :-

Jangan lupa tukar PASTE KODE ID DISINI dengan app id yang anda telah buat tadi.

*Ada dua tau

Langkah 3

Anda perlu savekan kode tersebut pada Kotak HTML.

Info :-
Anda boleh check buku tamu anda di blog sendiri atau di https://developers.facebook.com/tools/comments

Semoga berjaya :)

Ada masalah komen tau..

Create App

2011-12-24T07:35:00.002+08:00

Abe hari akan mengajar adik2 he3...macam kat sekolah pulak.Tutorial ini memang mudah dan senang kalau buat dengan tutup mata satu ^_^ .

Langkah 1
Anda perlu Pergi kelaman http://www.facebook.com/developers/

Klik Allow..

Klik Create New App..

Tulis je apa-apa display name dan Namespace mengikut kesesuaian kamu.

Langkah 2
Selepas itu akan keluar satu page app yg anda telah buat tadi.
Anda perlu pergi kebawah dan klik website.

Langkah 3
Letakkan blog url anda macam url blog saya yang telah diletakkan.

Langkah 4
Selepas itu anda perlu klik save change.

Langkah 5
Anda sudah berjaya dan boleh copy App ID tu dan letakkan dimana-mana sahaja he3 ^_^

Random Posts Widget

2011-12-22T11:47:00.004+08:00

Langkah 1

1. Login ke Blogger, Klik Design :

2. Pada Elemen Halaman, klik Add Gadget di lokasi yang Anda ingin letak;
3. Pilih HTML/Javascript;

Langkah 2
Copy kode dibawah ini dan letakkan dalam kontent yang telah anda buka tadi.

<a href=''><img alt='blogger widgets' src='https://sites.google.com/site/bdlab12/24work/blogspot%2btutorial.png'/></a><script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=5;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script type='text/javascript' src='/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts'></script>
<a href='http://jeritanblog.com'><img style='border: 0px' src='https://sites.google.com/site/bdlab12/24work/blogspot%2btutorial.png'/></a><noscript><a href="http://jeritanblog.com">+ RandomPostsWidgetForBlogger</a></noscript>
<span style="position:absolute;"></span>

Selepas itu klik Save dan anda boleh lihat hasilnya..

Tambah Animated Notice Box

2011-12-21T10:07:00.004+08:00

Langkah 1

1. Login ke Blogger, Klik Design :

2. Pada Elemen Halaman, klik Add Gadget di lokasi yang Anda ingin letak;
3. Pilih HTML/Javascript;

Langkah 2
Copy kode dibawah ini dan letakkan dalam kontent yang telah anda buka tadi.

<style>
#info{
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
position:relative;
color: #FFF;
background-color: #000000;
background-image: url('https://lh6.googleusercontent.com/-J10tzuGryJQ/TvFErgMukbI/AAAAAAAABYg/TsQA5wpxZ8s/h120/joy.gif');
}
</style><script src="http://code.jquery.com/jquery-1.2.3.min.js" type="text/javascript">
</script>

<script type="text/javascript">
$(document).ready(function(){
$(".close").click(function(){
$("#info").animate({left:"+=10px"}).animate({left:"-5000px"});
});
$("#info").fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400)
.fadeOut(400).fadeIn(400);
});

</script>
<div id="info">
<a class="close" href="#close" style="float: right;"><img border="0" src="http://1.bp.blogspot.com/_AstD3fky-O0/TOstBn4BMoI/AAAAAAAAAKc/bgYGD5qCds8/s1600/images.jpg" /></a>
Hello This is test Notice...</div>

Selepas itu klik Save dan anda boleh lihat hasilnya..

Nota : Jangan lupa tukar Hello This is test Notice... mengikut kehendah anda...

Letak border pada gambar

2011-12-21T09:47:00.003+08:00

Langkah 1

1. Pergi ke Blogger Dashboard > Design tab > Edit HTML tab
3. Selepas itu cari kode ]]></b:skin>

Langkah 2

1. Copy kode dibawah ini dan letak diatas kode yang anda cari tadi.

img {
border: 15px solid #000;
background: #000;
filter:alpha(opacity=60);
opacity:0.6;
padding: 1px;
}

2. Selepas itu anda klik save tempaltes dan boleh lihat hasilnya.

Semoga berjaya :)

Buat effect gambar terang dengan opacity effect

2011-12-20T08:25:00.002+08:00

Image opacity effect merupakan effek yang berlaku apabila cursor mouse diletakkan di atas sesuatu image yang terdapat pada bahagian post.

Tutorial ini membuatkan gambar menjadi terang apabila cursor mouse diletakkan ke atas gambar.

Langkah 1

1. Login ke Blogger, Klik Design :

2. Pada Elemen Halaman, klik Add Gadget di lokasi yang Anda ingin letak;
3. Pilih HTML/Javascript;

Langkah 2
Copy kode dibawah ini dan letakkan dalam kontent yang telah anda buka tadi.

<style>
/* ----- Image opacity effect 2 ----- */
.post a img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}

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

Selepas itu klik Save dan anda boleh lihat hasilnya..

Buat effect gambar pudar dengan opacity effect

2011-12-20T08:18:00.003+08:00

Image opacity effect ialah efek yang berlaku apabila cursor mouse diletakkan di atas sesuatu image yang terdapat pada bahagian post.

Tutorial ini membuatkan gambar menjadi pudar apabila cursor mouse diletakkan ke atas gambar.

Langkah 1

1. Login ke Blogger, Klik Design :

2. Pada Elemen Halaman, klik Add Gadget di lokasi yang Anda ingin letak;
3. Pilih HTML/Javascript;

Langkah 2
Copy kode dibawah ini dan letakkan dalam kontent yang telah anda buka tadi.

<style>
/* ----- Image opacity effect 1 ----- */
.post a img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}

.post a:hover img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
</style>

Selepas itu klik Save dan anda boleh lihat hasilnya..

Bagaimana untuk buang "Subscribe To: Posts(Atom)"

2011-12-20T07:45:00.003+08:00

Demo

Buang "Subscribe to: Posts(Atom)" Link dari Blogger. Anda boleh jumpa link ini di setiap post di bawah kotak komen.

- "Subscribe to: Post Comments(Atom)"
- "Subscribe to: Post (Atom)"

Bagaimana untuk buangkan?

1. Pergi ke Blogger Dashboard > Design tab > Edit HTML tab
2. Klik Expand Widget Templates
3. Selepas itu cari kode dibawah ini dan buangkanya.

<b:include name='feedLinks'/>

4. Selepas itu save template dan boleh lihat hasilnya.

Bagaimana untuk membuangkanya dengan CSS?

Cara lain untuk buang link tersebut dengan CSS
Anda perlu copy kode dibawah ini,dan pastekan sebelum kode ]]></b:skin>

.blog-feeds{display:none !important;}

Semoga berjaya :)

Tambah Popular post yang menarik dengan Zoom Effect

2011-12-19T20:00:00.004+08:00

Demo

Langkah 1

Anda perlu Tambah Popular Posts widget di tepi sidebar anda.
Sekarang anda perlu setting papular post widget seperti dibawah..
Bilangan display up anda boleh ubah mengikut kehendak anda.

Langkah 2

Log in ke dalam Blogger Account > Dashboard > Design > Edit HTML
Klik CTRL+F dan cari ]]></b:skin>
Selepas itu copy kode dibawah ini,dan pastekan selepasnya kode yang telah anda cari.

Floating Social Bookmarks dengan Mouseover

2011-12-19T07:46:00.003+08:00

Demo

Langkah 1

Copy kode dibawah ini.

Langkah 2

Cara Pemasangan.

1. Login ke Blogger, Klik Design :

2. Pada Elemen Halaman, klik Add Gadget di lokasi yang Anda ingin letak; 3. Pilih HTML/Javascript;

4. Copy paste code HTML diatas ke dalam Content yang telah tersedia;
5. Selepas itu klik Save dan lihat hasilnya.

Falling beautiful Heart

2011-12-19T06:30:00.002+08:00

Demo

Langkah 1
Pilih mana yang anda berkenan he3...

Falling Heart ani 1 :

Falling Heart ani 2 :

Falling hrt2b heart :

Falling red heart :

Falling orange heart :

Falling pink heart :

Falling blue heart :

Falling purple heart :

Falling yellow heart :

Falling objects-heart :

Langkah 2
Cara Pemasangan.
1. Login ke Blogger, Klik Design :

2. Pada Elemen Halaman, klik Add Gadget di lokasi yang Anda ingin letak;
3. Pilih HTML/Javascript;

4. Copy paste code HTML diatas ke dalam Content yang telah tersedia;
5.Selepas anda paste kode tersebut,Anda perlu letakkan kode tersebut tepat dibawah header.

Semoga Berjaya ^_^

Tutorial Cursor Diikuti Jam Dinding

2011-12-18T14:38:00.004+08:00

Demo

Langkah 1

Design > Edit html > Tick Expand Widget Templates > ctrl+f
Selepas itu cari ]]></b:skin>
selepas itu, copy code bawah nie dan paste di atas code kita cari tadi.

.cursor_jam1{
background:transparent;
position:absolute;
top:0px;
left:0px;
width:16px;
height:16px;
font-family:cursive;
font-size:16px;
text-align:center;
font-weight:bolder;
}
.cursor_jam2{
position:absolute;
top:0px;
left:0px;width:12px;
height:12px;
font-family:cursive;
font-weight:bolder;
font-size:10px;
text-align:center;
}

Langkah 2

Selepas itu anda perlu cari kode </body>
Masukkan kode dibawah ini,diatas kode yang anda cari tadi.

Membuat Efek Meteor Jatuh

2011-12-18T14:13:00.003+08:00

Demo

Langkah 1

1. Login ke Blogger, Klik Design :

2. Pada Elemen Halaman, klik Add Gadget di lokasi yang Anda ingin letak;
3. Pilih HTML/Javascript;

Langkah 2

Masukkan kode dibawah ini didalam kontent yang anda bukak tadi.

<script language="javascript">
nd_mode="meteor";
nd_sound="on";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_top";
</script>
<script language="javascript" src="https://sites.google.com/site/jeritanblog/javascript/meteorjaruh.js">
</script>

Selepas itu Klik Save dan boleh lihat hasilnya..
Good Luck ^_^

Membuat Status Facebook menjadi menarik

2011-12-18T13:52:00.000+08:00

Bagi pengguna FACEBOOK, pastinya sering update statuskan?? Kali ini punya saya ada sedikit trik supaya status menjadi menarik.

Ok anda boleh mencuba.

▂ ▃ ▅ ▆ █ Statusmu Disini █ ▆ ▅ ▃ ▂

★·.·´¯`·.·★[Statusmu Disini] ★·.·´¯`·.·★

..♩.¸¸♬´¯`♬.¸¸¤ Statusmu Disinio ¤¸¸.♬´¯`♬¸¸.♩..

¤♥¤Oº°‘¨☜♥☞¤[Statusmu Disini] ¤☜♥☞¨‘°ºO¤♥¤

♬ •♩ ·.·´¯`·.·♭•♪ Statusmu Disini e ♪ •♭·.·´¯`·.·♩ •♬

»——(¯` Statusmu Disini ´¯)——»

¸.·’★¸.·’★*·~-.¸-(★[Statusmu Disini] ★)-,.-~*¸.·’★¸.·’★

•(♥).•*´¨`*•♥•(★) Statusmu Disini (★)•♥•*´¨`*•.(♥)•

O.o°<*)>>>=[Statusmu Disini] =<<<(*>°o.O

<<..•.¸¸•´¯`•.¸¸¤Statusmu Disini ¤¸¸.•´¯`•¸¸.•..>>

◈◈今天◈(★)[Statusmu Disini] o (★)◈◈◈天

-漫~*’¨¯¨’*·舞~ Statusmu Disini o ~舞*’¨¯¨’*·~漫-

•☆.•*´¨`*••♥ Statusmu Disini ♥••*´¨`*•.☆•

•♥•♥•♥•♥ ☜[Statusmu Disini] ☞ ♥•♥•♥•♥•♥•

«-•·.·´¯`·.·•雪[Statusmu Disini] 雪•·.·´¯`·.·•-»

╰☆╮¤°.¸¸.·´¯`»® Statusmu Disinie ®«´¯`·.¸¸.°¤╰☆╮

♥ⓛⓞⓥⓔ♥☜ [Statusmu Disini] ☞♥ⓛⓞⓥⓔ♥

●☆● ☆● ☆● ☆● Statusmu Disini●☆● ☆● ☆● ☆●

◢♂◣◥♀◤[Statusmu Disini] ◢♂◣◥♀◤

๑۞๑,¸¸,ø¤º°`°๑۩ Statusmu Disini ۩๑ ,¸¸,ø¤º°`°๑۞๑

.•°¤*(¯`★´¯)*¤° [Statusmu Disini] °¤*(¯`★´¯)*¤°

..•.¸¸•´¯`•.¸¸.ஐ [Statusmu Disini] ஐ..•.¸¸•´¯`•.¸¸.

(¯`•.ゃ_ゃ.• Statusmu Disini •.ゃ_ゃ.•´¯)

¸.•♥•.¸¸.•♥• [Statusmu Disini] •♥•.¸¸.•♥•.¸

ஐ¤*¨¨*¤¨°o.O( Statusmu Disini )O.o°¤*¨¨*¤εïз

-~*’¨¯¨’*·~㊅[Statusmu Disini] ㊅~*’¨¯¨’*·~-

☆,.-~*’¨¯¨’*·~-.¸-(★ Statusmu Disini ★)-,.-~*’¨¯¨’*·~-.¸☆

☜♥☞ º°”˜`”°º☜( Statusmu Disini )☞ º°”˜`”°☜♥☞

(¯`’·.¸(♥)¸.·’´¯)[Statusmu Disini] (¯`’·.¸(♥)¸.·’´¯)

(¯`·._)♣ ♤ ♥♠(Statusmu Disini )♣ ♤ ♥♠(¯`·._)

((((¯♀’·.¸(★) Statusmu Disini (★)¸.·’♂ ´¯))))

<º))))><.•´¯`•.( Statusmu Disini )¸.•´¯`•.¸><((((º>

- -¤–^]([Statusmu Disini] )[^--¤- -

~²ººº~([Statusmu Disini] )~²ººº~

._|.<(+_+)>.|_.(Statusmu Disini )._|.<(+_+)>.|_.

• ••^v´¯`×)(Statusmu Disini )(×´¯`v^•• •

,.-~*’¨¯¨’*•~-.¸-(_( Statusmu Disini )_)-,.-~*’¨¯¨’*•~-.¸

- – –^[Statusmu Disini]^– – -

••.•´¯`•.••([Statusmu Disini] ) ••.•´¯`•.••

`•.¸¸.•´´¯`••._.•( Statusmu Disini )•.¸¸.•´´¯`••._.•

(¯`•._)([Statusmu Disini] )(¯`•._)

¯¨’*•~-.¸¸,.-~*’( Statusmu Disini )¯¨’*•~-.¸¸,.-~*’

(¯`•._.•[Statusmu Disini]•._.•´¯)

¨°o.O([Statusmu Disini] )O.o°

×÷•.•´¯`•)»( Statusmu Disini )«(•´¯`•.•÷×

Oº°‘¨([Statusmu Disini] )¨‘°ºO

×º°”˜`”°º×( [Statusmu Disini] )×º°”˜`”°º×

.•´¯`•->( Statusmu Disini )<-•´¯`•.
..|..<(+_([Statusmu Disini] )_+>..|..

-•=»‡«=•-([Statusmu Disini] )-•=»‡«=•-

•°o.O(Statusmu Disinis )O.o°•

––––•(-•([Statusmu Disini] )•-)•––––

(¯`•¸•´¯)(Statusmu Disini )(¯`•¸•´¯)

••¤(`×[¤([Statusmu Disini] )¤]×´)¤••

»-(¯`v´¯)-»( [Statusmu Disini] )»-(¯`v´¯)-»

°l||l°([Statusmu Disini] )°l||l°

•°¤*(¯`°(☺)(( Statusmu Disini ))(☺)°´¯)*¤°•

—¤÷(`[¤*([Statusmu Disini] )*¤]´)÷¤—

¸.´)(`•[Statusmu Disini]•´)(` .¸

•÷±‡±( Statusmu Disini )±‡±÷

+*¨^¨*+([Statusmu Disini] )+*¨^¨*+

—(••÷[( Statusmu Disini )]÷••)—

•ï¡÷¡ï•( Statusmu Disini )•ï¡÷¡ï•

•!¦[•(Statusmu Disinis )•]¦!•

°º¤ø,¸¸,ø¤º°`°º¤ø,¸( Statusmu Disini )°º¤ø,¸¸,ø¤º°`°º¤ø,¸

,-*’^’~*-.,_,.-*~ Statusmu Disini ~*-.,_,.-*~’^’*-,

.•¯(_.•¯(_.•¯(_[Statusmu Disini] )¯`•._)¯`•._)¯`•.

©º°°º©©º°°º© Statusmu Disini ©º°°º©©º°°º©

||¯|_|¯|_([Statusmu Disini] )_|¯|_|¯||

Facebook's Timeline sekarang tersedia untuk semua orang

2011-12-18T09:54:00.004+08:00

Klik sini untuk mencuba

Selepas itu anda perlu klik Get Timeline.

Sembunyi FB Fan Page di Blog dengan Smooth Jquery Hover Effect v2

2011-12-18T09:28:00.005+08:00

Demo

Langkah 1 ( Tambah Jquery JavaScript Plugin )

Design > Edit html > ctrl+f
Selepas itu cari </head>
Selepas itu, copy code bawah nie dan paste di atas code kita cari tadi.

Save dan lihat hasilnya.:)

Sembunyi FB Fan Page di Blog dengan Smooth Jquery Hover Effect

2011-12-18T07:09:00.014+08:00

Demo

Langkah 1 ( Tambah Jquery JavaScript Plugin )

Design > Edit html > ctrl+f
Selepas itu cari </head>
Selepas itu, copy code bawah nie dan paste di atas code kita cari tadi.

Save dan lihat hasilnya.:)

Meletakkan Button Follow dan Dashboard

2011-12-17T16:57:00.003+08:00

Demo

Langkah 1
Cara Pemasangan.
1. Login ke Blogger, Klik Design :

2. Pada Elemen Halaman, klik Add Gadget di lokasi yang Anda ingin letak;
3. Pilih HTML/Javascript;

4. Copy paste code HTML dibawah ini ke dalam Content yang telah tersedia;

Langkah 2
Edit kode.

<div style="position: fixed; top: 5px; right: 90px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=ID BLOG ANDA" target="_blank" rel="nofollow" title="Follow !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="http://3.bp.blogspot.com/-feYAFwQF-GM/TtOSBVXcMmI/AAAAAAAAHvk/GH1PZPVvU7c/follow.png" border="0" /></a><div style="display:scroll; position:fixed; top:5px; right:2px;"><a class="linkopacity" href="http://blogger.com/home" target="_blank" rel="nofollow" title="Dashboard !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-N61PPu_1haE/TtOSBZgZikI/AAAAAAAAHvc/vIEC_dYpIVo/dashboard.png" /></a></div>

Gantikan 'ID BLOG ANDA'

Bagaimana untuk cari ID Blog.?
Anda perlu klik pada 'new post' dari dashboard, dan akan ada paparan seperti gambar di bawah. Nombor yang admin highlight adalah contoh NO ID BLOG.

Setelah anda selesai letakkan ID blog anda, save dan lihat hasilnya..

Sebuah filem pendek yang menerangkan hudud secara umum

2011-12-17T12:24:00.001+08:00

Sebuah filem pendek yang menerangkan hudud secara umum. Filem pendek ini diterbitkan bertujuan untuk menjawab persoalan dan kekeliruan yang ditimbulkan dalam klip video 'Sembang Rakyat' .

Cara membuat Welcome Image

2011-12-17T06:56:00.005+08:00

Demo

Langkah 1 ( Cari Kode )

Design > Edit html > Tick Expand Widget Templates > ctrl+f
Selepas itu cari ]]></b:skin>

Langkah 1 ( Masukkan Kode )

3. selepas itu, copy code bawah nie dan paste di atas code kita 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>

Yang warna kuning tue letak URL image.
Selepas itu klik Save Templates.

Pilihlah gambar2 yang anda berminat.

http://i580.photobucket.com/albums/ss248/pija280195/freebieswelcomenotepurple.png

http://i580.photobucket.com/albums/ss248/pija280195/freebieswelcomenoteblue.png

http://i580.photobucket.com/albums/ss248/pija280195/freebieswelcomenotepink.png

credit: n u r h a f i z a h p i j a . b l o g s p o t . c o m

http://i1221.photobucket.com/albums/dd465/nurathirahcopyright/Freebies1.png

http://i1221.photobucket.com/albums/dd465/nurathirahcopyright/Freebies2.png

credit: p u s h e e n l o v e r . b l o g s p o t . c o m

Here got some more!

http://1.bp.blogspot.com/-Fa1_q0tU5qs/TlEJ1Fpu5-I/AAAAAAAACEU/s3INHZ3Zxt8/s1600/Welcome+Note+2.png

http://1.bp.blogspot.com/-Z3gRp6MUO14/TlEJ4aARMhI/AAAAAAAACEY/uzncquegczs/s1600/Welcome+Note+3.png

http://2.bp.blogspot.com/-hp0_TBA6zxE/TlEJ7yQ1VVI/AAAAAAAACEc/F4YFfMs3OFA/s1600/Welcome+Note+4.png

http://3.bp.blogspot.com/-yaqmVJaEams/TlEJ-EJALaI/AAAAAAAACEg/jM5TqpdTodQ/s1600/Welcome+Note+Pink.png

credit: w w w . f i z g r a p h i c . c o m

http://i.imgur.com/9qos6.png

http://i.imgur.com/77ESW.png

http://i.imgur.com/8iOw6.png

http://i.imgur.com/80cHf.png

http://i.imgur.com/cLWZ1.png

http://i.imgur.com/VC5pj.png

credit: w w w . l y s s a s e c r e t . c o m

Falling beautiful butterfly

2011-12-16T09:30:00.004+08:00

Langkah 1
Pilih mana yang anda berkenan he3...

Falling butterfly ani 1 :

Falling green butterfly :

Falling yellow butterfly :

Falling butterfly Orange 1 :

Falling butterfly Pink 1 :

Falling butterfly Blue 1 :

Falling butterfly Green 1 :

Langkah 2
Cara Pemasangan.
1. Login ke Blogger, Klik Design :

2. Pada Elemen Halaman, klik Add Gadget di lokasi yang Anda ingin letak;
3. Pilih HTML/Javascript;

4. Copy paste code HTML diatas ke dalam Content yang telah tersedia;
5.Selepas anda paste kode tersebut,Anda perlu letakkan kode tersebut tepat dibawah header.

Semoga Berjaya ^_^

Falling fire Stars

2011-12-15T09:44:00.001+08:00

Langkah 1
Copy kode dibawah ini.

<script type="text/javascript" src="https://sites.google.com/site/bdlab12/bdlab-blogspot-com/fireStars.txt" />
</script>

Langkah 2
Cara Pemasangan.
1. Login ke Blogger, Klik Design :

2. Pada Elemen Halaman, klik Add Gadget di lokasi yang Anda ingin letak;
3. Pilih HTML/Javascript;

4. Copy paste code HTML diatas ke dalam Content yang telah tersedia;
5.Selepas anda paste kode tersebut,Anda perlu letakkan kode tersebut tepat dibawah header.

Semoga Berjaya ^_^

Tambah Bintang berwarna-warni berguguran

2011-12-15T08:35:00.004+08:00

Langkah 1
Copy kode dibawah ini.

<marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:601px;top:7px;width:auto;height:653px;z-index:1;" scrollamount="2"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:720px;top:64px;width:auto;height:232px;z-index:1;" scrollamount="1"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:735px;top:50px;width:auto;height:321px;z-index:1;" scrollamount="1"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:608px;top:78px;width:auto;height:125px;z-index:1;" scrollamount="6"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:43px;top:62px;width:auto;height:10px;z-index:1;" scrollamount="1"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:539px;top:97px;width:auto;height:426px;z-index:1;" scrollamount=""><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:791px;top:45px;width:auto;height:178px;z-index:1;" scrollamount="3"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:278px;top:104px;width:auto;height:701px;z-index:1;" scrollamount="3"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:404px;top:69px;width:auto;height:211px;z-index:1;" scrollamount="2"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:331px;top:2px;width:auto;height:293px;z-index:1;" scrollamount="1"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:655px;top:89px;width:auto;height:399px;z-index:1;" scrollamount="7"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:813px;top:11px;width:auto;height:429px;z-index:1;" scrollamount="5"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:254px;top:109px;width:auto;height:146px;z-index:1;" scrollamount="7"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:616px;top:20px;width:auto;height:534px;z-index:1;" scrollamount=""><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:652px;top:42px;width:auto;height:410px;z-index:1;" scrollamount="1"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:707px;top:96px;width:auto;height:39px;z-index:1;" scrollamount=""><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:200px;top:76px;width:auto;height:137px;z-index:1;" scrollamount=""><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:309px;top:13px;width:auto;height:338px;z-index:1;" scrollamount="5"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:622px;top:107px;width:auto;height:676px;z-index:1;" scrollamount="5"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:149px;top:76px;width:auto;height:199px;z-index:1;" scrollamount="5"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:506px;top:77px;width:auto;height:344px;z-index:1;" scrollamount="5"><span class="falling1"><img src="http://www.barbspetpourri.highpowersites.com/i//ColoredStars.gif"/></span></marquee>

Langkah 2
Cara Pemasangan.
1. Login ke Blogger, Klik Design :

2. Pada Elemen Halaman, klik Add Gadget di lokasi yang Anda ingin letak;
3. Pilih HTML/Javascript;

4. Copy paste code HTML diatas ke dalam Content yang telah tersedia;
5.Selepas anda paste kode tersebut,Anda perlu letakkan kode tersebut tepat dibawah header.

Semoga Berjaya ^_^

Cara buat Icon Twitter Terbang pada blog

2011-12-13T10:41:00.005+08:00

Langkah 1

1. Login ke Blogger, Klik Design :

2. Pada Elemen Halaman, klik Add Gadget di lokasi yang Anda ingin letak;
3. Pilih HTML/Javascript;

Langkah 2

1. Copy & Paste kode di bawah dengan menggantikan teks Masuk Kode Disini dengan kode
Nuffnang sidebar anda.

<script type="text/javascript" src="https://sites.google.com/site/jeritanblog/javascript/Twitterkumpulancara.js"></script>

<script type="text/javascript">

var birdSprite="https://lh4.googleusercontent.com/_M1pYMGMUxt0/TaIJdOSR6lI/AAAAAAAAEeU/CaVfKzCIWwU/s800/twitterblack.png"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/nikzhafran";var tweetThisText = "Twitter - nikzhafran http://jeritanblog.com/";tripleflapInit();</script>

3. Akhir sekali, klik Save.

Keterangan

Warna Biru = Warna Twitter
Ganti http://twitter.com/nikzhafran dengan Twitter Anda
Ganti Twitter - nikzhafran dengan Nama Twiter Anda
Ganti http://jeritanblog.com Dengan Blog Anda

Jika Ingin Ganti Warna Burung anda perlu tukar link warna Biru Diatas Dengan Warna-Warna Pilihan Berikut ini :

twitter black
https://lh4.googleusercontent.com/_M1pYMGMUxt0/TaIJdOSR6lI/AAAAAAAAEeU/CaVfKzCIWwU/s800/twitterblack.png

twitter Yellow
https://lh6.googleusercontent.com/_M1pYMGMUxt0/TaIJ0kOdKNI/AAAAAAAAEec/RgmdHXp7NFs/s800/Twitteryellow.png

twitter white
https://lh5.googleusercontent.com/_M1pYMGMUxt0/TaIKQ76rirI/AAAAAAAAEek/kb9g0adXEYA/s800/twitterwhite.png

twitter red
https://lh4.googleusercontent.com/_M1pYMGMUxt0/TaIKlWlYSVI/AAAAAAAAEes/Vb5gU3RqJ0M/s800/twitterred.png

twitter Purple
https://lh6.googleusercontent.com/_M1pYMGMUxt0/TaIK4M7_HMI/AAAAAAAAEe0/NpWY6pOT-Bk/s800/Twitterpurple.png

twitter Green
https://lh3.googleusercontent.com/_M1pYMGMUxt0/TaILXUyXarI/AAAAAAAAEe8/CpHByPm4uGY/s800/twitterGreen.png

twitter Brown

https://lh4.googleusercontent.com/_M1pYMGMUxt0/TaILpKo91hI/AAAAAAAAEfE/zmN7rgbz8IE/s800/twitterbrown.png

twitter Blue
https://lh4.googleusercontent.com/_M1pYMGMUxt0/TaIMDpcPs0I/AAAAAAAAEfM/g3G5JU-zYSA/s800/TwitterBlue.png

JQuery MouseOver Social Bookmark Icons

2011-12-12T06:37:00.005+08:00

Demo

Langkah 1

Design > Edit html > Tick Expand Widget Templates > ctrl+f
Selepas itu cari </head>
Masukkan kode dibawah ini,diatas kode yang anda cari tadi.

Selepas itu cari <data:post.body/>
Masukkan kode dibawah ini,dibawah kode yang anda cari tadi.

<div id='jsb'>

<div class='jsbc'>
<a class='jsi' expr:href='"http://del.icio.us/post?url=" + data:blog.url + "&title=" + data:blog.title' target='_blank'><span>Delicious</span><img alt='Delicious' src='http://1.bp.blogspot.com/_4HKUHirY_2U/S02m0HiNKsI/AAAAAAAAAnU/O-RTAnMAqGQ/delicious_64x64.png'/></a>
<a class='jsi' expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><span>Twitter</span><img alt='Twitter' src='http://4.bp.blogspot.com/_4HKUHirY_2U/S02nP6xRVqI/AAAAAAAAAoE/BqP1WImIU80/twitter_64x64.png'/></a>
<a class='jsi' expr:href='"http://www.facebook.com/share.php?u=" + data:blog.url' target='_blank'><span>Facebook</span><img alt='Facebook' src='http://3.bp.blogspot.com/_4HKUHirY_2U/S02nDPGz8cI/AAAAAAAAAnk/yNOiIzWlszw/facebook_64x64.png'/></a>
<a class='jsi' expr:href='"http://digg.com/submit?phase=2&url=" + data:blog.url + "&title=" + data:blog.title' target='_blank'><span>Digg</span><img alt='Digg' src='http://1.bp.blogspot.com/_4HKUHirY_2U/S02m66pe0wI/AAAAAAAAAnc/i_SxHpSLgyk/digg_64x64.png'/></a>
<a class='jsi' expr:href='"http://www.stumbleupon.com/submit?url=" + data:blog.url + "&title=" + data:blog.title' target='_blank'><span>Stumbleupon</span><img alt='StumbleUpon' src='http://2.bp.blogspot.com/_4HKUHirY_2U/S02nIwF3_9I/AAAAAAAAAn0/io-qL1cQ5y4/stumbleupon_64x64.png'/></a>
<a class='jsi' expr:href='"http://technorati.com/faves?add=" + data:blog.url' target='_blank'><span>Technorati</span><img alt='Technorati' src='http://3.bp.blogspot.com/_4HKUHirY_2U/S02nL60gt2I/AAAAAAAAAn8/q_Ez6laEWlA/technorati_64x64.png'/></a>
<a class='jsi' expr:href='data:blog.homepageUrl + "feeds/posts/default"' target='_blank'><span>RSS</span><img alt='RSS' src='http://1.bp.blogspot.com/_4HKUHirY_2U/S02nF5OyGVI/AAAAAAAAAns/qkYY6nHB5o8/rss_64x64.png'/></a>
</div>
</div>
<script type='text/javascript'>
jQuery(document).ready(
function()
{
jQuery('#jsb').Fisheye(
{
maxWidth: 48,
items: 'a',
itemsText: 'span',
container: '.jsbc',
itemWidth: 64,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);
</script>

Selepas itu anda perlu klik Save Template
Sekarang anda boleh lihat hasilnya.

Tambah JQuery Fade Effect

2011-12-11T12:39:00.005+08:00

Demo

Tutorial ini memang menarik,apabila anda arah tetikus anda ke gambar tersebut nanti dia jadi macam ada putih sikit.

Langkah 1 (Cari kode)

Design > Edit html > ctrl+f
Selepas itu cari </head>

Langkah 2 (Masukkan kode)

Masukkan kode dibawah ini,diatas kode yang anda cari tadi.

Selepas itu anda perlu klik Save Template
Sekarang anda boleh lihat hasilnya.

Tambah Button Twitter Follower Counter

2011-12-11T11:46:00.005+08:00

Untuk menunjukkan berapa ramai orang yang follow twitter anda.

Langkah 1

1. Login ke Blogger, Klik Design :

2. Pada Elemen Halaman, klik Add Gadget di lokasi yang Anda ingin letak;
3. Pilih HTML/Javascript;

Langkah 2

Anda perlu pilih yang mana anda ingin dan copy&paste pada kotak HTML tadi..

1.Big Twitter followers counter button:

Perfect Share Box Untuk Blogger

2011-12-09T17:00:00.004+08:00

Demo

Langkah 1 (Cari kode)

Design > Edit html > Tick Expand Widget Templates > ctrl+f
Selepas itu cari <div class='post-header-line-1'/>
Kalau tidak jumpa cari kode <data:post.body/>

Langkah 2 (Masukkan kode)

Masukkan kode dibawah ini,dibawah kode yang anda cari tadi.

<b:if cond='data:blog.pageType == "item"'>

<style type='text/css'>
.multisharebox {
background: none repeat scroll 0 0 #EFEFEF;
float: right;
margin: 5px 0px 3px 10px;
padding: 0 5px 0;
text-shadow: 0 1px 0 #FFFFFF;
width: 260px;
border:4px solid #d8dfea;
}
.fb-like-boxtop {
background: none repeat scroll 0 0 #EDEFF4;
border: 1px solid #D8DFEA;
color: #000000;
float: right;
font-size: 11px;
margin: 0 0;
padding: 5px 10px;
text-align: left;
width: 230px;
}
.fb-like-boxtop a {
color: #000000;
text-decoration:none;
}
.fb-like-boxtop a:hover {
color: #000000;
text-decoration:underline;
}
.fb-like-box {
background: none repeat scroll 0 0 #EDEFF4;
border: 1px solid #D8DFEA;
color: #000000;
float: right;
font-size: 11px;
height: 60px;
margin: 5px 0;
overflow: hidden;
padding: 5px 10px;
text-align: left;
width: 230px;
}
</style>


<div class='multisharebox'>
<table><tr>
<td><table><tr>
<td><a class='twitter-share-button' data-count='vertical' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/>
<b:if cond='data:post.isFirstPost'>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'>
</script>
</b:if></td>
<td><script expr:src='"http://www.stumbleupon.com/hostedbadge.php?s=5&r=" + data:post.url'/></td>
<td><a class='google-buzz-button' data-button-style='normal-count' data-locale='en_IN' expr:data-url='data:post.url' href='http://www.google.com/buzz/post' rel='nofollow' title='Post on Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></td>
<td><a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></td>
</tr></table></td>
</tr><tr>
<td><div class='fb-like-boxtop'><a expr:href='data:post.sharePostUrl + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'>BlogThis!</a> | <a expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'>Email This!</a> | <a href='javascript:window.print();'>Print This!</a> | <b:if cond='data:post.allowComments'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 0'>No comments</b:if><b:if cond='data:post.numComments == 1'>1 comment</b:if><b:if cond='data:post.numComments >= 2'><data:post.numComments/> comments</b:if></a></b:if></div></td>
</tr><tr>
<td><div class='fb-like-box'>
Do you like this post?
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=230&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:230px; height:40px;'/>
</div></td>
</tr></table>
</div>


</b:if>

Selepas itu anda perlu klik Save Template
Sekarang anda boleh lihat hasilnya.

Beautiful Drop-Down Menu untuk Blogger

2011-12-09T11:20:00.005+08:00

Sebelum anda melakukan toturial dibawah ini saya menasihatkan supaya anda perlu Backup tempaltes blogger dengan mendownloadkanya.

Langkah 1 (tambah The Menu CSS)

Sign In di blogger,
Dan Klik Dashboard >> Design >> Edit Html >
Dan anda perlu mencari kode dibawah ini,

]]></b:skin>

Manakala kode dibawah ini anda letak diatas kode yang anda cari tadi.

#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}

#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}

#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}

#jsddm li a:hover {
background: #C8C8C8;
}

#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}

#jsddm li ul li {
float: none;
display: inline;
}

#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}

#jsddm li ul li a:hover {
background: #A3CEE5;
}

Langkah 2 (Tambah Java kode)

Anda perlu cari kode dibawah ini di page yang sama.

</head>

Setelah itu anda perlu letakkan kode dibawah ini diatas kode yang anda cari tadi.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[

var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}

$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open)
$('#jsddm > li').bind('mouseout', jsddm_timer)});

document.onclick = jsddm_close;
//]]>
</script>

Selepas itu anda perlu klik Save Template

Langkah 3 (Tambah Drop-Down Menu di Blog anda )

Selepas itu anda perlu pergi Dashboard >> Design >>
DAn didalam page elements page, Klik pada Add A Gadget ,
dan pilih ” HTML / JavaScript ” , Biarkan tajuk itu kosong dan letakkan kode didalam kotaknya.

<ul id="jsddm">
<li><a href="#">Home</a>
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Drop 1-1</a></li>
<li><a href="#">Drop 1-2</a></li>
<li><a href="#">Drop 1-3</a></li>
</ul>
</li>

<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Drop 2-1</a></li>
<li><a href="#">Drop 2-2</a></li>
</ul>
</li>

<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Drop 3-1</a></li>
<li><a href="#">Drop 3-2</a></li>
<li><a href="#">Drop 3-3</a></li>
<li><a href="#">Drop 3-4</a></li>
</ul>
</li>

<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">JeritanBlog</a></li>
</li></ul>

Selepas itu klik Save

Apa yang penting ialah anda perlu ambik kode yang telah anda masukkan tadi dan letakkan dibawah heardear andadan selapas itu klik Save sekali lagi,

Sekarang anda boleh lihat hasilnya.

Nota : Dalam Langkah 3, anda perlu tukar menu titles dan tukar semua # dengan menu url yang betul

Bagaimana Untuk Pelawat blog untuk melanggan?

2011-12-06T07:39:00.004+08:00

Langkah - Langkah

Go To Blogger > Design
Select HTML/JavaScript gadget
Masukkan Kode dibawah ini didalam kotak tadi.

.mbt a{
color: #6e6e6e;
font: bold 12px Helvetica, Arial, sans-serif;
text-decoration: none;
padding: 7px 12px;
position: relative;
display: inline-block;
text-shadow: 0 1px 0 #fff;
-webkit-transition: border-color .218s;
-moz-transition: border .218s;
-o-transition: border-color .218s;
transition: border-color .218s;
background: #f3f3f3;
background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
border: solid 1px #dcdcdc;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
.mbt a:hover {
color: #333;
border-color: #999;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.mbt a:active {
color: #000;
border-color: #444;
}

.mbtbar{ width:280px; float: left; margin-left:3px; margin-top:5px; padding:0;}

.mbtbar .emailsub{border-bottom: 0px solid #e6e6e6; padding: 0px 0 15px 0; float: left; width: 100%; font-family: Helvetica, Arial;}

.mbtbar .emailsub .emailupdatesform{width: 100%; float: right; padding:0px;}

.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3; float: left; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 14px; width: 130px; height:30px; border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;}

.mbtbar .emailsub .emailupdatesform input.emailupdatesinput:hover{

border-color: #999;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.mbtbar .emailsub .emailupdatesform input.joinemailupdates:hover{ border-color: #666;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); cursor:pointer;
}

.mbtbar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #dcdcdc;
background: #F3F3F3;
font-family:Helvetica, Arial;
text-transform: none; color: #989898; height: 25px; padding: 0 10px; margin: 0 0 0 5px; font-weight:bold; font-size:14px; height:30px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}

.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3; float: left; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 14px; width: 145px; height:28px; border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;}

.mbtbar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #dcdcdc;
background: #F3F3F3;
font-family:Helvetica, Arial;
text-transform: none; color: #989898; height: 25px; padding: 0 0px; margin: 0 0 0 5px; font-weight:bold; font-size:14px; height:30px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}

</style>

<!--[if IE 8]> <style>
.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3; float: left; border: 1px solid #dcdcdc; padding: 5px 10px; color: #989898; font-size: 12px; width: 130px; height:18px; border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;}

.mbtbar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #dcdcdc;
background: #F3F3F3;
font-family:Helvetica, Arial;
text-transform: none; color: #989898; height: 25px; padding: 0 5px; margin: 0 0 0 5px; font-weight:bold; font-size:14px; height:30px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}

</style> <![endif]-->

<td>

</tr></tbody></table>
<div class="mbtbar">
<div class="emailsub">
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=jeritanblog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Submit email..." onblur="if (this.value == '') {this.value = 'Submit email...';}" onfocus="if (this.value == 'Submit email...') {this.value = '';}" type="text" /><input value="jeritanblog" name="uri" type="hidden" /><input value="Subscribe" class="joinemailupdates" type="submit" /></form></div></div></div></div>

</div>

Penukaran

tukar ADD-FEEDBURNER-LINK-HERE dengan Feedburner link anda seperti ini : http://feeds.feedburner.com/TntByStc
Tukar dua lagi bolded texts dengan Facebook and Twitter links anda.
Tukar jeritanblog dengan Feedburner RSS Email Title diakhir FEED Email Link seperti ditujukkan dibawah,

http://feedburner.google.com/fb/a/mailverify?uri=jeritanblog

4. Anda boleh simpan dan lihat hasilnya.

Tambah Social Bookmarking Buttons Widget

2011-12-05T08:31:00.002+08:00

Langkah 1

Design > Edit html > Tick Expand Widget Templates > ctrl+f

Langkah 2

Selepas itu cari <data:post.body/>

Langkah 3

Masukkan kode dibawah ini,dibawah kode yang anda cari tadi.

<div align='left'>
<span class='post-icons'>


<p align='left'>
<img alt='' border='0' id='BLOGGER_PHOTO_ID_5441163760466269298' src='http://3.bp.blogspot.com/_JwD5r652h00/S4LlnJNSFHI/AAAAAAAAAU8/b0CwEmD94jg/s400/share-this.png'/></p>


<a expr:href='"http://www.stumbleupon.com/refer.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Stumble This'><img alt='Stumble This' border='0' class='icon-action' src='http://2.bp.blogspot.com/_vLeiVavkV_M/SnleiulEMVI/AAAAAAAABeU/kO09nNTlQeo/s200/stumbleupon.png'/></a>



<a expr:href='"http://www.technorati.com/faves?add=" + data:post.url' target='_blank' title='Fav This With Technorati'><img alt='Fav This With Technorati' border='0' class='icon-action' src='http://1.bp.blogspot.com/_vLeiVavkV_M/SnlenauwzjI/AAAAAAAABec/btszO5xBOgg/s200/technorati.png'/></a>




<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Add To Del.icio.us'><img alt='Add To Del.icio.us' border='0' class='icon-action' src='http://2.bp.blogspot.com/_vLeiVavkV_M/Snld35mPSDI/AAAAAAAABds/ccrOpOmP9Zk/s200/delicious.png'/></a>




<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Digg This'><img alt='Digg This' border='0' class='icon-action' src='http://3.bp.blogspot.com/_vLeiVavkV_M/Snld_x-wXoI/AAAAAAAABd0/cTsGU_Y-zQ8/s200/digg.png'/></a>




<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Add To Reddit'><img alt='Add To Reddit' border='0' class='icon-action' src='http://3.bp.blogspot.com/_vLeiVavkV_M/SnleX1tMMtI/AAAAAAAABeM/gQSYdrmSc3k/s200/reddit.png'/></a>




<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Add To Facebook'><img alt='Add To Facebook' border='0' class='icon-action' src='http://3.bp.blogspot.com/_vLeiVavkV_M/SnleIlLdGwI/AAAAAAAABd8/RfHnWIGGMEY/s200/facebook.png'/></a>




<a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Add To Yahoo'><img alt='Add To Yahoo' border='0' class='icon-action' src='http://1.bp.blogspot.com/_vLeiVavkV_M/SnlexsGX2QI/AAAAAAAABes/ai6zvzZKCgw/s200/yahoo.png'/></a>



<script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&login=tweettrackjs&apiKey=R_7e9987b2fd13d7e4e881f9cbb168f523' type='text/javascript'/>

<script charset='utf-8' src='http://s.bit.ly/TweetAndTrack.js?v=1.01' type='text/javascript'/>
<a expr:onclick='"return TweetAndTrack.open(this, \"" + data:post.url + "\");"' href='#'>
<span style='display:none;'>I'm reading: <data:post.title/></span><img alt='Add To Yahoo' border='0' class='icon-action' src='http://www.cbc.ca/news/yourvoice/assets/images/yourvoice-twitter.png'/></a>



</span>
</div>

Langkah 4

Klik save dan anda boleh lihat hasilnya

Ciri-ciri yang luar biasa Blogger Baru Dalam tahun 2011

2011-12-05T08:13:00.003+08:00

Terdapat banyak yang terbaru, tetapi google Hayan memberitahu 4 yang terbaru.

New Generation Interface.
New User Dashboard.
New Posts Editor.
New Content Discovery Feature.

Ini adalah berita tebaru dan blogger mempunya teknologi terkini,semakin cepat dan senang.

Ciri-ciri terbaru dalam gambar.

The New Blogger Interface

The New Blogger Dashboard

The New Blogger Posts Editor

The New Content Discovery Feature

5 Info terkini Paling Penting Blogger yang telah dikemaskini

2011-12-05T08:00:00.003+08:00

Saya begitu teruja untuk menulis post ini kerana kami terlepas beberapa update penting bahawa pasukan blogger mengemaskini blogger, dan saya tidak boleh hanya terus posting tutorial tanpa posting beberapa perkara tentang ini update blogger yang menakjubkan dan berita, menarik juga, jadi kita lihat apa yang blogger telah kemas kinikan yang paling penting

1. Blog’s Stats Gadgets.

2. Blog Feeds Control.

3. Web Fonts To Templates Designer.

4. Official Blogger Android App.

5. More Supported Languages.

Tambah Facebook send button + Like button

2011-12-05T07:48:00.002+08:00

Langkah 1

Design > Edit html > Tick Expand Widget Templates > ctrl+f

Langkah 2

Selepas itu cari <div class='post-footer'>

Langkah 3

Masukkan kode dibawah ini,dibawah kode yang anda cari tadi.


<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/><fb:like colorscheme='light' action='like' layout='standard' expr:href='data:post.url' font='' send='true' show_faces='false' width='450'/>


Langkah 4

Klik save dan anda boleh lihat hasilnya

Tambah Facebook send button

2011-12-05T07:07:00.003+08:00

Langkah 1

Design > Edit html > Tick Expand Widget Templates > ctrl+f

Langkah 2

Selepas itu cari <div class='post-footer'>

Langkah 3

Masukkan kode dibawah ini,dibawah kode yang anda cari tadi.


<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:send colorscheme='light' expr:href='data:post.url' font='arial'/>


Langkah 4

Klik save dan anda boleh lihat hasilnya

Catatan Post Popular Widget dengan Thumbnails

2011-11-26T16:14:00.003+08:00

1. Login Blogger > Design > Page Elements
2. Klik "Add a Gadget"
3. Klik Popular Posts Widget

4. Anda perlu settings seperti dibawah ini,

5. Klik save dan anda berjaya !