cara pasang animated label cloud di blogspot

Untuk memasang label cloud animasi pada sidebar seperti yang boleh anda lihat pada gambar yang di tunjukkan di atas, anda hanya perlu ikut beberapa langkah yang di tunjukkan di bawah.

p/s: Save script template anda terlebih dahulu.

Langkah 1

Log in blog => Dashboard => Layout => Edit HTML. Seterusnya, tick pada kotak Expand Widget Templates.

Langkah 2

Dengan menggunakan keyboard, taip atau paste kod <b:section class='sidebar' id='sidebar' preferred='yes'> pada ruang Find. Seterusnya, tekan kekunci Enter.

Langkah 3

Salin kod berwarna biru di bawah dan paste selepas atau di bawah kod <b:section class='sidebar' id='sidebar' preferred='yes'> (rujuk langkah 2)

<b:widget id='Label99' locked='false' title='Labels' type='Label'>

<b:includable id='main'>

<b:if cond='data:title'>

<h2><data:title/></h2>

</b:if>

<div class='widget-content'>

<center>

&lt;object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" &gt;

&lt;param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" /&gt;

&lt;param name="bgcolor" value="#ffffff" /&gt;

&lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;

<b:loop values='data:labels' var='label'>

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>

</b:loop>

&lt;/tags&gt;" /&gt;

</center>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

Akhir sekali klik Preview dan jika tiada mesej Error yang terpapar, klik saja Save.

Cara pasang Auto hide link box

Widget auto hide link box seperti yang boleh anda lihat pada side bar ini(sila klik) adalah kotak link yang akan di view secara auto apabila kursor mouse di letakkan atas teks Links. Kotak tersebut memaparkan link-link mengikut kategori yang di masukkan secara manual.

Auto hide link box ini dapat menjimatkan ruang pada sidebar blog.

Untuk memasang widget link box ini, sila ikut beberapa langkah di bawah.

p/s: Sila Save script template terlebih dahulu.

Langkah 1

Log in blog => Dashboard => Layout => Edit HTML.

Langkah 2

Dengan menggunakan keyboard, tekan kekunci Ctrl + F dan taip atau paste kod </head> di ruang Find. Seterusnya tekan kekunci Enter.


Langkah 3

Salin kod berwarna biru di bawah dan paste, sebelum atau di atas kod </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="http://sites.google.com/site/defaultjssite/linkbox.css"/>

<script type="text/javascript" src="http://sites.google.com/site/defaultjssite/linkbox.js">

/*

*/

</script>

<script type="text/javascript">

//jkmegamenu.definemenu("anchorid", "menuid", "mouseover|click")

jkmegamenu.definemenu("megaanchor", "megamenu1", "mouseover")

</script>

Seterusnya klik Preview dan jika tiada mesej Error yang terpapar, klik Save.

Langkah 4

Salin dan paste kod merah di bawah pada notepad. Seterusnya, edit kod yang di bold dengan teks dan URL pilihan anda.

<a id="megaanchor">Links</a>

<div id="megamenu1" class="megamenu">

<div class="column">

<h3>Tajuk 1</h3>

<ul>

<li><a href="masukkan url di sini">Link 1</a></li>

<li><a href="masukkan url di sini">Link 2</a></li>

<li><a href="masukkan url di sini">Link 3</a></li>

<li><a href="masukkan url di sini">Link 4</a></li>

<li><a href="masukkan url di sini">Link 5</a></li>

</ul>

</div>

<div class="column">

<h3>Tajuk 2</h3>

<ul>

<li><a href="masukkan url di sini">Link 1</a></li>

<li><a href="masukkan url di sini">Link 2</a></li>

<li><a href="masukkan url di sini">Link 3</a></li>

<li><a href="masukkan url di sini">Link 4</a></li>

<li><a href="masukkan url di sini">Link 5</a></li>

</ul>

</div>

<div class="column">

<h3>Tajuk 3</h3>

<ul>

<li><a href="masukkan url di sini">Link 1</a></li>

<li><a href="masukkan url di sini">Link 2</a></li>

<li><a href="masukkan url di sini">Link 3</a></li>

<li><a href="masukkan url di sini">Link 4</a></li>

<li><a href="masukkan url di sini">Link 5</a></li>

</ul>

</div>

</div>

