Plugin chatroom terbaik dari Plugchat.in

Widget dari Plugchat.in adalah satu aksesori blog yang patut anda cuba. Widget ini merpuakan sebuah mini chat room di mana, para pelawat yang datang ke blog yang menggunakan plugin ini, boleh berinteraksi secara berkumpluan. Widget ini juga di interaksikan kepada laman Facebook dan Twitter.

Plugin Plugchat.in berbentuk bar seperti yang boleh anda lihat di blog ini. Terdapat sebanyak 25 theme yang boleh anda pilih untuk di sesuaikan dengan warna blog anda.  Saiz window dan bar juga boleh di minimakan mengikut kesesuaian.Plugin ini juga tidak membebankan masa loading blog.

Kelebihan untuk proses memasang plugin ini, kita juga boleh untuk tidak mendaftar untuk menggunakannya.Ianya amat mudah untuk di pasang. Hanya dengan menyalin kod script yang di beri dan kemudian, ikut beberapa langkah di bawah.

Langkah 1

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

Langkah 2

Paste kod yang ada salin dari Plugchat.in pada ruang Content HTML/Javascript.

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

Akhir sekali, klik Save.


p/s: Sila paste kod chatroom di atas atau sebelum kod </body> pada script template anda dan save, jika tiada perubahan yang berlaku selepas anda masukkan kod chatroom tersebut pada ruang Content HTML/Javascript.

Credit:  http://www.jejaktrend.com/2010/06/groups-chat.html

Read More

Cara pasang Facebook Like Button di Blogspot

Untuk memasang Facebook Like Button pada setiap post, hanya ikut beberapa langkah yang mudah di bawah.

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


Langkah 1

Log in blog = Dashboard => Design => Edit HTML. Seterusnya, tick pada kotak Expand Widget Templates.

Langkah 2

Dengan menggunakan keyboard, tekan kekunci F3. Seterusnya taip atau paste kod <div class='post-header-line-1'/> pada kotak Find dan seterusnya, klik Find. Jika kod tersebut tiada, anda boleh menggantikannya kod <div class='post-header-line-1'> atau <data:post.body/>

Langkah 3

Salin kod biru di bawah dan paste kod tersebut di bawah atau selepas kod <div class='post-header-line-1'/> atau <div class='post-header-line-1'> atau <data:post.body/>

p/s: Anda boleh menukar saiz button dengan mengedit width dan height pada kod di bawah.

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;layout=standard&amp;show-faces=true&amp;width=450&amp;height=80&amp;action=like&amp;colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:80px'/>

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


P/s: Jika anda ingin mengubah kedudukan button tersebut, anda boleh gunakan kod ini untuk memaparkan button pada sebelah kanan atau kiri

<div style='float:right;padding:4px;'>
Masukkan kod Facebook Like Button di sini
</div>

Gantikan right kepada left pada float jika anda ingin memaparkan button pada sebelah kiri

Contoh:

<div style='float:left;padding:4px;'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;layout=standard&amp;show-faces=true&amp;width=450&amp;height=80&amp;action=like&amp;colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height::80px'/>
</div>

Read More

Cara pasang horizontal menu bar dengan shout box

Untuk memasang menu bar dengan auto-hide shout box, seperti yang boleh anda lihat di blog ini atau di sini(sila klik), sila ikut beberapa langkah di bawah:

p/s: Sila save template anda terlebih dahulu.

Langkah 1

Salin kod css berwarna biru di bawah. Edit kod warna dan width yang telah di bold di bawah. Anda boleh gunakan kod di bawah sebagai rujukan.

background: #72587F (Warna background menu bar)
background: #EE82EE (Warna button menu bar)
background: #9EDEFA (Warna background shout box)
width: 185px; (Lebar kotak shout box)

/*** menubar1 css mula ***/

#menubar1 {

margin: 0;

height:33px;

padding: 3px 6px 2px;

background: #72587F url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmR6gKgWt1irXB0yyuYGIWJMoT5rHWd1e63tlFpfUuEVnCPTp3wiMl7fb720rCOIcB9NRvGw75KiyyX_RDW2l4EUP-KezJ49c0LazfrIENVeZgXo4mnMmqSzHXIwsKUDc28fXbOXJ7-a6S/s320/gradient.png) repeat-x 0 -110px;

line-height: 100%;

border-radius: 0em;

-webkit-border-radius: 0em;

-moz-border-radius: 4px;

-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);

-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);

}

#menubar1 li {

margin: 0 5px;

padding: 0 0 8px;

float: left;

position: relative;

list-style: none;

}

