Floating / Slide Out Social Bookmark.

1. Sign in akaun blogger anda.

2. Pilih DESIGN --> Add A Gadget --> HTML/Javascript.

3. Copy kod dibawah dan PASTE.

<style>
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
list-style: none;
z-index:999999;
width:721px;
}
ul#navigation li {
width: 103px;
display:inline;
float:left;
border:0;
}
ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#eeeeee;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.96;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navigation li a:hover{
background-color:#CAE3F2;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#60ACD8;
font-family:trebuchet-ms, arial, tahoma, Sans-Serif;
font-weight:bold;
text-shadow: 0 -1px 1px #fff;
}
ul#navigation .rss a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvEX4qTadQYuxjI0pj-R6NnWmD9gu3nG4etn-gERUUjQCW0X8ukcvvkUoa8WJyN6n2yvm3Nac-B6thQfzcPlnJSHupDdlI047ETVlgRkSf2Jf9CMrfB3HHz286QuPkuFYPb5aP8ZtN72ZA/s400/rss_64x64.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2ZpVBX_ImMvyKiXQZnqF9-oWF_DNIhp4ZzfSWsf1fLu_hCv3ObWHK-KHTTZOcSvJjC5KQsApkb98w-e-TpPBh9W9iLxUteMkoIpJ3KSiqclX2hpRb0r80WCSixyWkdY1vu2onuWi7uh6J/s400/facebook_64x64.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixS0VOFrn_BLIcOoFwjhTGe0MqLLARrCVGJcKJmErD3niYFlXMZHeMBcAXYTJRhDWkI9QYBxJGuxAsPYG6VPsGsHVycP0jag2GvWJMULf0fYf2PEupT0aV1dqHQkaGBY8mls26Gm-Q1xLI/s400/twitter_64x64.png);
}
ul#navigation .googlebookmarks a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC3tCAMwzbc9aiStw1e5lPGCKZ5XSvjK1DZJ8O7S-tgMToLEm3o58qdCJhN96sJEU4HQbqONrY8San2c_gcjrlHMiNZbwYMcFC8wuBZmQH973ZIn_LhAZBN9GMCleDooSrojE7mOo08c29/s400/google_64x64.png);
}
ul#navigation .e-mail a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8tdlDTPeR_ukrKzZ0jnisnk1S9e-AfnLjGmX2GTxDU9tmqRFAhe26JXlp2bP2EGkSS9XpAU_H2duxZWnwwny2PwE6FFlV8OF-Mjzz3koAT_P-sPGmGMJtwEe9N8L4tJ36U4gRFdMiLg66/s400/yahoo_64x64.png);
}
</style>

<script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});

$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>

<ul id="navigation">
<li class="rss"><a href="http://nama-blog-anda.blogspot.com/atom.xml"><span>RSS Feed</span></a></li>
<li class="facebook"><a href="http://www.facebook.com/profile.php?id=masukkan-ID-Facebook-disini"><span>My Facebook</span></a></li>
<li class="twitter"><a href="http://twitter.com/masukkan-ID-Twitter-disini"><span>My Twitter</span></a></li>
<li class="googlebookmarks"><a href="http://www.google.com/bookmarks/mark"><span>Bookmarks</span></a></li>
<li class="e-mail"><a href="http://www.mybloglog.com/buzz/community/bloguntukaku"><span>My Bloglog</span></a></li>
</ul>

4. Perhatian !!! Gantikan text berwarna biru kepada id anda.

5. Akhir sekali pilih SAVE.

6. Selamat mencuba.

READ MORE...

Memasang 'Page Navigation #2'.

Untuk memasang 'Page Navigation #1' rujuk di sini.

Untuk memasang 'Page Navigation #2'.

Sila ikuti beberapa langkah ini.

1. Sign in akaun blogger.

2. Pilih Layout --> Edit HTML.

3. Klik / tandakan Expand Template Widget seperti screenshot di bawah ini.

4. Cari kod ini.

<b:include name='nextprev'/>

5.Gantikan kod di atas dengan kod di bawah.

