 |
| Blogger Buster Favicon |
If you use Google Latitude, you can now display your current location on your blog using a Google Public Location Badge.If enabled, your location will be publicly available to everyone. You will not be able to limit where and with whom you share your location through the badge.
Many Blogger users have reported that their custom favicon has suddenly been replaced with the default orange Blogger favicon.
<link href='http://www.blogger.com/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/>
If you would like to use any transparency for images in your blog, you should be aware that Internet Explorer 6 (and below) does not render PNG transparencies. So if you use a PNG image with semi or full transparency, you would probably see this rendered against a white/grey background when viewed in IE6 (whereas Firefox and other browsers are able to render the transparency just fine).
One solution to this problem is to use GIF images instead, but this does lead to some compromises in design as the GIF format cannot render semi-transparency (where some of the background color is visible through the image).
Recently, Smashing Magazine posted a wonderful article discussing the use of transparency in modern web design. Many solutions for PNG transparency were referenced in this article, but there was one incredible fix which the author missed out: NaterKane's BgSleight script.
Unlike the PNGfix script (which many of us have used to render transparency for foreground images), this script can also display PNG transparency for background images too! It uses a transparent GIF image as a background to the PNG transparency, and although the effect does not render until the page has fully loaded, I'm sure you'll agree this is the best solution so far when using transparency in PNG images for your blog template design.
I've modified NaterKane's original files to make them easier to download and use by bundling the bgsleight JavaScript file and the blank.gif file in a single download, which you can grab below:
Download bgsleight files for PNG transparency fix
Unzip this file and save the contents to a location on your computer. Then upload both bgsleight.js and blank.gif to the same folder location in your hosting account.
You can find a list of free hosting providers here if you do not already have a hosting account for your scripts.
Finally, link to the bgsleight javascript file in the head section of your blog template, like this:
<script src="http://yourhost.com/bgsleight.js" type="text/javascript"></script>
Don't forget to replace yourhost.com with the URL where you have hosted your bgsleight file!
Now when you upload any PNG image with transparency (full or semi-transparency) to your blog template, the page will be rendered correctly for IE6. As I mentioned before, the transparency will not take effect until the rest of the page has loaded, so for a second or so you may still see a border or pale background around your transparent PNG elements. Once the page has loaded, all of your images will appear just as they should, enabling you to create some great effects in your template design.
You may also want to check out Fonsite and Flair in the City to see how this script has been used in other Blogger powered blogs.
The bgsleight script was originally developed by NaterKane and is distributed under the Creative Commons 2.5 License.
Thank you also to Alfonso of Fonsite for telling me about this highly useful script!
If you have enjoyed this post, please consider subscribing to Blogger Buster for updates of future articles.
While researching blog designs, I came across a really feature: an icon link to the top of the page which floats in the bottom right-hand corner. As a blog reader, I found this feature to be really useful as it enabled me to jump back to the top of the page after reading a long article or browsing through many posts on the home page. Take a look at the bottom right hand corner of this blog for an example of this in action.
This customization is surprisingly easy to install. You can simply add the code required into an HTML/JavaScript widget in your blog's layout or, if you use a Classic Blogger template, add this code directly into your template code.
So in this post, I'll explain how to add an icon link to the top of your blog with an example image and code for you to use this right away.
The icon is styled to appear in the bottom right-hand corner of the page (no matter what screen resolution a visitor uses to access your blog), and is linked to target the top of the page using the "#" symbol.
The icon link used in this blog is small and unobtrusive; to help new visitors understand how this can be used, I added title text to the image so the "Back to Top" prompt will appear when the visitor hovers their mouse over the link.
The code used to add a "Top of Page" icon link is constructed as follows (I have forced line breaks for clarity):
<a href="#"> <-- This link targets the top of the page
<img src="url-of-image" <-- The URL of your icon
alt="alternative text" <-- Alt text for accessibility
title="Back to Top" <-- This will produce the hover text
style="display: scroll; <-- This allows the image to scroll
position: fixed;<-- This fixes the image in place
bottom: 5px; <-- Makes the image appear 5px from the bottom
right: 5px;" /></a> <-- Makes the image appear 5px from the right,
then closes all tags
To use an icon link like the one used here at Blogger Buster, simply copy all of the code below and paste this into an HTML/JavaScript widget in your layout:
If you use a Classic Blogger template (with no drag and drop widgets), you can paste this code into your blog's HTML code, somewhere between the <body> and </body> tags instead.
If you would prefer to use a different image than the one used here, simply replace the URL of the image with the URL of your preferred image instead.
You can also reposition the icon to suit your design needs. For example, if you wanted the icon to be flush with the bottom right corner (no space), change the code explained above to read this instead:
position: fixed;
bottom: 0px;
right: 0px;
To position the icon further away from the right or bottom sides, simply increase the pixel value to reflect this distance.
You needn't be restricted to using an arrow for your top of page link! Some of the designs I showcased in this recent post used ingenious methods of linking to the top of the page:
Left: La Blogueria uses paperclips to link to the top (and other parts) of the blog.
Center: In Tuneando el Blog, the icon link is animated when the mouse hovers over it!
Right: This page curl at the bottom right of Mi-Microsmos is a cleverly disguised (and very stylish) link which features a prompt on mouseover.
I hope this tutorial has been useful and helped you create your own scrolling icon links to the top of your blog.
If you have found this post useful, please consider subscribing to Blogger Buster for updates of new articles as they are published.
The slide show of featured posts which appears in my sidebar was among the most talked about feature of my recent redesign. This slide show is powered by JonDesign's SmoothGallery: a combination of JavaScript and Mootools which creates a cross-fading gallery of images which link to these posts.
In this article, I'll explain the simplest methods of using SmoothGallery to create your own slide show of featured posts which you can display in your blog sidebar.
SmoothGallery offers many different styles of gallery, but unfortunately not all options function properly in Blogger powered blogs.
So in this tutorial I will explain two different styles of SmoothGallery slide shows which I know can be used in Blogger blogs and have tested in different browsers:
The initial installation for these slide shows is essentially the same; you can configure the different options for display after installation as I shall explain later in this tutorial.
You need to ensure you have access to a hosting account where you may upload images, JavaScript and CSS files. Most free file hosting services allow you to upload these file types, including Google Pages and the hosts listed on this page.
You will also need several images which are all exactly the same size. For the purpose of this tutorial I would recommend these images to be 200x100 pixels in size which would fit neatly in most Blogger sidebars. If you prefer to use images of different dimensions, you will need to change the size of the gallery in your style section, as I shall explain later in this tutorial.
If you are able to meet these requirements, read on to see how easy it is to install your own SmoothGallery slide show!
First of all, you need to download the files needed to make the slide show function. For your convenience, I have included the files required to run this in Blogger blogs in a zip file which you can download below.
Download Blogger_SmoothGallery.zip
When you have downloaded these files, retain the same directory structure and upload these to your file host.
Next, go to Layout>Edit HTML in your Blogger dashboard and search for the closing </head> tag. Immediately before this line, paste the following section of code (substituting "your-file-host" for the URL where your Blogger SmoothGallery files are hosted:
Then search for the closing </b:skin> tag on your template. Immediately before this line, add the following section of code:
#myGallery{
width: 200px !important;
height: 100px !important;
overflow: hidden;
}
In your blog's HTML code, find the DIV where your sidebar wrapper begins. The code will look something like this:
<div id='sidebar-wrapper'>
Immedietly beneath this line, paste the following section of code:
<script type='text/javascript'>
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: false,
showCarousel: false
});
}
window.addEvent('domready', startGallery);
</script>
For the next part of the installation, you will need to use your images and the relevant links to your popular/featured posts.
Remember that your images should all be the same size!
Upload all of the images you would like to use to your file host and note down the URLs.
This last step is a little bit tricky, so be sure to double check the code you are replacing and ensure you don't accidentally delete any tags!
<h3> and </h3> tags) with the titles of your posts.<h3> and <h3> tags) with a brief description of your posts, preferably a short one-liner.Once you have made all these edits (and checked that you haven't accidentally deleted any tags!), copy this entire modified section of code to your clipboard and paste this below the final </script> tag which you recently added in your sidebar.
Now, preview your template. If all has gone well, you should see your slide show appear in the sidebar. This initial installation will add a timed slide show where your images will change every three seconds.
Once you are sure you have installed this slide show correctly, you can proceed to save your template.
If you would prefer your readers to choose when the next slide will come into effect, you need only make two small changes to the script for your SmoothGallery installation.
Find these lines in your template code:
timed: true, showArrows: false,And change the values to their opposites, like this:
timed: false, showArrows: true,All other values need to remain the same!
Now when you preview your template, you will see semi-transparent arrows in your slide show which become opaque when your mouse hovers over them. Clicking on these arrows will take you to the next slide in the show.
If you would prefer your slide show to be a different size than 200x100 pixels, you will need to change all of the images you use to this same size.
Then find this section of code in the <b:skin> section of your blog template:
#myGallery{And change the dimensions highlighted in bold red to the new dimensions of your images.
width: 200px !important;
height: 100px !important;
overflow: hidden;
}
The original SmoothGallery scripts was developed by JonDesign and Mootools. Both the original scripts and those featured here are provided under the GNU General Public license.
Here at Blogger Buster, I use SmoothGallery to create a slide show of featured posts in my sidebar, but you could just as easily use this to create a stylish gallery of your photos with captions, or an animation of products in your blog.
I hope you have found this tutorial to be useful to you (despite being a little complicated!) and would love to see how you use this in your own Blogger powered blogs.
Favicons are a very useful method of branding your blog with your personal style, and are a useful recognition tool for your readers to identify your blog. If you are reading Blogger Buster in Firefox (or have bookmarked my site in IE) you will see an example of a favicon in the left hand corner of your address bar.
A while back, I wrote a post explaining how to replace the default Blogger favicon with your own. But since then, I've discovered an even easier method you could use to upload a favicon to your blog - you don't even need external image hosting to achieve this!
For general use, there are two different methods you could use to enable favicons for your blog:
However, those of us who host our blogs with Blogger do not have access to the root of our hosting account. So unless we enable a favicon by adding code to our blog template, the default orange Blogger icon will display instead.
In my previous post about favicons, I explained that you would need to upload your favicon image (with the .ico extension) to an external hosting account.
This method may have been problematic for those of you who don't have access to an external hosting account which supports the icon file type (Photobucket, Picassa and other free image hosts do not support this).
But guess what: you can use a different image file type (such as PNG, GIF or even JPG) for your favicon. What's more, you can even upload this to Blogger (for example, in the body of a post) which negates the need for any external hosting whatsoever!
To make it even easier for you to use a favicon ion your Blogger powered blog, I have reconfigured the Favicon Generator which you can find in the Tools section of this site to output favicons as PNG files rather than icons (with the .ico extension).
<link href='http://your-icon-url.png' rel='shortcut icon'/>Be sure to replace the URLs in red with the URL you copied from your post.
<link href='http://your-icon-url.png' rel='icon'/>
Note: if you use Internet Explorer, the favicon will not appear unless you have bookmarked your blog and refreshed your browser.
If you would prefer to upload your PNG icon to a different image host, you the method is almost exactly the same, except that the URL you will use to enable the favicon should match that where your PNG image is hosted.
Here are some excellent showcases of favicons to inspire you in creating your own unique branded icon:
I hope this post has helped you to enable your own customized favicon on your Blogger powered blog.
If you've enjoyed this article, please subscribe for updates of future Blogger related articles.
Photo by Jurvetson
I've tried a few different methods to display captions beneath images, and the best solution I have found so far is to use CSS. This allows me to align images (and their relevant captions) to the left, right or center of the post with ease.
So in this post, I will explain how I achieve stylized captions beneath my images in Blogger posts using only CSS and HTML tags.
Left Image Right Image
This is achieved by wrapping both the images and the captions in <span> tags which have a "class" depending on their alignment (left, right or center aligned).
Center aligned image (Photo by Montrasio International)
This image demonstrates the code I use to make the captions appear beneath each image:
In the body of my posts, the code for the images and captions will appear like this:
<span class="left-caption">This example would produce an image and caption which is aligned to the left of the text in my post.
<img src="http://url-of-image.com/image.jpg" />
<p>Caption of this image</p>
</span>
To align an image to the right, I would replace "left-caption" with "right-caption", or to center the image I would use "center-caption".
If you would like to use captions which are styled like those I use in my posts, you will need to use the following styling code:
Once you have added this style code to your blog's template, you can display captions beneath the images in your posts.
To achieve this, you will need to wrap both your image and your caption in span tags according to the alignment you prefer. Here are the three different formats you could use:
To align these to the left
<span class="left-caption">
<img src="http://image-host.com/yourimage.jpg" />
<p>Your Caption Here</p>
</span>
To align these to the right:
<span class="right-caption">
<img src="http://image-host.com/yourimage.jpg" />
<p>Your Caption Here</p>
</span>
To align these to the center of the page:
<span class="center-caption">
<img src="http://image-host.com/yourimage.jpg" />
<p>Your Caption Here</p>
</span>
Note that the captions are also wrapped in paragraph tags, like this:
<p>Your Caption Here</p>This ensures the caption is properly styled, as the CSS code contains the styles for paragraphs which appear within this span class.
If you upload your image using Blogger's image upload function, you must make sure that you choose "None" in the layout choices.
It may be easier for you to use the HTML editor to create posts with image captions as this will allow you to see all of the code you are using.
As I explained at the beginning of this post, there are many different methods you could use to display captions beneath your images. The method I explained here is the one which works best for me, though you may prefer to use a different technique.
Here are some links to other articles which offer alternative methods to display captions beneath your post images:
I hope this tutorial has been useful in explaining how you could add captions to your post images in Blogger. If you have any questions or would like to suggest further uses for this, feel free to leave your comments and suggestions below.
I just noticed that the MyBlogLog comment avatars weren't working in this blog. It seems that Merlinox (the blogger who invented this hack) has either removed or relocated the script we were using to make the avatars appear in our Blogger blogs. So the avatars just weren't appearing at all.
Thankfully, I had saved a copy of the JavaScript file which I've now uploaded to my own host, and not the avatars are working for me again.
So if you have installed the MyBlogLog comment avatars hack and your avatars do not display, here is the fix:
Find this line in your blog template:
<script src='http://blog.merlinox.com/MrX/Blog/test/myBlogAvatar2.js' type='text/javascript'/>
And change the line in red to this instead:
http://bloggerbuster.com/scripts/myBlogAvatar2.js
This will link to the script hosted on my server instead, and will ensure your MyBlogLog comment avatars display as normal.
Alternatively, you can download the JavaScript to your computer, upload this to your own hosting service, then change the URL in your blog template accordingly.
Hope this solves any problems you may have been experiencing as users of this hack!
As 2007 is fast drawing to a close, I have created a New Year banner which you can easily install as a widget in your blogs as a seasonal banner for your visitors. This banner will sit at the top right hand side of your blog, providing seasonal decoration to your theme in a way you can easily delete when no longer appropriate.
I have made this available in both PNG (see top right) and GIF format which you can install in your own blogs as a widget.
I have not linked the image to anything, though a link back to this page in your blog is welcomed, and could inform your readers where they can get their own festive banner.
This New Year banner is available in two formats for you to install as a widget in your blog:
Use the appropriate button below to install your own New Year banner with just one click! You can easily remove the widget whenever you like by simply opening up the widget and clicking on the "remove page element" button in the pop-up window.
Wishing you all a happy and prosperous New Year!
Christmas is just around the corner now, and many Bloggers are decorating their templates with festive themes. Unfortunately my time has been so limited lately and I simply couldn't get a festive Blogger theme ready for download in time for Christmas. So instead I created this festive banner as a decorative bauble for my theme.
I have made this available in both PNG (see top right) and GIF format which you can install in your own blogs as a widget.
This Christmas banner will float in the top right corner of your blog, and is great to decorate your blog for the festive season. I have not linked the image to anything, though a link back to this page in your blog is welcomed, and could inform your readers where they can get their own festive banner.
The Christmas banner is available in two formats for you to install as a widget in your blog:
Use the appropriate button below to install your own Christmas banner with just one click! After Christmas, you can easily delete your widget, or replace it with a New Year banner instead (which I will be uploading shortly).
Merry Christmas to you all!
A great way to add a sense of community to your blog is by using comment avatars: an image (or icon) which is unique to the person who is making the comment. When using comment avatars in your blog, you will easily be able to recognize comment authors, especially those who regularly visit your blog. Also I feel this adds a greater sense of interaction between blog authors and their readers.
By default, Blogger only shows comment avatars on comment pages (either pop-up or full screen, depending on your comment settings). However, no comment avatars appear in the most visually important place: in your item pages where comments are displayed beneath your posts. Additionally, only the comment avatars of registered Blogger users may appear on these pages, so if your readers blog on a different blogging platform, their avatar cannot appear at all.
But there is a solution: add MyBlogLog comment avatars to your blog!
When you register your membership with MyBlogLog (a community website for bloggers) you will be able to upload a photo or avatar which will then be used to identify yourself in MyBlogLog's many services.
Thanks to Blog Bloke's post about MyBlogLog comment avatars, I am now using Merlinox's MyBlogLog Blogger Plugin to feature MyBlogLog comment avatars in this blog. This is based on MyAvatars, a Wordpress plugin designed by Napolux. This technique displays the comment authors MyBlogLog avatar beside their name and comment, and where no avatar is found (usually when the commenter has not registered with MyBlogLog), you will instead see a default image.
You can find Merlinox's original instructions for installing MyBlogLog avatars here (which also includes a tutorial for those using Classic Blogger templates). Here I have also provided full instructions for installation, which I hope will help clarify any issues which may be unclear in Merlinox's post.
<script src='http://blog.merlinox.com/MrX/Blog/test/myBlogAvatar2.js' type='text/javascript'/>This will link to the javascript used to power the comment avatars which is hosted by Merlinox.
<b:loop values='data:post.comments' var='comment'>This will be in the comments section of your template, and is easily found using the search function of your browser (CTRL+F). If you cannot find this line, this is probably because you have forgotten to expand the widget templates!
<div style='border:0;float:left;margin: 0 5px 0 0;'>
<script>
myBlogAvatar('<data:comment.id/>','<data:comment.authorUrl/>');
</script>
</div>
As you have read, this is quite an easy hack to implement in your blog. This will enable MyBlogLog comment avatars for your comments, even if you are not a member of MyBlogLog yourself!
There are a few things you should be aware of if you decide to use MyBlogLog avatars in your blog template:
The instructions I provided above will link to the required script which is hosted on Merlinox's server (as he encourages readers to do this in his tutorial). If you would prefer to host the Javascript yourself, you should download this from Merlinox's post, upload to your own hosting account, and change the link to the script in the head of your template to refer to the location of your hosted script like this:
<script src='http://your-hosting-provider.com/your-folder/myBlogAvatar2.js' type='text/javascript'/>Of course, you should substitute the URL in this example for the exact URL where your script is hosted.
I hope this tutorial has helped you to easily install Merlinox's Blogger plugin for MyBlogLog comment avatars in your own blog templates. If you enjoyed this post and would like to hear of future updates, please consider subscribing to the Blogger Buster feed.
As always, your comments and opinions are much appreciated. And if you have an account with MyBlogLog, don't forget to choose "other" when you leave your comments and use your URL so that your avatar will appear beside your message!
Technorati Tags: mybloglog | comment | avatars | author | images | blogger | template
It seems that many Bloggers are currently unable to upload images to their blog posts. This problem is currently being investigated by the Blogger team, and while we are told that a solution is "imminent", this is still causing many problems.
Usually when this problem occurs, you will receive an error message and error code which you can report to the Blogger Team on this thread in the Blogger Help Forums.
Until the image upload problem is fixed, you may want to consider uploading your images to a free hosting site, and link to these from your blog posts. While this is hardly ideal, I have found this does bypass the problem and displays images correctly. Here's how you can link to externally hosted images in your blog posts.
There are dozens of free image hosts to which you can upload your images. Perhaps the most popular of these free services are Photobucket and Imageshack, though you may easily find other services by performing a Google search for Free Image Hosting.
You may need to set up an account with your choice of image host, and once you have done so, follow the instructions for your host to upload your images.
When you have uploaded the images you wish to use, make a note of the exact URL of your image. You will need to use this when linking to the image in your post, so it may be useful to copy this to your favorite text editor.
Write your Blogger post as normal, but without the usual image upload. In the place where you would like to feature your image, you can use this simple HTML tag to link to your image, which will make this display in your blog post:
<img src="yourimagehost.com/yourimage.jpg"/>
You will need to replace "http://yourimagehost.com/yourimage.jpg" with the exact URL of your image, where it is hosted on your image host.
This simple code will display the image you specify which by default is aligned to the left of any text which follows. You may prefer to customize the way the image displays in the post. In this case, here are alternatives to the three alignment methods used when uploading images through Blogger:
<img src="http://yourimagehost.com/yourimage.jpg" style="float:left; margin: 0 10px 10px 0; border-width: 0;/>
<img src="http://yourimagehost.com/yourimage.jpg" style="display:block; margin:0px auto 10px; text-align:center; border-width: 0;"/>
<img src="http://yourimagehost.com/yourimage.jpg" style="float:right; margin: 0 0 10px 10px; border-width: 0;"/>
Don't forget to replace all instances of "http://yourimagehost.com/yourimage.jpg" with the actual URL of your image!
"Alt" means "Alternative text", which is displayed instead of your image for browsers which do not display images (eg: Lynx), for accessibility reasons, and in case your image cannot be displayed for some reason. While it is not strictly nescessary to add alternative text to your image tags, you may prefer to do so. Here is an example of how to add alternative text to an image:
<img src="http://yourimagehost.com/yourimage.jpg" style="float: left; margin: 0 10px 10px 0; border-width: 0;" alt="My Image"/>You can replace "My Image" with a more appropriate description for your image instead.
Alternative text can help your blog rank better in search engines, and is usually inserted by Blogger when you upload your images in the regular way.
When you insert an image using the image tags above, the image displayed will not link to the image location as it does when you upload an image through the Blogger upload system. If you would like the image to become a link to its' location online, you can use the following method:
<a href="http://yourimagehost.com/yourimage.jpg"><img src="http://yourimagehost.com/yourimage.jpg" style="float: right; margin: 0 0 10px 10px; border-width: 0;" alt="My Image"/></a>
Again, don't forget to change the URLs to match that of your image's online location!
You can also use this method to create an image link to any other website you prefer. Simply change the <a href="..."> section to match the URL you wish to link to.
I hope this alternative method will enable you to post as normal until Blogger have solved the problems we've all experienced when trying to upload images to our posts! Which I hope will be very soon...
Technorati Tags: blogger+problems | uploading+images | blogger+posts | help
Screen shots are an excellent way to illustrate a post, especially when explaining how to use a website, or to demonstrate a new template. All of the screen shots featured in this blog were created using ScreenHunter: a free program which allows you to take pictures of the screen you are working on, and save them directly to your computer. This works on all Windows operating systems, including Windows 98/NT4/ME/2000/2003, XP and Vista.
I've been using ScreenHunter for a few years now, and have found this to be the easiest screen capture facility to use. Best of all, it's free for unlimited personal and business use! There is no expiration date, nor is this trial software.
You can download your free copy of ScreenHunter 5.0 from the Wisdom Soft website using the link below (scroll down the page a little to find the correct download):
Download WisdomSoft ScreenHunter 5.0 Free
Once you have downloaded the ScreenHunter program, you can easily install the software with one click. However, you will be presented with some options for the installation that you should be aware about:
When you start ScreenHunter, you will see a screen which features the various options for capturing the images on screen. You can begin taking screenshots straight away, though there are a couple of options you may wish to change first in the "TO" section:
When you are ready to take screenshots, there are three different options to choose from:
I hope you enjoy using ScreenHunter and find this to be a useful tool for your blogs!
Technorati Tags: screenshot | screenhunter | wisdomsoft | free+software | blogging | tools
Instead of a simple background color, you could use a background image for your blog. This could be styled to look like wallpaper, it could repeat only vertically or horizontally, and can even be in a fixed position where it stays in place while the rest of the page scrolls down!
In this post, I will explain the how you can use background images for your blog using these different methods, with examples to demonstrate how the various effects can be achieved.
You can use virtually any image as a background for your blog. Usually background images are in JPEG format, though you could also use GIF's or BMP's. However, you must be able to host the image on an external server, as Blogger only hosts images which are contained in widgets or posts. If you're looking for free image hosting, take a look at this post.
Before you begin to add the image to your background, find the image you would like to use, and make a note of the url where it is hosted.
As I mentioned in the introduction, there are different ways you can use background images. Here I will explain:
This is the simplest of all background effects to achieve. Most people prefer to use a small image which tiles seamlessly. This ensures that the page loads faster, since the image has a small file size.
You can easily find such images for your background by doing a Google search for tileable backgrounds, or could even create your own.
I created this simple image to use as an example, though you could just as easily use any other image:
To make this image a tiled background for your blog, go to Template>edit html and look for the styling properties for the body of your blog, which should look something like the example below:
body {We need to edit the line highlighted in bold, which is where we declare the background properties of the blog. To add a repeating image to the background, we simply add the following (highlighted in red) to the body properties:
background: $bgcolor;
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
body {Where the URL of the image matches the URL of your background image location.
background:url(http://www.imagehost.com/yourimage.jpg);
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
This will make the background image repeat across the whole page, like the example below:
If you prefer, you can also view the whole demonstration page here which offers a better view of the overall effect then the iframe above.
This involves a slightly different addition of code to your template, but is essentially the same principle. Again you should find the "body" style declaration in your template and add the url for your background image. Also, you need to declare that the background will repeat on the "y" (vertical) axis, as in the example below:
body {Using the same example image as before, this will create the following effect (or look here for a full page preview):
background:url(http://www.imagehost.com/yourimage.jpg) repeat-y;
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
This is very similar to the method we used to tile the image vertically. However, this time we tell the browser to repeat the image on the "X" (horizontal) axis, like this:
body {
background:url(http://www.imagehost.com/yourimage.jpg) repeat-x;
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
This will produce an effect like the example below (use this link for a full page preview):
Usually a larger image is used for this method, so for this example we will use the following image from Pyzam.com):
To ensure this background image does not repeat, we need to add the "no-repeat" declaration to the background properties. Also, we need to add the statement that the background attachment is fixed, so that the background does not move with the page. Here again is an example of what your code should look like, with the changes highlighted in red:
body {And here is the example of what this property achieves (use this link for a full page preview):
background:url(http://www.imagehost.com/yourimage.jpg) no-repeat;
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background-attachment: fixed }
Unless you tile your background image across the whole page, you will be left with blank white areas. To fill these areas with the color of your choice, you should also add color to the background property.
If you already have a "$bgcolor" variable in your blog template, you can simply add this variable to the background properties, like this:
background: $bgcolor url(http://imagehost.com/yourimage.jpg) repeat-x;However, if you do not have this variable in your template, or instead would prefer to declare the color yourself, you can do so using Hex values for the color you wish to display. There is a useful color calculator in the tools section which can generate the hex values require. Here is an example of how you can declare the hex values for the color in your background:
background: #ff0000 url(http://imagehost.com/yourimage.jpg) repeat-x;Using the first image as an example, this would generate a background like this:
By default, the background image will begin in the top-left corner of the page, regardless of how you want the background image to repeat (or not) across the page. However, you can specify where you would like the image to be placed by adding some extra variables to the background specifications.
Here is an example of the bldy's background property to show where you can place the positioning variables:
background: #ffff00 url(http://imagehost.com/yourimage.jpg) positioning-variables-here no-repeat;And here is a list of the positioning variables you can use:
If you wanted to position a fixed image at the top center of a page for example, you could use the following code:
background; url(http://imagehost.com/yourimage.jpg) no-repeat top center;
It is also possible to set the starting position of the background image using percentages on the X or Y axes, or by specifying the distance in pixels from the top or left of the page. However, this can be rather complicated, and since people use many different browsers and screen resolutions when browsing the internet, this can cause serious problems for blog design! If you would still like to know more about this, I would recommend reading the information on the CSS background page at W3 schools.
I hope this tutorial has helped you understand how to use background images in your blog, and covered all aspects of how these different effects may be achieved. As always, your comments and opinions are much appreciated!
If you would like to receive updates of new tutorials and posts from Blogger Buster, please consider subscribing to our feed.
Technorati Tags: background+image | blogger | template | backgrounds
Subscribe to Blogger Buster by email for updates to your inbox:
Be informed of new posts by subscribing to the RSS feed in your feed reader or by email .
.png)
All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:
