TEST BLOG ONLY - FAIZ-TUTORIAL.BLOGSPOT.COM

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: "bea50586-2b9f-448d-947a-01385f28e305", 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('shareThisShareEgg', ['facebook','twitter','googleplus','linkedin','blogger','stumbleupon','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareegg'});</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/AVvXsEjZfyFc_Z1myW19rq4ZiCAlhYJSWAt42JXdOl4350fnA_g9LIZL0aql9bvzZBIbIlddXytFANQzPJSYC0mpeHKu1lWFoBnQhMXZdXs11DE4MmVB_un0J16_a5c2jeMFqeIIFJhMHOoXWwLG/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjui5XwcyttPihHZjqeof6JoD_nPlSBgWQC5Is31Zvci85Z92JG896v8we0oC-UEKJVHkbzt6e5o3VSDGbWD2AJFuBiQ0h1jKu1xANLcobzfT2bVLcgwdl8fG93WYXS54GN2CikMiuf5xNF/s1600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZfyFc_Z1myW19rq4ZiCAlhYJSWAt42JXdOl4350fnA_g9LIZL0aql9bvzZBIbIlddXytFANQzPJSYC0mpeHKu1lWFoBnQhMXZdXs11DE4MmVB_un0J16_a5c2jeMFqeIIFJhMHOoXWwLG/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZfyFc_Z1myW19rq4ZiCAlhYJSWAt42JXdOl4350fnA_g9LIZL0aql9bvzZBIbIlddXytFANQzPJSYC0mpeHKu1lWFoBnQhMXZdXs11DE4MmVB_un0J16_a5c2jeMFqeIIFJhMHOoXWwLG/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjui5XwcyttPihHZjqeof6JoD_nPlSBgWQC5Is31Zvci85Z92JG896v8we0oC-UEKJVHkbzt6e5o3VSDGbWD2AJFuBiQ0h1jKu1xANLcobzfT2bVLcgwdl8fG93WYXS54GN2CikMiuf5xNF/s1600/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZfyFc_Z1myW19rq4ZiCAlhYJSWAt42JXdOl4350fnA_g9LIZL0aql9bvzZBIbIlddXytFANQzPJSYC0mpeHKu1lWFoBnQhMXZdXs11DE4MmVB_un0J16_a5c2jeMFqeIIFJhMHOoXWwLG/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZfyFc_Z1myW19rq4ZiCAlhYJSWAt42JXdOl4350fnA_g9LIZL0aql9bvzZBIbIlddXytFANQzPJSYC0mpeHKu1lWFoBnQhMXZdXs11DE4MmVB_un0J16_a5c2jeMFqeIIFJhMHOoXWwLG/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZfyFc_Z1myW19rq4ZiCAlhYJSWAt42JXdOl4350fnA_g9LIZL0aql9bvzZBIbIlddXytFANQzPJSYC0mpeHKu1lWFoBnQhMXZdXs11DE4MmVB_un0J16_a5c2jeMFqeIIFJhMHOoXWwLG/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/AVvXsEgizvqcQX8_QuL2-jBL-oXErdM_SW-iUSioHRQbmQuGycUGkwnkzWJiJI5SYGB5REWxAPSvcgJ8vhbRGKKK_giMISFHj9XO1ALWd2YjXRkxVKwW4doKcNNXQOOKCZk2tjlwCQ0kLo9OVOHQ/s1600/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF1Am0M646jX4QYwExvF8GDruZNDvkpvCu2NQaxbKLH5A5tW3xvmV7lLE57X27VkcS276ApymadMdfp-AIZao3hxlc9wcbNs9-fw3mZB7Unlta1pn-OAYUaKThvmu9sQ2tBbUeRo_1w0iT/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/AVvXsEjZfyFc_Z1myW19rq4ZiCAlhYJSWAt42JXdOl4350fnA_g9LIZL0aql9bvzZBIbIlddXytFANQzPJSYC0mpeHKu1lWFoBnQhMXZdXs11DE4MmVB_un0J16_a5c2jeMFqeIIFJhMHOoXWwLG/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>

<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&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&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