Langkah 5

Klik pada Dashboard => Layout. Seterusnya, klik pada Add A Gadget.

Langkah 6

Salin kod yang telah siap di edit (rujuk langkah 4) dan paste pada ruang Content Add A Gadget.

Akhir sekali, klik Save.

Cara pasang widget Related Posts di blogspot

Widget Related post atau entri berkaitan seperti yang boleh anda lihat pada setiap post di blog ini, adalah widget yang menyenaraikan entri atau artikel yang berkaitan mengikut kategori atau label entri atau artikel tersebut.

Untuk memasang widget Related post atau entri berkaitan, anda hanya perlu ikut beberapa langkah yang mudah di bawah.

p/s: Sila save script template sebagai backup.

Langkah 1

Log in blog => Dashboard => Layout => Edit HTML. Seterusnya tick pada kotak Expand Widget Templates.

Langkah 2

Dengan menggunakan keyboard, tekan kekunci Ctrl + F. Seterusnya, taip atau paste kod </head> pada ruang Find dan tekan kekunci Enter.

Langkah 3

Salin kod berwarna biru di bawah dan paste di atas atau sebelum kod </head> (rujuk langkah 2)

p/s: Anda boleh menukar teks Entri berkaitan yang di bold kepada teks pilihan anda.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style>

#related-posts {

float:center;

text-transform:none;

height:100%;

min-height:100%;

padding-top:5px;

padding-left:5px;

}

#related-posts .widget{

padding-left:6px;

margin-bottom:10px;

}

#related-posts .widget h2, #related-posts h2{

font-size: 1.6em;

font-weight: bold;

color: black;

font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;

}

#related-posts a{

color:blue;

}

#related-posts a:hover{

color:blue;

}

#related-posts ul{

list-style-type:none;

margin:0 0 0px 0;

padding:0px;

text-decoration:bold;

font-size:15px;

text-color:#000000

}

#related-posts ul li{

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzqnLQRx1PTLwJbzthGNLj1azPwAcfgbG0JrYTJ3L8Un_8F397xORqtmFFGuC83_YYwpP4OfWAmsUZWfbl-PYx06hKC-_2Tby1Ip6LmNeAlh1ETXGhdnZ_0b0tiTy-hTsqx0IBYFX5K6Q/s200/greentickbullet.png) no-repeat ;

display:block;

list-style-type:none;

margin-bottom: 13px;

padding-left: 30px;

padding-top:0px;}

</style>

<script type='text/javascript'>

var relatedpoststitle="Entri berkaitan";

</script>

<script src='http://blogergadgets.googlecode.com/files/related.js' type='text/javascript'/>

</b:if>

Langkah 4

Dengan menggunakan keyboard, tekan Ctrl+F. Kemudian, taip atau paste kod <data:post.body/> . Seterusnya tekan Enter.

Langkah 5

Salin kod berwarna merah di bawah dan paste di bawah atau selepas kod <data:post.body/> . (rujuk langkah 4)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=15&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

Akhir sekali klik Preview dan jika tiada mesej Error yang terpapar, klik saja Save

Cara pasang widget Display time of last visit pada blogspot

Untuk memasang widget Display time of last visit pada sidebar yang memaparkan bilangan kunjungan visitor pada sesebuah blog seperti yang boleh anda lihat pada gambar di atas, hanya ikut beberapa langkah yang mudah di bawah.


Langkah 1

Log in blog => Dashboard => Layout => Add A Gadget. Seterusnya, klik pada HTML/Javascript.

Langkah 2

Salin kod biru di bawah dan pastekan pada Content HTML/Javascript (Rujuk langkah 1)

p/s: Anda boleh edit kod biru yang di bold kepada teks pilihan anda sendiri.

<script type = "text/javascript">

//

var days = 730; // days until cookie expires = 2 years.

var lastvisit=new Object();

var firstvisitmsg="This is your first visit to this page. Welcome!";

lastvisit.subsequentvisitmsg="Welcome back visitor! Your last visit was on <b>[displaydate]</b>";

lastvisit.getCookie=function(Name){

var re=new RegExp(Name+"=[^;]+", "i");

if (document.cookie.match(re))

return document.cookie.match(re)[0].split("=")[1];

return'';

}

