cara buat | bina blog | tutorial | panduan blogspot | blogger info | tips

Cara pasang Recent posts floating bar widget di Blogspot

2011-12-22T06:24:00.001+08:00

Recent posts floating bar seperti yang boleh anda lihat di bahagian bawah blog ini adalah widget yang sangat menarik. Widget tersebut memaparkan tajuk post terkini yang berefek slider.

Untuk memasang widget Recent posts floating bar slider ini pada blog anda, sila ikut beberapa langkah di bawah.

1. Log in dashboard--> Template --> Edit HTML --> Proceed.

2. Seterusnya tick "Expand Widget Templates"

3. Dengan menggunakan keyboard, tekan "Ctrl+F" cari kod </head>

4. Copy dan paste kod css ini, di atas atau sebelum kod </head>

<style type='text/css'>

#bd {
float:bottom;
font-family:Arial, Helvetica, sans-serif;
line-height:1.5;
margin-top:5px;
font-size:12px
}

.text {
color:#98BF2F;
margin-left:8px
}

div#news-1 .gk_news_highlighter {
font-family:Verdana, Arial;
font-size:11px;
color:#666
}

div#news-1 {
width:960px;
height:24px;
margin-left: -10px;
display:scroll;
position:fixed;
bottom:1px;
border-top:1px solid #CCC;
border-bottom:1px solid #CCC;
background:#000 url(http://3.bp.blogspot.com/_LZtXSNcp76A/TBJ9sMqebeI/AAAAAAAABGI/9LYh5N58KYw/s320/gradient.png) repeat-x 0 -100px;
clear:both;
overflow:hidden
}

div#news-1 .gk_news_highlighter_wrapper {
float:left;
width:820px;
height:24px;
line-height:24px;
overflow:hidden;
position:relative
}

div#news-1 .gk_news_highlighter_item {
width:auto;
height:24px;
padding-left:20px;
display:none;
position:absolute
}

div#news-1 .nowrap {
white-space:nowrap
}

div#news-1 .gk_news_highlighter_title {
padding-left:5px
}

div#news-1 .gk_news_highlighter_desc {
padding-right:5px
}

div#news-1 .gk_news_highlighter_interface {
float:left;
width:120px;
height:24px;
text-align:right;
line-height:24px;
z-index:1000
}

div#news-1 .gk_news_highlighter_interface .text {
float:left;
display:block;
width:auto;
padding-left:5px;
font-weight:700
}

div#news-1 .gk_news_highlighter_interface div {
width:30px;
float:right
}

div#news-1 .gk_news_highlighter_interface a.prev,div#news-1 .gk_news_highlighter_interface a.next {
cursor:pointer;
width:13px;
height:24px;
display:block;
background:url('http://1.bp.blogspot.com/-H-u2nx45PwI/TuJ1Bwv5xDI/AAAAAAAABew/HQHKt-oVd7o/s1600/play.png') no-repeat 0 50%;
float:left
}

div#news-1 .gk_news_highlighter_interface a:hover.prev {
background-position:-13px 50%
}

div#news-1 a,div#news-1 a:link,div#news-1 a:visited,div#news-1 a:active,div#news-1 a:focus {
color:#FFF
}

div#news-1 .gk_news_highlighter_interface a.next {
float:right;
background-position:-26px 50%
}

div#news-1 .gk_news_highlighter_interface a:hover.next {
background-position:-39px 50%
}

</style>

5. Seterusnya, dengan menggunakan keyboard, tekan "Ctrl+F" cari pula kod <div id='content-wrapper'>.

Bagi blog yang menggunakan template dari template designer, cari kod </footer>

6. Copy dan paste kod HTML dan Javascript ini, dibawah atau selepas kod <div id='content-wrapper'>

Bagi blog yang menggunakan template dari template designer, paste kod HTML dan Javascript ini di atas atau sebelum </footer>

<div id='bd'>
<div class='gk_news_highlighter' id='news-1'>
<div class='gk_news_highlighter_interface'>
<span class='text'>HOT NEWS</span>
<div>
<a class='prev' href='#'/>
<a class='next' href='#'/>
</div>
</div>
<div class='gk_news_highlighter_wrapper'>
<script language='JavaScript'>
imgr = new Array();
showRandomImg = false;
aBold = true;
text = "no";
showPostDate = false;
summaryPost = 200;
summaryFontsize = 12;
summaryColor = "#000";
icon = " » ";
label = "";
numposts = 30;
home_page = "http://maribinablog.blogspot.com/";
</script>
<script src='http://yourjavascript.com/11843262101/post-hotnews.js' type='text/javascript'/>
</div>
</div>
</div>
<script src='http://yourjavascript.com/01042612211/mootools.js' type='text/javascript'/>
<script src='http://javscript-code.googlecode.com/files/engine_compress.js' type='text/javascript'/>
<script type='text/javascript'>
try {$Gavick;}catch(e){$Gavick = {};};
$Gavick["gk_news_highlighternews-1"] = {
"animationType" : 3,
"animationSpeed" : 200,
"animationInterval" : 2000,
"animationFun" : Fx.Transitions.linear,
"mouseover" : 1};
</script>

7. Edit kod yang di bold dengan warna merah dengan menggantikannya kepada URL blog anda dan juga bilangan post yang hendak dipaparkan.

8. Seterusnya klik Preview. Jika kedudukan bar terlalu ke kiri atau ke kanan, sila edit nilai pada kod yang di bold dengan warna biru pada langkah 4.

width:960px; (Panjang bar)
margin-left: -10px; (Jika kedudukan bar terlalu ke kanan, edit nilai -10 kepada 10 dan sebaliknya)

9 . Akhir sekali, jika anda berpuas hati dengan kedudukan bar tersebut, klik Save.

Cara pasang Recent Posts Slider versi 2

2011-12-09T15:11:00.001+08:00

Recent posts slider versi 2 seperti yang boleh anda lihat pada blog ini (sila klik) sememangnya widget yang sangat menarik. Widget tersebut akan memaparkan tajuk post beserta thumbnail (image) yang berefek slider.

Untuk memasang widget recent post slider ini pada blog anda, sila ikut beberapa langkah di bawah.

Langkah 1

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

Langkah 2

