Rate this Bitch

"The only good thing about winning is your first next to losing"

Thursday, April 16, 2009

Okay Part 2 of the UnBranded , this is even more simple.

Well most folks will add a background by getting code from a website and having to paste the code into a widget and all that... but if you want to just go to a website and copy just a single simple http url and paste it without creating a widget, widget is that little thing you click to add html/js or click add picture thing in blogger well here is a simple step to do in the layout but instead of widgets we will click the 3rd button over on the top that says "edit html" well below them button looking things, see where is says that, well click it and you can see the html code of the blog template.

Okay first lets look for a backround and we found one at the place in the last blog, okay we have one picked out, so now in blogger we clicked the "edit html" now we see the code and your like WTF am I doing here, so relax and lets look and the first thing looks like "Variable definitions" okay you can see that well just below that is where the background info is, so scroll down till you see this

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small; font-size: /**/small;
text-align: center;
}

Okay hmmm what is this, well this is your body tag of your blog, with the STYLE code from the post before adds the backround, but we can just add it here without the tags and code stuff , here is all I added to get my rooster on the background

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small; font-size: /**/small;
text-align: center;
background-image: url(http://img108.mytextgraphics.com/photolava/2008/07/13/rooster-4b5t76pzz.jpeg);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}

Okay see well the url wraps in the blog but on the edit page its one line, anyway I added these four elements to my BODY tag and the rest is all easy now, see below the simple code to add , well copy it and add it now, hehehe read below for more details..

background-image: url(http://);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;

Okay now what do I do, well copy the above code as is, place it at the end of the BODY TAG but make sure the } is last after it because this closes the BODY, and now for a background anytime we will just paste a link after the http:// between the ( ) just like mine above , yes its easy if we now go to a background site and look at the code, like the garbage from below code,


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

OHHHH my god, I fell into a dumster, hehehehe okay well all we really need is this highlighted url, most of the time its the closest to the top.... Here its easy because its hosted on photobucket...

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

now with this piece, yes only that is needed forever to change the background just highlight the link copy and paste in you body tag.... we added this

background-image: url(http://i342.photobucket.com/albums/o401/Thecutestblogontheblock/Melancholycopy.jpg );
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;


see I just pasted the link in the code I added and next time I want to change my background I can just go and copy the image link from another garbage code and put it in my BODY TAG and its just so simple now....

Okay now lets review, we gone to blogger and chose LAYOUT, and there is "EDIT HTML" we scrolled down to the BODY which everything needs to be between the { } and we inserted this simple code at the end just like the above sample of mine...

background-image: url(http://);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;


Next we found a background we like and copied just the link after the http:// or the code shows http%3A// so we copied up till the end of .jpg which is the image , so we copied
i342.photobucket.com/albums/o401/Thecutestblogontheblock/Melancholycopy.jpg
so we pasted it between this (http:// paste here ) in the above code that we put in our BODY TAG in our own blog, yeah yeah yeah and thats it, so next time just copy link and paste link , no widgets no hassle no de-coding or unescaping garbage and its so simple a caveman can do it, you already got the code in the html of the layout so just change the image link, one simple step.... see you are a code monster, really its simple when its all setup, if you look at the STYLE TAG from the other post you can see the background code has the above info...

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


just we did not use a style but made it a real element in the BODY so now we only have one thing to change... so happy backgrounding, well since you made this STYLE TAG and have a widget already on the page, just copy that image link and paste it in the widget

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

See its simple with that too, just no more gabage just get link and paste for now on.....HAPPY HAPPY Backgrounding :)



PS. Okay now if the image you want has there logo in the image well let me know where and I will download the image, photoshop it and rehost it.... yes I love photoshop too...

No comments:

"You can't be first but you sure can be next"