lastvisit.setCookie=function(name, value, days){

var expireDate = new Date();

var expstring=expireDate.setDate(expireDate.getDate()+parseInt(days));

document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";

}

lastvisit.showmessage = function() {

var wh = new Date();

if (lastvisit.getCookie("visitc") == "") {

lastvisit.setCookie("visitc", wh, days);

document.write(firstvisitmsg);

}

else {

var lv = lastvisit.getCookie("visitc");

var lvp = Date.parse(lv);

var now = new Date();

now.setTime(lvp);

var day = new Array("Sun", "Mon", "Tues", "Wed", "Thur", "Fri", "Sat");

var month = new Array ("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");

var dd = now.getDate();

var dy = now.getDay();

dy = day[dy];

var mn = now.getMonth();

mn = month[mn];

yy = now.getFullYear();

var hh = now.getHours();

var ampm = "AM";

if (hh >= 12) {ampm = "PM"}

if (hh >12){hh = hh - 12};

if (hh == 0) {hh = 12}

if (hh < 10) {hh = "0" + hh};

var mins = now.getMinutes();

if (mins < 10) {mins = "0"+ mins}

var secs = now.getSeconds();

if (secs < 10) {secs = "0" + secs}

var dispDate = dy + ", " + mn + " " + dd + ", " + yy + " " + hh + ":" + mins + ":" + secs + " " + ampm

document.write(lastvisit.subsequentvisitmsg.replace("\[displaydate\]", dispDate))

}

lastvisit.setCookie("visitc", wh, days);

}

lastvisit.showmessage();

</script>

Akhir sekali, klik Preview dan jika tiada mesej Error terpapar, klik saja Save.

Free flash widget (float) version 2

Untuk memasang widget float ini, sila ikut beberapa langkah di abwah:

Langkah 1

Log in blog => Dashboard => Layout => Add A Gadget. Seterusnya klik pada HTML/Javascript.

Langkah 2

Salin kod biru bagi widget yang ingin di pasang, dan pastekan pada Content HTML/Javascript

Akhir sekali, klik Save.

<div style="position: fixed; bottom: 0px; left: 2px;">

<embed src="http://www.swfcabin.com/swf-files/1261123585.swf"

quality="high"

type="application/x-shockwave-flash"

WMODE="transparent"

width="120"

height="190"

pluginspage="http://www.macromedia.com/go/getflashplayer" />

</embed>

</div>

<div style="position: fixed; bottom: 0px; left: 2px;">

<embed src="http://www.swfcabin.com/swf-files/1261123653.swf"

quality="high"

type="application/x-shockwave-flash"

WMODE="transparent"

width="120"

height="190"

pluginspage="http://www.macromedia.com/go/getflashplayer" />

</embed>

</div>

<div style="position: fixed; bottom: 0px; left: 2px;">

<embed src="http://www.swfcabin.com/swf-files/1261136099.swf"

quality="high"

type="application/x-shockwave-flash"

WMODE="transparent"

width="120"

height="190"

pluginspage="http://www.macromedia.com/go/getflashplayer" />

</embed>

</div>

<div style="position: fixed; bottom: 0px; left: 2px;">

<embed src="http://www.swfcabin.com/swf-files/1261123758.swf"

quality="high"

type="application/x-shockwave-flash"

WMODE="transparent"

width="120"

height="190"

pluginspage="http://www.macromedia.com/go/getflashplayer" />

</embed>

</div>

<div style="position: fixed; bottom: 0px; left: 2px;">

<embed src="http://www.swfcabin.com/swf-files/1261123809.swf"

quality="high"

type="application/x-shockwave-flash"

WMODE="transparent"

width="120"

height="190"

pluginspage="http://www.macromedia.com/go/getflashplayer" />

</embed>

</div>

Free flash widget (float).

Oleh kerana gua tengah bosan dan tengah malas nak tulis pasal tutorial, maka gua beralih angin sekejap dengan membina widget flash yang biasanya di pasang pada footer sebelah kiri atau kanan blog. Heh.

Memang nampak macam tak berapa menarik (jangan gelak), tapi kalau ada yang berminat juga, bolehlah di pasang pada blog anda sendiri. Widget flash ni, gua tak pasang backlink pun. Kalau di klik pada widget tu, memang tak akan di link ke mana-mana. Tetap statik.