Salin kod di bawah dan paste pada ruang Content HTML/Javascript (rujuk langkah 1).

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function(){
var first = 0;
var speed = 700;
var pause = 4500;
function removeFirst(){
first = $('ul#listticker li:first').html();
$('ul#listticker li:first')
.animate({opacity: 0}, speed)
.fadeOut('slow', function() {$(this).remove();});
addLast(first);
}
function addLast(first){
last = '<li style="display:none">'+first+'</li>';
$('ul#listticker').append(last)
$('ul#listticker li:last')
.animate({opacity: 1}, speed)
.fadeIn('slow')
}
interval = setInterval(removeFirst, pause);
});
</script>
<style type="text/css">
#listticker{
height:277px;
width:280px;
margin-bottom:15px;
padding:0px;
overflow:hidden;
}
#listticker li{
background:#FDE1E1 url(http://3.bp.blogspot.com/_LZtXSNcp76A/TBJ9sMqebeI/AAAAAAAABGI/9LYh5N58KYw/s320/gradient.png) repeat-x 0 -100px!important;
border: 1px solid #C6C6C6;
list-style:none;
line-height:0.90em;
height:46px;
margin:3px;
padding:2px;
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
}
#listticker li a{
font-family: 'arial';
text-transform:normal;
text-shadow:0 1px 2px rgba(0,0,0,0.6);
letter-spacing:0.05em;
overflow:hidden;
}
#listticker img{
float:left;
margin:3px 3px 4px -7px;
padding:0px;
border:#EAE7E7 solid thin;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.6);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.6);
box-shadow: 1px 1px 2px rgba(0,0,0,0.6);
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
#listticker img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-webkit-transform: scale(1.2);
}
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png";
imgr[1] = "http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png";
imgr[2] = "http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png";
imgr[3] = "http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png";
imgr[4] = "http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png";
showRandomImg = true;
tablewidth = 250;
cellspacing = 0;
borderColor = "";
bgTD = "#";
imgwidth = 35;
imgheight = 35;
fntsize = 12;
acolor = "#262626";
aBold = true;
icon = "";
text = "no";
showPostDate = false;
summaryPost = 0;
summaryFontsize = 0;
summaryColor = "#";
icon2 = "";
numposts = 15;
home_page = "http://maribinablog.blogspot.com/";
</script>
<script src="http://javscript-code.googlecode.com/files/recent_posts_slider.js" type="text/javascript"></script>

Sila edit kod yang berwarna biru mengikut kesesuaian blog anda.

width:280px; (lebar kotak)
tablewidth = 250 (lebar teks pada kotak)
background:#FDE1E1; ( background kotak)
acolor = "#262626"; (Warna teks)
numposts = 15; (Bilangan tajuk post yang ingin dipaparkan)
home_page = "http://maribinablog.blogspot.com/"; ( URL blog anda)

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

Jquery Sliding Login Panel di atas header blog

2011-11-12T15:27:00.001+08:00

Untuk membina Jquery Sliding login panel di atas header blog, seperti yang boleh anda lihat di sini (Demo), sila ikut beberapa langkah di bawah.

1. Log in dashboard--> Template --> Edit HTML --> Proceed.

2. Dengan menggunakan keyboard, tekan "Ctrl+F" cari kod ]]></b:skin>

3. Copy dan paste kod css ini, di atas atau sebelum kod ]]></b:skin>

#slide-panel{
background-color:#000;
border-bottom:2px solid #838383;
display:none;height:80px;
margin:auto;padding-top:20px;
}

.slide{width:950px;
margin:auto;
}

.btn-slide:link,.btn-slide:visited{
color:#fff;
float:right;
display:block;
font-size:14px;
font-weight:bold;
height:28px;
padding:3px 0 3px 0;
line-height:28px;
text-align:center;
text-decoration:none;
width:70px;
font-family:Arial;
background:#000;
margin-top:-2px;
-moz-border-radius:0px 5px 0px 5px;
-webkit-border-bottom-left-radius:8px;
-webkit-border-bottom-right-radius:8px;
}

.loginform{
width:950px;
margin:0 auto;
color:#999;
font-family:Arial,Helvetica,sans-serif;
}

.formdetails{
color:#FFF;
font-size:12px;
padding:5px;
}

.formdetails input{
border:none;
padding:2px 5px;
background-color:#EFEFEF;
}

.loginregister{
color:#999;padding:5px;
}

.loginregister a:link,.loginregister a:visited{
color:#90fff6;
font-size:12px;
}

.loginregister a:hover{
color:#fff';
}

.loginform h2{
padding:10px 10px 10px 0;
font-size:18px;
font-weight:normal;
text-transform:uppercase;
}

.loginform ul li{
display:inline;
}

.loginform ul li a:link,.loginform ul li a:visited{
color:#FFF;
font-size:12px;
text-decoration:underline;
}

input#signIn{
color:#fff;
background:url(https://lh4.googleusercontent.com/_U0QaeycS3vw/TZHtnbhNayI/AAAAAAAAAcY/o9eDhACl16M/btn_login.png) no-repeat;
width:94px;
height:25px;
cursor:pointer;
padding-bottom:5px;
}

input#Email,input#Passwd{
background:#414141;color:#fff;
}

input:focus#Email,input:focus#Passwd{
background:#545454;
}

4. Seterusnya, dengan menggunakan keyboard, tekan "Ctrl+F" cari pula kod </head>

5. Copy dan paste kod ini, di bawah atau selepas kod </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){$(".btn-slide").click(function(){$("#slide-panel").slideToggle("slow");});});
</script>

<div id='slide-panel'><div class='loginform'><div class='formdetails'>
<form action='https://www.google.com/accounts/ServiceLogin?service=blogger&continue=https%3A%2F%2Fwww.blogger.com%2Floginz%3Fd%3Dhttp%253A%252F%252Fwww.blogger.com%252Fhome%26a%3DADD_SERVICE_FLAG&passive=true&alinsu=0&aplinsu=0&alwf=true&ltmpl=start&skipvpage=true&rm=false&showra=1&fpui=2&naui=8#s01' method='post'>

<label for='log'>Username : </label><input id='Email' name='Email' size='20' type='text'/>

<label for='pwd'>Password : </label><input id='Passwd' name='Passwd' size='20' type='password'/>

<input id='signIn' name='signIn' type='submit' value='Masuk'/>

<label for='rememberme'><input checked='checked' id='rememberme' name='rememberme' type='checkbox' value='forever'/>Ingatkan saya</label>
</form></div>

<div class='loginregister'>
<a href='https://www.blogger.com/signup.g' target='_blank'>Daftar</a> | <a href='http://www.blogger.com/forgot.g' target='_blank'>Lupa kata laluan anda?</a>
</div></div></div>

<div class='slide'><a class='btn-slide' href='#'>Sign in </a></div>