<b:if cond='data:blog.pageType == "index"'>
<style type="text/css">
.blogpager {
font-size:16px;
color: #060;
font-weight:bold;
padding:0px 4px;
}
</style>

<div align="center" style="margin:5px;">
<form action="#" name="pager20">
<span id="vwg-pager-first"></span> <span id="vwg-pager-prev"></span> <input name="showingpage" onfocus="this.select()" value="init..." type="text" size="4" title="Enter page number that You want to go" />/<input size="4" type="text" name="pagestotal" disabled="disabled" value="init..." /> <input type="button" onclick="checkpager()" value="Go" /> <span id="vwg-pager-next"></span> <span id="vwg-pager-last"></span>
</form>
</div>

<script type="text/javascript">

var blogID = "6930401002504091490";
var home_page = "http://www.syamzone.blogspot.com/";
var pager_max_main = 10;

var pager_first_text = "First";
var pager_last_text = "Last";
var pager_prev_text = "Prev";
var pager_next_text = "Next";

</script>
<script src="http://www.freewebs.com/anhvo/blogger/blogger_pager_script_v20.js"
type="text/javascript"></script>
</b:if>

6. Gantikan kod berwarna biru dengan ID dan Url blog anda.

7. Save Template.

8. Selamat Mencuba.

Sumber Jaloe.

READ MORE...

Memasang 'Tab View 3 In 1'.

Tab view 3 in 1 menampilkan entri popular yang mendapat komen tertinggi, nama pemberi komen terbanyak dan komen terbaru.

Tab view ini akan memberikan penampilan yang lebih kemas serta menjimatkan ruang blog anda

Sekiranya anda mahu memasang tab view ini sila ikuti beberapa langkah mudah di bawah.

1. Sign in akaun blogger anda.

2. Pilih LAYOUT --> EDIT HTML.

3. BACKUP TEMPLATE anda dahulu untuk mengelakkan sebarang masalah.

4. Cari kod ini.

]]></b:skin>

5. Copy kod di bawah dan letakkan di atas kod tadi.

div.TabView div.Tabs

{

height: 24px;

overflow: hidden;

}

div.TabView div.Tabs a

{

float: left;

display: block;

width: 90px; /* Lebar Kotak Tajuk */ text-align: center;

height: 24px; /* Tinggi Kotak Tajuk */

padding-top: 3px;

vertical-align: middle;

border: 1px solid #000; /* Warna Border Kotak Tajuk */

border-bottom-width: 0;

text-decoration: none;

font-family: "Times New Roman", Serif; /* Tulisan Kotak Tajuk */

font-weight: 900;

color: #000; /* Warna Tulisan Kotak Tajuk */

}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active

{

background-color: #FFFF66; /* Warna Background Kotak Tajuk */

}

div.TabView div.Pages

{

clear: both;

border: 1px solid #6E6E6E; /* Warna Border Kotak Isi */

overflow: hidden;

background-color: #FFFF66; /* Warna Background Kotak Isi */

}

div.TabView div.Pages div.Page

{

height: 100%;

padding: 0px;

overflow: hidden;

}

div.TabView div.Pages div.Page div.Pad

{

padding: 3px 5px;

}

Perhatian !!! Anda boleh mengubah kod berwarna biru mengikut kesesuaian saiz yang anda mahukan.

6. Seterusnya cari kod ini.

</head>

7. Copy kod di bawah dan letakkan di atas kod tadi.

<script src='http://syamzone.fileave.com/Tab View Menu.txt' type='text/javascript'/>

8. Save Template anda.

9. Langkah seterusnya pilih 'Layout'--> 'Add a Gadget'--> 'Html / Javascript'.

10. Copy kod di bawah dan Paste.

<form action="tabview.html" method="get">

<div id="TabView" class="TabView">

<div style="width: 280px;" class="Tabs">

<a>Popular</a>

<a>Top</a>

<a>Terbaru</a>

</div>

<div style="width: 280px; height: 350px;" class="Pages">

<div class="Page">

<div class="Pad">

<script type="text/javascript">