Siapa yang berminat, bolehlah ikut langkah di bawah.


Langkah 1

Log in blog => Dashboard => Layout => Add A Gadget. Seterusnya klik pada HTML/Javascript.

Langkah 2

Salin kod biru bagi widget yang ingin di pasang, dan pastekan pada Content HTML/Javascript

Akhir sekali, klik Save.

<div style="position: fixed; bottom: 0px; left: 2px;">

<embed src="http://www.swfcabin.com/swf-files/1260985254.swf"

quality="high"

type="application/x-shockwave-flash"

WMODE="transparent"

width="120"

height="190"

pluginspage="http://www.macromedia.com/go/getflashplayer" />

</embed>

</div>

<div style="position: fixed; bottom: 0px; left: 2px;">

<embed src="http://www.swfcabin.com/swf-files/1260985383.swf"

quality="high"

type="application/x-shockwave-flash"

WMODE="transparent"

width="120"

height="190"

pluginspage="http://www.macromedia.com/go/getflashplayer" />

</embed>

</div>

<div style="position: fixed; bottom: 0px; left: 2px;">

<embed src="http://www.swfcabin.com/swf-files/1260985455.swf"

quality="high"

type="application/x-shockwave-flash"

WMODE="transparent"

width="120"

height="190"

pluginspage="http://www.macromedia.com/go/getflashplayer" />

</embed>

</div>

<div style="position: fixed; bottom: 0px; left: 2px;">

<embed src="http://www.swfcabin.com/swf-files/1260985531.swf"

quality="high"

type="application/x-shockwave-flash"

WMODE="transparent"

width="120"

height="190"

pluginspage="http://www.macromedia.com/go/getflashplayer" />

</embed>

</div>

<div style="position: fixed; bottom: 0px; left: 2px;">

<embed src="http://www.swfcabin.com/swf-files/1260985603.swf"

quality="high"

type="application/x-shockwave-flash"

WMODE="transparent"

width="120"

height="190"

pluginspage="http://www.macromedia.com/go/getflashplayer" />

</embed>

</div>

<div style="position: fixed; bottom: 0px; left: 2px;">

<embed src="http://www.swfcabin.com/swf-files/1260985671.swf"

quality="high"

type="application/x-shockwave-flash"

WMODE="transparent"

width="120"

height="190"

pluginspage="http://www.macromedia.com/go/getflashplayer" />

</embed>

</div>

Memasang status online dan offline Yahoo Messenger !

Pada anda yang masih belum tahu bagaimana untuk memasang widget status online offline Yahoo Messenger, anda bolehlah mencubanya dengan mengikut beberapa langkah di bawah.

Langkah 1

Salin kod dibawah dan paste terlebih dahulu pada notepad. Seterusnya edit pada kedua-dua perkataan nescafeaissatu yang di boldkan dengan ID Yahoo Messenger anda. Anda boleh memilih ikon status yang tersenarai dibawah dengan menggantikan angka 2 yang di bold kepada angka ikon pilihan.

Kod:

<a href="http://messenger.yahoo.com/edit/send/?.target=nescafeaissatu">
<img src="http://opi.yahoo.com/yahooonline/u=nescafeaissatu/m=g/t=2/l=us/opi.jpg" border="0" alt="Status YM" /></a>

Ikon:






1



2



3



4



5


6



7



8



9



10



11



12



13



14


15


Langkah 2

Log in blog => Dashboard => Layout => Add A Gadget. Klik pada HTML/Javascript. Salin kod yang telah siap di edit (rujuk langkah 1) dan paste pada ruang content HTML/Javascript.

Akhir sekali, klik save.

 Anda juga boleh mendapatkannya di site Ymgen.com

Membina costum search bar pada blog

Untuk membina search bar secara kostum seperti yang bolah anda lihat di atas, hanya ikut beberapa langkah di bawah:

Langkah 1

Salin dan paste kod yang berwarna merah di bawah. Edit pada perkataan yang di boldkan itu kepada perkataan dan teks anda sendiri.

<form id="searchThis" action="/search" style="display: inline;" method="get"><input onfocus="if(this.value==this.defaultValue)this.value='';" value="Nak cari apa?" type="text" id="searchBox" onblur="if(this.value=='')this.value=this.defaultValue;" style="width: 150px;color:#636363;" vinput="" name="q"/> <input id="searchButton" value="Pergi" type="submit"/></form>