6. Akhir sekali, klik PREVIEW. Jika tiada sebarang mesej error terpapar, klik Save.

p/s: Untuk menukar warna background panel dan button, sila edit kod yang di highlightkan dengan warna merah.

Cara buat Jquery marquee banner di blogspot

2011-04-13T00:03:00.002+08:00

Untuk membuat Jquery Marquee Banner, seperti yang boleh di lihat di sidebar blog ini, hanya ikut langkah di bawah.

Untuk melihat efeknya, letakkan kursor mouse di atas image.

Langkah 1

Salin dan edit kod di bawah dengan menggantikan http://URL BLOG disini/ dengan URL blog dan masukkan URL image disini dengan URL image.

<script type="text/javascript" src="https://sites.google.com/site/jquery9/crawler.js">
/*
Text and/or Image Crawler Script ©2009 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/ username: jscheuer1
This Notice Must Remain for Legal Use
*/
</script>

<script type="text/javascript">
marqueeInit({
uniqueid: 'image-marquee',
style: {
'padding': '2px',
'width': '100%',
'height': 'auto'
},
inc: 9, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)

moveatleast: 4,
neutral: 150,
savedirection: false
});
</script>

<div class="marquee" id="image-marquee">

<a href="http://URL BLOG disini/">
<img src="masukkan URL image disini" />
</a>

<a href="http://URL BLOG disini/">
<img src="masukkan URL image disini" />
</a>

<a href="http://URL BLOG disini/">
<img src="masukkan URL image disini" />
</a>

<a href="http://URL BLOG disini/">
<img src="masukkan URL image disini" />
</a>

<a href="http://URL BLOG disini/">
<img src="masukkan URL image disini" />
</a>

</div>

Langkah 2

Log in blog => Dashboard => Design => Add A Gadget => HTML/Javascript

Paste kod yang telah siap di edit (rujuk langkah 1) pada ruangan Content dan Save.

http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm

Cara pasang efek spinning pada comment avatar

2011-02-13T05:42:00.007+08:00

Untuk memasang spinning effect pada picture Avatar dibahagian komen seperti yang boleh anda lihat pada komen blog ini, Hanya ikut beberapa langkah yang mudah di bawah.

p/s: Effect akan befungsi apabila kursor mouse di letak pada image avatar tersebut.

Langkah 1

Login Blogger Dashboard --> Design --> Add A Gadget --> HTML/Javascript.

langkah 2

Copy dan paste kod di bawah pada content HTML/Javascript.

<style type="text/css">
.avatar-image-container img, comments .avatar-image-container img {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
</style>

<script src="http://mootools-code.googlecode.com/files/mootools-1.3.2.js"></script>

<script>
window.addEvent("domready",function() {

// "Globals" - Will make things compress mo-betta
var $random = function(x) { return Math.random() * x; };
var availableWidth = 0, availableHeight = 0;
var cssPrefix = false;
switch(Browser.name) {
case "safari":cssPrefix = "webkit";break;
case "chrome":cssPrefix = "webkit";break;
case "firefox":cssPrefix = "moz";break;
case "opera":cssPrefix = "o";break;
}

// The Icons
var icons = $$(".avatar-image-container img, comments .avatar-image-container img ");
// Apply opacity
var zIndex = 1000;
// Randomize each link
icons.each(function(element,index) {
var startDeg =(360);
var resetPlace = function() {
element.fade(0.4).setStyle("-" + cssPrefix + "-transform","rotate(" + startDeg + "deg)");
}
element.set("style","top:" + $random(availableHeight) + "px; left:" + $random(availableWidth) + "px; z-index:" + zIndex);
resetPlace();
element.addEvents({
mouseenter: function() { element.fade(1).setStyle("z-index",++zIndex).setStyle("-" + cssPrefix + "-transform","rotate(0deg)");},
mouseleave: resetPlace});
});
});
</script>

Akihr sekali, klik Save

p/s: View terbaik effect ini dengan menggunakan Google Chrome

Cara pasang jquery Twitter Ticker di blogspot

2011-01-14T08:55:00.003+08:00

Jquery Twitter Ticker seperti yang boleh anda lihat pada demo di tutorialzine.com atau di sidebar blog ini, adalah satu plugin wordpress yang sangat menarik. Jika anda mempunyai akaun Twitter dan aktif ber'Twitter', plugin ini sesuai untuk di pasang di blogspot.

Bagi pengguna wordpress, anda boleh download plugin tersebut di http://tutorialzine.com/2009/10/jquery-twitter-ticker. Bagi pengguna blogger,anda boleh cuba tutorial asalnya di sini(sila klik) ataupun ikut beberapa langkah di bawah.

Langkah 1

Salin kod di bawah dan paste pada HTML/Javascript.(rujuk gambar dibawah).

<style>
#twitter-ticker{
width:100%;
height:230px;
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
background: #ccc;
color:#666;
display:none;
text-align:left;
}

#tweet-container{
height:160px;
width:auto;
overflow:hidden;
}

#twitIcon{
position:absolute;
top:-6px;
left:40px;
}

#top-bar{
height:40px;
background:url() repeat-x;
border-bottom:1px solid white;
position:relative;
margin-bottom:8px;
}

.tweet{
padding:5px;
margin:0 8px 8px;
border:2px solid #FDFAFA;
background:#FDFAFA;
width:auto;
overflow:hidden;
}

.tweet .avatar{
float:left;
}

.tweet .user{
float:left;
padding: 0px 0px 0 0;
}

.tweet a {
color:#B30404 ;
font-weight: blod;
font-size:11px;
text-decoration: none;
}

.tweet a:hover {
color: #fc6602;
font-size:11px;
font-weight: normal;
text-decoration: none;
}

.tweet .avatar img{
float:left;
width:50px;
height:50px;
border:1px solid #ccc;
margin:4px 5px 0px 0;
}

.tweet .txt{
font-size:11px;
color:#222121;
margin:2px 2px;
}
.tweet .time{
margin-left:3px;
color:#fff;
white-space:nowrap;
}

#loading{
margin:100px 95px;
}

#twitter-ticker{
margin:-30px 0px -4px;
}

.jScrollPaneContainer {
position: relative;
overflow: hidden;
z-index: 1;
}

.jScrollPaneTrack {
position: absolute;
cursor: pointer;
right:4px;
top:0;
height: 100%;
background: #ddd;
}

.jScrollPaneDrag {
position: absolute;
background: #999;
cursor: pointer;
overflow: hidden;
}

.jScrollPaneDragTop {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}

.jScrollPaneDragBottom {
position: absolute;
bottom: 0;
left: 0;
overflow: hidden;
}

