How Blog Works (www.howblogworks.com): Customize Blogger Tips

Showing posts with label Customize Blogger Tips. Show all posts

Sunday, September 04, 2011

Add a Post Divider Between Blogger Posts

In today's Blogger tutorial I show you how to enhance your Blogger blog (Blogspot blog) by adding a post divider to your Blogger template. Used effectively post dividers can really jazz up your blog and will lend it that individual feel which most of us are hoping to create.

This tweak is very easy and well within the capabilities of any Blogspot blogger. Only a few simple changes to your Blogger template are required and these are in the CSS styling section.

By way of example I will use a divider that I downloaded from the internet free by searching for free divider graphics. Here are some sample dividers you can use to get started:

URL address:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr8_1EklQciC3zXz2htRixi1q2ZDNNDDfjbRj3X46HWRkavQcMsV6SO-8KhvqMLHww8nX5wo2LhRk4mciyl9cS3WM2uCYg1KnzjTpGZ65V8wGPNSN6FpUKFe2NkYDKKslSuixpqWH_JffD/s320/ribbon%255B1%255D.gif

URL address:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-T0h_MRBO7M43KwgfnuiTWEnHFodQTKQImgG1jZVjWFoip5YmQ4j5fU8N_jlThDOrN6Sf855PeYqMxQzTNmLWcr3nIrvERpGMkGLMFrt8O4ICUvfmGwxi2lYSs8wTG-z3AUEtN8CZDTWv/s320/bar1%255B1%255D.gif

URL address:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEfRUVTK5IBlCyvkCBfo9TIOiAOnuESPuzVrtDNVbsSV7vnDWMcOY4eGQPvk6xvahYgIHuCFJBmjNTv1VpaxneJjVTG7tZYwWuJ2Qjuk1B5fj0E5LCRQKDqXrJH6spam83Y5dFSt8IcX84/s320/barbsmpl%255B2%255D.jpg

URL address:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTnAUsxZzQ3XsRisy8-8Q7SbK_XA1J1CLsHYt0m4Oj1whkivzzoRBDi3C2f2gMImr8bSCQPWLeLVrNDPyOwnZXWQ3r3NkCWMod5LrAcQgDDES9JS0HGbarxN1Ww9_-XtXtwjUSjjp2KKqR/s320/bar47%255B1%255D.gif

How to Add a Divider Between Posts in Blogger

Login to Blogger if not already logged in
From the Dashboard navigate to Layout > Edit HTML
Back up your Blogger template as a precaution by downloading it to your computer
Find the following line of code in your template:

.post {

You are likely to have something like this in your template already:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
Paste the following lines of code to this block making sure you paste them before the closing curly bracket:

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr8_1EklQciC3zXz2htRixi1q2ZDNNDDfjbRj3X46HWRkavQcMsV6SO-8KhvqMLHww8nX5wo2LhRk4mciyl9cS3WM2uCYg1KnzjTpGZ65V8wGPNSN6FpUKFe2NkYDKKslSuixpqWH_JffD/s320/ribbon%255B1%255D.gif);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:1.5em;
If any lines are duplicated remove them.
Remove any line beginning with: border-bottom: eg

border-bottom:1px dotted $bordercolor;
You will now have a block of code which looks like this plus any extra lines from the existing code in this block:

.post {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr8_1EklQciC3zXz2htRixi1q2ZDNNDDfjbRj3X46HWRkavQcMsV6SO-8KhvqMLHww8nX5wo2LhRk4mciyl9cS3WM2uCYg1KnzjTpGZ65V8wGPNSN6FpUKFe2NkYDKKslSuixpqWH_JffD/s320/ribbon%255B1%255D.gif);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:1.5em;
}
Click on Save Template to save your changes
Click on View Blog to see your new post divider between posts

Tips and Troubleshooting

To change the divider to one of the above replace the URL address of the image (in red) with the URL address of the new image you want to use.
To use your own divider image download to your computer from the internet and then save the image to a photo image service like Photobucket. Replace the divider image URL address (in red) with the URL address of your new image
To increase the padding around the divider change the following line of code:

padding-bottom:1.5em;

to

padding-bottom:2.5em;

In today's Blogger tutorial you have learned how to insert a divider between your Blogger posts to enhance the look of your Blogger template (Blogspot template). You can either make your own post divider or download one from the myriad of free website dividers available on the net.

Related Articles
List of How Blog Works Tutorials for Blogger Blogs
How to Add, Delete or Remove Blogger Image Borders
How to Align and Justify Posts in Blogger

Read Full Post ...

Friday, September 02, 2011

Add 3 Column or 4 Column Footer to Blogger

In this Blogspot tutorial you will learn how to convert your existing Blogger footer (Blogspot footer) into a 3 column footer or a 4 column footer. With more columns in your Blogger footer you will be have the extra room to accommodate more widgets such as Flickr photos and Twitter updates. Also you will be able to put less frequently used widgets such as recents comments, archives, followers, About Me etc at the bottom of your template so that only the most important widgets are loaded first.

This tweak involves adding code to the footer section of your existing Blogger template to change it to 3 columns or 4 columns. The tutorial is not beyond the capabilities of Blogger newbies and webmasters with intermediate skills but care needs to be taken when modifying your Blogger template so back up before you start. For best results a Blogger template with a width of around 900px is best.

How to Add a 3 Column Footer to Blogger

Log in to Blogger if not already logged in
Navigate to Layout > Page Elements
Move any existing widgets out of the footer section and place them in the sidebar temporarily and save changes
Navigate to Layout > Edit HTML
Back up your template as a precaution by downloading it to your computer
Find the following section in your Blogger template

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

If you are having difficulty finding this section trying searching for footer-wrap or something similar as sometimes this section is called something else in some templates.
To Add a 3 Column Footer to Blogger
Replace all the code located in Step 6 with the following

<div id='footer-columns'>
<div id='footer1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

To Add a 3 Column Footer to Blogger with a Lower Footer Section
Replace all the code located in Step 6 with the following

<div id='footer-columns'>
<div id='footer1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<p/>
<div id='footer-bottom' style='text-align: center; padding: 10px;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
</b:section>
</div>
<div style='clear:both;'/>
</div>

To Add a 4 Column Footer to Blogger
Replace all the code located in Step 6 with the following

<div id='footer-columns'>
<div id='footer1' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 25%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col4' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
Save changes to your Blogger template.
Navigate to Layout > Page Elements. You will now see a 3 column footer, 3 column footer with a lower section or a 4 column footer depending on what option you chose.
Move the desired gadgets to the new Blogger footer columns. Create new widgets to fill up the footer columns if necessary. Save your changes.
Click View Blog to admire your new footer section

Tips and Troubleshooting

To Add Padding Between Footer Columns in Blogger
To create some padding between the columns add the following code to the style section of your Blogger template - before </b:skin> tag.

#footer-columns {
clear:both;
}

.footer-column {
padding: 10px;
}
To Add a Border to the 3 or 4 Column Blogger Footer
- For Top Border Only of the 3 or 4 Column Footer
  Paste the following code before the </b:skin> tag
  
  #footer-columns{
  border-top:1px dotted $bordercolor;
  clear:both;
  margin:0 auto;
  }
  
  Replace $bordercolor with a hex color if default color is not displayed. Change this color to suit your template. For example
  
  #footer-columns{
  border-top:1px dotted #113355;
  clear:both;
  margin:0 auto;
  }
- For a Box Border Around the 3 or 4 Column Footer
  
  #footer-columns{
  border:1px dotted $bordercolor;
  clear:both;
  margin:0 auto;
  }
  
  Replace $bordercolor with a hex color if default color is not displayed. Change this color to suit your template. For example
  
  #footer-columns{
  border-top:1px dotted #113355;
  clear:both;
  margin:0 auto;
  }

In today's Blogger tutorial you have learned how to add a 3 column footer or a 4 column footer to your Blogger template (Blogspot template). You have also learned how to add some styling such as a border above the footer and around the footer. As always I am available to answer questions if you need assistance. Good luck!

Related Articles
List of How Blog Works Tutorials for Blogger Blogs
Customize Blogger Tips

Read Full Post ...

Add Email This Post Link to Blogger

In this article you will learn how to place an email this post link or button at the bottom of each post in a Blogger Blogspot blog.

You may have noticed that some blogs give readers the option below their posts to email the article to themselves or a friend via a link or button. This affords readers yet another way to have access to your posts and a link for them to find you if they want to call back.

This email link should not be confused with the subscribe by email link which once a reader is signed up to will give them regular updates of each post you publish. This email link on the other hand only emails the reader the single post they are interested in.

There are several ways to place an email this post link on your Blogger Blogspot blog. Here are three methods known to me.

Add Email This Post to Blogger - Method 1
The easiest method. Adds an email button to the end of each post.

1. Login to Blogger if not already logged in

2. Navigate to Layout > Page Elements

3. Within the template click the Edit link on Blog Posts

4. A pop up menu will open. Under Select Items check the box labelled Show Email Post Links

5. Click Save

6. Click on View Blog and scroll to the end of your post to see the envelope button which has now appeared.

Add Email This Post to Blogger - Method 2

Another method of adding an email this post link to your blog is to add an all-in-one social bookmarking button to your Blogger Blogspot blog. All in one social bookmarking buttons are minimalist and reduce the clutter of having lots of buttons. Read the following article for information about how to add an Add This Social Bookmarking Button to your Blogger blog

Add Email This Post to Blogger - Method 3
By far the most advanced method and requires a change to your Blogger template. Yet another way to add an email this post link to your Blogger blog is to make use of your Feedburner FeedFlare if you have one. For information about getting a Feedburner FeedFlare for a Blogger feed and configuring it please refer to my article Add a Feedburner FeedFlare to a Blogger Feed

Assuming that you already have a burned feed at Feedburner (if not then read my article on how to Burn a Blogger RSS Feed at Feedburner and a FeedFlare set up follow these instructions to add an email this post link.

1. Click the My Account link at the top right corner of the Blogger navbar and then select Feedburner from the list of Google services or sign in to Feedburner directly.

2. Select your blog feed from the My Feeds List on the My Feeds page

3. From the Feedburner dashboard select the Optimize tab.

4. From the left sidebar menu select FeedFlare

5. On the FeedFlare page enable Email This by checking the box under the Site column. (Note the first column is what appears in the feed and the second column is what will appear on your blog). If you don't have your FeedFlare set up yet you can set up the FeedFlare options for both site and feed together at the same time. Follow my article about adding a Feedburner FeedFlare to Blogger for more on this.

6. Once you have checked the Email This option under Site and added any other options to the FeedFlare in the feed or site that you would like then click on Save. If this is a new FeedFlare then you will click on a button marked Activate instead.

7. After activating or saving you need to get the code to add to Blogger. Do this by clicking on the dropdown menu labelled Get the HTML code to put FeedFlare on your site and selecting Blogger from the list.

8. A pop up window entitled Adding FeedFlare to your Blogger blog will open with instructions on how to make the necessary changes to your blog. These are a bit confusing so I will break them down a bit here. Don't close this window yet as we will return

9. Login into Blogger if not already logged in

10. Navigate to Layout > Edit HTML.

11. Check the Expand Widgets Template

12. As a precaution back up you template

13. Scroll down to the following code or use CTRL + F to bring up the search tool.

<div class='post-footer'>

Note assumes you are using layout in Blogger. If you don't have this code you are likely to be using a custom template and will need to read the advanced instructions. Any problems just ask.

14. Copy the layout code in the Feedburner pop up window and paste it directly below this line <div class='post-footer'>

15. Click Save Template to save changes

16. Click View Blog to see the link in the footer of your blog posts

In this article I have suggested three different methods to add an Email This Post link to a Blogger Blogspot blog to give readers the option of emailing their favorite articles directly to themselves. If you get stuck or have problems with any of these methods please just ask and I will try to help.

Related Articles
Add Email Subscription Links to Your Blogger Blogspot Blog
Add a Social Bookmarking Button to your Blogger Blog
Add a Feedburner FeedFlare to a Blogger Feed
Burn a Blogger RSS Feed at Feedburner
List of How Blog Works Tutorials for Blogger Blogs

Read Full Post ...

Blogger Post Image Borders Change or Remove

Sometimes you may want to remove, delete or change the image border of a custom Blogger template or default Blogger template (Blogspot template). In this Blogger tutorial you will learn how easy it is to make changes to your template so that you can get rid of unwanted image borders around all the images that appear in your blog posts or around a single image in a blog post.

You will also learn how to enhance your Blogger template (Blogspot template) by changing the line color and line style of the existing image borders.

Note this Blogger tutorial applies to custom templates and the previous generation of Blogger templates. If you are using the new default Blogger Template Simple please refer to my Blogger tutorial How to Remove the Image Border in Blogger template Simple for instructions

This Blogspot tutorial is rated easy. It involves making minor alterations to your Blogger template (Blogspot template) but this is well within the capabilities of beginner bloggers and newbies. The changes will take less than 5 minutes to complete and can make the world of difference to your Blogger template.

How to Delete, Remove, Get Rid of the Image Border in Blogger Posts
The following instructions will remove the little border around the images in your Blogger posts.

Login into Blogger if not already logged in
From the Dashboard navigate to your blog. Go to Design > Edit HTML by clicking on the Design tab and then choosing the Edit HTML link
Back up your existing Blogger template by clicking on the Download Full Template button
Find the following code in your Blogger template (no need to check the Expand Widgets Template box as we are only working with the CSS Style Sheet). Note: the code in Blogger templates varies but this is the code you will find on a Blogger Minima template and most other default Blogger templates.

.post img {
padding:4px;
border:1px solid $bordercolor;
}

If you do not have this code look for the following:

img{
padding: 4px;
border:1px solid $bordercolor;
}
There are two ways to get rid of the unwanted border image code. You can either:
- Remove the following line:
  
  border:1px solid $bordercolor;
  
  or
- Change it to the following
  
  border:0px;
Click on the Save Template button
Click View Blog to admire your post images minus any image border.

How to Change the Color of the Image Border Around Posts in a Blogger Template
The following instructions will show you how to change the color of the border which appears around images in your Blogger posts

Follow Steps 1 to 4 as per removing the image border from Blogger posts.
There are several methods to change the color of the image border but the easiest is to
- Change the following line:
  
  border:1px solid $bordercolor;
  
  to
  
  border:1px solid #6698FF;
  
  The above change will make the border line color sky blue. To change the color (in red) to your own color choice replace with the hex color code for your chosen color
Click the Save Template button to save your changes
Click on View Blog to admire the new color around the images in your Blogger posts

Tips and Troubleshooting

To change the image border line style from a solid line to a dotted line change the word solid to dotted eg

border:1px dotted $bordercolor;
To change the image border line style from a solid line to a dashed line change the word solid to dashed eg

border:1px dashed $bordercolor;
To increase the width of the image border change the size from 1px to 2px or 3px eg

border:3px solid $bordercolor;
To Remove The Image Border Around Only One Image paste the following into your image code in your Blogger post:

style="border:none"

eg
<img style="cursor:pointer; cursor:hand;width: 126px; height: 22px;" src="http://3.bp.blogspot.com/_vLeiVavkV_M/SrRp2wb1I_I/AAAAAAAAAAA/XXXXXXXXX/s200/download-now.png" border="0" style="border:none" alt=""id="BLOGGER_PHOTO_ID_XXXXXXXXXXXX" />

In this Blogger tutorial you have learned how to remove, delete and get rid of the line border which appears around images in your Blogger posts (Blogspot posts). You have also learned how to change the line color of the border image to your own chosen hex color. In addition I have shown you how to change the line style from solid to dotted or dashed and to remove the border around a single image. As always any problems with making these changes please let me know. Good luck!

Related Articles
List of How Blog Works Tutorials for Blogger Blogs
How to Remove the Image Border in Blogger Simple Template

Read Full Post ...

Thursday, September 01, 2011

Choose Your Own Blogger Post Date

In this tutorial I will show you how to set a different date from the actual date when posting to your Blogger Blogspot blog and discuss some of the benefits and uses of setting a different date.

Benefits of Setting a Different Date
Blogger permits a Blogger webmaster to set any publication date for a post they choose. This flexibility means that when you publish your entry it can be published retrospectively, in the here and now or for a future date. There are a variety of reasons for setting a particular publishing date for a post:

Set a Retrospective Publication Date
Some examples of situations where you may find it useful to set a post to a retrospective date are:

In order to keep continuity with a sequence of articles. You might use this feature if you forget to post an article in a sequence or decide afterwards to add an extra article to the sequence.

Another application for the retrospective date feature is to create a page such as an About page and attribute a specific date to it. I have gone back and written an About page on several of my blogs long after I have set them up. It is possible to go back several years if you wish. I would recommend setting the date of your About page to prior to your first post so that it appears at the beginning of your feed.

Bear in mind when posting to a retrospective date that the post will still appear in your recent posts feed even though you set a date in the past. While this can be annoying at times it is not much of a problem unless you rarely post to your blog.

Set a Future Publication Date
It is very handy to set a future publication date for your blog entries. One obvious time is when you go on vacation and want to stagger the publication of posts you have already written. Blogger allows you to set up your posts to be published on a specified date and time simply by setting a future date and time.

If you write a lot of articles about a particular theme it can be very useful to publish them in a set sequence. Blogger will allow you to set a future date for each article so that they can be published in the sequence you have chosen. For instance you might have written 7 articles on a theme and wish to publish them every 2 days over two weeks. Blogger will allow you to choose a future date for each of the articles and schedule them for publication on that user defined date and time.

How to Set a User Defined Publication Date

1. Create a post for your Blogger blog as usual

2. Click on the Post Options link found at the bottom left corner of the Compose box and directly above the Publish Post button

3. Set the specified date and time you wish your post to be published on

4. Click on the Publish Post button

If you have set a retrospective date your post will be published immediately and you will be able to view it in your blog archives.

If you set a future date your post will be scheduled for publication. Click on the link to Edit Posts and view your post in the list. It should be at the top of the list. Notice that it will marked "scheduled" in red. When the exact date and time set is arrived at Blogger will publish your post automatically.

In this tutorial I have discussed reasons why you might choose to set your own user defined post date for your Blogger posts. I have also shown you how to go about setting a different post date through the Post Options feature in Blogger.

Read Full Post ...

How to Add a Subtitle to Blogger Posts

This Blogger tutorial shows you how to easily and quickly add a subtitle to your Blogger posts (Blogspot posts) so that both search engines and readers will have more information about your post.

I also discuss the benefits of adding subtitles to Blogger articles. This is an easy tweak to your Blogger blog that anyone can carry out in a couple of minutes.

Benefits of Using Subtitles in Posts
Adding a subtitle which appears below the title of your post can be both eye catching and informative. For instance a titling schema for this post could be:

Title: Add a Subtitle to a Blogger Blog

Subtitle: Make Your Posts More Search Engine Friendly and User Friendly

If you craft your titles and subtitles carefully you will encourage more targeted readers of your blog as they will be able to see at a glance what your post is about rather than reading the whole article. Your traffic therefore might be slightly less but they will be far more targeted to the content of your site resulting in a lower bounce rate.

If the subtitle you choose for your Blogger post is keyword rich then you are also improving your chances of gaining a higher position in search engine result pages because search engines give added weight to headings and to text early on in an article. By adding a subtitle to a Blogger post you have a SEO tool which if used effectively could result in more visitors finding your site because of higher keyword density.

You can of course add a subtitle manually to each post and format it everytime. The advantage of this method over doing it manually though is that all the formatting is in the stylesheet section of your template so you only have to change the colour scheme and font variables in one location and Blogger will look after the rest. Any change will be reflected in each and every post that has the subtitle <div> tags.

How to Add a Subtitle to Blogger Posts
This tutorial guides you through the steps to take to add a subtitle to your Blogger blog. The trick requires only takes a few short minutes and requires only a small snippet of code to be added to your template. Provided the instructions are followed anyone can do this including beginners and new bloggers. Interestingly it is not widely known or written about in technical blogs that a subtitle can be added to your Blogger Blogspot blog posts yet the advantages are considerable.

1. Log in to Blogger and navigate to Design > Edit HTML

2. Find the </b:skin> tag in your template. If you are have difficulty finding it use CTRL + F to bring up the Blogger toolbar at the bottom of your blog and enter the tag </b:skin> into the search box on the toolbar

3. Copy and paste the code below into your template making sure that it appears before the </b:skin> closing tag.

.subtitle{ font-family:Trebuchet MS',Verdana,Arial,Sans-serif; font-size:15px; color: #ca1717; line-height:20px; }

This code inserts a subtitle in red. You will need to change this color to match your template. See later in this post for information on how to add styling or change the color of the subtitle. If you wish to use a known variable as shown in the above image you can. color: $dateheadercolor; could be used for example provided this variable had already been declared in the variables section of the template.

4. Save Template

5. Go to the post you wish to add a subtitle to by clicking on the Posting tab and then the Edit Posts link.

6. Copy and paste the following code into your post ahead of any other text.

<div class="subtitle">Subtitle Text. Please Substitute for your own text</div>

7. Substitute your own text between the <div> tags

8. Navigate to Settings > Formatting and under the last option Post Template enter the following into the box:

<div class="subtitle"></div>

This will mean that every time you create a post you will have the tags appear automatically. All you need do is place the text of your subtitle between the tags. If you don't want to use a subtitle for a particular post just delete the tags.

9. Save Changes to Post and click on View Blog to admire your new subtitle.

Customizing the CSS Styling of a Blogger Subtitle
It is easy to customize your subtitle for a different font type, color and size. Just change the code you added before the </b:skin> tag. If you want a specific color for instance you could change the color I have chosen for another color, increase the font size, and change the font face to Times Roman for instance. Thus your code would become something like this:

.subtitle{ font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; color:#ff6600; line-height:20px;

This Blogger tutorial has shown you how to add a subtitle to your Blogger posts (Blogspot posts) quickly and easily. I have discussed the benefits of inserting a subtitle feature on a Blogger blog including how this might assist search engines to correctly index your blog articles. I have also shown you how to customize your subtitle to your own individual requirements using CSS styling

Related Posts
List of How Blog Works Tutorials for Blogger Blogs

Read Full Post ...

Wednesday, August 31, 2011

Add Simple Image Slider to Blogger

Today's tutorial will teach you how to add a very simple image slider to the sidebar or content area of your Blogger Blogspot blog. The image slider will enable you to show off your images to readers and makes a nice addition to a personal blog. Each scrolled image is linked to the related post so that readers can find the posts they are interested in very easily. When the reader hovers over the image the slider stops and resumes again when the mouse is removed.

This slider is so simple you will be able to have it up and running in about 5 minutes. No change to the template is required making it a breeze to install. Even if you are very new to Blogger and a beginner I will show you just how easy it is to add an image slider to your Blogger blog.

How To Add a Very Simple Image Slider to a Blogger Sidebar
(note this code will scroll the image from bottom to top)

1. Login to Blogger if not already logged in

2. Navigate to Layout > Page Elements

3. Click on Add a Gadget in Blogger sidebar

4. Select the HTML/Javascript widget from the list of available gadgets

5. Paste the following code into the content box of the gadget

<br  /><!-- HTML codes by howblogworks.blogspot.com --><br  /><marquee behavior="scroll" direction="up" scrollamount="5"  onmouseover="this.stop();" onmouseout="this.start();"><a href="url  of blog"><img alt="description of image" width="160" src="url of  image" height="110" /></a><p>Image title</p><a  href="url of blog"><img alt="description of image" width="160"  src="url of image" height="110" /></a><p>Image  title</p><a href="url of blog"><img alt="description of  image" width="160" src="url of image" height="110"  /></a><p>Image title</p><a href="url of  blog"><img alt="description of image" width="160" src="url of  image" height="110" /></a><p>Image title</p><br  /></marquee><br />

6. Add a title to the widget if you wish

7. Substitute the url of your blog posts, the description of your image, the url of the image, and the title of the image for each image you wish to display. For example:

<br  /><!-- HTML codes by howblogworks.blogspot.com --><br  /><marquee behavior="scroll" direction="up" scrollamount="5"  onmouseover="this.stop();" onmouseout="this.start();"><a  href="http://best-free-blogger-blogspot-"><img alt="Blue Magz -  Best Free Blogger Blogspot Templates" width="160"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji0C2xuT-pckFcEhmLSZoOZ_MrUPaHNV9ePMie6mQ7vu-uji0lLuHqbeLJ07k81WkF4HH6z6EFq2WVJpxbR_nekzmMaanxuij45HOlJA3QQSjyyriiYFDXxYy-DZTijU2ABequgiCyEP0/s320/blue-magz_blogger-template.jpg"  height="110" /></a><p>Blue  Magz</p></marquee>

To find the URL of your blog post go to the individual post page and copy the url from the address bar in your browser.

To find the URL of the your image. Upload your image to a blogger post and copy the address enclosed in src=" " tags.

8. Save the gadget

9. Use the drag and drop feature to position the new widget in the sidebar

10. Click on save to save your changes

11. View your new widget in the sidebar of your blog

Tips and Troubleshooting

To change direction of the slider
Please note that this code will scroll the image from bottom to top. If you would like it to scroll in the reverse direction all you need do is change the direction in the code from "up" to "down". Or alternatively you can scroll from left to right by setting "right" and right to left by setting "left"
To increase the size of the images
To increase or decrease the size of the image displayed simply adjust the width and height parameters to suit your needs
To add more images
To add more images to the slider add the following to the code before </marquee>

<br /><br /><a href="http://"><img height="110" alt="description of image" src="" width="160" /></a> <p>Image title</p>
To adjust scroll speed
Scroll speed is set to 5 by default but any number can be set between 1 and 20 with "1" being the slowest and "20" being very fast indeed.

In today's tutorial I have shown you how to add a very simple image slider to your Blogger Blogspot blog to show off the images on your blog. There are a number of other image and content sliders and image slide carousels that can be added to Blogger and I will be writing about some of these in my upcoming posts.

Related Articles
List of How Blog Works Tutorials for Blogger Blogs

Read Full Post ...

Tuesday, August 30, 2011

Add Printer Button or Link to Blogger Blogspot

Today's article will show you how to add a print button or printer link to your Blogger Blogspot blog. The facility to print a hard copy of a post may be important to some visitors especially if you are like me and publish lengthy posts. Adding a printer button or link will add to your blog's functionality and user friendliness.

The reason I am writing this article is in response to a reader who asked me how to print out posts without the sidebar showing up. All the suggested buttons and links print out the post only and not the sidebar, header or footer.

This tutorial involves changing the template code but is not difficult as long as you follow these step by step instructions.

How to Add a Custom Print Button to Your Blogger Blogspot Blog
The following instructions will place a printer button on each individual page of your blog below the post. Only the blog article itself will be printed along with any comments. The sidebar will not be printed.

Example of the printer button to be added:

1. Log in to Blogger if not already logged in

2. Navigate to Layout > Edit HTML

3. Back up your template by downloading full template to your computer

4. Check Expand Widgets Template

5. Bring up the search toolbar by using CTRL + F

6. Find this line by typing it into the search box:

<p><data:post.body/></p>

7. Now replace that line with the following code block:

 <span class='noprint'><p><data:post.body/></p></span> <b:if cond='data:blog.pageType == "item"'> <a href='javascript:window.print()'> <img src='http://i1020.photobucket.com/albums/af326/bookwise77/printer-button.gif'/></a></b:if> 

8. Click on Save Template to save changes

9. Click View Blog to see your button in action

Note: If you want to change the printer icon to your own icon upload your image to a photo storage service like Photobucket and note the URL address of the icon. Now substitute the URL address of the existing image for your image by changing the line beginning with <img src='
Change printer icon to this alternative printer icon

So to change the printer image to another printer image the code would look like:

 <span class='noprint'><p><data:post.body/></p></span> <b:if cond='data:blog.pageType == "item"'> <a href='javascript:window.print()'><img src='http://i1020.photobucket.com/albums/af326/bookwise77/printer-button-2.gif'/></a></b:if> 

How to Add a Printer Link to a Blogger Blogspot Blog
You may not want a button and prefer to add a printer link instead. To do this you would follow steps 1 to 6 and then insert the following code instead of the code contained in step 7

 <p><span class='noprint'><data:post.body/></p></span> <b:if cond='data:blog.pageType == "item"'> <a href='javascript:window.print()'>Print this post</a> </b:if> 

Save the changes to your template and then navigate to an individual post to see your link at the bottom of the post.

How To Add a Combination of Printer Button and Link
If you would like to display a printer button along with a link follow steps 1 to 6 and then insert the following code instead of the code contained in step 7

 <span class='noprint'><p><data:post.body/></p></span> <b:if cond='data:blog.pageType == "item"'> <span style='background: url(http://i1020.photobucket.com/albums/af326/bookwise77/printer-button.gif) left no-repeat; padding-left: 28px;'> <a href='javascript:window.print()'>Print this post</a></span> </b:if> 

In this article I have shown you how to add a print button, a print link and a combined button and link to the bottom of your Blogger Blogspot posts. Enjoy!

Related Articles
List of How Blog Works Tutorials for Blogger Blogs

Read Full Post ...

Hide Remove Navbar from a Blogger Blog

The more professional you want your site to look the more you are likely to want to remove the navbar from showing above the header of your Blogger Blogspot blog. Removing or actually hiding the navbar is very easy to do as it only requires a small tweak to your template. This tutorial is suitable for bloggers at all levels but is written with new bloggers and the beginner blogger in mind and provides step by step instructions to guide you through the process of hiding the navbar from your Blogger blog.

How Useful is the Navbar of a Blogger Blog?
Blogger provides the facility to search your blog by entering keywords or a search phrase into the Search Blog box. This is a useful feature and if you remove the Blogger navbar you will lose the search facility from your blog. If you are using a custom template with a search box already built in this won't be a problem but if you are using one of the Blogger templates deleting the navbar will leave your blog without a search function. Another useful feature of the navbar is the follow button which encourages bloggers to start following your blog.

The random blog feature is not particularly useful unless you have a lot of time on your hands and just feel like a browse. For most serious bloggers looking to create a professional look and feel to their blog the navbar can be a distraction. And let's face it you've worked hard enough getting the traffic to your site right? without encouraging them to leave it too quickly.

The other main feature of the navbar is the ability to navigate back to your layout menu or posts quickly no matter where you are in your blog when signed in. Personally I like this feature and use it a lot. Its particularly good if you are on a page other than your homepage and want to quickly go to another of your blogs as you can get there in 2 clicks. The same goes if you want to visit some other area of your Google account such as Google Analytics or Google Webmaster Tools. You can get there in 2 clicks too when the navbar is enabled.

Blogger have now created another reason to think twice before you remove the Blogger Navbar as they have recently added a Share button so that readers can quickly add your blog to their Twitter, Facebook and Google Reader accounts. The facility to Email your posts is also available when using the Blogger Share button from an individual post page.

To navigate with the navbar disabled you simply have to double click the back button in your browser to navigate away from the home page of your blog. If you are in another part of your blog then it can be annoying not to have the navbar functionality. The way I have gotten around it is to usually disable the navbar and click on blogger.com in the google search box on the toolbar of my browser. Provided I am signed in to Blogger this will take me straight to the dashboard.

Overall my view is that what you lose on convenience you gain on professionalism. Losing the navbar is a sacrifice but it is a small price to pay for a much improved look to your blog.

How to Get Rid of the Navbar on your Blogger Blog

1. Login to Blogger and navigate to Layout > Edit HTML> Expand Widget Templates.

2. Find the Template Credit Section

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

3. Insert the following code directly above this code(/* Variable definitions). Select the code and right click to copy to the clipboard of your computer. Right click to paste into your template:

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

or this code, which ever would you like, both code works fine...

#navbar {
height: 0px;
visibility: hidden;
display: none;
}

4. Click on the Save Template button

5. Click on View Blog to view you blog without the navbar

Troubleshooting
If you later decide that you are not happy with the missing navbar all you need do to reinstate it is to remove the code you inserted. This works as the code you inserted actually only masks the navbar rather than deletes it.

In this tutorial you have learned about some of the advantages and disadvantages of the Blogger navbar and how to hide, disable, remove or delete the navbar in order to promote a more professional looking blog.

Related Articles
List of How Blog Works Blogger Tutorials

Read Full Post ...

Add a Horizontal Links Menu to Blogger

In this Blogger tutorial you will learn how to place a horizontal row of menu items above your first post in your Blogger blog (Blogspot blog). This process requires adding both a small amount of code to your Blogger template and a HTML/Javascript widget to your layout. This tutorial is suitable for Blogger (Blogspot) webmasters of all abilities.

Navigating a website using a horizontal menu is a traditional way to get around. On this blog for example you can see that I have tweaked Blogger to create a row of horizontal text links for easier navigation of popular pages and labels. Follow the step by step instructions below and you will be able to add a customized menu of horizontal links to your Blogspot blog as seen here.

If you are using a default template you can add a menu by using the Blogger pages feature. This tutorial shows you how to manually add a top menu and add links to it.

Steps to Add a Horizontal Links Menu Above Blog Posts

1. In Blogger navigate to Design > Edit HTML

2. Locate the header style sheet section which will usually be notated as

/* Blog Header */

If you can't find this line then locate the following area of your stylesheet using CTRL + F and place before these lines

]]></b:skin>
</head>

3. Copy and paste the following CSS code into your template under the header section taking care not to overwrite any existing code and to include the end bracket. It is probably best to paste into the bottom of the header style sheet section so that it is easier to change the code if necessary.

/* Blog Header */ #newnavbar ul li{ font-size:100%; list-style-type: none; display:inline; padding:0px; margin:10px; border:0px solid; } #newnavbar li a{ color:#335577; } #newnavbar li a:visited { color: #990066; } #newnavbar li a:hover { color: #99FFFF; background: #CCFFFF; }

4. Click on Save Template

Note: You will need to change the colors to suit the color scheme of your blog. Change every instance of color and the background color to customize to your own requirements

5. Navigate to Design > Page Elements

6. Click on Add a Gadget in the Blog Posts area. If you don't have this option already set on your template you can enable it by locating the following code and setting showaddelement to yes.

<div id='main-wrapper'> <b:section class="'main'" id="'main'" showaddelement="'yes'>

7. Select HTML/Javascript from the menu

8. Copy and Paste the following code into the Content box. There is no need to add a title. You can alter the code to suit your own needs depending on the links required.

<div id='newnavbar'> <ul> <a href="Home Page URL">Home</a></li> <li><a href="URL of Your Blogger Profile Page">About Me</a></li> <li><a href="URL of Any Label You Choose">Label of Your Choice</a></li> <li><a href="URL of Any Label You Choose">Label of Your Choice</a></li> <li><a href="URL of Any Label You Choose">Label of Your Choice</a></li> </ul></div>

To add a link to a label, as I did on this site, in this case Blogger Tutorials, you would enter the following:

<a href="http://howblogworks.blogspot.com/search/label/Blogger%20Tutorials">Blogger Tutorials</a>

9. Your script should be above your posts and any advertising or banners. If it is not drag it to the top position

10. Click on Save

11. Click on View Blog to see your new menu in action

Steps to Add a Horizontal Link Menu to Header

If you prefer you can add your horizontal link menu to your header instead of directly above your first post. In this case follow the steps below:

1. Follow steps 1 to 4 as for menu above first post

2. Navigate to Design > Edit HTML

3. No need to check Expand Widget Templates

4. Locate the beginning of the body section which will be tagged as <body>

5. Find the line: <b:section class='header' id='header' maxwidgets='1'>

6. Change maxwidgets from 1 to 3.

7. Click on Save Template

8. Navigate to Design > Page Elements

9. Click on Add a Gadget in the Header area.

10.Select HTML/Javascript from the menu

11.Copy and Paste the following code into the Content box. There is no need to add a title. You can alter the code to suit your own needs depending on the links required.

<div id='newnavbar'> <ul> <a href="Home Page URL">Home</a></li> <li><a href="URL of Your Blogger Profile Page">About Me</a></li> <li><a href="URL of Any Label You Choose">Label of Your Choice</a></li> <li><a href="URL of Any Label You Choose">Label of Your Choice</a></li> <li><a href="URL of Any Label You Choose">Label of Your Choice</a></li> </ul></div>

To add a link to a label, as I did on this site, in this case Blogger Tutorials, you would enter the following:

<a href="http://howblogworks.blogspot.com/search/label/Blogger%20Tutorials">Blogger Tutorials</a>

12. Click on Save Template

13. Click on View Blog to view the new horizontal menu in your header

Tips and Troubleshooting
To add this horizontal navigation menu to the area below the header do the following:

Login in to Blogger
Navigate to Design > Edit HTML
Find the following lines of code:

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
Change showaddelement to yes

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>
To left align the menu change text-align:center to text-align:left
Paste the code in step 3 of Steps to Add a Horizontal Link Menu Above First Post directly before the following:

]]></b:skin>
</head>
Save Template
Navigate to Design > Page Elements
Click on Add a Gadget in the new area enabled below header
Select HTML/Javascript from the menu
Copy and paste the code in step 8 of Steps to Add a Horizontal Link Menu Above First Post into the content area of the gadget and change links to your own requirements
Save gadget and select View Blog to see your menu in action

