RE-ORGANISING THINGS

Friday, 5 June 2015


As you can see, I'm not a very happy bunny just now.

I'm having to massively reorganise this blog - Blogger has changed so much, and all the backgrounds need to be adjusted to fit the new Blogger templates.

Additionally, photobucket.com has reorganised their own site - and the one we designers all relied on (which hosts all my backgrounds), has now changed its sizing rules radically. So sizes are getting distored, and things are just not fitting properly!

Right now,  I'm looking for a new place to host the backgrounds.

Please bear with...

REMOVING backgrounds, buttons & blinkies

Monday, 22 July 2013

I've had an email asking for help in removing my freebie blog backgrounds (see my Blogology link under the header if you'd like one). It's very straightforward - just delete the widget! But for those of you who are a little nervous, here's a comprehensive guide...

REMOVE THE BACKGROUND

Go to your Dashboard and click on Layout in the sidebar, as shown.

Particularly when you just start to blog, you see all these freebie backgrounds and blinkies, and want to experiment with them.

Virtually any blog will tell you how to add them: copy the code and paste it into an HTML widget on your blog (it's best to add it down near the footer as this helps the blog to load faster for some reason).

Look for the correct HTML widget - you may have a few, so just keep clicking on them in turn until you find one that looks something like the above. Click on REMOVE - and that's it! You've removed that background.
But a lot of blogs won't tell you how to REMOVE them! It's basically as simple as going into your Dashboard and clocking on Layout, then finding the HTML widget and deleting it. Just keep clicking on the various widgets in turn until you find the right one, then click the Remove button - and that's it! Job done.

REMOVING BUTTONS AND BLINKIES

Look for the code, then go ahead and click Remove to get rid of the widget.

The code for these looks a little different, but they're still just HTML widgets. Click on each widget when in Layout view until you find the correct one, then click Remove - and it's gone. Don't forget to click on the orange Save Arrangement button if you move things around whilst you're in tidying-up mode.


Alternatively, when looking at your blog, you'll see a tiny hammer&screwdriver icon at the bottom right-hand corner of any widget  - which means you can edit the widget in blog view instead of going via your Dashboard to the Layout view. Again, click on the Remove button to delete that button or blinkie. This is actually the easier way to do it, as you can see exactly what you want to remove without having to hunt for it.

REMOVING PICTURE WIDGETS ETC

This is a picture widget - looks a little different, but the principle is the same.
Just as simple to remove!

Here's another widget variation. Just as easy to remove!

Hope this helps!

REINDEER

Friday, 23 December 2011

Background copyright Susie Jefferson, using images from Holiday Paper Pack 3 by Cesstrelle at HG Designs
Here's a new freebie Christmas background for you, using reindeer images from Cesstrelle's Holiday Paper Pack 3. Isn't this fun? Perfect for someone who wants a modern image with a bit of an edge.

This will fit most templates: 3-col, wide 2-col and also some of the freebie WordPress templates like Bueno. It will also fit some of the freebie Tumblr blog templates, eg: Redux. The Blogger template I've used here is Awesome.

BACKGROUND CODE

Just copy and paste all the code below into an html box in your sidebar.
<style type="text/css">
body {background-image: url("http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/3a093400.jpg"); background-position: center; background-repeat: no-repeat; background-attachment: fixed; }
</style>
<div id="tag" style="position:absolute; left:0px; top:50px; z-index:50; width:150px; height:30px;">
<a href="http://1stfloorflatblogology.blogspot.com/" target="_blank">
<img border="0" src="http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/9061ddc2.png"/>
</a></div>

HEADER

If you want to customise my header with your own text, right-click the picture to open to full size then left-click to save to your own computer. Add text using your favourite graphics programme, then load up and click' Instead of Title and Description'.

Otherwise, just save the header and click 'Behind Title and Description' to use Blogger's own default header text (click the Resize button if you want it smaller) or copy the code below and enter that instead.
http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/75d8d6cb.png
Check out Cesstrelle's blog HG Designs for more fabulous papers, brushes, textures etc.

RETROMAN - EXTRA WIDE

Wednesday, 7 December 2011

Copyright Susie Jefferson

I've been asked to make an extra-wide Retro Man background and header, as now we can all use the Design template facility for widening our blogs, extra wide is the new buzz! So here you are. This one will take a good 1000px - 1100px wide posting and sidebar area. Enjoy!

<style type="text/css">
body {background-image: url("http://i1176.photobucket.com/albums/x322/computery1/0fee8231_zps369bdb2b.jpg~original"); background-position: center; background-repeat: no-repeat; background-attachment: fixed; }
</style>
<div id="tag" style="position:absolute; left:0px; top:50px; z-index:50; width:150px; height:30px;">
<a href="http://1stfloorflatblogology.blogspot.com/" target="_blank">
<img border="0" src="http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/9061ddc2.png"/>
</a></div>

HEADER


Here's the header (1000px wide). Left-click to open at full size, then right-click to save to your computer. You can then add your own lettering etc using your favourite graphics programme if you wish.

Enjoy!

LUGOSI

Wednesday, 12 October 2011

The header - see blow to download

Bela Lugosi was the vampires' Vampire - and this blog background for any horror fan or Goth (it's not just for Halloween) is my homage to him.






BACKGROUND

Showing a little more of the background. This is Watermark template

Just copy and paste all the code below into an html box in your sidebar.
<style type="text/css">
body {background-image: url("http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/6c58df0b.jpg"); background-position: center; background-repeat: no-repeat; background-attachment: fixed; }
</style>
<div id="tag" style="position:absolute; left:0px; top:50px; z-index:50; width:150px; height:30px;">
<a href="http://1stfloorflatblogology.blogspot.com/" target="_blank">
<img border="0" src="http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/9061ddc2.png"/>
</a></div>

HEADER

1000 pixels wide - click the Resize for Blog if you want it smaller
If you want to customise my header with your own text, right-click the picture to open to full size then left-click to save to your own computer. Add text using your favourite graphics programme, then load up and click' Instead of Title and Description'.

Otherwise, just save the header and click 'Behind Title and Description' to use Blogger's own default header text (click the Resize button if you want it smaller) or copy the code below and enter that instead.
http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/75d8d6cb.png
If you are worried about such a dark background and are wondering how my posts show with a white background, I've used the Watermark template. Just go into Design, scroll down to Advanced, and adjust your settings to taste.

I hope you have fun with this one!

HORROR SHOW 2011 - FREE BLOG BACKGROUND

Sunday, 9 October 2011