/* main level link */

#menubar1 a {

font: bold 12px Arial;

color: #fff;

text-decoration: none;

display: block;

padding: 8px 20px;

margin: 0;

-webkit-border-radius: 6px;

-moz-border-radius: 6px;

text-shadow: 0 1px 1px rgba(0,0,0, .3);

}

#menubar1 a:hover {

background: #000;

color: #000;

}

/* main level link hover */

#menubar1 .current a, #menubar1 li:hover > a {

background: #EE82EE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmR6gKgWt1irXB0yyuYGIWJMoT5rHWd1e63tlFpfUuEVnCPTp3wiMl7fb720rCOIcB9NRvGw75KiyyX_RDW2l4EUP-KezJ49c0LazfrIENVeZgXo4mnMmqSzHXIwsKUDc28fXbOXJ7-a6S/s320/gradient.png) repeat-x 0 -40px;

color: #404040;

border-top: solid 1px #f8f8f8;

-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);

-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);

box-shadow: 0 1px 1px rgba(0,0,0, .2);

text-shadow: 0 1px 0 rgba(255,255,255, 1);

}

/* dropdown */

#menubar1 li:hover > ul {

display: block;

}

/* level 2 list */

#menubar1 ul {

font: normal 12px Arial;

color:#000000;

text-align:left;

display: none;

margin: 0;

padding: 2px 2px 2px 2px;

width: 185px;

position: absolute;

top: 35px;

left: 0;

background: #9EDEFA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmR6gKgWt1irXB0yyuYGIWJMoT5rHWd1e63tlFpfUuEVnCPTp3wiMl7fb720rCOIcB9NRvGw75KiyyX_RDW2l4EUP-KezJ49c0LazfrIENVeZgXo4mnMmqSzHXIwsKUDc28fXbOXJ7-a6S/s320/gradient.png) repeat-x 0 0;

border: solid 1px #b4b4b4;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);

-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);

box-shadow: 0 1px 3px rgba(0,0,0, .3);

}

/*** menubar1 css tamat ***/

Langkah 2

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


Langkah 3

Dengan menggunakan keyboard, tekan kekunci F3. Salin atau paste kod ]]></b:skin> pada kotak Find dan seterusnya tekan Enter.



Langkah 4

Salin kod css yang telah siap di edit(rujuk langkah 1) dan paste kod tersebut di atas atau sebelum kod ]]></b:skin> pada script template.



Langkah 5

Salin dan edit kod HTML berwarna merah di bawah dengan menggantikan URL dan tajuk. Kemudian, masukkan kod Shout box anda pada teks Masukkan kod shout box di sini.

<!-- menubar1 mula -->

<ul id='menubar1'>

<li class='current'><a href='http://maribinablog.blogspot.com'>Home</a></li>

<li><a href='http://maribinablog.blogspot.com/search/label/Tutorial'>Tutorial</a></li>

<li><a href='http://maribinablog.blogspot.com/search/label/info'>Blogger Info</a></li>

<li><a href='http://www.blogger.com/profile/01115549849119467408'>About Me</a></li>

<li class='current'><a href='#'>Shout Box</a>

<ul>

<li>Masukkan kod shout box di sini.</li>

</ul>

</li>

</ul>

<!-- Menubar1 tamat -->

Langkah 6

Sekali lagi, dengan menggunakan keyboard, tekan kekunci F3. Taip atau paste kod:

<body> jika anda ingin meletakkan menu bar di bahagian atas blog.


<div id='header-wrapper'> jika anda ingin meletakkan menu bar di bahagian atas header.

<div id='main-wrapper'> jika anda ingin meletakkan menu bar di bahagian bawah header.

Paste pada kotak Find dan seterusnya tekan Enter.


Langkah 7

Salin kod yang telah siap di edit (rujuk langkah 5) dan paste:

Di bawah atau selepas kod <body> jika anda ingin meletakkan menu bar di bahagian atas blog.

Di atas atau sebelum kod <div id='header-wrapper'> jika anda ingin meletakkan menu bar di bahagian atas header.

Di atas atau sebelum kod <div id='main-wrapper'> jika anda ingin meletakkan menu bar di bahagian bawah header.

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

Read More

Cara pasang Facebook share button dengan counter di Blogspot

Untuk memasang Facebook Share Button pada setiap post di bawah post title,seperti yang boleh anda lihat pada blog ini, hanya ikut beberapa langkah yang mudah di bawah.

Langkah 1

Pergi ke http://www.facebook.com/facebook-widgets/share.php dan pilih style button yang ingin anda pasang pada blog. Anda juga boleh memilih button dengan counter.