This Blogger tutorial has shown you how to add a horizontal links navigation menu to a Blogger blog (Blogspot blog) either in the header itself, directly above the very first post or in the area between the header and first post. In adding a navigation menu to your blog you improve the user friendliness of your blog by helping your visitors find information and posts more readily. Any questions please don't hesitate to ask.

Related Posts
List of How Blog Works Tutorials for Blogger Blogs

Read Full Post ...

Add a Welcome Message to Blogger Blog

Would you like to welcome visitors to your Blogger Blogspot blog with a simple welcome message? In this tutorial I will show you how to add a short welcome message to your Blogger sidebar using the text gadget. This tutorial is aimed at beginner bloggers and those new to Blogger.

How to Add a Welcome Message to the Blogger Sidebar

1. Login to Blogger if you are not already signed in

2. From the Dashboard select the link to your blog. If you have more than one blog you will need to choose from a list of your blogs displayed on the dashboard

3. Navigate to the Layout > Page Elements page by clicking on the Layout tab and then the Page Elements link.

4. Click on Add a Gadget in the sidebar of your blog

5. Choose the Text gadget from the list.

6. Paste the following into the content box of the gadget:

To Your Blog Name. Add your own welcome message here. Write something that will tell readers about your blog

7. Bold Your Blog Name by highlighting the Your Blog Name text and selecting b from the formatting options