Langkah 2

Log in blog => Dashboard => Layout => Add A Gadget. Seterusnya klik pada HTML/Javascript. Kemudian, salin kod yang telah siap di edit tadi (rujuk langkah 1) dan paste pada Content HTML/Javascript itu.

Akhir sekali, klik save.

p/s: Seelok-eloknya, search bar diletakkan di bahagian atas (header) ataupun pada sidebar.

Memasang widget recent post dengan thumbnail

Untuk memasang widget recent post yang memaparkan 5 post terkini berserta image thumbnail seperti yang boleh anda lihat pada gambar di atas, hanya ikut beberapa langkah di bawah:

Langkah 1

Log in blog => Dashboard => Layout => Add A Gadget. Seterusnya klik pada HTML/Javascript.

Langkah 2

Salin script berwarna biru dibawah dan paste pada ruangan Content pada HTML/Javascript (lihat langkah 1). Seterusnya, tukarkan perkataan yourblogname kepada url blog anda.

<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;    float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style><script style="text/javascript" src="http://blogergadgets.googlecode.com/files/recentpostswiththumbnailsv3.js"></script><script style="text/javascript">var numposts = 5;var showpostthumbnails = true;var displaymore = true;var displayseparator = true;var showcommentnum = true;var showpostdate = true;var showpostsummary = true;var numchars = 100;</script><script src="http://yourblogname.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>

Langkah 3

Akhir sekali, klik save.

Memasang Blog Statistics

Untuk memasang blog statistik pada sidebar yang akan memaparkan jumlah keseluruhan post dan comment seperti yang boleh anda lihat pada gambar di atas, hanya ikut beberapa langkah di bawah.

Langkah 1

Log in blog => Dashboard => Layout => Add A Gadget. Seterusnya klik pada HTML/Javascript.

Langkah 2

Salin script berwarna biru dibawah dan paste pada ruangan Content pada HTML/Javascript (lihat langkah 1). Seterusnya, edit perkataan yourblogname kepada url blog anda.

<script style="text/javascript">function numposts(json) { document.write('Total Posts :' + json.feed.openSearch$totalResults.$t + '<br>'); }function numcomments(json) { document.write('Total Comments :' + json.feed.openSearch$totalResults.$t + '<br>'); }</script>
<script src="http://yourblogname.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numposts"></script>
<script src="http://yourblogname.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numcomments"></script>

Langkah 3

Akhir sekali klik save.

HTML Escaper

Jika kita menulis kod HTML pada posting, contohnya, kita ingin memasukkan kod bagi gambar berserta url blog seperti di bawah ini, kod akan memaparkan image gambar tersebut, tetapi apa yang kita mahukan ialah kod tersebut terpapar juga sebagai bentuk kod .

<a href="http://marilompatbintang.blogspot.com" target="_blank"><img src="http://i937.photobucket.com/albums/ad212/nescafeais2/untitled-4-1.jpg"></a>

'HTML Escaper' adalah satu tool yang membantu untuk melepaskan (escape)  fungsi kod HTML tanpa menjejaskan script kod tersebut.

Apa yang perlu di lakukan ialah, masukkan kod HTML pada kotak di bawah dan seterusnya tekan 'Escape'. Salin kod yang telah di 'Escape' itu dan paste pada posting.

HTML Escaper

Memasang kotak mesej pada permulaan paparan blog

Kadangkala apabila kita mengunjungi sesebuah blog, satu kotak mesej seperti pada gambar di atas akan muncul pada permulaan paparan pada blog tersebut. Untuk memasang script kotak mesej tersebut, caranya sangat mudah. Hanya perlu mengikut beberapa langkah di bawah:

p/s:save script template asal, ianya bertujuan sebagai back up apabila terjadi error semasa melakukan editting pada script template.

Langkah 1

Salin dan paste kod berwarna biru di bawah pada notepad. Seterusnya, edit perkataan 'Selamat Datang Ke Blog Nescafe Ais' kepada perkataan anda sendiri pada kod tersebut. Contohnya seperti 'Sila tinggalkan komen anda' atau apa saja pesanan yang anda rasakan sesuai.

