BlogKnowHow apologies for the technical problems with the site. We are working on it and hope to resolve the issue as soon as possible.

Friday, October 16, 2009

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.

How to add a post divider between posts in Blogger
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/AVvXsEgB0icfjkH1ytPfsOuVta9fGy8ruK8792q5ww3WMLLVAOgY7vW7kj7faHUlnBQLgltgZAaj_ccKhYXwCHEYqJhyphenhyphensEzPSv7jEsQ7bjYx50WUZGs9xIxDV8oOLo3oDBV0QWZn-eL6tSeEvcg/s400/ribbon.gif


URL address:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_hejEcgAo5naB6wW-2gGD4Ex9GtJi1T4PaXHO7GUbhMlHhGxxfPz7pq1aCOJITjf2JVMSF3lC4xXUiumbyiutIrJcqisQ8zzFtFSeqEyIwesa8Mh-aFnE0GayjNfdv64f8mliZ_TYvqw/s400/bar1.gif


URL address:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPVmOE9V0fNx4o70tklaOa8exaVHZ16HeHInLJKY29b1Gpl4H1qHDawqKw_5QPyEcvgGkacySiW4jOWDCtQl6jiGv93GsZ1zchkSGdQMkdKKEpEUJlkWyDJ0Ef1qmRYYlYO394119v2cA/s400/barbsmpl.jpg


URL address:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeYegENYuO7JQ1dH4MZkTmPxbjih_AEOmxG6BEbxhE-0AV5NzVv2HBCZj8ZHsieNQQJAq7MoLw5QzrR6w9J7_4WyB3hOj7VpmsLJlYviqTCWwLnp_9phx7cV599e3TS7H9Eg1L9TB2BGI/s400/bar47.gif


How to Add a Divider Between Posts in Blogger

  1. Login to Blogger if not already logged in

  2. From the Dashboard navigate to Layout > Edit HTML

  3. Back up your Blogger template as a precaution by downloading it to your computer

  4. 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;
    }

  5. 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/AVvXsEgB0icfjkH1ytPfsOuVta9fGy8ruK8792q5ww3WMLLVAOgY7vW7kj7faHUlnBQLgltgZAaj_ccKhYXwCHEYqJhyphenhyphensEzPSv7jEsQ7bjYx50WUZGs9xIxDV8oOLo3oDBV0QWZn-eL6tSeEvcg/s400/ribbon.gif);
    background-repeat: no-repeat;
    background-position: bottom center;
    margin:.5em 0 1.5em;
    padding-bottom:1.5em;

  6. If any lines are duplicated remove them.

  7. Remove any line beginning with: border-bottom: eg

    border-bottom:1px dotted $bordercolor;

  8. 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/AVvXsEgB0icfjkH1ytPfsOuVta9fGy8ruK8792q5ww3WMLLVAOgY7vW7kj7faHUlnBQLgltgZAaj_ccKhYXwCHEYqJhyphenhyphensEzPSv7jEsQ7bjYx50WUZGs9xIxDV8oOLo3oDBV0QWZn-eL6tSeEvcg/s400/ribbon.gif);
    background-repeat: no-repeat;
    background-position: bottom center;
    margin:.5em 0 1.5em;
    padding-bottom:1.5em;
    }

  9. Click on Save Template to save your changes

  10. 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 Blog Know How Tutorials for Blogger Blogs
How to Add, Delete or Remove Blogger Image Borders
How to Align and Justify Posts in Blogger

Sunday, October 11, 2009

Add a Twitter Profile Widget to Blogger

If you use Twitter then you are going to want to let your Blogger readers know about it. One effective way to show your Twitter updates on Blogger is to add a Twitter profile widget to the sidebar of your blog. This widget is quite a bit more fancy than the current Twitter Updates Widget available through Blogger which I showed you how to insert into your blog in my recent article Add a Twitter Updates Widget to Blogger. On the minus side the widget may slow your blog down so test it out first if fast loading time is crucial to you.