a.jScrollArrowUp {
display: block;
position: absolute;
z-index: 1;
top: 0;
right: 0;
text-indent: -2000px;
overflow: hidden;
/*background-color: #666;*/
height: 9px;
}

a.jScrollArrowUp:hover {
/*background-color: #f60;*/
}

a.jScrollArrowDown {
display: block;
position: absolute;
z-index: 1;
bottom: 0;
right: 0;
text-indent: -2000px;
overflow: hidden;
/*background-color: #666;*/
height: 9px;
}

a.jScrollArrowDown:hover {
/*background-color: #f60;*/
}

a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
/*background-color: #f00;*/
}

h4.tut{
color:#fff;
font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
font-size:16px;
padding:12px 0 0 88px;
text-transform:uppercase;
text-shadow:2px 1px 6px #333;
}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery.mousewheel.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/jquery01/jScrollPane-1.2.3.min.js"></script>
<script type="text/javascript">
var tweetUsers = ['ID Twitter disini'];
var buildString = "";

$(document).ready(function(){

$('#twitter-ticker').slideDown('slow');

for(var i=0;i<tweetUsers.length;i++)
{
if(i!=0) buildString+='+OR+';
buildString+='from:'+tweetUsers[i];
}

var fileref = document.createElement('script');

fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", "http://search.twitter.com/search.json?q="+buildString+"&callback=TweetTick&rpp=100");

document.getElementsByTagName("head")[0].appendChild(fileref);

});

function TweetTick(ob)
{
var container=$('#tweet-container');
container.html('');

$(ob.results).each(function(el){

var str = ' <div class="tweet">\
<div class="avatar"><a href="http://twitter.com/'+this.from_user+'" target="_blank"><img src="'+this.profile_image_url+'" alt="'+this.from_user+'" /></a></div>\
<div class="user"><a href="http://twitter.com/'+this.from_user+'" target="_blank">'+this.from_user+'</a></div>\
<div class="time">'+relativeTime(this.created_at)+'</div>\
<div class="txt">'+formatTwitString(this.text)+'</div>\
</div>';

container.append(str);

});

container.jScrollPane();
}