8. Type the word Welcome into the Title box

9. Click on the Save button to save the gadget

10. Click on the Save button in your template to save your changes

11. Click on View Blog and admire your new welcome message which will appear at the top of your blog's sidebar

12. Now you have an idea of what it looks like click on the back button of your browser to return you to the Page Elements screen

To Edit the Content of the Text Gadget
Select Edit by clicking on the edit link of the gadget in the sidebar and changing the contents or title and saving the changes

To Remove the Gadget
Select Edit by clicking on the edit link and choosing the remove button

In this tutorial for newbies and beginner bloggers I have outlined the steps necessary to add a text gadget to the sidebar of your Blogger Blogspot blog. By way of example I have shown you how to add a welcome message to your blog sidebar

Read Full Post ...

Add Twitter Badge Button to Blogger

In this tutorial you will learn how to add a Twitter badge aka Twitter button to your Blogger Blogspot blog to link your blog to your Twitter account. By adding a Twitter button you will give your readers the option to follow your blog on Twitter.

Display a Twitter Icon in the Sidebar of Your Blogger Blog
If you look at the top of the right sidebar you will notice that I have placed a Twitter icon with a link to my Twitter profile. Adding the Twitter badge and link is not difficult and requires no change to the template. We will simply be adding a gadget to the sidebar. I have assumed no knowledge of Blogger and widgets so that absolute Blogger beginners can follow this tutorial.

