UnBranding Your Blogger Background Tutorial...

Okay this is a blog about your background from all those sites that have them already made and to get it to work right everytime , plus you can get there branding , logo crap off , its really easy to understand , well for me its easy because I am a code monkey for about 26 years now, I still write HTML (webpage code) using notepad, none of this drag and drop or easy webpage builders online , just click click wow mom I got a page on the web , mine was type type delete type type opps delete after a few hours of tweaking it I had a website with 5 running scripts and it had over 1000 pages, well made it easy , one script wrote the pages on the fly using another script that searched my database of info but enough of that lets pick on some backgrounds and tweak them. This is some simple shit to hack really really, don't let them fool you anymore.

Okay now there is a few ways to add a background to a page and the easiest is to you a style tag <style> like putting some style on the page , and one way to do some branding is to use a division tag <div> to place it where we want to, mostly in a corner somewhere at the top... hehehehe yeah I will get rid of it hehehehe anyway I gone to http://www.thecutestblogontheblock.com/ and got some code from one of there backgrounds , here it is below

<script>document.write(unescape("%3Cstyle%20type%3D%22text/css%22%3E%0Abody%20%7B background-image %3A%20url%28%22http%3A//i342.photobucket.com/albums/o401/Thecutestblogontheblock/Melancholycopy.jpg %22%29%3B%20background-position%3A%20center%3B%20background-repeat%3A%20no-repeat%3B%20 background-attachment %3A%20fixed%3B%20%7D%0A%3C/style%3E%0A%3Cdiv%20id%3D%22tag%22%20 style%3D%22position%3Aabsolute %3B%20left%3A0px%3B%20top%3A30px%3B%20z-index%3A50%3B%20 width%3A150px%3B%20height%3A45px%3B%22%3E%0A%3Ca%20href%3D%22 http%3A//www.thecutestblogontheblock.com%22%20target%3D%22_blank%22%3E%0A%3Cimg%20src %3D%22http%3A//www.thecutestblogontheblock.com/images/tag.png%22%20border%3D%220%22/ %3E%0A%3C/a%3E%3C/div%3E%20"));</script>

WTF is this garbage, yes its a trick so you can not steal the code , uhhhh silly rabbit tricks are for stupid people, anyway in this is the simple code needed to get the background on your blog and its easy easy, first we need to understand what they did was use javascript code and a old fasion percent encoding, its because in scripting sometimes it needs to be escaped this way to interpet the aurguments in the code, but what they are doing is trying to hide the code using javascript, I said all you need is a STYLE TAG and you got background, notice in the beginning of this script code is says unescape, yes it is to convert it back to normal when it renders your page, but sometimes having more than one code on a page will mess this code up and sometimes this code screws up other code on your page so enough of that crap unescape it by going here
http://www.web-code.org/coding-tools/javascript-escape-unescape-converter-tool.html
now copy the above garbage code into the bottom box on the converter page and press the button "complete unescape" and now in the top box is the simple code, copy this code and paste into blogger to edit the code but don't save it yet ... looks like this now

<script>document.write(unescape("<style type="text/css">body { background-image : url("http://i342.photobucket.com/albums/o401/Thecutestblogontheblock/Melancholycopy.jpg "); background-position: center; background-repeat: no-repeat; background-attachment : fixed; }</style><div id="tag" style="position:absolute ; left:0px; top:30px; z-index:50; width:150px; height:45px;"><a href="http://www.thecutestblogontheblock.com" target="_blank"><img src="http://www.thecutestblogontheblock.com/images/tag.png" border="0"/ ></a></div> "));</script>

Okay wait wait wait, this code looks funny but lets break it down, first off its not scripting language anymore so we can not use this as is, it will fail, so we need to get rid of the <script> Tags because it is not scripting language anymore and I see it has 2 parts we need , ohhh one we need but you can see the STYLE AND DIVISION tags are here , lets break it down to the 2 parts. Everything between the <style></style> is the background code.

Here is the style to add a background image

<style type="text/css">body { background-image : url("http://i342.photobucket.com/albums/o401/Thecutestblogontheblock/Melancholycopy.jpg "); background-position: center; background-repeat: no-repeat; background-attachment : fixed; }</style>

Look how small the background code really is, wow thats all you need really kewl, simple and clean....

Everything between the <div></div> is the branding/logo code.

Here is the division code to put the logo image up in the left top corner

<div id="tag" style="position:absolute ; left:0px; top:30px; z-index:50; width:150px; height:45px;"><a href="http://www.thecutestblogontheblock.com" target="_blank"><img src="http://www.thecutestblogontheblock.com/images/tag.png" border="0"/ ></a></div>

All this is for it to brand their website on yours but I have a problem with cheap ass websites who can't host their own images, this place has images on photobucket.com and sometimes when they get to much traffic from millions of hits they will shut down the account, most reliable place host the images on their own web server and can handle the traffic, just goes to show this place has not the space or the traffic capabilities on the website, just got a small webspace on a lowbuget server somewhere, maybe I am wrong but why host on a site that could shut down and I might have the background anytime, most chances are it will be up on my page when I get traffic but it could be shut down so why brand my page with a unrealiable service, maybe I said it could be but its fun to hack code anyway....

Now all this other code at the beginning and end is useless unless we had a script to execute but we broke down the script into simple html code and now it will work in all browsers just fine and will work in any blog, so see this here <script>document.write(unescape(" is not needed and the ending of it "));</script> is no use to us now either, we have no more JAVASCRIPT code to worry bout, by just deleting these 2 parts from start and end you can paste all the code left here and still have the branding of their site but yet you not have this JAVASCRIPT to run which some browsers have a hard time when you got lots of code like this all mixed up, thats why this really is only a trick to hide there simple code and not really useful for web design. There is a place for scripting and using such code but for simple stuff you don't need this garbage, use scripting for complex stuff like what its for and not this silly trick to fool people and have it not execute on your blog, so many people having trouble with this garbage but hey you just took the trash out hehehehehe....

All you need to do is in blogger is delete everything except the the style code above or go to layout and click add html/javascript like at the bottom of the page and paste this STYLE CODE ABOVE that you did in notepad and now you have the background, You need to be careful when deleting because in blogger it tries to group the symbols together so I place the cursor at the start point of the style and backspace it all away and place curser and end of style tag and press and hold delete it all off the end, I prefer to add it to the real html editing under the body tag myself so I will post again about that for more advance users, hehehehe really its easier because all you change is the http address of where the image is and its that simple so yeah will post that in another post, anyway have fun being a code monster.