function formatTwitString(str)
{
str=' '+str;
str = str.replace(/((ftp|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
str = str.replace(/([^\w])\@([\w\-]+)/gm,'$1@<a href="http://twitter.com/$2" target="_blank">$2</a>');
str = str.replace(/([^\w])\#([\w\-]+)/gm,'$1<a href="http://twitter.com/search?q=%23$2" target="_blank">#$2</a>');
return str;
}

function relativeTime(pastTime)
{
var origStamp = Date.parse(pastTime);
var curDate = new Date();
var currentStamp = curDate.getTime();

var difference = parseInt((currentStamp - origStamp)/1000);

if(difference < 0) return false;

if(difference <= 5) return "Just now";
if(difference <= 20) return "Seconds ago";
if(difference <= 60) return "A minute ago";
if(difference < 3600) return parseInt(difference/60)+" minutes ago";
if(difference <= 1.5*3600) return "One hour ago";
if(difference < 23.5*3600) return Math.round(difference/3600)+" hours ago";
if(difference < 1.5*24*3600) return "One day ago";

var dateArr = pastTime.split(' ');
return dateArr[4].replace(/\:\d+$/,'')+' '+dateArr[2]+' '+dateArr[1]+(dateArr[3]!=curDate.getFullYear()?' '+dateArr[3]:'');
}
</script>

<div id="twitter-ticker">
<div id="top-bar">

<div id="twitIcon"><img src="http://1.bp.blogspot.com/_LZtXSNcp76A/TSGFn0L2w2I/AAAAAAAABWA/SNaKxqfd_4s/s1600/twitter_sign.png" width="48" height="48" alt="Twitter icon" /></div>
<h4 class="tut">LATEST TWEETS</h4>

</div>

<div id="tweet-container">
</div><div style="color:#B30404; font-family: "Trebuchet MS",sans-serif;text-align: right;padding-right:20px;text-decoration: none;">
<a href="http://maribinablog.blogspot.com/2011/01/cara-pasang-jquery-twitter-ticker-di.html"><i><span style="font-size: xx-small;">Get this widget</span></i></a></div></div>

p/s:

1. Gantikan kod yang di bold dengan akaun twitter anda.

Contoh:

Akaun Twitter: http://twitter.com/nescafeaisblog

var tweetUsers = ['nescafeaisblog'];

Jika anda ingin menggabungkan akaun twitter rakan anda, tambah kod seperti contoh di bawah.

var tweetUsers = ['nescafeaisblog','ID_TWITTER1','ID_TWITTER2','ID_TWITTER3'];

2. Tajuk LATEST TWEETS pada kod yang di bold juga boleh di ubah mengikut kesesuaian.

Cara pasang Jquery Slide Out Navigation di blogspot

2010-12-13T11:00:00.038+08:00

Selain menggunakan cara float pada bahagian tepi blog untuk button-button seperti Facebook, Twitter, Youtube dan sebagainya seperti yang boleh anda lihat pada tutorial Cara pasang Floating Button di sisi blog, terdapat satu lagi cara yang sangat menarik iaitu Slide Out Navigation untuk anda cuba kerana ia menggunakan efek Jquery yang ringan.

Untuk memasang Jquery Slide Out Navigation pada sebelah kanan blog (blogspot), hanya ikut beberapa langkah yang mudah di bawah. Untuk melihat demo yang telah di pasang pada blogspot, sila klik di sini.

Langkah 1

Login Blogger Dashboard --> Design --> Add A Gadget --> HTML/Javascript.

langkah 2

Copy dan paste kod di bawah pada content HTML/Javascript.

<style>

ul#navigation1 {
position: fixed;
margin: 0px;
padding: 0px;
top: 120px;
right: 0px;
list-style: none;
z-index:9999;
}
ul#navigation1 li {
width:100px;
border:0px;
display: block;
padding-top:1px;
padding-bottom:1px;
}

ul#navigation1 li a {
display: block;
margin-right: -2px;
width: 120px;
height: 70px;
background-color:#CFCFCF;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #AFAFAF;
-moz-border-radius:10px 0px 0px 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
-khtml-border-top-left-radius: 10px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity: 0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation1 .rss a{
background-image: url(http://4.bp.blogspot.com/_LZtXSNcp76A/TQO8L8P3ZKI/AAAAAAAABUM/CI6VTjlEZsI/s400/rss.png);
}
ul#navigation1 .facebook a {
background-image: url(http://1.bp.blogspot.com/_LZtXSNcp76A/TQO8LKKzUVI/AAAAAAAABT0/uDnhDlFgPuA/s400/facebook.png);
}
ul#navigation1 .twitter a {
background-image: url(http://3.bp.blogspot.com/_LZtXSNcp76A/TQO8MAfFqUI/AAAAAAAABUU/z1PwLV5UWlA/s400/twitter.png);
}
ul#navigation1 .profile a {
background-image: url(http://3.bp.blogspot.com/_LZtXSNcp76A/TQO9lg8rMiI/AAAAAAAABUk/DwJNZAO8Wnc/s400/photo.png);
}
ul#navigation1 .e-mail a {
background-image: url(http://2.bp.blogspot.com/_LZtXSNcp76A/TQO9lQ5T9GI/AAAAAAAABUc/Nyk6OTOMOH8/s400/mail_edit.png);
}

</style>

<script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$('#navigation1 a').stop().animate({'marginLeft':'85px'},1000);

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

<ul id="navigation1">
<li class="rss"><a href="http://masukkan-nama-blog-disini.blogspot.com/atom.xml"></a></li>
<li class="facebook"><a href="http://www.facebook.com/profile.php?id=masukkan-ID-Facebook-disini"></a></li>
<li class="twitter"><a href="http://twitter.com/masukkan-ID-Twitter-disini"></a></li>
<li class="profile"><a href="http://draft.blogger.com/profile/masukkan-ID-Profile-disini"></a></li>
<li class="e-mail"><a href="mailto:masukkan-email-disini@gmail.com"></a></li>
</ul>

P/s:

1.Untuk mengubah jarak ketinggian; sila edit angka pada kod top: 120px;

2. Untuk mengbah jarak tepi kanan jika efek terkeluar terlalu jauh, sila edit kod width: 120px;

3. Untuk memasukkan ID bagi akaun Facebook, Twitter , RSS Feed, Profile dan E mail anda, sila edit kod yang di bold dengan warna merah.

<ul id="navigation1">
<li class="rss"><a href="http://masukkan-nama-blog-disini.blogspot.com/atom.xml"></a></li>
<li class="My Facebook"><a href="http://www.facebook.com/profile.php?id=masukkan-ID-Facebook-disini"></a></li>
<li class="My Twitter"><a href="http://twitter.com/masukkan-ID-Twitter-disini"></a></li>
<li class="My Profile"><a href="http://draft.blogger.com/profile/masukkan-ID-Profile-disini"></a></li>
<li class="My Email"><a href="mailto:masukkan-email-disini@gmail.com"><span>My E-Mail</span></a></li>
</ul>

Akhir sekali, klik Save.

Sila Drag kotak Jquery Slide Out Navigation dan letakkan di bawah post jika terdapat tanda yang keluar pada efek tersebut.

Jika anda ingin mengubah icon, anda boleh dapatkan icon-icon yang menarik di Dryicons.com

Jquery Tab Menu Accordion versi 2

2010-12-07T20:50:00.003+08:00

Jika anda ingin menjimatkan ruang dibahagian sidebar, anda boleh mencuba Jquery Tab Menu Accordion seperti yang boleh dilihat pada demo di sini(sila klik). Pada Jquery Tab Menu Accordion tersebut, anda boleh masukkan berbagai jenis widget seperti Shout box, Top Post,Recent Post, Recent Comment, Top Commentator dan sebagainya mengikut citarasa anda sendiri. Jquery tab menu accordion ini semamangnya sangat menarik dan mudah kerana anda hanya perlu meletakkan cursor mouse pada title tab menu tersebut.

Untuk memasang Jquery tab menu accordion sila ikut beberapa langkah yang mudah dibawah.

Langkah 1

Login Blogger Dashboard --> Design --> Add A Gadget --> HTML/Javascript.

Copy dan paste kod di bawah pada content HTML/Javascript.

<style type="text/css">
h5 {
font-family: trebuchet-ms, arial, tahoma;
font-size: 13px;
padding: 0 0 1em;
font-weight:bold;
color: #ffffff;
}
.msg_list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#F80680;
margin:1px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#F4F4F8;
}
</style>

<script type="text/javascript" src="http://javscript-code.googlecode.com/files/menuaccordion.js"></script>

<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".msg_body").hide();
//slides the element with class "msg_body" when paragraph with class "msg_head" is clicked
$("#firstpane h5.msg_head").click(function()
{
$(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");
});
//slides the element with class "msg_body" when mouse is over the paragraph
$("#secondpane h5.msg_head").mouseover(function()
{
$(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");
});
});
</script>

<div class="msg_list" id="secondpane">
<h5 class="msg_head">Tajuk 1</h5>
<div class="msg_body">

Masukkan kod disini.

</div>

<h5 class="msg_head">Tajuk 2</h5>
<div class="msg_body">

Masukkan kod disini.

<h5 class="msg_head">Tajuk 3</h5>
<div class="msg_body">

Masukkan kod disini.

</div>
</div>

p/s:

Untuk mengubah warna background title box, title font dan background accordion box, sila edit kod yang di bold dengan warna biru.

color: #ffffff; ( title font )
background-color:#F80680; ( background title box )
background-color:#F4F4F8; ( background accordion box )

Untuk memasukkan widget seperti Shout box,Top Post,Recent Post, Recent Comment, Top Commentator dan sebagainya, gantikan teks Masukkan kod disini. dengan kod widget yang anda inginkan.

Edit teks Tajuk, 1 Tajuk 2, dan Tajuk 3 dengan title yang anda inginkan.

Langkah 2

Akhir sekali, klik Save.

Cara pasang Jquery lava-lamp navigation menu

2010-08-15T16:18:00.005+08:00

Untuk memasang jquery lava-lamp navigation menu (klik untuk demo), ikut beberapa langkah di bawah.

Salin dan paste kod di bawah pada HTML/Javascript(rujuk gambar dibawah).

<style>
#container {
width: 100%;
margin: 0px 0px;
padding: 0px 0px 40px 10px;
}

ul, li {
margin: 0; padding: 0;
}

#blob {
border-right: 1px solid #0059ec;
border-left: 1px solid #0059ec;
position: absolute;
top: 0;
z-index : 1;
background: #0b2b61;
background: -moz-linear-gradient(top, #0b2b61, #1153c0);
background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 2px 3px 5px #011331;
-webkit-box-shadow: 2px 3px 5px #011331;
}

#lava-lamp {
background: #32312E;
float: left;
border: 1px solid #BDBCBA;
margin: 0px 0px 15px;
padding: 8px 430px 10px 0px;
}

