Wednesday 21 November 2012

Text Area Dengan Butang Pilih Semua

Ok tutorial ni simple je, untuk membuat Text Area Dengan Butang Pilih Semua. Ni memudahkan pengunjung blog korang untuk copy paste Teks atau Code yang korang share kat blog korang.  Contoh seperti dibawah:


1. Copy code dibawah:
HTML CODE<code><span ><div><form name="copy"><div align="center"><input value="Pilih Semua" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"> </div><div align="center"></div><p align="center"><textarea rows="3" cols="20" style="border: 8px inset #ff3333; padding: 0pt 1px; background: #ff6666 none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: #ffffff; line-height: 1.5em; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px;" name="txt" wrap="VIRTUAL">MASUKKAN TEKS ATAU CODE KORANG DISINI</textarea></form></div></span></code>
  • Pilih Semua - Korang boleh ubah kepada teks yang lain, contoh seperti "Select All"
  • 3 - Bilangan Row
  • 20 - Bilangan column
  • #ff3333 - Warna bagi  Border
  • #ff6666 - Warna bagi Background
  • #ffffff - Warna bagi teks
  • MASUKKAN TEKS ATAU CODE KORANG DISINI - Gantikan teks yang bertulisan merah dengan teks atau code yang korang nak share kat blog korang.

Dapatkan Code Warna disini


Thursday 11 October 2012

Slide Open Egg Bookmarking Gadget Untuk Blogger



1.Login ke akaun blogger anda.
2.Pergi ke Dashboard >> Design >> Edit HTML.
PS: Backup dulu template anda
3.Tick Checkbox pada "Expand Widget Templates".
4.Klik Ctrl+F untuk mencari kod </head>
5.Copy(Ctrl+C) dan Paste(Ctrl+V) kod dibawah sebelum kod </head>

<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher: &quot;bea50586-2b9f-448d-947a-01385f28e305&quot;, onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>
 6.Klik Ctrl+F untuk mencari kod </body>
7.Copy(Ctrl+C) dan Paste(Ctrl+V) kod dibawah sebelum kod </body>
<div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareEgg&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;googleplus&#39;,&#39;linkedin&#39;,&#39;blogger&#39;,&#39;stumbleupon&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareegg&#39;});</script>
 8.Save dan lihat hasilnya.....

Sunday 23 September 2012

Popup Facebook Fan Pages Like Untuk Blogger

Kali aku nak share tutorial untuk buat facebook fan like popup....Mungkin dengan tutorial ni boleh meningkatkan Liker2 fan page korang..hehe .. mudah je ikut langkah dibawah ni k...

1. Login ke Dashboard blogger korang.
2. Pergi pada More Option dan pilih Layout
3. Klik pada Add a Gadget dan Pilih Html/Javascript
4. Copy (Ctrl+C) code dibawah:

<style>
/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*
User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkk5ZYdGnP5GmCjst0j5rA-OQgtRwo4zjoN581ljctuBcY_aWrSt0J9iqbjfIRZwcH3BaDsLXvj8dZEzJLkwlUzRcQZqnRra3NJ7iSDvvsm5HII3FGP6x9RrTOuLiuyFHeescjl3wdeKgO/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfUt8KFIG8W9mmrVGNQu7R0WeVN8kit1trDRoW_xorzOJB10dth6_TqjDmPMIptfiqg7wiNhAb2Tvlc4LQyJFkQ33lXTpcHmoFo2RoR_2EMSWFaks1EyOTlSlCVNBe4hxSqXB26kdIf1VF/s1600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkk5ZYdGnP5GmCjst0j5rA-OQgtRwo4zjoN581ljctuBcY_aWrSt0J9iqbjfIRZwcH3BaDsLXvj8dZEzJLkwlUzRcQZqnRra3NJ7iSDvvsm5HII3FGP6x9RrTOuLiuyFHeescjl3wdeKgO/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkk5ZYdGnP5GmCjst0j5rA-OQgtRwo4zjoN581ljctuBcY_aWrSt0J9iqbjfIRZwcH3BaDsLXvj8dZEzJLkwlUzRcQZqnRra3NJ7iSDvvsm5HII3FGP6x9RrTOuLiuyFHeescjl3wdeKgO/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfUt8KFIG8W9mmrVGNQu7R0WeVN8kit1trDRoW_xorzOJB10dth6_TqjDmPMIptfiqg7wiNhAb2Tvlc4LQyJFkQ33lXTpcHmoFo2RoR_2EMSWFaks1EyOTlSlCVNBe4hxSqXB26kdIf1VF/s1600/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkk5ZYdGnP5GmCjst0j5rA-OQgtRwo4zjoN581ljctuBcY_aWrSt0J9iqbjfIRZwcH3BaDsLXvj8dZEzJLkwlUzRcQZqnRra3NJ7iSDvvsm5HII3FGP6x9RrTOuLiuyFHeescjl3wdeKgO/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkk5ZYdGnP5GmCjst0j5rA-OQgtRwo4zjoN581ljctuBcY_aWrSt0J9iqbjfIRZwcH3BaDsLXvj8dZEzJLkwlUzRcQZqnRra3NJ7iSDvvsm5HII3FGP6x9RrTOuLiuyFHeescjl3wdeKgO/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkk5ZYdGnP5GmCjst0j5rA-OQgtRwo4zjoN581ljctuBcY_aWrSt0J9iqbjfIRZwcH3BaDsLXvj8dZEzJLkwlUzRcQZqnRra3NJ7iSDvvsm5HII3FGP6x9RrTOuLiuyFHeescjl3wdeKgO/s1600/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Iott-l8kJKhbvVOF0SQIavzkI4dk7MFydMoSyfU93McJMToEaeUHZNRhGgNHtGRgKpkIMbG7zhEYMOFlcm-uQ9sPy2Mhg1iqTxKUMsSlVY7ANp-zuMpCK7-sIRHROBFUkaFZNqMTvANl/s1600/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-ah2TKxhH5dHmRi3oyMmgCZ2h2b8wRYLrw_1aGOcYW13zbI4z7uFWEgmC3o_5Dlo7ORCT2fS9xbaQ-57U7zVvnV0zksrn6WLR1M5FkC7CdJxKlay-GUFShrNGEG76b43hLdfWWnUTu5Tm/s1600/loading.gif) no-repeat center center;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkk5ZYdGnP5GmCjst0j5rA-OQgtRwo4zjoN581ljctuBcY_aWrSt0J9iqbjfIRZwcH3BaDsLXvj8dZEzJLkwlUzRcQZqnRra3NJ7iSDvvsm5HII3FGP6x9RrTOuLiuyFHeescjl3wdeKgO/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
#cboxPrevious{left:0px; background-position: -51px -25px;}
#cboxPrevious.hover{background-position:-51px 0px;}
#cboxNext{left:27px; background-position:-75px -25px;}
#cboxNext.hover{background-position:-75px 0px;}
#cboxClose{right:0; background-position:-100px -25px;}
#cboxClose.hover{background-position:-100px 0px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
/*-----------------------------------------------------------------------------------*/
/* Facebook Likebox popup For Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.box-title {
color: #3B5998;
font-size: 20px !important;
font-weight: bold;
margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
<script src="http://yourjavascript.com/11215013191/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#subscribe"});
}
});
</script>
<!-- This contains the hidden content for inline calls -->
<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h3 class="box-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" >?</p></center></h3>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/faiz.tutorial&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
</center>
<p style=" float:right; margin-right:35px; font-size:9px;" >Dapatkan Widget Ini Di <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href=" http://faiztutorial.blogspot.com/">faiz-tutorial</a></p>
</div>
</div>
5. Paste (Ctrl+V) pada ruang yang tersedia pada Html/Javascript.
6. Gantikan link http://www.facebook.com/faiz.tutorial dengan url facebook fan pages korang...
7. Preview dan save...

Friday 31 August 2012

Background Untuk Post Footer

1. Dashboard > Design > Edit Html 2. Tekan Ctrl F serentak , dan cari kod ini :
.post-footer {
3. Dah jumpa ? GOOD ! Copy kod ini pulak :
text-align:center;
padding:8px;
color: #333333;
font-size: 95%;
background: #A5DBEB;
border-left: 7px solid #44B4D5;
border-right: 7px solid #44B4D5;
moz-box-shadow: 0 0 5px 2px #44B4D5;
-webkit-box-shadow: 0 0 5px 2px #44B4D5;
border-radius:7px;
margin:6px;
}
.post-footer .span {
margin-right: .3em;
}
4. Paste kat bawah kod yang korang carikan tadi tu .
* Warna merah korang boleh tukarkan kod background DI SINI !!
* Warna biru , itu kod warna untuk yang bahagian tepi kanan and kiri tu ... 
5. Sekarang cuba PREVIEW , tengok menjadi tak ? 
6. Kalau menjadi , bolehlah SAVE !

Friday 13 April 2012

Back to Top - Smooth Scrolling and fade Out

Tutorial:
1. Login ke Dashboard blogger.
2. Klik butang " More Options (rujuk no 1 pada GAMBAR 1) " dan klik " Layout (rujuk no 2 pada GAMBAR 1) ".

GAMBAR 1

3. Pada halaman Layout, klik " Add a Gadget (rujuk no 3 pada GAMBAR 2) " pada mana-mana bahagian yang anda nak untuk letakkan kod javascript tu nanti.

GAMBAR 2

4. Cari HTML/Javascript dan klik butang tambah (rujuk no 4 pada GAMBAR 3).

GAMBAR 3

5.  Copy (CTRL+C) kod javascript dibawah:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type='text/javascript' language='Javascript'>
var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (1=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 500]},
controlHTML: '<img onmousedown="event.preventDefault ? event.preventDefault() : event.returnValue = false" src="URL TOP BUTTON" width="70px" height="70px"/>', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ center of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},
init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'crosshair'})
.attr({title:'Fly To The Sky'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>
Gantikan:
  • URL TOP BUTTON - URL GAMBAR BUTTON BACK TO TOP ANDA .
  • width="70px" - 70 ADALAH LEBAR GAMBAR
  •  height="70px" - 70 ADALAH TINGGI GAMBAR

6. Paste (CTRL+V) pada ruang Content (rujuk no 5 pada GAMBAR 4)

GAMBAR 4

7. Seterusnya klik " Save (rujuk no 6 pada GAMBAR 4 ) " dan lihat la hasilnya..

Sunday 29 January 2012

Cursor Effect - Objek Berpusing Pada Cursor

Screenshot Cursor Effect - Objek Berpusing Pada Cursor

1. Login ke Dashboard blogger.
2. Klik butang " More Options (rujuk no 1 pada GAMBAR 1) " dan klik " Layout (rujuk no 2 pada GAMBAR 1) ".

GAMBAR 1

3. Pada halaman Layout, klik " Add a Gadget (rujuk no 3 pada GAMBAR 2) " pada mana-mana bahagian yang anda nak untuk letakkan kod javascript tu nanti.

GAMBAR 2

4. Cari HTML/Javascript dan klik butang tambah (rujuk no 4 pada GAMBAR 3).

GAMBAR 3

5.  Copy (CTRL+C) kod javascript dibawah:
<script language="JavaScript" type="text/javascript">

var xCol = "#FF0000";
var yCol = "#FFFF00";
var zCol = "#0000FF";

var n = 6; //number of dots per trail.
var t = 40; //setTimeout speed.
var s = 0.2; //effect speed.

var r,h,w;
var d = document;
var my = 10;
var mx = 10;
var stp = 0;
var evn = 360/3;
var vx = new Array();
var vy = new Array();
var vz = new Array();
var dy = new Array();
var dx = new Array();

var pix = "px";

var strictmod = ((document.compatMode) &&
document.compatMode.indexOf("CSS") != -1);

var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;

for (i = 0; i < n; i++)
{
var dims = (i+1)/2;
d.write('<div id="x'+(idx+i)+'" style="position:absolute;'
+'top:0px;left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+xCol+';font-size:'+dims+'px"><\/div>'
+'<div id="y'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+yCol+';font-size:'+dims+'px"><\/div>'
+'<div id="z'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+zCol+';font-size:'+dims+'px"><\/div>');
}

if (domWw) r = window;
else
{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else
{
if (d.body && typeof d.body.clientWidth == "number")
r = d.body;
}
}

function winsize()
{
var oh,sy,ow,sx,rh,rw;
if (domWw)
{
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number")
{
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else
{
rh = r.innerHeight;
rw = r.innerWidth;
}
h = rh;
w = rw;
}
else
{
h = r.clientHeight;
w = r.clientWidth;
}
}

function scrl(yx)
{
var y,x;
if (domSy)
{
y = r.pageYOffset;
x = r.pageXOffset;
}
else
{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}

function mouse(e)
{
var msy = (domSy)?window.pageYOffset:0;
if (!e) e = window.event;
if (typeof e.pageY == 'number')
{
my = e.pageY - msy + 16;
mx = e.pageX + 6;
}
else
{
my = e.clientY - msy + 16;
mx = e.clientX + 6;
}
if (my > h-65) my = h-65;
if (mx > w-50) mx = w-50;
}

function assgn()
{
for (j = 0; j < 3; j++)
{
dy[j] = my + 50 * Math.cos(stp+j*evn*Math.PI/180) *

Math.sin((stp+j*25)/2) + scrl(0) + pix;
dx[j] = mx + 50 * Math.sin(stp+j*evn*Math.PI/180) *

Math.sin((stp+j*25)/2) * Math.sin(stp/4) + pix;
}
stp+=s;

for (i = 0; i < n; i++)
{
if (i < n-1)
{
vx[i].top = vx[i+1].top; vx[i].left = vx[i+1].left;
vy[i].top = vy[i+1].top; vy[i].left = vy[i+1].left;
vz[i].top = vz[i+1].top; vz[i].left = vz[i+1].left;
}
else
{
vx[i].top = dy[0]; vx[i].left = dx[0];
vy[i].top = dy[1]; vy[i].left = dx[1];
vz[i].top = dy[2]; vz[i].left = dx[2];
}
}
setTimeout(assgn,t);
}

function init()
{
for (i = 0; i < n; i++)
{
vx[i] = document.getElementById("x"+(idx+i)).style;
vy[i] = document.getElementById("y"+(idx+i)).style;
vz[i] = document.getElementById("z"+(idx+i)).style;
}
winsize();
assgn();
}

if (window.addEventListener)
{
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
document.addEventListener("mousemove",mouse,false);
}
else
if (window.attachEvent)
{
window.attachEvent("onload",init);
document.attachEvent("onmousemove",mouse);
window.attachEvent("onresize",winsize);
}
</script>
6. Paste (CTRL+V) pada ruang Content (rujuk no 5 pada GAMBAR 4)

GAMBAR 4

7.Seterusnya klik " Save (rujuk no 6 pada GAMBAR 4 ) " dan lihat la hasilnya..

Monday 9 January 2012

Recent Post Floating Bar



1. Pergi ke dashboard  > Template > Edit HTML dan tick "Expand Widget Templates"


P/S: PASTIKAN BACKUP DULU TEMPLATE ANDA UNTUK LANGKAH KESELAMATAN..

2. Tekan 
"Ctrl+F" untuk cari kod </head>
3. Copy(Ctrl+C) dan paste(Ctrl+V) kod dibawah  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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIgfLNbCABzGu6OrPA2umINkmBrKPzsXuRPMJBgeC1ACwdNhtKggvlPya8CLeDmCRNUvBvrBRRwb4kbKjsauanIoBl8KUN37WFZT9fPP3R1KuK7JrajPFSsn4w0Hc2frP__WJO2kMFOAl8/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(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoQCTl-wl2_8eW1F6Q4WEJPLoPtONMzEYvP1pG9LSCGK9IY1KYQfaSVQCEQGdAA71JGRCTuo5p_Rhc951TK-TNRidDrDbAmHNR5RgUW-2TXHhJaymSD9ngmoNVQUEoSfNi1PW16w0TxWw/s1600/play.png&#39;) 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>

4. Tekan "Ctrl+F"  untuk cari kod
<div id='content-wrapper'>Bagi blog yang menggunakan template dari template designer, cari kod </footer>
5. 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 = &quot;no&quot;;
showPostDate = false;
summaryPost = 200;
summaryFontsize = 12;
summaryColor = &quot;#000&quot;;
icon = &quot; &#187; &quot;;
label = &quot;&quot;;
numposts = 30;
home_page = &quot;http://URL_ANDA.blogspot.com/&quot;;
</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[&quot;gk_news_highlighternews-1&quot;] = {
&quot;animationType&quot; : 3,
&quot;animationSpeed&quot; : 200,
&quot;animationInterval&quot; : 2000,
&quot;animationFun&quot; : Fx.Transitions.linear,
&quot;mouseover&quot; : 1};
</script>

6. Gantikan:

       - URL_ANDA ----> URL blog anda
       - numposts = 30; ----> gantikan 30 kepada bilangan post yang hendak
         dipaparkan
       - width:960px; ----> gantikan 960 untuk menukar lebar@panjang bar
       - height:24px; ----> gantikan 24 untuk menukar ketinggian bar
       - margin-left: -10px;  ----> Jika kedudukan bar terlalu ke kanan, edit
         nilai -10 kepada  
        10 dan sebaliknya.

7 . Save dan lihat hasilnya.