Langkah 2

Log in blog = Dashboard => Design => Edit HTML. Seterusnya, tick pada kotak Expand Widget Templates.

Langkah 3

Dengan menggunakan keyboard, tekan kekunci F3. Seterusnya taip atau paste kod <div class='post-header-line-1'/> pada kotak Find dan seterusnya, klik Find. Jika kod tersebut tiada, anda boleh menggantikannya kod <div class='post-header-line-1'> atau <data:post.body/>

Langkah 4

Salin kod yang telah siap pada Langkah 1 dan paste kod tersebut di bawah atau selepas kod <div class='post-header-line-1'/> atau <div class='post-header-line-1'> atau <data:post.body/>

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


P/s: Jika anda ingin mengubah kedudukan button tersebut, anda boleh gunakan kod ini untuk memaparkan button pada sebelah kanan atau kiri

<div style="float:right;padding:4px;">
Masukkan kod Facebook Share Button di sini
</div>

Gantikan right kepada left pada float jika anda ingin memaparkan button pada sebelah kiri

Contoh:

<div style="float:right;padding:4px;">
<a name="fb_share" type="button_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>

Read More

Cara Float ads Nuffnang dengan close button

Untuk menjadikan ads Nuffnang sidebar float(terapung) dengan close button pada sebelah sisi kanan blog seperti yang boleh anda lihat pada contoh yang ada di blog ini, sila ikut beberapa langkah yang sangat mudah di bawah.

Langkah 1

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

Langkah 2

Salin dan edit kod berwarna biru di bawah dengan menggantikan teks Masukkan kod di sini dengan kod Nuffnang sidebar anda.

<style type='text/css'>

#topbar{

position:absolute;

margin: 0px -23px;

padding: 0px;

width: 130px;

visibility: hidden;

z-index: 100;

}

</style>

<script type="text/javascript">

/***********************************************

* Floating Top Bar script- &#169; 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

***********************************************/

var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session

var startX = 30 //set x offset of bar in pixels

var startY = 5 //set y offset of bar in pixels

var verticalpos="fromtop" //enter "fromtop" or "frombottom"

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("topbar").style.visibility="hidden"

}

function staticbar(){

barheight=document.getElementById("topbar").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.right=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.stayTopRight=function(){

if (verticalpos=="fromtop"){

var pY = ns ? pageYOffset : iecompattest().scrollTop;

ftlObj.y += (pY + startY - ftlObj.y)/8;

}

else{

var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;

ftlObj.y += (pY - startY - ftlObj.y)/8;

}

ftlObj.sP(ftlObj.x, ftlObj.y);

setTimeout("stayTopRight()", 10);

}

ftlObj = ml("topbar");

stayTopRight();

}

if (window.addEventListener)

window.addEventListener("load", staticbar, false)

else if (window.attachEvent)

window.attachEvent("onload", staticbar)

else if (document.getElementById)

window.onload=staticbar

</script>

<div id="topbar">

<a href="" onclick="closebar(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKD7gvkR_HH2yaghZNb0lC1-quvqkhIgA-fSZZHyb1uHmHgZt1TIO8F8AR2qnjF2xMR-SQR1MyRznl8J6knmCHJoTphyphenhyphenB9ZGCFcLorP16-su0LRinaUkho6mhjvZJKRhIWWd2uxqrClm71/s320/close.png" border="0" /></a>

Masukkan kod di sini

</div>

Seterusnya, paste kod yang telah siap di edit pada ruang Content HTML/Javascript.

Akhir sekali, klik Save.

Read More

Cara pasang Floating Button di sisi blog

Untuk memasang Floating button di sisi blog seperti yang boleh anda lihat di sisi kanan blog ini, hanya ikut beberapa langkah yang mudah di bawah

Langkah 1

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

Langkah 2

Salin dan edit kod berwarna biru di bawah dengan menggantikan URL akaun anda pada kod yang di bold. Anda juga boleh menggantikan icon asal dengan icon anda sendiri.

<style type='text/css'>

a.linkopacity img {

filter:alpha(opacity=50);

-moz-opacity: 0.5;

opacity: 0.5;

-khtml-opacity: 0.5;}

a.linkopacity:hover img {

filter:alpha(opacity=100);

-moz-opacity: 1.0;

opacity: 1.0;

-khtml-opacity: 1.0; }

</style>

<div style='display:scroll; position:fixed; top:240px; right:-12px;'>

