tutorial: May 2012

Sunday, 27 May 2012

blogskin template code

(ha, jwb slm tuh jgn ta jwb)
oukey ,, kali nie saya akn ajar care nak copypaste code template !! ikot step-z di bwh ngan teliti tau ... slamat mencube
steps :~sign your blog >> design >> edit html >> scroll down until u can see revert to classic template
click here 2 find your templateif u find them, click on the imagethen u can see like this ~

scroll down >> click on the arrow shown below

after that, click on the arrow shown below & copy that code

go 2 your blog back (template>edit html) >> delete all the code >> replace it with your new code that u have copy before
(p/s: please edit your sidebar, header, post title background, colour, font, size, background etc.)preview first. then save!!

Monday, 14 May 2012

link hover without background

steps :~

+ sign in blogger >> design >> edit html

+ press Ctrl F ( on your keyboard ) >> copy & paste this code

a:hover

+ copy & save this code under the previous code

border-top: 2px dashed #ff8fc1;
border-bottom: 2px dashed
#ff8fc1;

+ red colour mean-s that change it with you favourite colour 'code'

+if u want that code click here

+ scroll down until u see like this

+ choose your colour then copy the code with bold blue in colour

+ paste that code. make sure when u paste that code this # must be beside that code
+ save !!

codes:~

credit to : LyssaSecret

Sunday, 13 May 2012

put cute icon beside your post title

steps :~

+ cute icon look like this

+ sign in blogger >> design >> edit html >> tick expend widget
+ copy this code

+ then , copy & paste this code in between url'><data
(that-s mean between >< )

<img src="LinkGambar"/>

+ that-s mean, it should be like this (in the red box) after u copy & paste that code

+ change the red sentence with your own picture url / link

+ i have some EX: down there

+ copy & replace the red code

+ if it perfect , save !!

http://dl6.glitter-graphics.net/pub/584/584776qvkek99ty3.gif

http://dl.glitter-graphics.net/pub/493/493161yf8lagbcd9.gif

http://dl8.glitter-graphics.net/pub/438/438938tn0n4974xy.gif

http://dl7.glitter-graphics.net/pub/429/429777zo2912lr15.gif

http://dl10.glitter-graphics.net/pub/536/536400r07nejsqb3.gif

picture & codes:~

credit to : LyssaSecret

moving word in window / menu bar

steps :~

+ sign in blogger >> dashboard >> design >> edit html
+ press Ctrl F (on your keyboard) >> copy & find this code

<head>

+ copy & paste this code under the first code u had found b 4

+ change the red code with your own word or sentence

EX :~ welcome 2 my BLOG

+ if it perfect, save !!

codes:~

credit to : LyssaSecret

scroll back 2 top jquery

steps :~

+ log in >> dashboard >> design >> page elements >> add a gadget >> scroll down >> html/javascript
+ copy this code & paste it in html/javascript

<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- © 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 IMAGE FLY UP" />',
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>

+ change the red code with your fly up image button url

+ i have some ex: down there

+ u can copy the code & replace it with that red code

http://i.imgur.com/q7S0w.png

http://i.imgur.com/xiyTa.png

http://i.imgur.com/Czy9p.png

http://i.imgur.com/P2x3M.png

http://i.imgur.com/se3Yr.png

http://i.imgur.com/XXXLW.png

http://i.imgur.com/mmZzk.png

.
credit to : LyssaSecret

codes

scroll box in post

steps :~

+ log in blogger >> dashboard >> new post

+ paste this code in edit html

+ then, go 2 compose & type what u want 2 type & change the size ( red code )
+ preview first
+ if it perfect, save !!

code:~

credit to : LyssaSecret

link hover ?! with background

hye guys !!

today i'll show u about link hover ~
first of all ,,, do u know what is link hover ?!
it look like this

steps :~

+ sign in blogger >> design >> edit html >> press Ctrl F ( on your keyboard )

+ find this code

a:hover {

+ then u can see this code right ?!~

a:hover {

text-decoration:underline;

color: $(link.hover.color);

+ delete that code and replace it with this code

a:hover {

color: #ffffff;

background:#fa5ca3;

text-decoration:none;

border: #ffffff 2px dashed;

padding:3px 5px;

-moz-border-radius:10px;

}

+ change the background & border colour with your taste

+ if u want the colour code, click here

+ scroll down until u can see this

+ find what colour do u like. then
+ copy the code with bold blue in colour
+ make sure when u paste that code this # must be beside (left) code

+ lastly, change it where do u want 2 change 4 ex : background , border etc

+ save !!

snow ball effect

hye guys !!

today i'll show u how 2 make snow ball effect in your blog

steps :~

+ sign in your blogger >> design >> add a gadget >> scroll down >> html/javascript

+ copy & paste this code

+ change the red code with snow ball colour u like

blue snow ball

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCLvFXfO8y5h8ADTW3NRVV-vvKXfQ9EhsaRMSEnMkPJMKRo1llD_KdClXeL7kdV-a4iZHwZ2L15jPGBk0NKV6yFUmR0Lzcvpx02-PUQB3FF119SmMyl_3xa4d1HjfD2EoI7hZjui_ptjo/s1600/bluesnowNF.png

pink snow ball

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-8e_h2cgb74HlAoyxieBxFyA_q_wkb_rKlUjl9s3gUK3Sf9aJKvSpO1_CBhDpnpr8paRfEHsfy4nDoI53aaNf7l6vafdwwrnz4fT4_Xy4ZGcYIDB97XBtv6sJhg_D5LZtSB_y6qoykJ0/s1600/redshowNF.png

black snow ball

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDwQtQ8KCrSamA6t-dg6NkAV9IAzywnFpT-SpOa6nogcRAckMZWM-4gj9oJEXTen6zRjpDyO5ZjBdD20ILMNk4HrK9L9gDyI25tS3JOb_hWeC5-E-apJNlPG-WPGyFFCodzMSfJbqbhRc/s1600/blacksnowNF.png

white snow ball

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNjEKIwFiHxfGg6PtkQVKOsb4u7eOm7JRtn8wfkgDUmPPpzrYwa6zQO0-a1j5whXb2X92TI5bFELZZ0dV4MsJF_kZyTncV1QKFlssafIP1bD2_cqG9PU8XGQ1bxZSmCEiYRDMPbrmj49s/s1600/whiteshowNF.png

lastly, preview first. if it perfect, save !!have a great day with your snow ball ^_^

print screen using photoscape

steps :~
(4 those who have photoscape )

+ click photoscape >> screen capture

+ then, something come out

+ go 2 where u want 2 capture it

+ click capture full screen

+ done !!

~!! lastly, edit it and save !!~