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).
Sumber....http://maribinablog.blogspot.com

Read more »

Cara pasang Jquery Slide Out Navigation di blogspot

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPS0R4nMwr3gTl-orcgOeaK8RHoQotySQapUElYk45o4rS8zQS9Iutt4XgeP6iAF4aVuc0cqAwJPZWW1QA6zTAaAloMOjzEWE3oMuXCgXOBg62_bea6H0mbida-GNDosKaqY04oG14RtY/s400/rss.png);
}
ul#navigation1 .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLLJ1difYDtlTQ9mMaA-o6herX9q4Sa3TLQK8SXT_jqmg5jck69CndPuBJeTFIGkkTNSC7bcIxSdzq3TQ6VW3o8BLZD5nJn7LLdpuXhLhM03K9iTcN_LFHbRffQxFD9Ya1Ls_P4Ohq8vQ/s400/facebook.png);
}
ul#navigation1 .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinFfcki0Ia1OZP4gbgStVzBZgnxRU_lIOxjVqrzfhToTCDOCNR9Xbjpexysxa1eknGoCBeHhcXoemjpfH4XlfqxBLCfsb4ZV1Q6EfLzWiIXkfxiBQVIufOZwVPFUYdzGDH3p_tY9Gx9qw/s400/twitter.png);
}
ul#navigation1 .profile a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivnJnCYRZGgw4vM_sEwWal__vTInNX4j0TKi22Qn0y4Y-0SVis0ZLjgKhCN_NxbiQRD2mxJXd0TRWE6d_LXTpMa81hdCODxwlvcXsApQP2lrNEvgr5Vi9qMm89UTAGNISZ32GjCB49vPY/s400/photo.png);
}
ul#navigation1 .e-mail a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlnHzVvqkf-zr2GzBk6r21kIHMdX-CNWGgkVvXfpVU62vtcQBHxX8jtGgaUr-BaL0zGZPU_25NPZWTy5h3dRpsaBWkF2-FncfcKVPPWLxFUaaowm6iB9TipkdVvWkOR-07rs0L0k6l9Bw/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


Sumber...http://maribinablog.blogspot.com

Read more »

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

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 horizontal menu bar dengan shout box

Untuk memasang menu bar dengan auto-hide shout box,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: #72587Furl(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjlLCgd82p35dfZvxFBCM0maHBn5blzYY2_Vc-EWjwUH-OuNyDWTEPQn5jSypRYXTj3IaEhLrxnX2VKBAI7TtDmKPIs71FGBp8b70S2DzhM7pq6K985tCelfQNhqEmcmoqH_-C4FLoW3va/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: #EE82EEurl(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjlLCgd82p35dfZvxFBCM0maHBn5blzYY2_Vc-EWjwUH-OuNyDWTEPQn5jSypRYXTj3IaEhLrxnX2VKBAI7TtDmKPIs71FGBp8b70S2DzhM7pq6K985tCelfQNhqEmcmoqH_-C4FLoW3va/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: #9EDEFAurl(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjlLCgd82p35dfZvxFBCM0maHBn5blzYY2_Vc-EWjwUH-OuNyDWTEPQn5jSypRYXTj3IaEhLrxnX2VKBAI7TtDmKPIs71FGBp8b70S2DzhM7pq6K985tCelfQNhqEmcmoqH_-C4FLoW3va/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
Sumber...http://maribinablog.blogspot.com

Read more »