function pipeCallback(obj) {

document.write('<ul style="text-transform: capitalize;">');

var i;

for (i = 0; i < obj.count ; i++)

{

var href = "'" + obj.value.items[i].link + "'";

var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";

document.write(item);

}

document.write('</ul>');

}

</script>

<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=a7d3195528df5e96181a3d2712266226&url=http%3A%2F%2FNAMABLOGANDA.blogspot.com&num=10" type="text/javascript"></script> <p>

</div>

</div>

<div class="Page">

<div class="Pad"> <p>
<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 + "'";

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=c92ac21897d8b56e61cfa85930dd89a1&url=http%3A%2F%2FNAMABLOGANDA.blogspot.com&num=10" type="text/javascript"></script>
</div>

</div>

<div class="Page">

<div class="Pad">

<script type="text/javascript">

function pipeCallback(obj) {

document.write('<ul style="text-transform: capitalize;">');

var i;

for (i = 0; i < obj.count ; i++)

{

var href = "'" + obj.value.items[i].link + "'";

var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";

document.write(item);

}

document.write('</ul>');

}

</script> <script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=0fa4b52819e930cfa76ab4323eb17f99&url=http%3A%2F%2FNAMABLOGANDA.blogspot.com&num=10" type="text/javascript"></script> <p>

</div>

</div>

</div>

</div>

</form>

<script type="text/javascript">

tabview_initialize('TabView');

</script>

Perhatian !!! Anda perlu menggantikan kod berwarna biru kepada nama blog anda dan untuk mengubah saiz atau tajuk tab view.

11. Setelah selesai Save dan view blog untuk melihat hasilnya.

12. Selamat Mencuba.

READ MORE...

Memasang 'Footer NavBar'.

1. Sign in akaun blogger anda.

2. Pilih LAYOUT --> EDIT HTML.

3. BACKUP TEMPLATE anda dahulu untuk mengelakkan sebarang masalah.

4. Klik pada EXPAND WIDGET TEMPLATE seperti screenshot di bawah ini.

5. Cari kod ini.

]]></b:skin>

6. Copy kod di bawah dan letakkan di atas kod tadi.

#navbar-footer p.info {

float: right;

padding-right:40px;

line-height: 1.2;

height: 100%;

vertical-align: bottom;

}

#navbar-footer p {

float: left;

margin: 0px;

padding-top:4px;

padding-left:40px;

vertical-align: bottom;

line-height: 1.2;

}

#navbar-footer a {

color: #333;

}

#navbar-footer {

align: center;

position: fixed;

border-top: 1px solid #ddd;

border-bottom: 10px solid #f5f5f5;

background-color: #f5f5f5;

width: 100%;

left: 0px;

text-align: left;

color: #888;

font-family: Verdana;

font-size: 11px;

z-index:10000;

opacity: 0.9;

filter: alpha(opacity: 90);

bottom:0;

}

7. Cari kod ini.

</body>

8. Kemudian Copy kod di bawah dan letakkan di atas kod tadi.

<div id="navbar-footer">

<p>

<img height='30' src="http://URLPHOTOANDA.JPG"/>&#160;&#160;<a href="http://NAMABLOGANDA.blogspot.com/index.html">SyamZone™</a>&#160;&#169;&#160;2008-2009 </p>

<p class="info">Powered by <a href="http://www.blogger.com">Blogger</a> | Created and Maintained by <a href="http://www.twitter.com/syamzone" target="_blank">SyamZone™</a><br/>Best viewed in Firefox 1.5+ at 1024x768 or higher resolution

<br/>

</p>

</div>

Perhatian !!! Gantikan text/kod yang berwarna merah.

9. Untuk melihat hasilnya pilih PREVIEW.

10. Sekiranya anda berpuas hati SAVE TEMPLATE.

Sumber Anang's Blog..

READ MORE...

Memasang 'Stripe Ad'.

Kepada yang belum mengetahui apa itu Stripe Ad ? Gambarannya adalah seperti screenshot di atas.

Sekiranya anda mahu memasang Stripe Ad ini di bahagian atas blog ? Sila ikuti beberapa langkah mudah di bawah.