Twitter Profile Widget - how to insert into Blogger
How to Insert a Twitter Profile Widget into Blogger

  1. Go to Twitter Widgets and sign in


  2. Choose Profile Widget and you will be taken to a default profile widget page where you can customize your Twitter widget according to your needs.

  3. Choose Settings and make sure that your username is correct

  4. Choose Appearance and make any custom color changes you need to so that the widget will blend into your blog. At the very least you will need to change the shell background and the links colors to suit your blog

  5. Choose Dimensions and change the sizing of the widget if it is too large to fit into your Blogger sidebar. The default setting is 250x300

  6. Click on Test Your Settings to ensure your new widget looks the way you want it to

  7. Click the Finish and Grab Code button

  8. Copy the code by right click the mouse in the code box and choosing Select All. Right click again and choose Copy

  9. Sign in to Blogger. From the Dashboard go to Layout | Page Elements

  10. In the sidebar choose Add a Gadget and then a HTML/Javascript widget

  11. Paste the Twitter code into the gadget content box and click Save

  12. Your Twitter Profile Widget will now be showing in your Blogger sidebar so click on View Blog to admire it

In this Blogger tutorial I have showed you how to add a Twitter Profile Widget to the sidebar of your Blogger blog (Blogspot blog). This Twitter widget will encourage your blog readers to visit your Twitter Profile and with luck you may get some new Twitter followers out of it.

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
Add a Twitter Updates Widget to Blogger
Add Twitter Button or Twitter Badge to Blogger
Add Twitter Followers Counter to Blogger
Add a Social Bookmarking Button to Blogger
Add Social Bookmark Buttons to Blogger
Best Free Social Bookmark Icon Sets for Blogger

Saturday, October 10, 2009

Add a Simple Drop Down Menu to Blogger

In today's Blogger tutorial I show you how to add a simple drop down menu widget sometimes called a select box to the sidebar of your Blogger blog (Blogspot blog). If you want to add lots of links to your Blogger blog but are worried about the amount of space this will take up on your blog this tutorial is for you. A drop down widget is a neat solution to the cluttered sidebar problem as it is both space saving and easy to install. The convenience of a drop down menu widget can be seen on many blogs where it is used for lists like a long Blogroll, Categories list, Labels list or a Recommended Posts list.

How to Add a Drop Down Menu Widget to Blogger
Adding a drop down menu to Blogger is well within the capabilities of even beginner bloggers. Most of the work is in cutting and pasting the links which is not difficult for anyone with basic computer skills. So let's get started but first here is a working drop down menu list with links to various posts in my blog:




  1. Log in to Blogger if not already logged in

  2. Navigate from the Dashboard to Layout > Page Elements.

  3. Click on Add a Gadget in the sidebar or other location if you wish

  4. Select a HTML/JavaScript gadget from the list of gadgets

  5. Paste the following code into the content box of the widget:

    <form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
    size=1 name=menu>
    <option>- Your Menu Title -</option>

    <!-- Change the following links to your own -->

    <option value="http://URL of link1">Link 1</option>
    <option value="http://URL of link2">Link 2</option>
    <option value="http://URL of link3">Link 3</option>
    <option value="http://URL of link4">Link 4</option>
    <option value="http://URL of link5">Link 5</option>

    <option value="http://blogknowhow.blogspot.com">Blog Know How</option>
    </select></form>

  6. Replace _blank as follows:

    • To have a new window open leave the same

    • To have the new page appear in the same window replace _self


  7. Replace - Your Menu Title - with a title of your own

  8. For each instance of the option values highlighted in red substitute your own links and link names. For example:

    <option value="http://blogknowhow.blogspot.com">Blog Know How</option>

  9. Click Save

  10. Use drag and drop to position the drop down menu widget in the location you want it within your sidebar and save any changes

  11. Click View Blog to admire the new drop down menu in the sidebar of your blog

In today's Blogger tutorial I have provided you with instructions to create and insert a simple drop down menu widget in the sidebar of your Blogger blog (Blogspot blog). This widget is ideal for reducing clutter on your Blogger sidebar and excellent for displaying long lists of links such as labels in a convenient, neat and space saving way. A drop down menu gadget is easily installed from the Layout > Page Elements page and can be customized to your own specifications. Any problems with this Blogger tweak please let me know. Enjoy!


Related Articles
List of Blog Know How Tutorials for Blogger Blogs
Add Breadcrumb Navigation to Blogger
Add Horizontal Links Menu Navigation to Blogger