Hanya gunakan kod kotak mesej pertama sahaja jika ingin hanya satu paparan kotak mesej.

<Script language='JavaScript'>alert("Selamat Datang Ke Blog Nescafe Ais");</Script> (Kotak mesej pertama)
<Script language='JavaScript'>alert("Selamat Datang Ke Blog Nescafe Ais");</Script> (Kotak mesej ke 2)

Langkah 2

Log in blog => Dashboard => Layout => Edit HTML. Seterusnya, tandakan pada kotak Expand Widget Templates. Dengan menggunakan Ctrl+F pada keyboard, taipkan kod </head> pada ruang Find dan seterusnya, tekan Enter.

Langkah 3

Salin kod yang telah siap di edit pada notepad tadi (lihat langkah 1) dan pastekan di atas atau sebelum kod </head>.

Contoh:

<Script language='JavaScript'>alert("Selamat Datang Ke Blog Nescafe Ais");</Script>

</head>

Seterusnya klik preview dan akhir sekali klik Save.

Memasang widget Post Rating

Widget dari Outbrain.com sangat berguna kepada blogger yang inginkan respon daripada readers tentang kualiti artikel atau post yang di tulis.Readers akan menilai kualiti artikel atau post dan boleh memilih maksimum 5 bintang.

Untuk memasang widget post ratings di bawah post atau artikel seperti yang tertera pada gambar di atas, anda hanya perlu mengikut beberapa langkah di bawah.

p/s: save script template asal, ianya bertujuan sebagai back up apabila terjadi error semasa melakukan editting pada script template.

Langkah 1

Salin kod berwarna biru di bawah.

<script language="JavaScript">var OB_platformType =1;var OB_demoMode = false;var OB_langJS = "http://widgets.outbrain.com/lang_ms.js";var OBITm = "1254985692174";</script><script language="JavaScript" src="http://widgets.outbrain.com/OutbrainRater.js"> </script>

Langkah 2

Log in blog => Dashboard => Layout =>  Add A Gadget. Seterusnya klik pada HTML/javascript. Paste kod yang telah di salin tadi (lihat langkah 1) dan paste pada ruangan content. Seterusnya, klik save

Langkah 3

Drag widget tersebut dan letakkan di bawah post.

Langkah 4

Seterusnya klik preview dan akhir sekali, klik save.

Membina widget top commenters

Untuk membina widget top commenters seperti yang anda dapat lihat pada footer ( column bawah ) blog saya, terdapat satu cara yang sangat mudah. Apa yang perlu anda lakukan ialah dengan mengikut beberapa langkah dibawah.

Langkah 1

Salin kod berwarna merah di bawah pada notepad. Edit tulisan yang berwarna biru kepada url blog dan nama anda.