1. Login to Blogger if not already logged in

2. Navigate to Layout > Page Elements

3. Click on Add a Gadget in the sidebar or other location eg the footer if you prefer

4. Select HTML/Javascript from the list of available gadgets

5. Paste the following code into the content box depending on your choice of button:

<a href="http://twitter.com/Your Profile"><img width="133" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaycIs3z54qnAP9GZB3jeo_Jlydx-W1rGKQOuve3N-9plgSlzWuhAQP_6_3RE15BCoXNQcEl-BSVOJz7ow2BaA1bUsUo4ViDoGNLgdsgon2hGHjN8ce1tqaUDG3b29IrFfKa7NXVbwGPk/s200/twitter-bar.gif" height="34" title="Follow Your Blog Name on Twitter"/></a><br/>

<a href="http://twitter.com/Your Profile"><img width="199" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL9-zCQeA51tU5wsVWIUx8t-jpCmQZ3aKPvTvEmVzbPl5FjIP4IeaIGyxzn0HCbFVVMKEJYVmJIhyUpl-IbDwpYYWRO1h4Ug9dxFNzvYsn_2POIjXj_scHwOQ3toKy3uGSryd2IbxFQNk/s200/twitter-35a.png" height="42" title="Follow Your Blog Name on Twitter"/></a><br/>

