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

2016 National Bible Bee // Lesson #1

During my time as a National Bible Bee Contestant, I learned so much - not just through studying the Word, but also through participating. In the following few blog posts, I am going to share a few lessons that I have learned.

The National Bible Bee is a great incentive to memorize and study God's Word. The prize money that is given away each year is a large amount, so it can be very easy to focus on studying in order to do well and hopefully win. During my time as a contestant, I've struggled with doing it for the right reasons. Unless one is careful the prize money can become a snare. The recognition can become a snare. The trip to Nationals can become a snare. Even studying and memorizing to have more knowledge can become a snare. 
A lesson that was key in my studying this year was that I must focus on Christ. He is the true prize. I was studying, yes, to participate in the National Bible Bee, but the main thing was to know Christ better. He is the treasure found in the Bib…

2016 National Bible Bee // Pictures

National Bible Bee 2016 was so amazing, so of course I had to take lots of pictures of the week. Unfortunately, because of our internet, I am unable to upload them all...so, I'm going to post a few on here and then give some links at the bottom of the post.















**WARNING** There are lots of pictures in the following links **WARNING**
Group One Group Two Group Three Group Four