Menampilkan 'Total Posts Comments and Online Users'.

Cara mudah menampilkan 'Total Posts Comments and Online Users'.

1. Masuk akaun Blogger.

2. Pilih 'Design'--> 'Add a Gadget'--> 'Html / Javascript'.

Copy kod di bawah dan Paste.

<script style="text/javascript">
function totalPosts(json) {
document.write('Stories: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
function totalComments(json) {
document.write('Comments: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
</script>
<script src=" /feeds/posts/default?alt=json-in-script&callback=totalPosts"></script>
<script src=" /feeds/comments/default?alt=json-in-script&callback=totalComments"></script>
<p style="margin-top: 0; margin-bottom: 0">
<table border="0" bordercolor="#111111" id="AutoNumber1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%">
<tr>
<td width="35%">
Online Readers:</td>
<td width="65%"><p style="margin-top: 0; margin-bottom: 0"><b><script src="http://fastonlineusers.com/on3.php?d=http://NAMABLOGANDA" type="text/javascript"></script></b></p></td>
</tr>
</table></p>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-4679235-4");
pageTracker._trackPageview();
} catch(err) {}</script>

Perhatian !!! Gantikan text kod yang berwarna biru.

READ MORE...

Slide Recent Posting.

1. Masuk akaun Blogger.

2. Pilih 'Layout'--> 'Add a Gadget'--> 'Html / Javascript'.

Copy kod di bawah dan Paste.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style media="screen" type="text/css">
<!--

#spylist {
overflow:show;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:280px;
overflow:show;
list-style-type: none;
padding: 5px 5px;
margin:0px 0px;
}
#spylist li {
width:280px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url() repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:10px;
height:8px;
overflow:show;
margin:3px 3px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:show;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:8px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:show;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:3px 3px;
margin:8px 8px;
}

-->
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 20;
home_page = "http://nama-blog-anda.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://popular-post-blogger.googlecode.com/files/recentpostthumbspy-min.js" type="text/javascript"></script>
</div>

3. Perhatian !!! Gantikan text berwarna merah.Sebarang perubahan boleh di lakukan dengan menggantikan kod berwarna biru.

4. Save.

5. Selamat Mencuba.

Kredit Mari Bina Blog.

READ MORE...

Menambah Post Divider.

01. Sign In akaun blogger.

02. Pilih Dashboard >> Layout >> Edit html.

03. Cari kod ini.

.post

04. Gantikan kod di atas dengan kod ini.

.post{
margin: 0 0 40px 0;
width: 90%;
background: url(http://www.imagehost.com/separator.jpg);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;
}

Perhatian !!! Gantikan url image berwarna merah dengan url image anda (Url image di bawah juga boleh digunakan).

1.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwv7ghEUgyuyMPAYjlKJZ_82Mhr3_ncQ1eenF5liGLPMACwWew9VQxe7_9J4duHZwQUZgzhVZ1t6T-46gVG0rdaBhIpixW7Pa83wMEKkVcisEBQcIVLgWHYFWkFqJ6HG5aiPvZ4xFeKvA/s400/bar54.gif

2.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz0XVzpi_jnKsoHxLsP5R4zsSNBRTZmW0nCBh8k0-GR8N7d7PFEVNhfVzfw1xVyZR-oBn43-E96P2koVJoDK9YvCODH0SkIZMUzZAjn3iBe8vBApvE1YJv-IhjpacLPiVdaewi8wcKcTs/s400/flowerbar.gif

3.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl_7eD4wFwmOpMxFD68vcg-VBNc8ctruI1NeVvNDRwyH3xblURdbdFlXfiuhb9nqrai7aBYFPvhvkgvQ9Cb_pekNJYwTkDu_mXpOrM8hkJv2Ks1M-vSCt-Tg3bSHdAmWbtEnXzFHk4r1Y/s400/astarl7s.gif

4.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijEkvaIRsyTyUssUVi6m_RcBa18-zkw2EBi_Xb05-tP1uXFyxuRZ-4G8MeXmJF4Zvn_y4wiXc_XQqNNo71aWeRnk4unasHVVqDnw9n7eczOOompl8C-K5eDXTxUIIYkQU-e8dgzx_FNvg/s400/bloodrose.gif

5.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQJYY_WHLtn5pmr0VJ2ai8MpaTGASN8O9tTTZOIiD06cznRg2RTWC6gsoFV8arTHQGq5uF_S7Yu4P4hgWOKaA69DoEWEpD_lQ0M8qlr-9c1_OLATaZOEnhOYjU5UhS5ge-PvxHpoVIMO0/s400/chain.gif

6.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXY8iJ7U-dN3I4Z_awMyrmFBm9Z0OyQOBrWjZ8Xlilvai3BrBzYjZZJt1IOaWS54OdRFOu7BbF6Uuryy_8p9SBhyphenhyphenLr-DH-4T_9KW3Ep2BiqqDsRL0JgTiNL1BmXSV0jqhb240gWEHLJIM/s400/dividers_96.gif

7.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_QB8chikf04xB4jUL2ZCA-XDuhbF5cMGLP6gZiyy52CXnKXxil1_6NSArDq_Tkd5LvnE2leb7WQoQK6SM1TaaciKWvI949c9hN4zcqZ-h0-WgxT1rwAZ3inFXUmf0NUL1vp7Dv-r1k_w/s400/irish-border4.gif

8.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFCpwxshH6xRrN2z15KVTu-aYmCYfCN2b0C5sA2jeWVxueHFpqIUhkowTypa_eWSgjYXiV5PYfJ3xVcR7Nt2EX3xFRSapTwb9f9GGjaTUsHypbh_Zc268uuLXD4WDI90yUF2stSISllUY/s400/resfiles_output.php.gif

9.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1R6kK1mZ4WQ-6JkRnxSGX_SXmpCI5wZSulR-g-a8LAsxvf2G_ON2wd9KEebc-CQPKeKPOaKhKXuz7L072CLStVgw1GDRcp239wcJ_QsvxMiGhXsYjwQRWa397qfaUNRccbSSG79smbDQ/s400/resfileszcp.png

05. Pilih Preview, Sekiranya anda berpuas hati pilih Save Template.

06. Selamat Mencuba.

07. Sumber AllBlogTools.

READ MORE...

Memasang Page Views Hit Counter.

Memasang Page Views Hit Counter bertujuan untuk menunjukkan kekerapan pengunjung / pembaca sesebuah post / page.

Untuk memasang blogger page views ini, sila ikuti beberapa langkah mudah ini.

1. Sign In akaun Blogger.

2. Pilih LAYOUT --> EDIT HTML.

3. Cari kod ini.

<p><data:post.body/></p>

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

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='hit-counter'>
&lt;a href=&#39;http://csharpdotnetfreak.blogspot.com&#39; rel=&#39;follow&#39;&gt;
<script src='http://www.amitjain.co.in/pageview.php' type='text/javascript'/> &lt;/a&gt;
</div></b:if>

5. Cari kod ini.

</body>

6. Tambahkan kod dibawah, di atas kod tadi.

<a href="http://csharpdotnetfreak.blogspot.com/2009/02/blogger-post-page-views-hit-counter.html"><script src='http://www.amitjain.co.in/pageview.php' type='text/javascript'/></a>

7. Pilih SAVE TEMPLATE.

8. Selamat Mencuba.

Sumber csharpdotnetfreak

READ MORE...

Memasang Related Posts With Thumbnails.

Memasang 'Related Posts' dapat membantu dan meningkatkan Page Views sesebuah blog.

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.

</head>

6. Kemudian gantikan kod tadi dengan kod ini.

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#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:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

7. Cari kod ini.

<div class='post-footer-line post-footer-line-1'>

8. atau

<p class='post-footer-line post-footer-line-1'>

9. Sekarang copy kod di bawah dan letakkan di bawah kod tadi.

<!-- Related Posts with Thumbnails Code Start-->
<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_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

10. Anda boleh menggantikan kod berwarna biru.

11. Pilih SAVE.

Sumber bloggerplugins

READ MORE...

Membuat 'Show All Post'.

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:include data='post' name='post'/>

6. Padam / delete kod di atas dan gantikan dengan kod di bawah.

<b:if cond='data:blog.homepageUrl !=

data:blog.url'>

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

<a expr:href='data:post.url'>

<div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#EAE9E9;color:#406A0E;">

<data:post.title/></div></a>

<b:else/>

<b:include data='post' name='post'/>

</b:if>

<b:else/>

<b:include data='post' name='post'/>

</b:if>

7. Pilih Save Template.

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

9. Copy kod di bawah dan Paste.

<a href="http://NAMABLOGANDA.blogspot.com/search?max-results=200">Show all post &raquo;</a>

10. Save.

Perhatian !!! Gantikan text / kod yang berwarna biru, sekiranya anda mempunyai artikel lebih dari 200 tukarkan max-result=200

11. Selamat Mencuba.

Sumber Blogspot Tutorial.

READ MORE...

Menampilkan 'Popular Posts'.

1. Masuk akaun Blogger.

2. Pilih 'Layout'--> 'Add a Gadget'--> 'Html / Javascript'.

3. Copy dan Paste kod di bawah.

Perhatian !!! Gantikan kod berwarna biru kepada nama blog anda cth : [ syamzone.blogspot.com ] . Jangan letakkan [ http:// atau www. ]

4. Save.

Anda hanya perlu memilih salah satu kod di bawah.

1.

<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>

2.

<script type="text/javascript">

function pipeCallback(obj) {

document.write('<ol 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('</ol>');

}

</script>

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

3.

<script type="text/javascript">

function pipeCallback(obj) {

document.write('<ol 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('</ol>');

}

</script>

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

4.

<script type="text/javascript">

function pipeCallback(obj) {

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

var i;

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

{

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

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

document.write(item);

}

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

}

</script>

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

Anda boleh mencuba salah satu kod di atas kerana setiap kod memberikan penampilan yang berlainan.

READ MORE...

Menghilangkan 'Subscribe To: Posts (Atom)'.

1. Sign in akaun blogger.

2. Pilih LAYOUT --> EDIT HTML.

3. Cari kod ini . Untuk memudahkan pencarian anda [ Ctrl + F ].

.feed-links {

4. Sekiranya sudah menjumpai kod di atas tambahkan kod ini di bawah kod tadi.

display:none;

5. Untuk memudahkan anda bagaimana kedudukan kod tersebut. Sila lihat kod di bawah.

.feed-links {
display:none;

}

6. Setelah selesai pilih 'PREVIEW'.

7. Jika anda berpuashati 'SAVE TEMPLATE'.

Perhatian !!! Sekiranya panduan di atas tidak berjaya untuk template anda. Sila cuba panduan di bawah.

1. Sign in akaun blogger.

2. Pilih LAYOUT --> EDIT HTML.

3. Klik EXPAND WIDGET TEMPLATE.

4. Cari kod di bawah.

<b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links -->

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

<div class='blog-feeds'>

<b:include data='feedLinks' name='feedLinksBody'/>

</div>

</b:if>

5. Kemudian cari kod ini dan padamkan.

<b:include data='feedLinks' name='feedLinksBody'/>

6. Setelah selesai pilih 'PREVIEW'.

7. Jika anda berpuashati 'SAVE TEMPLATE'.

Selamat Mencuba.

Sumber BLOG U

READ MORE...

Memasang 'Related Post'.

1. Mula-mula 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.

Perhatian !!! Jika anda mempunyai kod <data:post.body/> lebih dari satu cari yang paling akhir.

5. Cari kod ini :

<data:post.body/>

6. Sekarang Copy kod ini dan Paste di bawah kod tadi :

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

<div class='similiar'>

<div class='widget-content'>

<h3>Related Post</h3>

<div id='data2007'/><br/><br/>

<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;

var maxNumberOfPostsPerLabel = 4;

var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;

maxNumberOfLabels = 10;

function listEntries10(json) {

var ul = document.createElement(&#39;ul&#39;);

var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel;

for (var i = 0; i &lt; maxPosts; i++) {

var entry = json.feed.entry[i];

var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {

if (entry.link[k].rel == &#39;alternate&#39;) {

alturl = entry.link[k].href;

break;

}

}

var li = document.createElement(&#39;li&#39;);

var a = document.createElement(&#39;a&#39;);

a.href = alturl;

if(a.href!=location.href) {

var txt = document.createTextNode(entry.title.$t);

a.appendChild(txt);

li.appendChild(a);

ul.appendChild(li);

}

}

for (var l = 0; l &lt; json.feed.link.length; l++) {

if (json.feed.link[l].rel == &#39;alternate&#39;) {

var raw = json.feed.link[l].href;

var label = raw.substr(homeUrl3.length+13);

var k;

for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);

var txt = document.createTextNode(label);

var h = document.createElement(&#39;b&#39;);

h.appendChild(txt);

var div1 = document.createElement(&#39;div&#39;);

div1.appendChild(h);

div1.appendChild(ul);

document.getElementById(&#39;data2007&#39;).appendChild(div1);

}

}

}

function search10(query, label) {

var script = document.createElement(&#39;script&#39;);

script.setAttribute(&#39;src&#39;, query +

&#39;feeds/posts/default/-/&#39;

+ label +

&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);

script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);

document.documentElement.firstChild.appendChild(script);

}

var labelArray = new Array();

var numLabel = 0;

<b:loop values='data:posts' var='post'>

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

textLabel = &quot;<data:label.name/>&quot;;

var test = 0;

for (var i = 0; i &lt; labelArray.length; i++)

if (labelArray[i] == textLabel) test = 1;

if (test == 0) {

labelArray.push(textLabel);

var maxLabels = (labelArray.length &lt;=

maxNumberOfLabels) ?

labelArray.length : maxNumberOfLabels;

if (numLabel &lt; maxLabels) {

search10(homeUrl3, textLabel);

numLabel++;

}

}

</b:loop>

</b:loop>

</script>

</div>

</div>

</b:if>

Perhatian !!! Anda boleh mengantikan kod yang berwarna biru mengikut pilihan anda.

READ MORE...

Cara Membuat Link Download.

Cara-cara untuk membuat link download.

1. Link Download

Download

<a href="http://imgcash2.imageshack.us/img5/5056/syamzonebannerexchange.png/"target=_"blank">Download</a>

2. Photo Download.

<a href="http://imgcash2.imageshack.us/img5/5056/syamzonebannerexchange.png" target="_blank"><img src="http://imgcash2.imageshack.us/img5/5056/syamzonebannerexchange.png" alt="Download"title="Download" /></a>

Perhatian ! Gantikan link/Url berwarna biru.

READ MORE...