Adding Post Titles To Older Post Newer Post Links On Blogger

One Wordpress feature i really like that is not available on Blogger is last post, next post links at the foot of the page with the actual titles of the posts they link to.On Blogger we have got Newer Post, Older Post links but the title of the post is not shown.I feel these links would get a super increase in clicks if the titles were connected.With simply "Newer" and "Older" people don't know what they are clicking the titles will catch the eye and thus entice more clicks.The knock on effect of this will see more page views that will lead to more return visitors, subscribers and followers.

I said this feature was not available on Blogger, that is until now.A few people have created hacks to add the titles to the older, newer links including myself but every time it had errors.However one hack i have seen does the job perfectly.
Click Here To View Full Post >>

How To Add Footer Columns On Blogger To Display Labels

A recent Email i received asked about two of my other blogs and how i had managed to place a list of labels across five columns in the footer.The two blogs in question are gallery's for Blogger Templates and Social Icons, as they are gallery's they both have a lot of labels or categories.Displaying all labels in the sidebar is not an option as it would take up too much room.So i have placed them listed alphabetically neatly in the footer across five columns.I then display some of the main labels in the sidebar with a link that jumps directly to the list in the footer for people to navigate.I find this a great use of space and in this Blogger Tip i will show you how i have done it.Below you can see some screenshots and i have the links to each site for you to see the section in action.




Click Here To View Full Post >>

Change The Size Of Blogger Profile Picture In About Me Gadget

In this post we have a quick simple tip showing you how to change the size of your Blogger profile picture as it appears in the about me gadget on your blog.By default the image is quiet small around 80x80 pixels, By adding piece of css to your blog you can set the image to any size you like.This will help spice up what is a very plain gadget and give you more option when it comes to the profile image you use.We will be adding the code to your template via the template designer so it couldn't be easier.
Click Here To View Full Post >>

How To Make All Text On Your Blog Lowercase, Capitalized Or Uppercase

A blog i was working on had a minimalist design and the author wanted all the text to be lowercase.This is something you see on some blogs and websites and i quiet like it, it has the 'less is more' thing going on.Now having the posts text, titles and other stuff you add yourself lower case is easy, you just write it in lower case :D.But what about things like labels, text in recent posts and other gadgets and all other automatically generated text.These by default capitalize the text, the first letter is a capital.Other instances on this blog were the newer, older and home links, and meta under the posts.You have no control over how these are formatted, but you can change that.
Click Here To View Full Post >>

Set The Number Of Posts Shown On Labels Pages For Blogger

In a recent post i showed you how to have your blogs labels displayed in a drop down menu.A comment from APF in that post remarked "I'd prefer to see a drop-down that honors the limit (in my case, 1) number of posts per screen I've set for blogger in general".What APF is referring to here is he has set his blog to display one post per page, so on the home page of his blog there will be only one post.Then the Older Posts, Newer Posts links are there for people to navigate through other posts.You can set the number of posts per page on your blog in your settings under formatting.This works fine on the home page and with the older, newer links but when someone clicks a label the limit is not applied, in this post i will show you how to fix that.
Click Here To View Full Post >>

Add An Animated Bump Effect To Labels List On Blogger

In this post we have a fun effect you can add to the links in your blog labels list.This trick has been around for a while and i have been using it on some other blogs.The effect is created using jQuery and basically when a visitor places their cursor over a link it moves across horizontally.So in the same manner you might have links change color, underline or change background on hover this will make them move.

Live Demo - You can see a demo in the category section in the sidebar of Design And Blog : Best Blogger Templates.

Video Tutorial Included - Fore More Help See The Video Tutorial At The End Of The Post.

Add Animated Link Lists To Your Blog

Step 1. In your Blogger dashboard click > Design > Edit Html


Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info)

Step 3. Copy And Paste The Following Code Directly Above / Before

Step 4. Save Your Template.

Video Tutorial For Animated Links In Labels Gadget

That's it now the links in your Labels Gadget will have this cool effect.

Drop Your Comments And Questions Below.

Use Automatic Read More Jump Break With Thumbnail On Blogger

On Blogger you have the option to add a jump break to your posts, so the posts will be displayed with just a short summery on the home page and a link to read the full post will be below.The jump break has a number of great advantages, if you display full posts on your home page it will severely slow down the load time, Also With the jump break in place visitors that land on your home page will see a selection of your posts without the need to scroll.It's also more professional looking and as visitors have to click through to the full post it increases page views.

Update again 05/12/2012 - If you are using this hack you will notice it stopped working.The script caused this as it stopped working.I have added a new script here so it works fine but if you added it before the date above you will need to make a change.

Simply find this line of code in your template :

http://bloggerblogwidgets.googlecode.com/files/auto_readmore_blogger.js

And replace it with this :

http://widgets.way2blogging.org/blogger-widgets/w2b-auto-readmore-blogger.js

Sorry for any inconvenience, these things happen sometimes.

In this Blogger Tip i have a script that will automatically turn your posts into read more summary's on your blogs home page with a few added extras.Here are some of the features of an auto Read More along with a live demo :

- Your posts will automatically be displayed as short summary's with a read more link.
- An image from the post will be re sized into a thumbnail and displayed beside the summery.
- You can choose how much text is displayed in the summery.
- You can choose the size of the thumbnail.
- All Previous posts will also have the jump break so you don't need to go through your archive adding it.

Live Demo - I have added the code to a test blog using the Simple Template from the Blogger template designer and you can see it here - Auto Read More Demo.