1. Sign in akaun blogger anda.

2. Pilih LAYOUT --> EDIT HTML.

3. BACKUP TEMPLATE anda dahulu untuk mengelakkan sebarang masalah.

4. Klik pada EXPAND WIDGET TEMPLATE seperti screenshot di bawah ini.

5. Cari kod ini.

]]></b:skin>

6. Copy kod di bawah dan letakkan di atas kod tadi.

#mta_bar { background: #003366; border-bottom:3px solid #6699ff; margin: 0 0 3px 0; padding: 4px 0; z-index: 100; top: 0; left: 0; width: 100%; overflow: auto; position: fixed; }

* html #mta_bar{

/*IE6 hack*/

position: absolute;

width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");

}

#mta_bar .left { float: left; text-align: center; font-family: Arial; font-size: 13px; font-weight: bold; font-style: normal; color: #0000FF; width:92%;}

#mta_bar .right {font-family: Arial, Helvetica, sans-serif; float: right; text-align: center; font-weight: normal; font-size: 10px;letter-spacing: 0; width: 30px; white-space: nowrap;}

#mta_bar .right a {font-size: 10px; color: #0000FF; text-decoration: underline;}

#mta_bar .right a:hover {font-size: 10px; color: #0000FF; text-decoration: none;}

#left_bar a {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0r4G2IddGsjVeLSZtNSWOxRL-ylAS9AMeCcQhDMCPE5S7FGzIeklw27o5w1srtRJ5SlJhGelcSbc6kg8twmvbd3sBf5b7tYz6gkYYIyzB_xAAnTc0zQxXsyztITCUGjLYM8gtKXKT8rg/?imgmax=800') no-repeat; text-decoration: none; color: #fff; padding:5px 0px 5px 30px;}

#left_bar a:hover { text-decoration: underline; color: #fff; }

7. Cari kod ini.

</head>

8. Copy kod di bawah dan letakkan di atas kod tadi.

<script type='text/javascript'>

//<![CDATA[

var mta_arr = new Array();

var mta_clear = new Array();

function mtaFloat(mta) {

mta_arr[mta_arr.length] = this;

var mtapointer = eval(mta_arr.length-1);

this.pagetop = 0;

this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;

this.mtasrc = document.all? document.all[mta] : document.getElementById(mta);

this.mtasrc.height = this.mtasrc.offsetHeight;

this.mtaheight = this.cmode.clientHeight;

this.mtaoffset = mtaGetOffsetY(mta_arr[mtapointer]);

var mtabar = 'mta_clear['+mtapointer+'] = setInterval("mtaFloatInit(mta_arr['+mtapointer+'])",1);';

mtabar = mtabar;

eval(mtabar);

}

function mtaGetOffsetY(mta) {

var mtaTotOffset = parseInt(mta.mtasrc.offsetTop);

var parentOffset = mta.mtasrc.offsetParent;

while ( parentOffset != null ) {

mtaTotOffset += parentOffset.offsetTop;

parentOffset = parentOffset.offsetParent;

}

return mtaTotOffset;

}

function mtaFloatInit(mta) {

mta.pagetop = mta.cmode.scrollTop;

mta.mtasrc.style.top = mta.pagetop - mta.mtaoffset + "px";

}

function closeTopAds() {

document.getElementById("mta_bar").style.visibility = "hidden";

}

//]]>

</script>

9. Sekarang cari kod ini.

</body>

10. Kemudian Copy kod di bawah dan letakkan di atas kod tadi.

<div id='mta_bar'>

<div id='left_bar'><span class='left'><a href='http://feeds.feedburner.com/syamzone' target='_blank'>More than 300 have subcribed in readers, have you?</a></span></div>

<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;syamzone.blogspot.com&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha9QbZQVk8H-vEljSQL7aTjR59MlBTkW3cGcRXAcwQo-1LW1vYPfvV_ENEZc9K3YCwbka8WdldEUiB5E812NoPgcim1YTXQ_aOgVCAI1TwYuuRvXm7I3oYPf9rnQdAMz0AqMBGN90VOjo/?imgmax=800' style='cursor:hand;cursor:pointer;'/></span></div>

