21 September 2011

tutorial- jquery top button


Top button sesuai untuk blogger yang suka tulis entri panjang-panjang. Lagi-lagi yang suka letak main post belambak-lambak. So, visitor takde la nak susah payah scroll blog korang ke atas balik.

1.Dashboard - Layout - Add a gadget
2.Copy&Paste code dibawah dan SAVE.



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript" >/***********************************************
* Scroll To Top Control script- &#169; Dynamic Drive DHTML code library(www.dynamicdrive.com)* Modified byLyssaFaizureen***********************************************/var scrolltotop={
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="URL TOP BUTTON" />',
controlattrs: {offsetx:5, offsety:5},
anchorkeyword: '#top',
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport)
this.$control.css({opacity:0})
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1)
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
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:'pointer'})
.attr({title:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='')
mainobj.$control.css({width:mainobj.$control.width()})
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>

 

                                                                            
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj77eDZwiEYizCMO5UQkilan8LRDes1z09BJawMrX3OwnOMDlfzAZIIVHeZzNS1AmjE7-fykwtKt1pqHDA0Godnlkfbp28EYpqZtFzT3jni3GiBUMqDPG390f8QogzBNEBQfiiiyXX69Llc/s1600/up.png
Nak top button lagi ? [ KLIK ME ]



You may leave your comment :)

tutorial- 'link'kan gambar


korang biase masuk contest tapi tak tau nak linkkan gambar/banner ? so macam ni care die.

1.new post- upload gambar - click kat gambar yang korang upload tu .

Your words have no meaning

2.tekan link


3.Isikan link korang-klik OK-publish.





You may leave your comment :)

tutorial- comment box like me


Selalunya tempat comment biasa, dan takde kotak. Selain mencomelkan  kotak comment korang, dapat jugak mengemaskan komen-komen yang berterabur.


1.dashboard-design-edit HTML
2.ctrl+f and search #comments h4 { then, korang tengak code kat bawah ni.

#comments h4 {
  margin: 1em 0;
  color: $dateHeaderColor;
}
#comments h4 strong {
  font-size: 110%;
}
#comments-block {
  margin: 1em 0 1.5em;
  line-height: 1.3em;
}
#comments-block dt {
  margin: .5em 0;
}
#comments-block dd {
  margin: .25em 0 0;
}
#comments-block dd.comment-footer {
  margin: -.25em 0 2em;
  line-height: 1.4em;
  font-size: 78%;
}
#comments-block dd p {
  margin: 0 0 .75em;
}
.deleted-comment {
  font-style:italic;
  color:gray;
}


3.korang delete and gantikan dengan code .

#comments h4 {
margin: 1em 3em;
font-weight: bold;
line-height: 1.4em;
color: #ffffff;
}
#comments-block {
margin-left:1.5em;
line-height:1.6em;
background: #ffffff;
color: black;
padding: 1em;
border:0px solid #ffffff;
}
#comments-block .comment-author {margin:.5em 0;}
#comments-block .comment-body {margin:.25em 0 0; background: #ffffff;}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .60em;
padding: 5px 5px 5px 5px;
background: url(URL background) repeat top left;
-moz-border-radius: 20px 20px / 20px 20px;
border-radius: 5px 5px / 5px 5px;
border: 2px solid #ff9bc1;
}

.deleted-comment {
font-style:underlined;
color:pink;
}

semua yang aku highlight warne merah tu, korang boleh tukar codenye .

coding credit : Han Hanan


You may leave your comment :)

20 September 2011

tutorial- floating social website icon (facebook, twitter, blogger)


Biase tengak icon fb, tw, blog terapung kat tepi blog ? okay, cara dia.

1.design-page element-add a gadget-HTML javaskript

<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:140px; left:-12px;'>
<a class='linkopacity' href=' LINK FB ' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="URL IMAGE" /></a><br />
<a class='linkopacity' href=' LINK TW' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feed'><img border="0" src="URL IMAGE" /></a><br />
<a class='linkopacity' href=' LINK BLOG' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feed'><img border="0" src="URL IMAGE" /></a><br />
</div>

red: semakin kecik nombor tu, semakin atas icon korang.
purple: boleh pilih left or right
orange: link korang sendri
yellow: boleh letak URL image korang sendri. atau ambek kat sini


coding credit: Dania
icon:Azhafizah



You may leave your comment :)

19 September 2011

freebies doodle part6


tak perlu credit . semua dah ditransparentkan .










You may leave your comment :)