<a class='linkopacity' href='http://gengblogger.com/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='gengblogger'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjQna7Q_1KCW3JZg-TjLAzi0AB_iwM24HpMlm7FhFFKqy9qiRO4DycRaTdJ77k1JMkszlHpzGXjs6suM8ncF9-j7_raKntD7mbgWmjPgmTXQpeai98PqcHqqpx0BxoofGtnDr_ZNBEB8Kl/s320/icongb.PNG" /></a><br />

<a class='linkopacity' href='http://facebook.com/akaun facebook anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7ESXhc-Ddr_ykYeHLW0VsDeozpQlgLCZG5_t3mBPpFyzcMCOPe_rFJIYQSBi8NxBKXdSfnBa-2hHFntXdOfH9ngDpRb_cg5GniEHejv9rtiyt1AD_vACERIvNZk1wcHUVdtuLbDDoECsX/s320/facebook.png" /></a><br />

<a class='linkopacity' href='http://twitter.com/akaun twitter anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLSoo6qzYyBf2O70jz7SzpSWeMWc4zC-J__Dol4fW-U4TBjl8NaWlvQtBTzv64XTSDcLlN_rmj1nIScIDOokqOL4H4JquN9Dcc97JL2nqyD5g-2o6SWJoMgKSvMzJnQw4r_BovJIot0TaD/s320/twitter.png" /></a><br />

<a class='linkopacity' href='http://maribinablog.blogspot.com/feed blog' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feed'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi112xKLNrHVxJnHZofjOm830z5NU3T97rcfvlmYQN-kAz05lYXDrc7UYbyR8yJjKJEUacoLzXAjnMKr1xw4F2meTb9Dn80P-F2v5i3fKI_16Qh_NduCJJuKcMzVwa5ekdisiLNxZXVywP7/s320/feedblogger.png" /></a><br />

<a class='linkopacity' href='http://feedburner.com/akaun feedburner anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feedburner'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiopKtUzfKNVmhLedoRcSOanm2k5VeAmTK4Jfpa_jPLexqjfLY4mgwpBG4aY6039eMfXqEgj7nNu7Rz1m6hfLECgalVy1h7DD99CeZgZFPQ4C4rSFBtcsmViIcma43bLzMn89qx82ZJEXKN/s320/feedburner.png" /></a><br />

<a class='linkopacity' href='http://youtube.com/akaun youtube anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='youtube'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirwRyB29dIYI7GOjs9Ynz9ksuSKE3ylKgxWV9rvwJMTqTOAHoQHDMdY3SvciZUEQlzKZ82Quegluu-n779RGt_QKnfmk8E7Eass5KrL0dUMo-UlXba_qOwoCqhgZHIuanOj7drh8uNCp8r/s320/youtube.png" /></a><br />

<a class='linkopacity' href='http://flickr.com/akaun flickr anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='flickr'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSAaO9cB4FqOp2VBoE5-pYb2AZR_6SEyKvftBIt7ahvUzB5U_JH3TdAKfthdr9gKHs2pYcrdP12AerpdDJLtYxtSye-9UrW7ff3yiy7uErFUSg8l9tYITnmipG53cqxYeM7jWy3xIt-9c1/s320/flickr.png" /></a><br />

</div>

Seterusnya, paste kod yang telah siap di edit pada ruang Content HTML/Javascript.

Akhir sekali, klik Save.

Anda boleh mencari icon di  http://www.iconspedia.com

Read More

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

<script>

$(document).ready(function() {

$('#image_rotate').innerfade({

speed: 1800,

timeout: 3300,

fx: 'fade',

containerheight: '365px'

});

});

</script>

<ul id="image_rotate" style="list-style: none;">

<li><img src="masukkan URL image di sini" /></li>

<li><img src="masukkan URL image di sini" /></li>

<li><img src="masukkan URL image di sini" /></li>

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

Read More

Jquery Slideshow Header di blogspot

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.

Read More

Cara pasang Floating Menu Jquery di blogspot

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>

<script language='javascript' src='http://sites.google.com/site/defaultjssite/jquery_mini.js'/>

<script language='javascript' src='http://sites.google.com/site/defaultjssite/jquery.dimensions.js'/>

<script language='javascript'>

var name = &quot;#floatMenu&quot;;

var menuYloc = null;

$(document).ready(function(){

menuYloc = parseInt($(name).css(&quot;top&quot;).substring(0,$(name).css(&quot;top&quot;).indexOf(&quot;px&quot;)))

$(window).scroll(function () {

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

$(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)

<div id="floatMenu">

<ul class="menu1">

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

</ul>

<ul class="menu2">

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

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

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

</ul>

<ul class="menu3">

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

Read More