11. Untuk melihat hasilnya pilih PREVIEW.

12. Sekiranya anda berpuas hati SAVE TEMPLATE.

Perhatian !!! Gantikan text/kod yang berwarna merah.

Sumber Blogspot Tutorial, MaxBlogPress.

READ MORE...

Memasang 'Smart Navigation Bar'.

1. Sign in akaun blogger anda.

2. Pilih LAYOUT --> EDIT HTML.

3. Backup Template anda dahulu untuk mengelakkan sebarang masalah.

4. Klik pada EXPAND WIDGET TEMPLATE seperti screenshot di bawah ini.

5. Cari kod di bawah.

<div id='content-wrapper'>

Perhatian !!! Gantikan text yang berwarna biru.

6. Tambahkan kod ini di atas kod tadi.

<div id="newnavbar"> <ul> <li><a href="URL Halaman Utama Anda">Home</a></li> <li><a href=" URL Halaman Yang Berkaitan">About</a></li> <li><a href="mailto: Alamat Email Anda">Contact</a></li> </ul></div>

7. Sekarang cari kod ini.

]]></b:skin>

8. Pilih salah satu kod di bawah dan tambahkan di atas kod tadi.

#newnavbar ul li{

background: #eeeeee;

}

#newnavbar ul li{

font-size:100%;

font-style:italic;

font-family:Verdana, "BitStream vera Sans",

font-weight:bold;

list-style-type:none;

display:inline;

padding:10px;

margin:50px;

border:3px solid #FF99CC;

}

#newnavbar li a{

color:#7E587E;

}

#newnavbar li a:visited {

color: #7E587E;

}

#newnavbar li a:hover {

color: #B93B8F;

background: #FF99CC;

}

body#layout #main,

body#layout #sidebar {

padding: 0;

}

#newnavbar ul li{

background: #e9ffd9;

}

#newnavbar ul li{

font-size:100%;

font-style:italic;

font-family:Verdana, "BitStream vera Sans",

font-weight:bold;

list-style-type:none;

display:inline;

padding:10px;

margin:50px;

border:3px solid #CAF99B;

}

#newnavbar li a{

color:#7E587E;

}

#newnavbar li a:visited {

color: #7E587E;

}

#newnavbar li a:hover {

color: #B93B8F;

background: #CAF99B;

}

body#layout #main,

body#layout #sidebar {

padding: 0;

}

#newnavbar ul li{

background: #eeeeee;

}

#newnavbar ul li{

font-size:100%;

font-style:italic;

font-family:Verdana, "BitStream vera Sans",

font-weight:bold;

list-style-type:none;

display:inline;

padding:10px;

margin:50px;

border:3px solid #99FFFF;

}

#newnavbar li a{

color:#7E587E;

}

#newnavbar li a:visited {

color: #7E587E;

}

#newnavbar li a:hover {

color: #B93B8F;

background: #99FFFF;

}

body#layout #main,

body#layout #sidebar {

padding: 0;

}

9. Setelah selesai pilih PREVIEW untuk melihat hasilnya.

10. Sekiranya anda berpuas hati SAVE TEMPLATE.

Selamat Mencuba.

READ MORE...

Membuat 'Navigation Bar' Untuk Halaman.

Mungkin anda sudah biasa melihat 'navigation bar' untuk halaman seperti screenshot dibawah ini.

Jika anda mahu membuat 'navigation bar' ini.Anda boleh mengikuti beberapa langkah mudah di bawah ini.

Masuk akaun blogger anda.

Pilih 'Layout'-->'Add a Gadget' dan Copy kod html dibawah.

<style>

.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;

}

.showpageArea a {border: 1px solid #505050;

color: #000000;font-weight:normal;

padding: 3px 6px !important;

padding: 1px 4px ;margin:0px 4px;

text-decoration: none;

}

.showpageArea a:hover {

font-size:11px;

border: 1px solid #333;

color: #000000;

background-color: #FFFFFF;

}