#lava-lamp li {
float: left;
list-style: none;
border-right: 1px solid #4a4a4a;
border-left: 0px solid #4a4a4a;
}

#lava-lamp li a {
color: #DDDCD8;
text-shadow: 0 0px 1px #81807B;
position: relative;
z-index: 2;
float: left;
font-size: 13px;
font-family: arial, sans-serif;
font-weight: bold;
text-decoration: none;
padding: 0px 20px;
}
</style>

<div id="container">

<ul id="lava-lamp">
<li id="selected"><a href="http://link-di-sini.blogspot.com">Home</a></li>
<li><a href="http://link-di-sini.blogspot.com">About</a></li>
<li><a href="http://link-di-sini.blogspot.com">Blog</a></li>
<li><a href="http://link-di-sini.blogspot.com">More About My Portfolio</a></li>
<li><a href="http://link-di-sini.blogspot.com">Contact</a></li>
</ul>

</div>

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

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

<script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery.spasticNav.js"></script>

<script type="text/javascript">
$('#lava-lamp').spasticNav();
</script>

p/s:

1.Untuk mengubah warna button, edit kod yang di bold berikut.

background: #0b2b61;
background: -moz-linear-gradient(top, #0b2b61, #1153c0);
background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));

2.Untuk mengubah warna background, edit kod yang di bold berikut.

background: #32312E;

3.Untuk mengubah URL dan Title, edit kod yang di bold berikut.

<li id="selected"><a href="http://link-di-sini.blogspot.com">Home</a></li>

<li><a href="http://link-di-sini.blogspot.com">About</a></li>

<li><a href="http://link-di-sini.blogspot.com">Blog</a></li>

<li><a href="http://link-di-sini.blogspot.com">More About My Portfolio</a></li>

<li><a href="http://link-di-sini.blogspot.com">Contact</a></li>

3.Untuk mengubah jarak background (rujuk gambar di bawah), edit kod yang di bold berikut.

padding: 8px 430px 10px 0px;

Jquery Lava-Lamp navigation menu

2010-08-12T23:31:00.001+08:00

Pada info kali ini, aku nak kongsi satu jquery navigation menu yang di panggil Lava lamp. Demo boleh dilihat pada bahagian atas posting ini ataupun dari demo asal yang boleh anda lihat di sini (sila klik). Tutorial yang aku cuba dari net.tutsplus.com ini nampaknya sangat menarik dari segi effect dan mudah untuk di pasang pada template blogspot. Aku cuba implement pada blogspot dan berjaya. Walaubagaimanapun, sedikit ubahsuai telah dilakukan bertujuan supaya navigation menu ini sesuai pada berbagai jenis theme dan dapat di pasang terus pada HTML/Javascript. Background asal di ubah mengikut warna background pada template. Warna button,warna teks dan saiz juga di ubah kerana saiz asal yang terlalu besar.

Jika anda semua berminat untuk mencubanya, sila dapatkan tutorial asalnya di entri How to Build a Lava-Lamp Style Navigation Menu atau untuk cara yang termudah, tunggu tutorial aku yang akan datang.

Button back to top versi 3

2010-08-04T14:38:00.002+08:00

Back to top button versi 3 yang boleh anda lihat pada bahagian bawah post (sila scroll ke bawah) blog ini memudahkan visitor untuk explore blog yang mempunyai layout yang panjang. Hanya perlu klik button tersebut, dan page akan scroll secara automatik ke atas.

Untuk memasang button back to top ini, sila ikut beberapa langkah yang mudah dibawah.

Langkah 1

Log in blog => Dashboard => Design => Add A Gadget=>HTML/Javascript=>

Langkah 2

Salin kod di bawah dan paste pada ruang content HTML/Javascript (rujuk langkah 1) dan Save.

<style type="text/css">
#scrolltotop a
{
display: block;
display: none;
z-index: 999;
opacity: .6;
position: fixed;
top: 100%;
margin-top: -20px;
left: 50%;
margin-left: -150px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
width: 68px;
line-height: 1px;
height: 15px;
padding: 10px 3px;
background-color: #000;
font-size: 12px;
font-weight: bold;
text-align: left;
color: #fff;
}
</style>
<div id="scrolltotop"><a href="#">Scroll to top</a></div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var scroll_timer;
var displayed = false;
var $scrolltotop = $('#scrolltotop a');
var $window = $(window);
var top = $(document.body).children(0).position().top;
$window.scroll(function () {
window.clearTimeout(scroll_timer);
scroll_timer = window.setTimeout(function () {
if($window.scrollTop() <= top)
{
displayed = false;
$scrolltotop.fadeOut(500);
}
else if(displayed == false)
{
displayed = true;
$scrolltotop.stop(true, true).show().click(function () { $scrolltotop.fadeOut(500); });
}
}, 100);
});
});
</script>

p/s:

1.Warna button boleh di edit dengan menukar kod warna bagi background-color: #000;

2.Kedudukan boleh di edit dengan mengubah nilai margin-left: -150px;

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

JQuery animated share button

2010-07-07T09:35:00.002+08:00

Untuk memasang JQuery animated share button pada blog seperti yang boleh anda lihat di bahagian sidebar blog ini, hanya iku beberpa langkah yang mudah di bawah.

Langkah 1

Log in blog => Dashboard => Page Element => Add A Gadget => HTML/Javascript.

Langkah 2

Salin kod biru di bawah dan paste pada ruang content HTML/Javascrpit(rujuk gambar di bawah) dan Save.

<style>

#stage{

position:relative;

width:110%;

height:140px;

padding-left:15px;

background:transparent;

}

.btn{

background:transparent;

height:90px;

left:0;

top:0;

width:20px;

position:relative;

margin:20px 0 0 0px;

float:left;

}

.bcontent{

position:absolute;

top:auto;

bottom:20px;

left:0;

}

span.fb_share_no_count {

display:block;

}

span.fb_share_count_top.fb_share_no_count {

line-height:54px;

}

span.fb_share_count_nub_top.fb_share_no_count{

display:none;

}

span.fb_share_no_count span.fb_share_count_inner {

background:#3B5998 url(http://static.fbshare.me/f_only.png) no-repeat scroll 20px 5px;

display:block;

}

</style>

<div class="btn facebook"><div class="bcontent"><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script</div</div>

</div>

Cara pasang Tab menu Jquery versi 4

2010-07-02T17:15:00.003+08:00

