Jul 21, 2016

How to Add An Image Slider to Posts on Blogger

How to create a clickable image slider in a blogger post

Slideshows have been the hot new fad on blogs lately.  Many blogs have them on the sidebar, in the header and within the post content itself.  They are a great way to add a lot of images to a single post without making readers scroll and scroll to the bottom of the page.  They also can help loading time since they only pull one image at a time.  If the images are clickable you can also use sliders as a way of rounding up your old content.. almost like a fancy ‘navigation’ tool.

Jul 19, 2016

How to Paginate A Blogger Post

How to paginate long blogger posts into mutliple pages

Over a year ago, I shared a tutorial on how to split you Blogger post into multiple pages.  

It was an okay way of paginating, but the setup was clunky.  There were a lot of moving parts. It was far from ideal for beginning bloggers.

My Favorite Books For Growing My Blog.

Today I'm sharing my favorite books that I used for growing my blog.

Jul 15, 2016

How to Add Breadcrumb Navigation Menus At the Top of Your Blog Posts

How to Install breadcrumb navigation on your blogger blog
Breadcrumb navigation is becoming a more and more relevant when it comes to a blog’s user friendliness (which trickles down to search engine friendliness).   Most SEO and marketing experts agree that breadcrumb paths are a positive addition to almost any site, especially those where the content can be categorized with some sort of hierarchy. Today we’re going to discuss exactly what breadcrumb navigation is, why it is important and how you can install it on your Blogger blog if you don’t have it already. 

What is breadcrumb navigation?

Breadcrumb paths are the horizontal menus found at the top of a post or page that show the hierarchy of post content.  On Blogger, the cascade is typically:  Home >> Post Category >> Post Title

The term “Breadcrumb” is a homage to the fairy tale Hansel and Gretel where the children left a trail of breadcrumbs to find their way out of the forest.  In that same way, your breadcrumb navigation shows the path of your content. (Although not necessarily in the order you actually got there.) It is more of a roadmap of your site structure to help users navigate through your content.

I have been using breadcrumb navigation on my DIY site for a while now and it has been great for reader retention and increasing pages per session.  This is what they breadcrumbs look like on my blog:
Breadcrumb menu example

Why are breadcrumbs so important? 

Breadcrumb navigation is extremely important especially on large commerce sites.  For example, Amazon prominently uses breadcrumb paths on their site:
Amazon breadcrumb path
and even though the structure of most blogs is not nearly as complex as Amazon, it still can be very valuable for a good user experience and SEO.


1. Aids in navigation: Having a breadcrumb path allows for easy discovery of related content. Since most blogs are written chronologically, the “next” and “last” post navigation options may not result in related or relevant content.  They are typically easy to understand for most users (and not as difficult to find as your menus in your header or sidebar) and don’t take up a lot of space or slow down you site.

2. Reduces Bounce Rate: Having a breadcrumb trail available has been proven to reduce a page’s bounce rate. By giving users an easy way to find related content they are less likely to leave after they have finished reading the content on the current page. I also increases time on site and pages per session.

3. Gives user a frame of reference: Many site visitors will not land on a home or menu page but will instead find themselves on a single post.  A quick glance at the breadcrumb path makes it quickly obvious where exactly they are located on your site, relative to the rest of your content.  Additionally, the label the current post is categorized under provides insight into the type of content available on your site.

4. Allows for easy back tracking: Breadcrumb navigation makes it easier for a user to backtrack to a parent directory (or in blogger’s case, to an entire category label).  Since breadcrumb paths tend to narrow down content by increasing specificity, they allow users to ‘back out’ of a post into a larger segment of your site’s content. 


All of the benefits for user experience chould technically also be listed under SEO benefits, since user friendliness and engagement is such an important factor when it comes to a page’s search engine rank.  There are also some ADDITIONAL SEO perks from having breadcrumb navigation available on your blog independant of user experience.    

1. SERP results markup: Google recently announced that they are updating the MOBILE algorithm to 
show breadcrumb paths instead of URLS on SERPs (Search engine results pages).  To insure your links show up that way requires some additional RDFa markup separate from the HTML for navigation.

With that markup search results now look different on mobile.
Google Fits Breadcrumbs into Search on Mobile 2. Keyword Density: Listing the keyword rich post and category names on each page increases the keyword density on your site.

3. Internal Linking: This navigation system links together similar content via the same category label. These additional links are beneficial SEO wise.

How do you install the breadcrumb navigation to your blog posts?  

It isn’t super difficult if you have a standard template.  Custom templates may be slightly more complicated, but for most blogs it is a few simple lines of HTML added to your template.  This is what this blog’s breadcrumb menu looks like using this tutorial.  Simple breadcrumb navigation


From your Blogger dashboard go to Template and create a backup. Next click on “Edit HTML”   Click INSIDE the window and search for: 
<b:include data='top' name='status-message'/>
Remember you need to click ON THE CODE and THEN hit “Control-F” or else you won’t actually search the HTML! 

Now Replace the highlighted text with the following (we are adding the navigation menu to the top of your posts):
<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>
Now you want to find this part of your code:
<b:includable id='main' var='top'>
Replace it with the following  (What we are doing here is adding code to generate the actual text in the menu itself) :
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>  » <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a>
 » All posts

<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
<b:includable id='main' var='top'>
Finally we need to format how the menu appears.  To do this you have to add the CSS (styling) to the text.  Find: 
Paste the following immediately before it:
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
line-height: 1.4em;
This is CSS markup and you can change the way your menu looks by changing this text.  This is just the most basic formatting, but feel free to play with this code if you are comfortable with CSS.

For example, here is a much more complicated CSS markup you could use instead:
.breadcrumbs {
font-size: 14px;
background: #eeeeee;
background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc));
background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
background: linear-gradient(top, #eeeeee 0%,#cccccc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 );
height: 25px;
line-height: 25px;
color: #454545;
border: solid 1px #cacaca;
width: 100%;
overflow: hidden; 
margin-bottom: 25px; 
padding: 0px
With that CSS this is what the menu would look like this on my blog:
CSS markup for Blogger Breadcrumb Menu

Depending on how comfortable you are with your template, you also can move your menu to different parts of your post.  I put mine under the title, but you could also put it in the footer or near the comments.  It really will depend on your layout.  The standard location is at the top of your post.

Now you should have everything you need to install this extra navigation option for your readers and will help drive those readers to all the other related content on your site.

Jul 1, 2016

Post Planner for Bloggers: Improve Facebook Reach And Engagement

Post Planner for Bloggers

I discovered the power of Post Planner a few months ago when Gail, from MyRepurposedLife (who has a HUGE Facebook page) told me she was using it and really liking it.  She had seen her engagement skyrocket (which is really difficult for pages with more than 100K followers) and she told me she was saving a ton of time.