Skip to main content

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-->

Popular posts from this blog

Craft : : Puzzle Hearts

(Sorry for the poor photo)
So here is a tutorial on how to make these cute puzzle hearts.
Materials *Puzzle with missing pieces *Hot glue gun *Heart template (For the heart template just draw a heart shape the size you want or trace around a heart)
Directions 1. Lay puzzle pieces around the outside edge of the heart template until they all lay nicely with no big gaps 2. Lay another layer of puzzle pieces on top and then glue those pieces on one by one 3. Lay two more layers on top and glue them on as before 4. Paint the heart the color that you want and glue a ribbon to the back...if you are giving it as a gift you can add a little gift tag
Helpful Hints Make sure before you start that nobody wants to put the puzzle together :D When you lay out the layers of puzzle pieces lay them on top of each brick style so that all the pieces are connected and it won't fall apart when you pick it up Have fun!! :D
Please comment and tell me if you try it out :D

Thoughts from a Sermon // Lazy Praying

Recently a friend shared a sermon with me; Listening to it this morning, I was extremely challenged. I've written out some thoughts from the sermon, but I encourage you to listen to it.

We are in a war. A very real war. A very dirty and bloody and hard war. A war not against flesh, not against other humans, a war against spiritual darkness, a war against evil, a war against the spiritual forces of Satan. Yet are we living that way? Are we girded in the armor of God? Are we fighting in this war? Are we preparing for this war? Are we pressing on even when it's hard? Or are we comfortable where we are? Are we content where we are? We've become so wrapped up in the things of the world. The world is trying to put us to sleep. It's trying to make us put down our guard.

God has given us everything that we need to fight in this war - the armor of God, the Spirit, His power. Jesus has already overcome Satan and the world and death. We are on the side that we know is going to wi…

Meditations // Jeremiah 1:6-8

"Then I said, 'Ah Lord God! Behold I do not know how to speak, for I am only a youth.' But the Lord said to me, 'Do not say "I am only a youth" for to all to whom I send you, you shall go, and whatever I command you, you shall speak. Do not be afraid of them, for I am with you to deliver you,' declares the Lord." --Jeremiah 1:6-8 In this passage God commands Jeremiah to speak to the people on His behalf and what does Jeremiah do? "I do not know how to speak, for I am only a youth." This wasn't an easy task, nor would it be a fun task, or a task where the people would love him, it was a difficult, uncomfortable hard task. Jeremiah thought himself too young. Jeremiah didn't think that God could use him because of his age. But what does God say? That HE would be with Jeremiah, give him the words to say, and deliver him. God doesn't just command him to do something, he also gives us promises to go with that command.

How often are …