Pada tutorial sebelum ini, ada di tunjukkan beberapa tutorial untuk memasang jquery tab menu. Anda boleh membaca tutorial tersebut pada beberapa tajuk entri di bawah.

Tab menu Jquery versi 1
Tab menu Jquery versi 2
Tab menu Jquery versi 3

Untuk tutorial tab menu Jquery pada kali ini (sila klik untuk melihat contoh), mungkin cara ini mudah untuk anda cuba berbanding dengan cara pada tutorial yang sebelum ini kerana memerlukan anda untuk meletakkan kod tab menu jquery tersebut pada script template. Apa yang perlu anda lakukan adalah dengan membuat sedikit penambahan pada kod dan paste terus ke ruang content HTML/Javascript.

Untuk mencubanya, sila ikut beberapa langkah di bawah.

p/s: Mungkin cara ini tidak sesuai untuk beberapa jenis template kerana ianya memerlukan anda untuk masukkan kod di dalam script template. Harap maklum.

Langkah 1

Salin dan edit kod biru di bawah. Tukarkan kod yang di bold dengan menggantikan nama blog anda.

<style>

/******* GENERAL RESET *******/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,

font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,

tfoot, thead, tr, th, td {

vertical-align:baseline;

}

#container{

width: 100%;

line-height:12px;

font-size: 12px;

font-family: Arial;

margin:0pt;

cursor:pointer;

overflow: hidden;

}

.clear{

clear: both;

height: 0;

visibility: hidden;

display: block;

}

text-decoration: none;

}

#container ul{

list-style: none;

list-style-position: outside;

}

#container ul.menu li{

float: left;

margin:0 0px 0 0px;

}

#container ul.menu li{

font-weight: 600;

display: block;

padding: 5px 2px 2px 2px;

background: #000 url(http://3.bp.blogspot.com/_LZtXSNcp76A/TBJ9sMqebeI/AAAAAAAABGI/9LYh5N58KYw/s320/gradient.png)repeat-x 0 0;

margin-bottom: -1px;

margin-left:2px;

-moz-border-radius-topleft:6px;

-moz-border-radius-topright:6px;

border: 1px solid #d0ccc9;

border-width: 1px 1px 1px 1px;

position: relative;

color: #898989;

cursor: pointer;

}

#container ul.menu li.active{

background: #fff;

top: 1px;

border-bottom: 0;

color: #5f95ef;

}

.content{

margin: 0pt auto;

background: #efefef;

background: #e5e5e5 url(http://3.bp.blogspot.com/_LZtXSNcp76A/TBJ9sMqebeI/AAAAAAAABGI/9LYh5N58KYw/s320/gradient.png)repeat-x 0 0;

-moz-border-radius-topleft:5px;

-moz-border-radius-topright:5px;

-moz-border-radius-bottomleft:5px;

-moz-border-radius-bottomright:5px;

border: 1px solid #d0ccc9;

text-align: left;

padding: 10px;

padding-bottom: 20px;

font-size: 11px;

}

.content h1{

line-height: 1em;

vertical-align: middle;

height: 26px;

padding: 10px 10px 10px 35px;

font-size: 15px;

}