<a href="http://twitter.com/Your Profile"><img width="191" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi66o2HjiJVxOLELDxSDqdqCDPCDfiHDnm_z6oMm-IKiBzUJL5LBh-Z8QBuNBpmsy8B416rfQwcjPdN0eR4UGUT8nLtd8mavuvGbX9XnVQJtJY6iZVmAm76DvjCWWboxNXocTkxc2DlL9M/s200/twitter-32a.png" height="58" title="Follow Your Blog Name on Twitter"/></a><br/>

6. Change Your Profile to your own Twitter profile. For example:

http://twitter.com/YourProfile

to

http://twitter.com/YourName

7. Substitute your blog name in the title for your own blog name

title="Follow Your Blog Name on Twitter"

to

title="Follow How Blog Works on Twitter"

8. Click on Save.

9. Move your new Twitter widget to the desired location on your sidebar using drap and drop

10. Click on View Blog to admire your new Twitter button

In this tutorial you have learned how to add a Twitter button, badge, icon to your Blogger Blogspot blog so that readers can sign up to follow you on Twitter. I have supplied you with a choice of three different buttons to get you started. For more Twitter buttons try these free Twitter vector icons or these free Twitter graphics or just type Twitter icons into your favorite search engine

Related Articles
List of How Blog Works Tutorials for Blogger Blogs
Add Twitter Followers Counter to Blogger

Read Full Post ...

How Blog Works (www.howblogworks.com)

Sunday, September 04, 2011

Add a Post Divider Between Blogger Posts

Friday, September 02, 2011

Add 3 Column or 4 Column Footer to Blogger

Add Email This Post Link to Blogger

Blogger Post Image Borders Change or Remove

Thursday, September 01, 2011

Choose Your Own Blogger Post Date

How to Add a Subtitle to Blogger Posts

Wednesday, August 31, 2011

Add Simple Image Slider to Blogger

Tuesday, August 30, 2011

Add Printer Button or Link to Blogger Blogspot

Hide Remove Navbar from a Blogger Blog

Add a Horizontal Links Menu to Blogger

Add a Welcome Message to Blogger Blog

Add Twitter Badge Button to Blogger

Best Tutorial Links

Labels

Support us by Donation

Blog Archive

Followers