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

Lazy Loading Page.

Memasang jQuery Lazy Load adalah salah satu cara untuk mempercepatkan "loading page" pada sesebuah blog yang mempunyai size image yang besar.

Lihat DEMO.

Bagaimana untuk memasang "plug in" ini ? Sila ikuti beberapa langkah mudah dibawah.

1. Sign in akaun blogger anda.

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

3. Copy kod dibawah dan PASTE.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type='text/javascript' src='https://sites.google.com/site/jquery01/jquery.lazyload.mini.js?ver=1.5.0'></script>
<script type="text/javascript">
jQuery(document).ready(function($){
if (navigator.platform == "iPad") return;
jQuery("img").lazyload({
effect:"fadeIn",
placeholder: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3gsK4rlWZYalMaoiwNZ3Vi3VorR51H6tKJetd2Kgj5wXlotMGXflAIYQw_Vtf-e1KBp48F4ekFJePgRZm7T9WNlvr3LTB4gESdgP0aZNfphGazO360-620aDnVbxytc-bBOYb_GkZ6OQ/s1600/grey.gif"
});
});
</script>

4. Akhir sekali pilih SAVE.

5. Selamat mencuba.

READ MORE...

Intro Page.

Apa itu "intro page" ? Bagaimana untuk membuatnya?

Untuk melihat DEMO.

Sekiranya anda sudah memahami apa itu "intro page" dan mahu membuatnya,sila ikuti beberapa langkah mudah di bawah.

1. Sign in akaun blogger anda.

2. Pilih DESIGN --> 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.

#intro{
background:#CAD8C9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieJJ6F_27K-fDM6hyphenhyphenQt7ngkiZleE0Eei52TvVy19So2T0Z9AfuEVSbvrppbI1DyRKVVXBKeR2f4pSJW3zhCMBXriombFUqT_i61eXuJCCvb7809lXWAikmmNMJY2xWpWWTVYFGQVAWxvM/) repeat-x top left fixed;
position:fixed;
width:100%;
height:100%;
margin:0;
padding:0;
z-index:100;
text-align:center;
visibility:hidden;
}
* html #intro{
position:absolute;
width:expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
}
#intro .welcome{
color: rgb(255, 0, 0);
font-weight: bold;
font-style: italic;
font-size:30px;
margin-top:10%;
margin-bottom:1%;
text-shadow:1px 1px 1px #fff;
}
#intro a img{border:none}
.gohome, .gohome a,.gohome a:visited,.gohome a:active{
color: rgb(255, 0, 0);
font-weight: bold;
font-style: italic;
margin-top:4%;
font-size:25px;
text-shadow:1px 1px 1px #fff
}
.gohome a:hover{
color:#ffffff;
text-shadow:1px 1px 1px #f00;
text-decoration:none
}

7. Kemudian cari kod ini

</head>

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

<script type='text/javascript'>
//<![CDATA[
/***********************************************
* Floating Top Bar script- © Dynamic Drive (www.dynamicdrive.com)
* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
/*************************************************
* Blogger intro by http://www.blogspottutorial.com
**************************************************/
var persistclose=1
var startX = 0
var startY = 0
var verticalpos="fromtop"
function iecompattest(){return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}}return returnvalue;}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("intro").style.visibility="hidden";}
function staticbar(){
barheight=document.getElementById("intro").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";}
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY; }
return el; }
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y == (pY + startY - ftlObj.y)/0;}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y == (pY - startY - ftlObj.y)/0;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10); }
ftlObj = ml("intro");
stayTopLeft();}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
//]]>
</script>

9. Seterusnya cari kod ini.

<body>

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

<div id='intro'><div class='welcome'>Welcome to my blog</div>
<a href='' onclick='closebar(); return false'><img alt='go to my homepage' src='http://i234.photobucket.com/albums/ee208/decnote/cute-comment/Cute-hi5-60.gif' title='go to my homepage'/></a>
<div class='gohome'><a href='' onclick='closebar(); return false'>Go to homepage</a></div>
</div>

11. Pilih PREVIEW untuk melihat hasilnya.

12. Sekiranya anda berpuashati pilih SAVE.

13. Selamat Mencuba.

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