.showpageNum a {border: 1px solid #505050;

color: #000000;font-weight:normal;

padding: 3px 6px !important;

padding: 1px 4px ;margin:0px 4px;

text-decoration: none;

}

.showpageNum a:hover {

font-size:11px;

border: 1px solid #333;

color: #000000;

background-color: #FFFFFF;

}

.showpagePoint {font-size:11px;

padding: 2px 4px 2px 4px;

margin: 2px;

font-weight: bold;

border: 1px solid #333;

color: #fff;

background-color: #000000;

}

.showpage a:hover {font-size:11px;

border: 1px solid #333;

color: #000000;

background-color: #FFFFFF;

}

.showpageNum a:link,.showpage a:link {

font-size:11px;

padding: 2px 4px 2px 4px;

margin: 2px;

text-decoration: none;

border: 1px solid #0066cc;

color: #0066cc;

background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;

border: 1px solid #333;

color: #000000;

background-color: #FFFFFF;

}

</style>

<script type="text/javascript">

function showpageCount(json) {

var thisUrl = location.href;

var htmlMap = new Array();

var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";

var isLablePage = thisUrl.indexOf("/search/label/")!=-1;

var isPage = thisUrl.indexOf("/search?updated")!=-1;

var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";

thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;

var thisNum = 1;

var postNum=1;

var itemCount = 0;

var fFlag = 0;

var eFlag = 0;

var html= '';

var upPageHtml ='';

var downPageHtml ='';

var pageCount=5;

var displayPageNum=3;

var firstPageWord = 'Awal';

var endPageWord = 'Akhir';

var upPageWord ='Sebelumnya';

var downPageWord ='Selanjutnya';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp = post.published.$t.substr(0,10);

var title = post.title.$t;

if(isLablePage){

if(title!=''){

if(post.category){

for(var c=0, post_category; post_category = post.category[c]; c++) {

if(encodeURIComponent(post_category.term)==thisLable){

if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){

if(thisUrl.indexOf(timestamp)!=-1 ){

thisNum = postNum;

}

postNum++;

htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;

}

}

}

}//end if(post.category){

itemCount++;

}

}else{

if(title!=''){

if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){

if(thisUrl.indexOf(timestamp)!=-1 ){

thisNum = postNum;

}

if(title!='') postNum++;

htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;

}

}

itemCount++;

}

}

for(var p =0;p< htmlMap.length;p++){

if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){

if(fFlag ==0 && p == thisNum-2){

if(thisNum==2){

if(isLablePage){

upPageHtml = labelHtml + upPageWord +'</a></span>';

}else{

upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';

}

}else{

upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';

}

fFlag++;

}

if(p==(thisNum-1)){

html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';

}else{

if(p==0){

if(isLablePage){

html = labelHtml+'1</a></span>';

}else{

html += '<span class="showpageNum"><a href="/">1</a></span>';

}

}else{

html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';

}

}

if(eFlag ==0 && p == thisNum){

downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';

eFlag++;

}

}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){

}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){

if(!isLablePage){

html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';

}else{

html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';

}

}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Halaman '+thisNum+' dari '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){

html += downPageHtml;

html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';

}

if(postNum==1) postNum++;

html += '</div>';

if(isPage || isFirstPage || isLablePage){

var pageArea = document.getElementsByName("pageArea");

var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){

html ='';

}

for(var p =0;p< pageArea.length;p++){

pageArea[p].innerHTML = html;

}

if(pageArea&&pageArea.length>0){

html ='';

}

if(blogPager){

blogPager.innerHTML = html;

}

}

}

</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>

Apabila anda sudah Copy kod html di atas Paste di ruang 'Add a Gadget' seperti screenshot ini :

Sekiranya ruang 'Add a Gadget' berada di atas 'Blog Posts', anda hanya perlu 'Drag' ruang 'Add a Gadget' ke bawah seperti kedudukan yang ditunjukkan screenshot di atas.

Langkah seterusnya 'Save' dan 'View Blog' untuk melihat hasilnya.

READ MORE...