HTML Tutorials

Blog Tutorials

How to move your sidebar from the right side to the left side

This is very easy to do. First off locate this code. You can find it by going to your blog design and then going to your html code.

#main-wrapper {
width: 820px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
padding-left: 20px;
padding-right: 20px;
background: #ffffff;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 200px;
padding-right: 15px;
padding-left: 15px;
padding-top: 10px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}
It's okay if yours looks a little different. Now, all you have to do is find “float:right;” under “#sidebar-wrapper” and change the “right” to “left.” Now your sidebar should be on the opposite side. Your code should look like this:



#main-wrapper {
width: 820px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
padding-left: 20px;
padding-right: 20px;
background: #ffffff;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 200px;
padding-right: 15px;
padding-left: 15px;
padding-top: 10px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

If you have any questions feel free to comment and ask me.

________________________________________________________________________________

How to add the Glitter effect to your blog

Go to your html code page and locate the end head tag  (see picture for help {you can click on it to enlarge it}):



Once you have found it paste this code above it.

<script type="text/javascript">
// <![CDATA[
var colour="#666666";
var sparkles=40;

var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>


Then to change the color find this part of the code (it's at the very top):

<script type="text/javascript">
// <![CDATA[
var colour="#666666";
var sparkles=40;

Then where it says "#666666"; you put a different html color code. To find what the html color codes are I went to this site, http://html-color-codes.info/,  found the color I wanted, copyed the number and pasted it into the code in place of 666666. Save it and you're all done. If you have any questions feel free to comment and ask me. I will try my best to help you.

________________________________________________________________________________


How to add Snow to your blog

Add an html/java script gadget to your sidebar
Paste this code and save the arrangement (If you want less snow decrease the number that is bold. If you want more snow increase the number that is bold)


<script>if(typeof $pdj=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script>

<script>if(typeof $pdj=='undefined'){var $pdj=jQuery.noConflict()}if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}$pdj(document).ready(function(){$pdj(function(){$pdj().jSnow({flakes:200,flakeMaxSize:30,flakeMinSize:7,fallingSpeedMax:4,fallingSpeedMin:2,zIndex:65535,interval:30,opacity:true})})});if(!$pdj().jSnow){(function(x){x.fn.jSnow=function(h){var j=x.extend({},x.fn.jSnow.defaults,h);var k,WIN_HEIGHT;setWaH();var l=j.flakes;var m=j.flakeCode;var n=j.flakeColor;var o=j.flakeMinSize;var p=j.flakeMaxSize;var q=j.fallingSpeedMin;var r=j.fallingSpeedMax;var s=j.interval;var t=j.zIndex;var w=false;if(x.browser.msie&&(parseFloat(x.browser.version)<8))w=true;if(x.browser.msie&&(parseFloat(x.browser.version)<8)&&t=="auto")t=0;var u=x("<div \/>");u.css({width:k+"px",height:1,display:"block",overflow:"visible",position:"absolute",top:x("html").scrollTop()+1+"px",left:"1px",zIndex:t});x("body").prepend(u).css({height:"100%"});x("html").css({"overflow-y":"scroll","overflow-x":"hidden"});var v=Array();generateFlake(l,false);setInterval(animateFlakes,s);window.onresize=setWaH;function setWaH(){k=x('body').width();k-=5;WIN_HEIGHT=x(document).height()};window.onscroll=function(){u.css({top:x("html").scrollTop()+"px"})};function generateFlake(a,b){a=a||1;b=b||false;var i=0;for(i=0;i<a;i++){var c=x("<div \/>");var d=o+Math.floor(Math.random()*p);var e=m[Math.floor(Math.random()*m.length)];if(e.indexOf(".gif")!=-1||e.indexOf(".png")!=-1){var f=new Image();if(w)e=e.replace("png","gif");f.src=e;e="<img src='"+e+"' alt='jSnowFlake'>"}if(j.opacity){c.css({opacity:function(){var a=Math.floor(Math.random()*101);a=(a<10)?10:a;return"0."+a}})}c.html(e).css({color:n[Math.floor(Math.random()*n.length)],fontSize:d+"px",display:"block",position:"absolute",cursor:"default","z-index":t});x(u).append(c);f_left=Math.floor(Math.random()*(k-c.width()-50))+25;f_top=(b)?-1*c.height():Math.floor(Math.random()*(WIN_HEIGHT-50));var g=Math.floor(Math.random()*90);x.data(c,"posData",{top:f_top,left:f_left,rad:Math.random()*50,i:Math.ceil(q+Math.random()*(r-q)),swingRange:g,height:c.height()});c.css({top:f_top+"px",left:f_left+"px"});v.push(c)}};function animateFlakes(){var i=0;for(i=v.length-1;i>=0;i--){var f=v[i];var a=x.data(f,"posData");a.top+=a.i;var b=Number();b=Math.cos((a.rad/180)*Math.PI);a.rad+=2;var X=a.left-b*a.swingRange;f.css({top:a.top+"px",left:X+"px"});if((a.top+a.height)>WIN_HEIGHT){x.removeData(f);f.remove();v.splice(i,1);generateFlake(10,true)}}};return this};x.fn.jSnow.defaults={flakes:100,fallingSpeedMin:1,fallingSpeedMax:3,flakeMaxSize:20,flakeMinSize:10,flakeCode:["•"],flakeColor:["#F2F2F2"],zIndex:"auto",interval:50,opacity:false}})($pdj)}</script>

<script>if(typeof $pdj=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script>
<script>if(typeof $pdj=='undefined'){var $pdj=jQuery.noConflict()}$pdj(document).ready(function(){var a=$pdj('<img>').attr({'src':'http://img600.imageshack.us/img600/2662/tagcopy.png','border':0});$pdj('<a></a>').css({position:'absolute',right:'0px',top:'22px','z-index':'90'}).attr({'href':'http://blogamation.com/'}).append(a).appendTo('body')});</script>

<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>$(document).ready(function(){var a=$('<img>').attr({'src':'http://img600.imageshack.us/img600/2662/tagcopy.png','border':0});$('<a></a>').css({position:'absolute',right:'0px',top:'22px','z-index':'90'}).attr({'href':'http://blogamation.com/'}).append(a).appendTo('body')});</script>

_________________________________________________________________________________

How to add falling Rose Petals
Log into your dashboard and go to the tab labeled "Layout". Click "New Gadget" and find "HTML/Java Script". Click to add it. Copy this code, paste it in, and save arrangement.


<!-- falling rose petals from www.nsmtechie.com starts --><script>
//http://tutorialuntukblog.blogspot.in/2011/10/tutorial-kelopak-bunga-berguguran-di.html
if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['rain1']="http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png";image_urls['rain2']="http://4.bp.blogspot.com/-teXCIicWPF4/TpWcLLg0A2I/AAAAAAAAG0U/IPPCr1gponc/pinkpetal2.png";image_urls['rain3']="http://3.bp.blogspot.com/-3JG9HLECCRU/TpWcLZGSYtI/AAAAAAAAG0g/zIJINua93TE/redpetal1.png";image_urls['rain4']="http://2.bp.blogspot.com/-BByhQEK5E24/TpWcLux4xRI/AAAAAAAAG0s/x2hIr1AV_Ac/redpetal2.png";$(document).ready(function(){var c=$(window).width();var
d=$(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(7500,8000),function(){$(this).fadeOut('slow',function(){f(a)})})},e(1,8000))};$('<div></div>').attr('id','rainDiv')
.css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=20;i++){var g=$('<img/>').attr('src',image_urls['rain'+e(1,4)])
.css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');f(g);g=null};var h=0;var j=0;$(window).resize(function(){c=$(window).width();d=$(window).height()})});</script>
<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>$(document).ready(function(){var a=$('<img>').attr({'src':'http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png','border':0});$('<a></a>').css({position:'absolute',right:'0px',top:'22px','z-index':'90'}).attr({'href':'http://www.nsmtechie.com'}).append(a).appendTo('body')});</script><!-- Falling Rose Petals From www.nsmtechie.com ends-->