.content.news h1{

background: transparent url(http://1.bp.blogspot.com/_LZtXSNcp76A/TCjLUUUd0dI/AAAAAAAABIs/8WmIVGH7LIY/s320/favorite.png) no-repeat scroll left top;

}

.content.news{

display: block;

font-size: 11px;

color: #000000;

text-align: justify;

}

.content.news a{

font-size: 11px;

color: #5f95ef;

text-align:left;

padding: 0 0 0 0px;

}

.content.tutorials h1{

background: transparent url(http://3.bp.blogspot.com/_LZtXSNcp76A/TCjK0IkUeqI/AAAAAAAABIk/BWPeCZIQ93M/s320/heart.png) no-repeat scroll left top;

}

.content.tutorials{

display: none;

color: #000000;

text-align: justify;

}

.content.tutorials a{

color: #5f95ef;

text-align: left;

padding: 0 0 0 0px;

}

.content.links h1{

background: transparent url(http://2.bp.blogspot.com/_LZtXSNcp76A/TCjmfB9PY3I/AAAAAAAABI8/-OiGzMea9_o/s320/comment.png) no-repeat scroll left top;

}

.content.links{

display: none;

color: #000000;

font-size: 11px;

text-align: justify;

}

.content.links a{

color: #5f95ef;

text-align: left;

}

</style>

<li id="news" class="active">Recent</li>

<li id="tutorials">Popular</li>

<li id="links">Comments</li>

</ul>

<h1>Recent Posts</h1>

<ul>

</ul>

</div>

<h1>Popular Posts</h1>

<ul>

aBold = false;

numposts=1000;

maxshowresult=5;

home_page = "http://maribinablog.blogspot.com/";

</script>

</ul>

</div>

<h1>Recent Comments</h1>

<ul>

</ul>

</div>

Langkah 2

Log in blog => Dashboard => Design => Page Elements => Add A Gadget => HTML/Javascript.

Langkah 3

Paste kod yang telah siap di edit(rujuk langkah 1) dan paste pada ruang content HTML/Javascript dan Save.

Gunakan kod <h2></h2> untuk mengosongkan bahagian Title.

Langkah 4

Klik Preview, dan jika bahagian button atas ataupun Link jadi seperti gambar di atas, edit semula pada kod yang di bold hitam pada kod yang berwarna merah di bawah.

Button:

#container ul.menu li{

font-weight: 600;

display: block;

padding: 5px 2px 2px 2px;

Tukarkan angka 2px kepada 15px atau 20px. Ubah angka tersebut sehingga anda berpuas hati dengan kedudukannya.

Link:

.content.news a{

font-size: 11px;

color: #5f95ef;

text-align:left;

padding: 0 0 0 0px;

dan

.content.tutorials a{

color: #5f95ef;

text-align: left;

padding: 0 0 0 0px;

Tukarkan padding 0px kepada 10px atau 15px. Ubah angka tersebut sehingga anda berpuas hati dengan kedudukannya.

Cara pasang Jquery Slideshow Header

2010-06-09T14:25:00.003+08:00

Satu lagi efek JQuery yang di rasakan sangat mudah untuk di cuba. Slideshow header yang boleh anda lihat di sini(sila klik), sememangnya sangat menarik dan mudah untuk di pasang di blogspot. Anda tidak perlu menggunakan sebarang software atau teknik flash yang sukar dan sedikit membebankan dari segi loading. Ini kerana script jquery adalah ringan dan efek yang terpapar adalah 'smooth'. Ia berbeza dengan teknik javascript dan HTML biasa yang di lihat efek pergerakannya adalah kaku, tidak menarik dan ada kalanya tersekat-sekat.

Untuk mencuba JQuery slideshow header seperti yang boleh anda lihat di sini, adalah di nasihatkan supaya anda mencubanya di sebuah blog yang lain yang menggunakan template yang ringkas dan background Header yang kosong. Di cadangkan supaya anda menggunakan Template Minima.

Langkah 1

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

Langkah 2

Pada script template, cari kod </head>

Langkah 3

Salin dan paste kod biru di bawah di atas kod </head>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script src='http://sites.google.com/site/javascript10/jquery.innerfade.js' type='text/javascript'/>

Langkah 4

Kembali ke paparan Layout dan seterusnya klik Add A Gadget => HTML/Javascript.

Salin dan edit kod merah di bawah dengan menggantikan image URL yang di bold dengan image URL anda sendiri.

$(document).ready(function() {

$('#image_rotate').innerfade({

speed: 1800,

timeout: 3300,

fx: 'fade',

containerheight: '365px'

});

</script>

</ul>

Seterusnya, paste pada ruang Content HTML/Javascript dan Save.

Langkah 6

Delete Header yang asal (lama) dan drag Header yang baru ke bahagian atas dengan menggantikan tempat Header yang asal (lama).

Jquery Slideshow Header di blogspot

2010-06-05T14:10:00.003+08:00

Jika anda memahami apa itu JQuery, pasti anda akan bersetuju yang efek JQuery adalah berbeza dengan efek Javascript dan HTML yang biasa kita guna dan pasang di dalam blog. Efek dari JQuery lebih cepat, mudah dan ringan.

Untuk melihat efek-efek JQuery, anda boleh melayari Jqueryui.com.

Jquery Slideshow Header.

Satu lagi efek jquery yang di rasakan sangat mudah untuk di cuba. Slideshow header yang boleh anda lihat di sini(sila klik), sememangnya sangat menarik dan mudah untuk di pasang di blogspot. Anda tidak perlu menggunakan sebarang software atau teknik flash yang sukar dan sedikit membebankan dari segi loading. Ini kerana script jquery adalah ringan dan efek yang terpapar adalah 'smooth'. Ia berbeza dengan teknik javascript dan HTML biasa yang di lihat efek pergerakannya adalah kaku, tidak menarik dan ada kalanya tersekat-sekat.

Untuk melihat contoh penggunaan Jquery Slideshow Header pada blog yang sememangnya sangat menarik dan cantik, sila layari labuat.com/

Tutorial untuk memasang Jquery Slideshow Header akan di paparkan pada entri yang akan datang.

Cara pasang Floating Menu Jquery di blogspot

2010-06-03T18:49:00.002+08:00

Floating Menu Jquery seperti yang boleh anda lihat di net.tutsplus.com, (Demo, sila klik) boleh di pasang pada template blogspot. Tutorialnya juga ada di tunjukkan di sini.

Kalau di lihat dari segi fungsi, mungkin efek ini sedikit sebanyak membantu admin ataupun pengungjung yang melawat blog dan juga. Floating menu ini akan mengikut arah page scroll, sama ada ke bawah ataupun ke atas. Pada bahagian Floating Menu tersebut, anda boleh meletakkan link-link yang berkaitan ataupun di jadikan sebagai Control Panel.

Untuk melihat contoh efek Floating Menu di pasang pada blogspot, sila klik di sini.

Untuk memasang Floating Menu Jquery, sila ikut beberapa langkah dibawah.

p/s: Sila backup script template anda terlebih dahulu.

Langkah 1

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

Langkah 2

Dengan menggunakan keyboard, tekan kekunci Ctrl dan F secara serentak. Bar Find akan muncul. Seterusnya, taip atau paste kod ]]></b:skin> pada ruang Find dan kemudian tekan Enter.

Langkah 3

Salin kod biru di bawah dan paste sebelum atau diatas kod ]]></b:skin>

#floatMenu {

font:11px trebuchet MS;

text-align: left;

position:absolute;

top:150px;

left:55%;

margin-left:235px;

width:200px;

}

#floatMenu ul {

margin-bottom:20px;

}

#floatMenu ul li a {

display:block;

border:1px solid #999;

background-color:#222;

border-left:6px solid #999;

text-decoration:none

color:#ccc;

padding:5px 5px 5px 25px;

}

#floatMenu ul li a:hover {

color:#fff;

background-color:#333333;

}

#floatMenu ul.menu1 li a:hover {

border-color:#09f;

}

#floatMenu ul.menu2 li a:hover {

border-color:#9f0;

}

#floatMenu ul.menu3 li a:hover {

border-color:#f09;

}

Langkah 4

Sekali lagi, pada ruang Find, taip atau paste kod </head> . Seterusnya tekan Enter

Langkah 5

salin kod merah dibawah dan paste diatas atau sebelum kod </head>

var name = "#floatMenu";

var menuYloc = null;

$(document).ready(function(){

menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))

$(window).scroll(function () {

offset = menuYloc+$(document).scrollTop()+"px";

$(name).animate({top:offset},{duration:500,queue:false});

});

</script>

Seterusnya klik Preview, jika tiada mesej error terpapar, klik saja Save.

Langkah 6

Klik pada Layout => Add A Gadget => HTML/Javascript. Seterusnya edit kod di bawah dan kemudian paste pada Content Add A Gadget.( Seeloknya bahagian sidebar)

</ul>

<li><a href="#" onclick="return false;"> Table of content </a></li>

</ul>

<li><a href="#" onclick="return false;"> Technical support </a></li>

</ul>

</div>

p/s: Gantikan kod yang di bold hitam dengan Menu anda dan gantikan # dengan URL.

Akhir sekali klik Save.

Memasang button back to top versi dynamicdrive.com

2010-05-24T09:58:00.007+08:00

Back to top button yang boleh anda lihat pada sisi kanan bawah (sila scroll ke bawah) blog ini memudahkan visitor untuk explore blog yang mempunyai layout yang panjang. Hanya perlu klik button tersebut, dan page akan scroll secara automatik ke atas.

Untuk memasang button back to top ini, sila ikut beberapa langkah yang mudah dibawah.

p/s: Sila save script template terlebih dahulu.

Langkah 1

Log in blog => Dashboard => Layout => HTML/Javascript => Add A Gadget

Langkah 2

Salin kod di bawah dan paste pada ruang content Add A Gadget (rujuk langkah 1) dan Save.

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

Credit to mrpiratz.com