The script is used on Most Magazine Templates i publish on my Blogger Templates Site so i thought why not make it available on all blogs ? As well as posts having the jump break on your home page it will also be used on your label pages and archive pages.

Update 07 June 2011 - I have improved this code so your static pages will display properly.With other versions of this code your static pages will have the read more added but will not open when clicked.Now your pages will display fully without the read more jump break.Update helped with thanks to Harish from Way2Blogging.

If you added the old code you will need to replace it with the updated code.To see exactly what you need to replace you can see the old code here with instructions.

Add Auto Read More Post Summary's To Your Blog

Step 1. In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Template > Then Edit Html > Now Proceed > Tick The Expand Widget Templates Box as shown in the video Below :

Step 2. Find the following piece of code in your blogs Html : (Click CTRL and F for a search bar to help find the code - More Info)

Step 3. Copy the following code and paste it Directly Above / Before

Important

The code in red sets how the post summary's are displayed.Remember if a post has an image it will be re sized into a thumbnail to be displayed beside the summery.If the post does not have an image just a text summery will be displayed.

summary_ noimg= 430; --> The length of the summery if the post does not have a thumbnail.
summary_img = 340; --> The length of the summery if there is an image in the post that will be converted into a thumbnail.
null_thumb_height = 120; --> The height in pixels of the thumbnail.
null_thumb_width = 120; --> The width in pixels of the thumbnail.

Step 4. Find the following piece of code in your blogs Html : (Click CTRL and F for a search bar to help find the code - More Info)

Step 5. Replace With The Code Below

Read more ...

Note - You can change the text in red from Read More to "Continue Reading", "Read Full Post" or anything you like.

Note 1. You should try to have the first image in your posts as close to square as possible so they work well when used as thumbnails on your home page.Images that are for example rectangle in shape will appear distorted when they are re sized.I use a version of this script on this blog and always add an image at the top of the posts that are close to square, then size then wont make a big impact on the appearance.Remember it's the first image in each post that is used as a thumbnail.

Step 6. Save Your Template.

That's it for this Blogger tip, All your posts including all archived posts will now be displayed with a summary and read more on your home page, labels pages and archive pages.Check out more of our Blogger Tips and Blog Gadgets.

Did you know you can use a Jump Break In Your Full Feed ?

Drop Your Comments, Views And Opinions Below.

How To Move The Blogger Navbar To The Bottom Of Your Blog

A recent suggestion i seen in the comments for Blogger Buzz The official Blogger Blog, was to provide the option to display the NavBar on the bottom of the page on your blog instead of the top.A lot of blogs have Removed the Blogger Navbar but it can be very useful for both the author of a blog and especially for the readers so this seemed like a great idea.

However it's highly unlikely Blogger will consider this suggestion but if you also like this idea don't worry, i have a way you can move the navbar to the bottom of your blog in just 3 quick steps.To show you how it looks take a look at this demo : Navbar On Bottom Of Page

Move The Blogger Navbar To The Bottom Of Your Blog

Step 1. - In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Customize > Advanced > Add Css, as shown in the video below.

Step 2. Copy and Paste the following code into the Css Section then click Apply To Blog.

#navbar-iframe {
position: fixed;
right: 0px;
bottom: 0px;
left: 0px;
}

Click Save and the Navbar on your blog is now positioned at the foot of your blog !

Very easy, another cool effect is using a Hover Effect Navbar.This effect makes the navbar only visible when you place your cursor over the navbar section of the page.Check out some more Blogger Navbar Effects.

Drop Your Comments And Questions Below.

Author - Paul Crowe is the owner and main author of Spice Up Your Blog.Paul lives in Ireland, has been blogging since 2006 and writing Spice Up Your Blog since 2009.You can find him in the usual social networks.

How To Totally Remove The Blogger Navbar Or Top menubar

The blogger navbar is standard on all blogger templates.Some don't mind it personally i don't like it.Removing it is easier than you might think.In fact i have this Blogger tip down to three easy steps for you.

Remove The Blogger Navbar

Update 25-07-2012 - Blogger have now added a simple option for this : How To Turn Off The Blogger NavBar.

Step 1. In your Blogger dashboard click Design > Edit Html.



2.Copy the code below :

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

3.Place it in your blogs html below the template details (found very close to the top of you html) and just above /* Variable definitions as displayed below:

-----------------------------------------------
Blogger Template Style
Name: Minima Stretch
Designer: Douglas Bowman / Darren Delaye
URL: www.stopdesign.com
Date: 26 Feb 2004
----------------------------------------------- */

#navbar-iframe { display: none !important;} <---- Just Below Template Details



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

If you don't want to completely remove the navbar you can make it into a 'Hover Effect' so it will only appear when you place your cursor over the navbar area :

Make a hover effect navbar

Victory Teachers Blog - Asked in the comments : "If i hide this tool bar - how do i then access the edit buttons?"

Great question, What i use is a link in the footer to my dashboard.

Once your logged in to your account any link to the Blogger homepage will bring you to your homepage.

So just add this code to your sidebar or footer :

Blogger

Now you can click this to get to your dashboard.

You can also add a link to your 'Create a post' page and 'Layout Page'.

In your dashboard click 'New Post' then copy the URL address in the address bar at the top of your screen :

Now put that URL into a link as shown below :

New Post

Replace PUT-URL-HERE with the URL you copied from your new post page.

You can do the same for your layout page, settings page or any page.Don worry about putting links to your pages on your profile only people logged into your account will be able to access them.

Drop Your Comments And Questions Below.