logo
Currently Browsing: Blogging Tips

How to increase space between links in blogger

logo

How do you increase the space between links which look like they are squeezed together?

An illustration is as follows:
squeezedspaced out

All you have to do is:

1. In blogger, go to Layout, Edit HTML

2. Control +F this code:     .sidebar li, #BlogArchive1 li {

3. Below it, there should be this code: line-height:

4. Change the value according to how large you want the space to be.
And you're done! :)

How to use a picture as a background in blogger

logo

For example, if you want the picture to be at the 'post' area,

Paste this following code just below the opening tag.

#main {
background-image: url("http://YOUR-URL-HERE.COM");
width: 661px;
margin: 7px;
padding: 20px 0 0 0;
color: $textColor;
font: $textFont;

Replace 'YOUR URL HERE' with the URL of your picture. You need to host the picture somewhere, like on photobucket or tinypic, then obtain the URL of the picture from there.

Point to note: If your picture is smaller than the 'post' space, it will 'tile' itself and become a repeated picture. This effect is good for blog backgrounds which you don't want to be a flat, solid colour, but want some texture for it.

How to remove blogger navbar

logo

So, you want to remove the ugly blogger navbar/banner, whichever you call it.

blogger-edit-navbar02

Step 1:  Go to your blogger dashboard, select layout, then edit HTML, then Edit template

Step 2: Paste the code in red, in between the blue coloured ones.

-----------------------------------------------
Blogger Template Style
Name:     Minima
Designer: Douglas Bowman
URL:      www.stopdesign.com
Date:     26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */


#navbar-iframe {
display: none !important;
}

/* Variable definitions
====================

Click SAVE.

and you're done! :)

Remove or hide “Newer Post-Older Post” in Blogger

logo

Websites are not like personal blogs. Hence, It is essential to hide or remove the 'newer post', 'older post' and rss links in the website. How do we do this?

1. Click 'Edit HTML' in the Blogger Layout page.

2. Search(Ctrl+F) your template to find the following codes:

#blog-pager-newer-link {
float: left;
}

#blog-pager-older-link {
float: right;
}

#blog-pager {
text-align: center;
}

3. Replace the above code as given below:

#blog-pager-newer-link {
float: left;
display: none;
}

#blog-pager-older-link {
float: right;
display: none;
}

#blog-pager {
text-align: center;
display: none;
}

Save the template and you're done!

Another tip: If you want to hide any part of a template, just paste 'display: none;' below the opening tag. Eg. If you do not want a footer for your blog, just type 'display:none;' right below ' #footer { '.

Blogger errors when uploading template

logo

As you may already know, SPIC has a few management committee members who design websites for SMEs which they can maintain themselves. Therefore, in order to make it user-friendly to maintain, we use blogger to host their websites.

Here comes the tough part. As we work with blogger in every website, we encounter all sorts of errors and problems with blogger. In addition, we find out interesting ways to solve template issues and more efficient ways to solve problems.

Hence, we would like to share our experiences and tricks in blogger with all of you. :)

In this post, we will tackle one of the most time-consuming problems in blogger. They are the "bX-bliced" errors. They can come in the form of: "bX-y6cz0v", "bX-8dyqz0", "bX-si9ejx", and many others. This usually occurs when you are uploading a new template. After some research, we have found that this solution works 99% of the time.

1. Open the XML template with Notepad or any other XML editor like Dreamweaver.

2. “Ctrl + F” and search for the word "widget id"

3. Replace the "b:widget id='Anything1'" to "b:widget id='Anything11'" (eg "b:widget id='Header1'" to "b:widget id='Header11'"). You can replace the number into any number you want, but it should be double digit. (eg. change 1 to 11, 2 to 22 and so on)

4. Save the file. Upload the template by either uploading the xml file or cut and paste as usual.

And you're done! :)

logo
Powered by Wordpress | Designed by Elegant Themes