HORROR SHOW 2011 - freebie background from my Blogology blog
Here's my Halloween background (also for any Goths, horror movie fans etc) which I've tweaked for 2011 - the background is wider to accommodate bigger monitors (it's 1800 pixels wide) and with extra helpings of horror added, lol. This will work for the new Designer templates, the old templates and also several of the freebie WordPress templates (eg: Bueno, Coraline) and TypePad's Theme Builder template.

Just copy and paste all the code below into an html box in your sidebar .
<style type="text/css">
body {background-image: url("http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/21d26b6a.jpg"); background-position: center; background-repeat: no-repeat; background-attachment: fixed; }
</style>
<div id="tag" style="position:absolute; left:0px; top:50px; z-index:50; width:150px; height:30px;">
<a href="http://1stfloorflatblogology.blogspot.com/" target="_blank">
<img border="0" src="http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/9061ddc2.png"/>
</a></div>

HEADER

980 pixels wide
If you want to customise my header with your own text, right-click the picture to open to full size then left-click to save to your own computer. Add text using your favourite graphics programme, then load up and click' Instead of Title and Description'.

Otherwise, just save the header and click 'Behind Title and Description' to use Blogger's own default header text - or copy the code below and enter that instead.
http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/5b722a63.png

For standard header widths, see my earlier version here: HORROR SHOW

PERFECT POSITIONING:

Here's how to centre the heading in the older templates (eg: Minima), and here is the tutorial for centering the header and removing that bar at the top that shows behind the header in some templates (eg: Simple, Watermark).

Hope you like it!

SILENT SNOW

Saturday, 18 December 2010

SILENT SNOW - copyright Susie Jefferson
I made this wintry background using two wonderful photographs (with permission) by Jamie at Art-e-ology. Thank you so much Jamie - these photographs are incredible!

Just copy all the code below and insert into an html widget right in your blog. This one is 950px and suitable for a 3-column blog, a wide 2-colum blog, the new Designer templates and also some of the freebie WordPress ones (eg: Bueno).
<style type="text/css">
body {background-image: url("http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/3a1ed415.jpg"); background-position: center; background-repeat: no-repeat; background-attachment: fixed; }
</style>
<div id="tag" style="position:absolute; left:0px; top:50px; z-index:50; width:150px; height:30px;">
<a href="http://1stfloorflatblogology.blogspot.com/" target="_blank">
<img border="0" src="http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/9061ddc2.png"/>
</a></div>
HEADER
SILENT SNOW png image - copyright Susie Jefferson
http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/9da4bad8.png
The header is a png file as it has a transparent background with a drop shadow, so for best results use the code below rather than left-click for the full size, and right-click to copy to your computer. If you want to add your own text, download the png and add text using your favourite graphics programme. MERGE the layers (don't flatten) and save as a png before reloading, or you'll end up with a white background instead of a transparent one.

EMAIL BUTTON
Here's a seasonal email button I made - and here's the post with full instructions on how to add your own address etc.

VICTORIAN CHRISTMAS

Sunday, 12 December 2010

Victorian Christmas - copyright Susie Jefferson
Another freebie blog background and header set for you!

This will work with the new templates, the old templates, any 3-col or wide 2-col blog. Just copy all the code and insert into an html widget in your blog. This will also work with some of the freebie WordPress templates, eg: Bueno.
<style type="text/css">
body {background-image: url("http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/02d604e8.jpg"); background-position: center; background-repeat: no-repeat; background-attachment: fixed; }
</style>
<div id="tag" style="position:absolute; left:0px; top:50px; z-index:50; width:150px; height:30px;">
<a href="http://1stfloorflatblogology.blogspot.com/" target="_blank">
<img border="0" src="http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/9061ddc2.png"/>
</a></div>

HEADER

Victorian Christmas - copyright Susie Jefferson
Left-click to bring up to full size, then right-click to copy to your computer. Add text using any graphics programme (don't forget to flatten when finished, and save as a jpg). Don't click to resize, and if you need to centre the header, just use my tutorial.

VINTAGE SNOWMAN

Friday, 3 December 2010

Vintage Snowman background - copyright Susie Jefferson
A sweet little vintage background for wide 2-col or 3-col blogs. It will work with Minima (old Editor) and Watermark (new Template Designer) plus some of the WordPress freebie templates.

Copy all the code into an html/widget box:
<style type="text/css">
body {background-image: url("http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/bd781ea0.jpg"); background-position: center; background-repeat: no-repeat; background-attachment: fixed; }
</style>
<div id="tag" style="position:absolute; left:0px; top:50px; z-index:50; width:150px; height:30px;">
<a href="http://1stfloorflatblogology.blogspot.com/" target="_blank">
<img border="0" src="http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/9061ddc2.png"/>
</a></div>
HEADER

Vintage Snowman header - copyright Susie Jefferson
Here's the matching header - as it's a rectangle and saved as a jpg, it's your choice if you'd like to left-click to bring up to full size then right-click to copy it and add your own text in your favourite digital programme, or load from the code below.

http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/38b32207.jpg

The header is 950px wide, so try saving without clicking the 'size to fit blog' option first, and if it's too big then reload it, clicking the option.

TIP:
  • If loading the header using my code, just make sure you wait long enough for the image to load. You should see it in the preview pane BEFORE you click 'Save.
  • If you feel your text is too far to one side, or you use the default Blogger text and it looks too high up, then use my tutorial to adjust.

VINTAGE ROBINS

Saturday, 27 November 2010

Vintage Robins - copyright Susie Jefferson
Here's a brand new Christmassy background, header and email button set, to get you in the mood. 

This background will fit any 3-col blog and also a wider 2-col one, plus the new Designer Templates (see my post as to which will fit the best). Just copy all the code below exactly as you see it, and pop it into an html widget right on your blog. 
<style type="text/css">
body {background-image: url("http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/8227bc5b.jpg"); background-position: center; background-repeat: no-repeat; background-attachment: fixed; }
</style>
<div id="tag" style="position:absolute; left:0px; top:50px; z-index:50; width:150px; height:30px;">
<a href="http://1stfloorflatblogology.blogspot.com/" target="_blank">
<img border="0" src="http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/9061ddc2.png"/>
</a></div>
WordPress user? Yes, you can use this one as well! Go to Appearance, Background, then Upload Image. For Position, click 'center', for Repeat just click 'no repeat' and for Attachment click 'fixed' and it'll fit most freebie WordPress blogs. Ditto the header and email button - jut add the code as normal.

HEADER
Vintage Robins header - copyright Susie Jefferson
Copy the code below and enter into your Header box, either behind the title if you want to use Blogger's default header and descriptions, or copy to your computer and add your own customised header using your favourite graphics programme.
http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/cd568a11.png
EMAIL BUTTON

The email button is also a png image (so it will show with a clear background).

Email button - copyright Susie Jefferson
Just copy the code and paste into an html widget box in your sidebar. Put your own email address where the code says email me and make sure there aren't any spaces between the : and the " or it won't work.
<a href="mailto:emailme"><img border="0" src="http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/d422aac7.png"/></a>

Enjoy!

BRASSAI

Saturday, 27 November 2010

Copyright Susie Jefferson
BRASSAI

Mean and moody, this one is all about cold dark nights, rain, Film Noir - and an homage to the French photographer Brassai, whose images I've used. I'm using Watermark, one of the new Designer Templates, and clicked the Background Image to None. This background will also work with standard 2-col and 3-col blogs, Minima template etc.
<style type="text/css">
body {background-image: url("http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/f5254bd6.jpg"); background-position: center; background-repeat: no-repeat; background-attachment: fixed; }
</style>
<div id="tag" style="position:absolute; left:0px; top:50px; z-index:50; width:150px; height:30px;">
<a href="http://1stfloorflatblogology.blogspot.com/" target="_blank">
</a></div>
 HEADER

Either left-click for the full-sized image and right-click to copy to your computer or else copy the code below, whichever you prefer. Customise the header using your favourite graphics programme, or use Blogger's default.
http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/622a7074.png
Hope you like it!

HALLOWEEN 2010

Friday, 29 October 2010

Here's a new background, header and blinkie set for all you horror fans!

My inspiration: dark, lonely street (probably raining just a little). No moon. Total silence, no passers-by... just the sound of footsteps... Do you hear an echo?....

BACKGROUND

HALLOWEEN 2010 - Copyright Susie Jefferson
Copy all the code below, exactly as you see it, and insert into an html box right into your sidebar or footer. This one will also work with the new Templates AND WordPress (depending on your template, of course. I know it works with WP's Bueno). This background is 880 pixels wide, so will fit standard 3-col blogs and wider 2-col blogs.
<style type="text/css">
body {background-image: url("http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/8c29da51.jpg"); background-position: center; background-repeat: no-repeat; background-attachment: fixed; }
</style>
<div id="tag" style="position:absolute; left:0px; top:50px; z-index:50; width:150px; height:30px;">
<a href="http://1stfloorflatblogology.blogspot.com/" target="_blank">
<img border="0" src="http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/47e6b740.jpg"/>
</a></div>
HEADER

HALLOWEEN 2010 - copyright Susie Jefferson
Copy the image code below to install, or download to your blog if you want to customise it with your own text.
http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/a82a3af7.jpg
BLINKIE

HALLOWEEN 2010 - Copyright Susie Jefferson
 This is too big for a side bar - I designed it to go in your footer section. If you desperately want a smaller one for your sidebar, email me and I'll resize it. Again, copy the image code (below) to install.
http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/a0a85f3b.gif
Scare yourselves silly with these... ghosts, ghouls, and clowns (these used to terrify me when I was a child. NOT funny... Remember 'ITl by Stephen King?)  Did you see those teeth??

LIBRARY - HALLOWEEN VERSION

Friday, 15 October 2010

By popular request, a Halloween version of Library - not too scary, just some cobwebs and the odd spider...



Copy ALL the code into an html box:
<style type="text/css">
body {background-image: url("http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/34ff28b2.jpg"); background-position: center; background-repeat: no-repeat; background-attachment: fixed; }
</style>
<div id="tag" style="position:absolute; left:0px; top:50px; z-index:50; width:150px; height:30px;">
<a href="http://1stfloorflatblogology.blogspot.com/" target="_blank">
<img border="0" src="http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/47e6b740.jpg"/>
</a></div>
HEADER


To install the header, copy the image code below (don't click the 'shrink to size' option if you want it BIG):
http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/c88ad866.jpg
Have fun with it!

STEAMPUNK BACKGROUND & HEADER SET

Friday, 15 October 2010


MY COMPUTERY BLOG
Welcome to the world of Steampunk - Victoriana, strange machines, futuristic...

BACKGROUND

For a wide 2-col blog or a standard 3-col blog - which will also work with the new templates.Enter ALL the code, exactly as shown, into an html widget on your blog (sidebar or footer):
<style type="text/css">
body {background-image: url("http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/39493c4f.jpg"); background-position: center; background-repeat: no-repeat; background-attachment: fixed; }
</style>
<div id="tag" style="position:absolute; left:0px; top:50px; z-index:50; width:150px; height:30px;">
<a href="http://1stfloorflatblogology.blogspot.com/" target="_blank">
<img border="0" src="http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/9061ddc2.png"/>
</a></div>
HEADERS
HEADER - 880 px wide
Just copy the image code into a Picture widget:
http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/0fa06844.png 
 Customise with any graphics programme.

HEADER - 950px wide
http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/4f3fff65.png
Just copy the image code (above into a Picture widget). This header is very wide - when you install it, untick the 'resize' button (it will look as wide as mine in the example above and on the Computery page).

Here's my tutorial on how to centre the header if it needs adjusting (depends on the blog template).

FOOTER BUTTON



Finally, a fun 'Thanks for Visiting' button to add to the footer section of your blog.Just copy the image code (below) into a Picture widget.
http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/ba1c4521.png

ENJOY!


Images taken from the fabulous new Steampunk collection by Cecilia Swatton and available from here.

LIBRARY - 3-COLUMN BLOG

Sunday, 5 September 2010

LIBRARY


A nice comfortable background - just a touch of Victoriana, where any book lover can settle right in with a favourite novel and a nice cup of tea.

Thanks to Cajoline for some lovely elements (chair, cup & saucer, lamp and coffee table).

This background is perfect for standard Minima 3-col and wide 2-col templates and will also fit nicely with some of the new Designer templates I've suggested (see my tutorial - tab under the header).

Copy all this code into an html box right into your sidebar:

<style type="text/css">
body {background-image: url("http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/47e6b740.jpg"); background-position: center; background-repeat: no-repeat; background-attachment: fixed; }
</style>
<div id="tag" style="position:absolute; left:0px; top:50px; z-index:50; width:150px; height:30px;">
<a href="http://1stfloorflatblogology.blogspot.com/" target="_blank">
<img border="0" src="http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/47e6b740.jpg"/>
</a></div>

HEADER


Left-click to bring up to full size and right-click to copy to your blog. Up to you if you'd like to add text with your favourite graphics programme or use Blogger's default text (it still looks good, lol).

If you want it to show as large as mine, don't tick Shrink To Fit in the header section.

SPOTS & CRAYONS

Monday, 30 August 2010


A sweet but not over-cute background which will work with a lot of templates, old and new!

TO INSTALL


Copy all of this code and paste into an html box in your sidebar

<style type="text/css">
body {background-image: url("http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/8a8d22b5.jpg"); background-position: center; background-repeat: no-repeat; background-attachment: fixed; }
</style>
<div id="tag" style="position:absolute; left:0px; top:50px; z-index:50; width:150px; height:30px;">
<a href="http://1stfloorflatblogology.blogspot.com/" target="_blank">
<img border="0" src="http://i659.photobucket.com/albums/uu313/1stFloorFlatComputery/9061ddc2.png"/>
</a></div>

This background will fit a lot of the new Template Designer templates, as well as the older template designs like Stretch Minima, Thisaway etc. 

Here's my new tutorial on installing templates (button also under the header).

And a very long and definitive tutorial on my Computery blog.

This spot background is a small copyright-free tile pattern which I've expanded. If it's YOUR tile, please let me know so that I can give you the credit.

HEADER


Left-click to bring up to full size and right-click to copy to your computer. Up to you if you want to add text using your favourite graphics programme or use Blogger's default text. If you want the header at the maximum size, don't tick Shrink To Fit in the header option. If you have a 2-col blog etc, then DO tick Shrink To Fit.