<script type="text/javascript"> function pipeCallback(obj) { document.write('<ol>'); var i; for (i = 0; i < obj.count ; i++) { var href = "'" + obj.value.items[i].link + "'"; if(obj.value.items[i].link == "") var item ="<li>" + obj.value.items[i].title + "</li>"; else var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>"; document.write(item); } document.write('</ol>'); } </script> <script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=7b5e76fd684f11e94320abd4e00fbbca&url=http%3A%2F%2Fmaribinablog.blogspot.com&num=10&filter=nescafe ais" type="text/javascript"></script>

Langkah 2

Login blog => Dashboard => Layout => Add A Gadget. Klik HTML/Javascript.

Langkah 3

Paste kod yang telah di edit ( lihat langkah 1), dan paste pada ruangan content.

Akhir sekali, klik save.

Membina widget recent comments (komen terkini )

Untuk membina widget recent comment seperti yang anda dapat lihat pada sidebar blog saya(respon terkini), terdapat satu cara yang sangat mudah. Apa yang perlu anda lakukan ialah dengan mengikut beberapa langkah dibawah.

Langkah 1

Salin dan edit kod berwarna biru di bawah pada notepad. Tukarkan kod yang di bold dengan warna merah dengan url blog anda. Anda juga boleh menukar angka yang di bold dengan warna merah dengan bilangan comment yang ingin di paparkan.

<script style="text/javascript" src="http://sites.google.com/site/testingsahaja/recentcomments.js"></script><script style="text/javascript">var numcomments = 5;var showcommentdate = false;var showposttitle = false;var numchars = 40;</script><script src="http://Masukkan URL disini/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

Langkah 2

Login blog => Dashboard => Layout => Add A Gadget. Klik HTML/Javascript. Langkah 3 Paste kod yang telah di edit ( lihat langkah 1), dan paste pada ruangan content.

Akhir sekali, klik save.

Membina widget recent posts

Untuk memaparkan 5 posts yang terkini pada sidebar blog seperti yang anda dapat lihat pada sidebar blog saya (entri terkini), anda boleh melakukannya dengan beberapa langkah yang mudah.

Langkah 1

Salin dan url di bawah ini.

http://masukkan url blog anda/feeds/posts/default

Contoh: http://maribinablog.blogspot.com/feeds/posts/default

Langkah 2

Login blog => Dashboard => Layout => Add A Gadget. Klik pada Feed.

Langkah 3

Paste url yang telah di edit (lihat langkah 1) pada ruangan Feed url. Seterusnya klik Continue. Edit bahagian Title dan pilih berapa tajuk posting yang ingin anda paparkan. Maksimum ialah 5.

Akhir sekali, klik save.

Kibar Jalur Gemilang pada blog

Sempena kedatangan bulan Kemerdekaan yang tinggal hanya beberapa hari sahaja lagi, Mari Bina Blog mencadangkan supaya para bloggers dapat mengibarkan Jalur Gemilang di atas blog masing-masing seperti yang tertera pada bahagian atas kiri blog ini.

Untuk memasang Jalur Gemilang tersebut, sila ikuti langkah-langkah di bawah.

Langkah 1

salin kod di bawah dan pastekan pada notepad.

<script language="JavaScript" src="http://sites.google.com/site/testingsahaja/mbbataskiri.txt" type="text/javascript"> </script> <script language="JavaScript" type="text/javascript"> cot("masukkan url")</script>

Langkah 2

Salin url Jalur Gemilang yang anda minat dan pastekan di atas perkataan masukkan url pada kod yang telah di pastekan semasa langkah 1.

Langkah 3

Salin kod yang telah siap di edit. Seterusnya, login blog anda dan terus ke dashboard=> Layout. Klik pula pada Add a gadget dan pilih HTML/Javascript. Pastekan pada ruangan content dan save.

Jalur Gemilang 1


http://i937.photobucket.com/albums/ad212/nescafeais2/332964294.png


Jalur Gemilang 2

http://i937.photobucket.com/albums/ad212/nescafeais2/120px-Nuvola_Malaysian_flagsvg.png


Jalur Gemilang 3


http://i937.photobucket.com/albums/ad212/nescafeais2/malaysiaflag.gif


Jalur Gemilang 4

http://i937.photobucket.com/albums/ad212/nescafeais2/Animated-Flag-Malaysia.gif

EPL club widget ikon

Untuk memasang widget seperti yang terpapar pada sebelah bawah kanan blog ini ikuti langkah-langkahnya dan salin kod widgetnya di sini

Arsenal

http://i937.photobucket.com/albums/ad212/nescafeais2/arsenal.png

Chelsea

http://i937.photobucket.com/albums/ad212/nescafeais2/chelsea.png

Manchester United

http://i937.photobucket.com/albums/ad212/nescafeais2/manchester_united.png

Liverpool

http://i937.photobucket.com/albums/ad212/nescafeais2/liverpool.png

Aston Villa

http://i937.photobucket.com/albums/ad212/nescafeais2/aston_villa.png

Everton

http://i937.photobucket.com/albums/ad212/nescafeais2/everton.png

Manchester City

http://i937.photobucket.com/albums/ad212/nescafeais2/manchester_city.png

Newcastle

http://i937.photobucket.com/albums/ad212/nescafeais2/newcastle.png

Tottenham

http://i937.photobucket.com/albums/ad212/nescafeais2/tottenham.png

Pasukan lain akan di senaraikan jika terdapat permintaan daripada pengunjung.

Widget ikon ( Update)

Untuk memasang widget icon pada sebelah bawah kanan blog seperti yang terpapar pada blog ini, Mari bina blog akan menunjukkan langkah-langkahnya.

Langkah 1

salin kod di bawah dan pastekan pada notepad.

<script language="JavaScript" src="http://sites.google.com/site/testingsahaja/mbbbawahkiri.txt" type="text/javascript"> </script> <script language="JavaScript" type="text/javascript"> cot("masukkan url")</script>

Langkah 2

Salin url ikon yang anda minati dan pastekan di atas perkataan masukkan url pada kod yang telah di pastekan semasa langkah 1.

Langkah 3

Salin kod yang telah siap di edit. Seterusnya, login blog anda dan terus ke dashboard=> Layout. Klik pula pada Add a gadget dan pilih HTML/Javascript. Pastekan pada ruangan content dan save.

Ikon 1

http://i937.photobucket.com/albums/ad212/nescafeais2/pas-web-20thumbnail.gif


Ikon 2


http://i937.photobucket.com/albums/ad212/nescafeais2/keadilan-web-20thumbnail.gif



Ikon 3


http://i937.photobucket.com/albums/ad212/nescafeais2/Chat.png


Ikon 4

http://i937.photobucket.com/albums/ad212/nescafeais2/Computer.png


Ikon 5

http://i937.photobucket.com/albums/ad212/nescafeais2/CyndicateIconsPuzzle.png


Ikon 6

http://i937.photobucket.com/albums/ad212/nescafeais2/Finder-128x128.png


Ikon 7

http://i937.photobucket.com/albums/ad212/nescafeais2/JackSkellington.png


Ikon 8

http://i937.photobucket.com/albums/ad212/nescafeais2/Text-Edit.png


Ikon 9

http://i937.photobucket.com/albums/ad212/nescafeais2/Twitter.png


Ikon 10

http://i937.photobucket.com/albums/ad212/nescafeais2/Vista_icons_01.png


Ikon 11


http://i937.photobucket.com/albums/ad212/nescafeais2/Vista_icons_03.png


Ikon 12


http://i937.photobucket.com/albums/ad212/nescafeais2/anglerbear.png


Ikon 13

http://i937.photobucket.com/albums/ad212/nescafeais2/bino.png


Ikon 14

http://i937.photobucket.com/albums/ad212/nescafeais2/golf.png


Ikon 15

http://i937.photobucket.com/albums/ad212/nescafeais2/heart-128x128.png


Ikon 16


http://i937.photobucket.com/albums/ad212/nescafeais2/icq.png


Ikon 17


http://i937.photobucket.com/albums/ad212/nescafeais2/mug.png


Ikon 18

http://i937.photobucket.com/albums/ad212/nescafeais2/notepad.png


Ikon 19


http://i937.photobucket.com/albums/ad212/nescafeais2/pomoto.png


Ikon 20

http://i937.photobucket.com/albums/ad212/nescafeais2/spaceship.png


Ikon 21

http://i937.photobucket.com/albums/ad212/nescafeais2/wilber.png


Ikon 22

http://i937.photobucket.com/albums/ad212/nescafeais2/xeeold.png


Ikon 23


http://i937.photobucket.com/albums/ad212/nescafeais2/welcome-87.gif


Ikon 24


http://i937.photobucket.com/albums/ad212/nescafeais2/welcome-1.png


Ikon 25


http://i937.photobucket.com/albums/ad212/nescafeais2/Welcome.gif


Ikon 26


http://i937.photobucket.com/albums/ad212/nescafeais2/chibi_naruto_anime.gif


Ikon 27


http://i937.photobucket.com/albums/ad212/nescafeais2/1205099zhwi7s2bb3.gif


Ikon 28


http://i937.photobucket.com/albums/ad212/nescafeais2/511134yo5fqn26g1.gif


Ikon 29


http://i937.photobucket.com/albums/ad212/nescafeais2/973376e88chzl0md.jpg


Ikon 30


http://i937.photobucket.com/albums/ad212/nescafeais2/monster.gif


Ikon 31


http://i937.photobucket.com/albums/ad212/nescafeais2/t334555726_1575_5.gif


Ikon 32


http://i937.photobucket.com/albums/ad212/nescafeais2/t351554275_34038_6.gif


Ikon 33


http://i937.photobucket.com/albums/ad212/nescafeais2/481876qojaq5ujfk.gif


Ikon 34


http://i937.photobucket.com/albums/ad212/nescafeais2/005.png


Ikon 35


http://i937.photobucket.com/albums/ad212/nescafeais2/Alien.png