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

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

Sitemap.

1. SIGN IN akaun blogger

2. Pilih NEW POST.

3. Pilih EDIT HTML.

4. Copy kod di bawah dan paste.

<script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
<script src="http://www.abufarhan.co.cc/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

5. Tukarkan text berwarna merah.

6. Sebelum PUBLISH POST,jangan lupa meletakkan tajuk SITEMAP atau apa sahaja mengikut pilihan anda.

7. Pilih POST OPTIONS dan tukarkan tarikh menjadi tarikh lama.

Sumber ABU FARHAN.

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