Rename Views in Blogger Dynamic Views

Before

After

Too lazy to think of a better title. To hell with SEOs. Anyways, if you find yourself in a situation where the names of Views (Classic, Flipcard, Magazine..) need to be changed to something else (or another language that Google doesn't recognise perhaps), this tutorial could come handy. That said, do note that if you've got pages in your pages bar, in which case your views would have gone into a drop-down style menu, the selected view will still be in English. Couldn't help that one unfortunately.

Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the following code --> Press enter after the last character of the last line } --> Apply to Blog.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

#views ul li a, #views .menu-heading, .ss{ font-size: 0px !important; } #views ul li:nth-child(1) a:after{ font-size: 14px !important; content: "Classic**"; } #views ul li:nth-child(2) a:after{ font-size: 14px !important; content: "Flipcard**"; } #views ul li:nth-child(3) a:after{ font-size: 14px !important; content: "Magazine**"; } #views ul li:nth-child(4) a:after{ font-size: 14px !important; content: "Mosaic**"; } #views ul li:nth-child(5) a:after{ font-size: 14px !important; content: "Sidebar**"; } #views ul li:nth-child(6) a:after{ font-size: 14px !important; content: "Snapshot**"; } #views ul li:nth-child(7) a:after{ font-size: 14px !important; content: "Timeslide**"; } .menu-heading:after{ font-size: 14px !important; content: "Views**"; }

Change lines 6, 10, 14, 18, 22, 26 and 30 in the code above accordingly. Line 34 is if you have pages links in your bar and you need to change the selected view from English to other default word.

Adding Followers Gadget in Blogger (post-GFC-retirement)

So, Google decided to retire most of Google Friend Connect's feature last year, though they have mentioned that they will continue to run the service for the 'foreseeable future'. The GFC Follower's gadget, that used to be available in the 'Add a Gadget' list of gadgets, has now been replaced with Google+ Followers gadget. For those of you who are still using GFC's Followers gadget, you can keep using it, until Google decides to pull the plug. But for new users, or for those of you who had your gadget accidentally removed, here's how you can add it back.

The Easy Way

Go to Dashboard - Layout - Add a Gadget (where you want the gadget to appear) - On your left, click on 'More Gadgets', and you should be able to find the Followers gadget there.

If you get an error that says "This gadget is experimental and is not yet available on all blogs. Check back soon", or if some other reason you can't readily add the gadget from the list of gadgets, try the method in the steps below.

The Alternative Way

Step 1:

Go to Dashboard - Layout - Add a Gadget (where you want the gadget to appear) - Look for HTML/Javascript gadget - Click on the plus (+) icon to add the gadget.

Step 2:

In the next window, just copy the URL (the address, as highlighted in the screenshot below) of the page. Once you've copied the address, you can close this window.

Step 3:

Paste this URL in a text editor (such as Notepad, MS Word, or wherever you feel comfortable editing it). Next, find for the part that says 'widgetType=HTML' in your address, and change it to 'widgetType=Followers'.

Step 4:

Copy this modified URL, and paste into your browser (preferably the browser that you were using early on, the on that is logged into your Blogger account). Hit 'Enter' on your keyboard, and voila, your Followers gadget is back.

How to Add Internal Links Within Blogger Posts

Consider the above links. Click on them. Each jump the reader to a different part of this article. This type of internal linking is common practice in website building and can be equally applied to blogs to assist with navigation.

How did I create these links? The answer is that I used simple html that anyone can learn in a few minutes. Here are the steps I used to create these links.

1. Log in to Blogger
   
2. Go to Posting > New Post or Edit Post and either create a new article or edit an existing one.
   
3. Within the article find a place where you want to add some jump links. This will be early on in the article as it will help the reader figure out what information is significant to them and how to get there quickly
   
4. Switch to the Edit HTML mode rather than compose mode so you can see the code you are inserting into your post
   
5. Create a couple of headings that will be your links to material further down in your Blogger article. Note you can also just jump to a word but for the purposes of this demonstration and clarity I am going to use headings. When creating this post I used the following headings:
   
   

   How to Create Internal Links To Sections Within the Same Blogger Post
   How to Create Internal Links To Sections Within Different Blogger Posts

6. Add links to your headings like so:
   
   

   <a href="#withinposts">How to Create Internal Links To Sections Within the Same Blogger Post</a>
   
   <a href="#withinblogger">How to Create Internal Links To Sections Within Different Blogger Posts</a>

   
   
   • The href attribute and closing </a> element is the same structure you use for other links in your blog
     
   • Each identifier is preceded by a hash mark (#). The # tells the visitor's browser to look for a section within your post
     
   • Each link identifier needs its own unique identifier and needs to be enclosed in inverted commas. Use a name that reflects the link you are creating if possible as it will make it easier to identify on a page with a lot of internal jump links.
7. Now go to the first point in your post where you want to jump the reader to. This will be the start of some new idea, section or logical split in the information.
   
8. At this point create your anchor text by first adding your heading and then enclosing your heading with this anchor structure.
   
   

   <a name="identifier">a heading</a>

   
   
   • Note the use of the name attribute at the beginning and the </a> element at the end
     
   • Each link identifier needs to be enclosed in inverted commas. Make sure to match up the correct identifier with the one created in step 6
   
   
   Using this anchoring structure our first anchor becomes:
   
   

   <a name="withinposts">How to Create Internal Links To Sections Within the Same Blogger Post</a>

   
   Substitute your own link identifier and headings
   
9. Now move on to the next point you want to link to and create the second anchor. In this example we use the same structure but change the identifier
   
   

   <a name="withinblogger">How to Create Internal Links To Sections Within Different Blogger Posts</a>

   
   Again substitute your own link identifier and headings to suit your article
   
10. Save and Publish as normal and you will see your links are live and will jump the reader to different parts of the post

How to Create Internal Links To Sections Within Different Blogger Posts
Now you know how to create links to sections within Blogger posts let's look at how to create internal links within different Blogger posts.

Most of you will be able to create a link to another post in Blogger using the posts editor. You just highlight the text you want and click on the figure eight icon and Blogger creates the link for you. Which is great most of the time.

However what if we want to direct the visitor to a particular section of a different post? When you create an internal link it will take the viewer to the top of the page but what if you want them to see something near the end of the article? Well using an internal link similar to what we did to create internal links within the post we can.

1. I create the link as usual by copying the article URL address from the browser address bar and using the post editor to add the link. The Blogger post editor uses this structure:
   
   

   <a href="URLaddress">linkname</a>

   
   So the Blogger editor would create the following link:
   
   

   <a href="http://blogknowhow.blogspot.com/2009/05/blogger-blogspot-seo-tips-and-tricks.html">Blogger SEO Tips and Tricks</a>

   
   The link would appear like this in a browser:
   
2. Now I want to direct my visitors to the section about creating breadcrumb navigation so I add a section name using the following structure:
   
   

   <a href="URLaddress#identifier">linkname</a>

   
   Thus my link would look like this in the Edit HTML section of my post editor
   
   

   <a href="http://blogknowhow.blogspot.com/2009/05/blogger-blogspot-seo-tips-and-tricks.html#breadcrumb">Blogger SEO Tips and Tricks</a>

   
   Note the link seen in a browser remains the same
   
3. If you want your link to open in a new browser window add the following to your link:
   
   

   <a href="http://blogknowhow.blogspot.com/2009/05/blogger-blogspot-seo-tips-and-tricks.html#breadcrumb" target="_blank">Blogger SEO Tips and Tricks</a>

4. Now I need to go to the post I am linking to and add the anchor. So in the post SEO Tips and Tricks I would use the following structure to link to the section about how to add breadcrumbs:
   
   

   <a name="identifier">a heading</a>

   
   So the section about breadcrumbs in the Blogger SEO Tips and Tricks article is now enclosed by the following:
   
   

   <a name="breadcrumb">Add Breadcrumb Navigation to your Blogger Blog</a>

   
   
   If you now click on the link below you will see that your browser open a new window and take you directly to the section about adding a breadcrumb to your blog.
   
   
   
5. Save your changes and publish your article as normal

In this Blogger tutorial you have learned how to add internal links to a particular section of a post from both within the same Blogger post and within a different post. By adding internal links you will help your visitors to find their away your blog more easily and access information quickly. You will also be adding to your blog's SEO by linking related posts.

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.

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.

1. Login into Blogger if not already logged in
   
2. 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
   
3. Back up your existing Blogger template by clicking on the Download Full Template button
   
4. 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;
   }

5. 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;

6. Click on the Save Template button
   
7. 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

1. Follow Steps 1 to 4 as per removing the image border from Blogger posts.
   
2. 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
3. Click the Save Template button to save your changes
   
4. 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!

Remove Image Border in Default Blogger Templates Simple and Awesome Inc

In this Blogger tutorial I show you how to remove the border around images in Blogger posts (Blogspot posts) when using one of the latest default Blogger templates Simple or Awesome Inc.

Below I explore two methods of removing or deleting image borders in the Blogger template Simple. The first method shows you how to remove the image border using Template Designer and the second method outlined describes how to remove the image border manually by changing the code.


Method 1 - Use Template Designer to Remove Image Border in Blogger

1. From the Blogger Dashboard go to Design > Template Designer
   
2. Then select Advanced > Images
   
3. Under Border Color use the drop down arrow to open the color palette
   
4. Change the setting to transparent by checking the small box on the bottom right hand side marked "transparent"
   
   
   Note: If you are using the black version of the Awesome Inc template you will need to change the Background Color to transparent too. Click on the down arrow of the color palette and select transparent.
   
   
5. Click Apply to Blog to save your changes to the template
   
6. Navigate to any post page to view images in posts without the border

Method 2 - Change Template Code to Manually Remove Image Border from the New Default Blogger Templates

1. From the Blogger Dashboard go to Design > Edit HTML
   
2. Back up your Blogger template
   
3. Find this line amongst the declared variables at the top of your template
   
   

   <Variable name="image.border.color" description="Border Color" type="color" default="transparent" value="#cccccc"/>

4. Change to the value of the border color to transparent like so
   
   

   <Variable name="image.border.color" description="Border Color" type="color" default="transparent" value="transparent"/>

5. Save your changes to the template
   
6. Navigate to any post page that has an image and see that the border around the image is no longer visible

In this Blogger tutorial (Blogspot tutorial) I have shown you how to remove or delete the border around images in Blogger posts for the newest generation of default Blogger templates Simple and Awesome Inc. I have discussed two different methods to remove the border around the images either by adjusting the settings in the Blogger Template Designer or by manually changing the code of the variable in the CSS styling section of the default Blogger template

Add a Categories Section to a Blogger Blog (Blogspot Blog)

Blogspot blogs at Blogger.com have no categories only labels. This Blogger tutorial will show you how to manually create categories in Blogger from your existing labels so that all the articles listed under a particular label will be displayed.

While this way to add categories to Blogger is not an ideal solution it will mean that you can display a logical grouping of your most popular articles under the one heading.

This article is aimed at new bloggers and beginner bloggers although it is suitable for all Blogger bloggers (Blogspot bloggers). No changes to the template are required to add these categories to your Blogger blog (Blogspot blog).

How to Create Categories from Labels in Blogger
One easy way to create a categories section in Blogger is to simply rename the title of the labels widget as categories. This solution does not work for me because on this blog I have a huge number of labels and I don't want to show this widget at the top of my sidebar.

An easy way round this problem is create a separate categories section. If you look at the sidebar of this blog you will notice that I have several major categories at the top so that a new visitor will find what they are looking for quickly under these broad headings.


To add a categories section to a Blogger blog (Blogspot blog) follow these simple steps:

1. Decide how you want to group your articles according to the labels applied and what group heading you want to give to each grouping of articles.

2. For the first category navigate to the individual page of the label you wish to use by clicking on the label in your sidebar. Copy the URL address of this page from the address bar in your browser (right click and select copy). For example the URL address of the label of Blogger Tutorials on this site is:

http://blogknowhow.blogspot.com/search/label/Blogger%20Tutorials

3. From the Blogger Dashboard go to Design > Page Elements

4. Click Add a Gadget in the sidebar and select Links List

5. In the Configure Link List dialog box that appears paste the link to your label into the New Site URL box



6. Enter the name of your label or some alternative text if you wish into the New Site Name text box.

7. Enter Categories as the title

8. Choose between sort alphabetically, reverse alphabetically or don't sort

9. Click on Add Link to add the link to your new categories list

10. Click on Save

11. For every label you wish to put into the Categories Section copy the link and add it to the Configure Links List. By the end you will end up with two or more categories in your list

12. Use the up and down arrows for each link to shuffle them around until you find the desired order



Limit the Number of Posts Displayed in the Categories Section
To put a limitation on the number of posts displayed in the new categories section you will need to adjust the URL's of each label as follows:

From:

http://yoursite.blogspot.com/search/label/CategoryName

To:

http://yoursite.blogspot.com/search/label/CategoryName?max-results=max number of posts to display

So for the category Blogger Tutorials on this site for example I would enter the following to have only 25 posts displayed:

http://blogknowhow.blogspot.com/search/label/blogger%20Tutorials?max-results=25

This Blogger tutorial has shown you how to manually add a categories section to the sidebar of your Blogger Blog (Blogspot blog) using the Link List widget.

Solution to Missing Add a Gadget Feature in Blogger

If you are experiencing problems with the Add a Gadget feature not showing up in the Layout Screen of your Blogger Blogspot blog then read on as I have found the solution to this annoying problem.

The other day I discovered to my horror I had lost the option to Add a Gadget in the layout screen of all my blogs in Blogger. Typically it couldn't have happened at a worse time as I had just planned to sit down to write some new posts. I looked in the Blogger help section for the solution but could find no reference to the problem. I eventually found the answer, after about 15 minutes, buried in the Blogger Help Group section. I thought I would therefore post a short tip for anyone out there looking for a quick answer to the loss of the Add a Gadget function from the Layout Screen.

Clear Your Browser's Cache
When the Add a Gadget feature is missing from you Layout screen and you have tried refreshing it probably means you need to clear the cache of your browser. In Internet Explorer 6 you would go to the Tools menu and choose Internet Options from the drop down menu. In the dialog box that appears select the General tab and then click on the Delete Files from the Temporary Internet Files Section (middle). Once done close the dialog box and refresh the Layout Screen in Blogger. With any luck you will now be able to see the Add a Gadget option once again. For other browsers follow the directions in the browser's help section on clearing the cache or check out Bloggers Help Article about clearing cache.

Thanks to the Blog Doctor for this solution. You really saved the day!

A short tip on how to fix the problem of add a gadget missing from the layout screen in Blogger.

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

13. Click on the edit link of your new gadget

14. Change the text to whatever you wish and save changes


15. Save the changes to the template

16. Click on View Blog to see the changes you have made



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

Add Paypal Donate Button to Blogger

If you want to make a few bucks from all the hard work you are putting into your Blogger blog then consider adding a Paypal donate button to your Blogger blog (Blogspot blog).

Adding a donation button will encourage all those happy readers to say a big thank you for helping them out. Not everyone will donate but you will get the odd generous soul who will willingly donate some chump change to shout you a coffee.

In this Blogger tutorial we will be adding a gadget to the Blogger sidebar or alternatively you could place it in the foooter of your Blogger template. We will be using a widget to contain our Paypal Donate Button and will not be changing your Blogger template. If you wish to place the donate button into your Blogger posts see the end of this Blogger tutorial for details.

Skill level is rated easy.

How to Add a Paypal Donate Button to Blogger (Sidebar or Footer Gadget)
Note: Updated on January 20 2012 to take account of new Paypal interface

1. Get yourself a Paypal account if you don't already have one

2. Login to your Paypal account

3. Click on the Merchant Services tab


4. Choose Donations from the list of key features displayed in the right sidebar of the PayPal Website Payments Standard Option (first of 3 payment solutions)
Note Paypal have changed its interface. You now need to select PayPal Website Payments Standard from Merchant Services drop down and then under the buttons in option 1 you will see in pretty tiny writing I must say "There are also buttons for donations and gift certificates." Click on donations.



5. From the Paypal Create a Donation Button screen choose Create Your Button Now link (one of two).



6. Stick with the default button unless you wish to customize it

7. Choose your currency depending on your needs and location

8. Choose Donors enter their own contribution amount radio button unless you want to have a set amount


9. Ensure the Secure Merchant ID radio button is selected. This will prevent spammers getting hold of your email address

10. At Step 2 it is worth saving your button

11. At Step 3 Customize your checkout page by allowing donors to write a short comment by selecting the Yes radio button to special instructions to seller

12. Select the No radio button for Customer's Shipping Address

13. Select the Create Button button

14. Once Paypal creates the donate button code copy it by right clicking your mouse and choosing copy

15. Logout of Paypal

16. Login to Blogger if you are not already logged in

17. Go to Design > Page Elements

18. Click on the Add a Gadget link in the sidebar

19. Choose HTML/Javascript widget from the list provided

20. Paste the button code into the Content box of the dialog box that appears by placing the mouse inside the box and right clicking the mouse and then paste

21. Select a title like "Shout Me a Coffee Today!" or whatever you would like

22. Click on the Save button

23. Drag and drop your new donation gadget into the spot you want it to appear in

24. Click the Save button to ensure your changes are saved

25. Click View Blog to see your new donate button in the sidebar of your Blogger blog

26. Click on your new donate button and you will be taken to the Paypal Checkout screen



Tips and Troubleshooting

1. To Add a Paypal Donate Button to Blogger Posts
   The following instructions will add a Paypal Donate button to all new Blogger posts. Note previous posts will not be changed. You will need to hard code the button into your Blogger template to have the Paypal Donate button added to every Blogger post. (Please ask if you need help with this)
   
   
   1. Follow the directions (steps 1-16) as above to get your Paypal button code
   2. In Blogger go to Settings > Formatting
   3. Paste the Paypal Donate Button code into the Post Template box
   4. Save changes
   5. Click on New Post to see that the code will be automatically inserted at the foot of each new post. (you will need to be in Edit Html mode to see the code)
2. To Add a Paypal Donate Button to Individual Blogger Posts
   
   1. Follow the directions (steps 1-16) as above to get your Paypal button code
   2. In Blogger go to the post you wish to insert the button code into
   3. Insert the button code taking care to change all instances of double quotes to single quotes
   4. Save post and publish as normal. (If you have trouble with the preview post button in the old editor in Blogger click on compose and then edit html)

This Blogger tutorial has walked you through the steps needed to add a Paypal donate button to your Blogger blog (Blogspot blog) including how to configure your Paypal button at Paypal. I have covered adding the button as a sidebar gadget or footer gadget or alternatively added to Blogger posts. Have fun!

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 blogknowhow.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 blogknowhow.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/AVvXsEh2gPQZoFN3XjXMxLJkNTRu3VTaVfWi-sIFo7GDBHwmMwaEI04wqNNbOipLcsO0Uzy068s0FuByAqUxbH32RpgStcjbL8d3Wav45ATv43AzlSsapaevz6jsBs1j8m5T9ga-cC4NPMid2ZQ/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 /><!-- HTML codes by blogknowhow.blogspot.com --><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.

Add a Twitter Updates Widget to Blogger

If you are a regular Twitter user and have a bunch of followers you might want to add a Twitter Updates widget to Blogger (Blogspot). In today's tutorial I will show you the easy way to add a Twitter Updates widget to Blogger (Blogspot). It is fairly straightforward to add this Twitter Updates widget to Blogger so please don't be put off if you are a Blogger beginner as you can have this widget up and running in no time.

If you are new to Twitter and don't have an account yet you can sign up to Twitter for free


How to Add a Twitter Updates Gadget to Blogger
There are several methods of adding a Twitter Updates widget to Blogger which I will be discussing over the next few posts. Today I will start with the easiest method by far. This Twitter widget won't slow down your blog loading time particularly but I suggest as with all HTML widgets that you place it near the bottom of your column of gadgets and limit the number of updates shown.

This Twitter Updates widget will provide a basic widget only and is fine if you aren't too bothered about styling. The widget uses the styling from your blog based on the Blogger template you are using but unfortunately there is no way to modify its appearance at the moment. If you want something a little more fancy keep an eye out for my future posts about Twitter Updates widgets.

1. Log in to Blogger if you are not already logged in
   
2. Go to Layout > Page Elements
   
3. Click Add a Gadget in the Blogger sidebar
   
4. Click on More Gadgets to the left and choose the Twitter Updates widget. Blogger may change this so if you don't find it there try looking in Featured or Popular.
   
5. Enter your Twitter name (usually your blog name)
   
6. Choose the number of updates to display. By default this is set to 5
   
7. Uncheck display link to your Twitter page if you do not want visitors to go to your Twitter page for some reason otherwise leave it as is.
   
8. Click Update to Preview any changes and then Save
   
9. Use Blogger's drag and drop feature to reposition your Twitter gadget in the desired location in sidebar or footer of your Blogger blog. Save any changes
   
10. Click View Blog to admire your new Twitter Updates widget

In today's tutorial I have shown you how easy it is to add a Twitter Updates widget to your Blogger blog (Blogspot blog). The Twitter Updates widget will display your latest Twitter tweets on your blog. The disadvantage of this third party Twitter Updates widget is that it has basic styling only and no way to modify it. On the plus side it loads fast and is likely to be trouble free. I will be writing more about Twitter updates widgets in the next couple of posts so keep an eye out. Enjoy!

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!

How to Add Missing Quick Edit Wrench to Blogger

In this Blogger tutorial (Blogspot tutorial) I show you how to add a quick edit wrench to Blogger if it is missing from a Blogger gadget.

The quick edit feature allows you to edit a Blogger gadget directly from the blog itself rather than having to go through the Design > Page Elements screens and then finding the actual widget itself before you can edit it.

Heaps of times I have downloaded custom Blogger templates only to find that there are lots of omissions compared to a default Blogger template. If you are using a custom Blogger template with the quick edit feature missing here is a step by step guide to insert the missing quick edit feature into your Blogger template

The quick edit can be missing from anywhere in your Blogger template. I have chosen to use the sidebar for this tutorial but the solution works wherever the quick edit feature has been removed or never inserted in the first place.

Tutorial Difficulty rating: Easy
Time: Less than 5 minutes
Suitable for all levels of Blogger expertise

How to Add the Quick Edit Wrench to a Blogger Gadget

1. Login to Blogger
   
2. Go to Design > Edit HTML
   
3. Check the Expand Widget Templates box
   
4. Using CTRL + F buttons together bring up the search box
   
5. Enter the following search term
   
   

   </b:includable>

   
   
6. Scroll through your Blogger template. You will see that every instance of </b:includable> is highlighted in yellow.
   
7. Once you come to the sidebar widgets which is the most likely place for the quick edit to be missing from look for something like the following (this will vary from template to template). This is the start of the first sidebar if you had a template with a two column sidebar
   
   <b:section class='sidebar' id='sidebar1' preferred='yes'>
   
8. Now look at the picture below. You can see that this is the code for a Javascript/HTML widget as shown in red
   
   
   
9. Just identify the widget that has the missing quick edit feature and add the following line of code immediately before the </b:includable>
   
   

   <b:include name='quickedit'/>

   
   
   
   
10. Use the Preview button to check your changes before committing to them
    
11. Don't forget to click on Save Template

In this Blogger tutorial (Blogspot tutorial) you have learned how to fix a missing quick edit button often missing from custom Blogger templates. No matter where the quick edit button has been omitted (sidebar, footer, header etc) it can be added in to a Blogger template very easily so that a Blogger gadget can be edited without having to go through the Blogger design screen.

Add Profile Images to Blogger Comments

Today I will show you how easy it is to have Blogger (Blogspot) display profile images in the embedded comments section of your blog even if you are using a custom template.

About a month ago Blogger announced that it was enabling profile images (profile avatars) in the embedded comments section on Blogger (Blogspot) as part of its 10th birthday feature series. The new profile image feature which has been available on other commenting options has now been extended to the embedded comments option. This is good news if you are using a default template as you will now see a small avatar next to your visitors comments and your own avatar if you have uploaded a profile image.



Default Blogger Templates - Enabling Profile Images
Profile images work on default Blogger templates and have been automatically enabled by Blogger. If you are using a default Blogger template with embedded comments enabled and have recent comments on a post you will see a profile image to the left of visitor comments (provided they have uploaded one that is). Your profile avatar will also display when you respond to visitor comments again provided you have uploaded one. (To upload your profile photo click on Add Photo at the Dashboard). If profile images are not displayed enable them by going to Settings > Comments and checking the Yes radio button at the bottom of the page which says Profile Images Enabled.

Custom Blogger Templates - Enabling Profile Images
If you are using a custom template you may still be able to see profile images in your embedded comments section. Check out Settings > Comments to make sure Profile Images are enabled. If you can't see profile images you can still add this feature by tweaking your Blogger template. Follow the instructions below to have Blogger display profile images in the embedded comments section of your custom Blogger template.

Add Profile Images to Comments Section of a Custom Blogger Template
If you are using a custom Blogger template you can use the following method to add profile images to the embedded comments section of your Blogger template.

1. Login to Blogger if not already logged in
   
2. Go to Design > Edit HTML
   
3. Back up your Blogger template as a precaution by downloading the full template to your computer
   
4. Expand Widget Templates by checking the box on the right hand side
   
5. Find the following line in your Blogger template by using CTRL + F:
   
   

   <dl id='comments-block'>

6. Change the above line to the following:
   
   

   <dl expr:class='data:post.avatarIndentClass' id='comments-block'>

7. Scroll down a few lines and find the following line in your Blogger template:
   
   

   <a expr:name='data:comment.anchorName'/>

8. Directly before the above line paste the following code block:
   
   

   <b:if cond='data:comment.favicon'>
   <img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
   </b:if>
   <a expr:name='data:comment.anchorName'/>
   <b:if cond='data:blog.enabledCommentProfileImages'>
   <data:comment.authorAvatarImage/>
   </b:if>

9. Click Save Template
   
10. Click View Blog and navigate to a page with commenting to see avatars next to comments in the embedded comments area

Tips and Troubleshooting

• If you have added the author commenting highlight hack to your Blogger template there will be 2 instances of the code at Step 7 to change
  
• If your template does not have the code mentioned in Step 5 and Step 6 check that dl has not be replaced by div. In this case leave the div as is and replace the rest of the code in the line.
  
• Blogger has only enabled profile images for Blogger and Google profiles so if your visitors comment using identities such as "Anonymous" or "Name/URL" their image profile will not be displayed. If OpenID, AIM or other identities are used these favicons will be displayed instead.
  
• Profile avatars load last so they will not prevent visitors viewing your content if you have a lot of comments on some pages

In today's Blogger tutorial (Blogspot tutorial) you have learned how to enable profile images in the embedded comments section in Blogger. If you are using a default Blogger template this can be achieved by enabling profile avatars in your Blogger template. If you are using a third party custom template I have shown you a Blogger hack that will display profile images next to comments on your blog. As always I am interested in how you get on with this tweak. Good luck!

How to Highlight Author Comments in Blogger Posts

In this Blogger tutorial I will show you how to highlight the author comments section of your Blogger template (Blogspot template) using CSS styling.

Benefits of Adding CSS Styling to Author Comments
If you are using a default Blogger template chances are it is difficult to differentiate between comments made by visitors and comments made by you, the blog author. If you only have a few comments per post that may not be enough of an issue for you. If however, you have some posts with lots of comments you may need to make your remarks stand out from those of your visitors. We can do that by adding CSS styling to highlight your author comments.

What Will I Learn in This Tutorial?
In this Blogger tutorial you will learn how to easily add some highlighting to your comments so that they will never get lost in the crowd again. This requires a small amount of tweaking to your Blogger template which is not difficult to do if care is taken. The image below shows one example of what can be achieved using this Blogger hack and some CSS styling.



Will This Blogger Hack Work on My Template?
I have tested this Blogger hack on both the old generation of Blogger templates (Minima and Sand Dollar) and the latest generation of default Blogger templates eg Simple. It will also work on custom templates as the comments code is likely to be very similar.

If you are using a custom Blogger template and run into difficulty you can also try this alternative method to highlight author comments in Blogger posts

How to Add CSS Styling to Author Comments in a Blogger Post
The following instructions will highlight author comments in the comments section of a Blogger post. The code creates a shaded box around the comments made by the blog author. These changes will not affect the CSS the styling of any of the other comments made.

Instructions to Add CSS Highlighting to Author Comments in Blogger

1. Login to Blogger
   
2. From the Dashboard go to Design > Edit HTML
   
3. Back up your template by downloading it to your computer
   
4. Check the Expand Widget Templates checkbox on the top righthand side
   
5. Use CTRL + F by entering the following into the search box
   
   

   <dd class='comment-body'>

6. Immediately above this line paste the following code:
   
   

   <b:if cond='data:comment.author == data:post.author'>
   <dd class='comment-body-author'>
   <p><data:comment.body/></p>
   </dd>
   <b:else/>

7. Now look for this code block
   
   

   <dd class='comment-body'>
   <b:if cond='data:comment.isDeleted'>
   <span class='deleted-comment'><data:comment.body/></span>
   <b:else/>
   <p><data:comment.body/></p>
   </b:if>
   </dd>

   
   and paste </b:if> immediately after it.
   
8. Your code will now look like this:
   
   

   <div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
   <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
   <b:loop values='data:post.comments' var='comment'>
   <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
   <b:if cond='data:comment.favicon'>
   <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
   </b:if>
   <a expr:name='data:comment.anchorName'/>
   <b:if cond='data:blog.enabledCommentProfileImages'>
   <data:comment.authorAvatarImage/>
   </b:if>
   <b:if cond='data:comment.authorUrl'>
   <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
   <b:else/>
   <data:comment.author/>
   </b:if>
   <data:commentPostedByMsg/>
   </dt>
   
   
   <b:if cond='data:comment.author == data:post.author'>
   <dd class='comment-body-author'>
   <p><data:comment.body/></p>
   </dd>
   <b:else/>
   
   <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
   <b:if cond='data:comment.isDeleted'>
   <span class='deleted-comment'><data:comment.body/></span>
   <b:else/>
   <p>
   <data:comment.body/>
   </p>
   </b:if>
   </dd>
   
   </b:if>
   
   </dd>
   <dd class='comment-footer'>
   <span class='comment-timestamp'>
   <a expr:href='data:comment.url' title='comment permalink'>
   <data:comment.timestamp/>
   </a>
   <b:include data='comment' name='commentDeleteIcon'/>
   </span>
   </dd>
   </b:loop>
   </dl>
   </div>

9. Now using CTRL + F again find this line ]]></b:skin>
   
10. Paste the following immediately before ]]></b:skin>
    
    

    .comment-body-author {
    background: #f5deb3;
    border: 2px solid #de7008;
    padding: 5px;
    }

11. Save your template changes
    
12. Click on View Blog and go to a post that you have commented on to see the CSS styling has highlighted your comments.

Alternative Method to Add Highlighting to Author Comments in Blogger
The following method will also add highlighting to author comments in Blogger and can be used if you have difficulty with the first method. It does however involve changing some code rather than just adding some so this is not as desirable in terms of future proofing your template for Blogger updates.

1. Login to Blogger
   
2. From the Dashboard go to Design > Edit HTML
   
3. Back up your template by downloading it to your computer
   
4. Check the Expand Widget Templates checkbox on the top righthand side
   
5. Find the following section of code by using CTRL + F and entering <data:comment.body/> into the search box
   
   

   <span class='deleted-comment'><data:comment.body/></span>
   <b:else/>
   <p><data:comment.body/></p>
   <b:include data='comment' name='commentDeleteIcon'/>
   </b:if>

6. Replace with the following code after <span class='deleted-comment'> and before </b:if> as shown in red:
   
   

   <span class='deleted-comment'>
   <!--Highlight Author Comments Start-->
   <b:if cond='data:comment.author == data:post.author'>
   <p class='comment-body-author'><data:comment.body/></p>
   <b:else/>
   <p><data:comment.body/></p>
   </b:if>
   <!--Highlight Author Comments End-->
   </b:if>

7. Use CTRL + F to find ]]></b:skin> that closes the CSS styling section
   
8. Paste the following code immediately above ]]></b:skin>
   
   

   p.comment-body-author {
   background: #eeeecc;
   border: 2px solid #335577;
   padding: 5px;
   color:#558866;
   }

9. Save your template
   
10. Click on View Blog and navigate to a post that you have commented on to see the that your comments will now be highlighted

In this Blogger tutorial you have learned two different methods to add CSS styling to highlight the author comments in your Blogger posts. Obviously there is still some work to do on your part to adjust the colors in the CSS styling to match the color scheme of your blog. Good luck!

Add a Comments Counter Button to Blogger Blogspot

In this Blogger tutorial (Blogspot tutorial) you will learn how to add a comments counter button to Blogger (Blogspot) to show off the number of comments each of your posts has received.

A comment counter button (bubble) will have the effect of encouraging visitors to comment on your Blogger blog and also help to highlight the credibility of your articles.


Installing this Blogger hack to add a comment counter button only takes a few minutes. The changes needed to add the comment bubble to Blogger while not difficult do involve adding a small snippet of code to your Blogger template in two places. For this reason I strongly urge you to back up your Blogger template before attempting this blogger hack.

Blogger Tutorial Difficulty - easy to medium

How to Add a Comments Counter Bubble to Blogger
A Step-by-Step Walkthrough
The following steps will insert a fully clickable comments counter button on the same line as the post title in Blogger. The comments counter is right aligned by default.

1. Log in to Blogger and the blog you wish to apply these changes to
   
2. Select Design > Edit HTML
   
3. Click on Download Full Template to back up your template before you make any changes
   
4. Check the Expand Widget Templates box
   
5. In the CSS Styling section of your Blogger template and just before the ]]></b:skin>
   
   

   .comments-button {
   width : 48px;
   height : 48px;
   background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoRBCUR6Alby77PgMPE0o0Pr25KfcomuXHUvEdBs-SPZQ2xrNP9AQJJN6eA_wrocbn_3Ugk-94c8qcvjF6-dCY_4GBWP-m2HarC6at17actPIN0_kbep69RlwR90P3qXVRYv2dkfc_kQqY/s200/comment-counter-bubble.png) no-repeat;
   float : right;
   font-size : 18px;
   margin-top : -15px;
   margin-right : 2px;
   text-align : center;
   padding-top:10px;
   }

6. Now find the following block of code using CTRL key + F
   
   

   <b:includable id='post' var='post'>
   <div class='post hentry uncustomized-post-template'>
   <a expr:name='data:post.id'/>
   <b:if cond='data:post.title'>
   <h3 class='post-title entry-title'>
   <b:if cond='data:post.link'>
   <a expr:href='data:post.link'><data:post.title/></a>

7. Copy this code block:
   
   

   <b:if cond='data:post.allowComments'>
   <a class='comments-button' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
   </b:if>

8. Insert as follows:
   
   

   <b:includable id='post' var='post'>
   <div class='post hentry uncustomized-post-template'>
   <a expr:name='data:post.id'/>
   <b:if cond='data:post.title'>
   <h3 class='post-title entry-title'>
   <b:if cond='data:post.allowComments'>
   <a class='comments-button' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
   </b:if>
   <b:if cond='data:post.link'>
   <a expr:href='data:post.link'><data:post.title/></a>

9. Save template and then view blog to admire your new comment counter badge.

Tips and Troubleshooting

1. If you prefer you can replace the button image I have provided with your own image. You can find other buttons easily enough by doing a Google search with a term like "speech button icons".
   
   Upload your button to a hosting service such as Photobucket and change the URL address of the image in the CSS styling section. The following example will render a smaller blue button. Note I have reduced the font size to accommodate the change. You may need to play around with the settings to get the font sizing right for your image.
   
   

   .comments-button {
   width : 48px;
   height : 48px;
   background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP2MG-wSsi3GnjKJhmXJMLZqYv1XohMHztuxx50bVShU8IxhKEWZvv4QD-YF29ne5KwNIHLd-GDc1DUAP24bjM8SyqttoKijwpMAvikjQ8Fhb31hjO8u1E54s7nIWjR5ViTt3tauGzEsW3/s200/comment-counter-bubble-2.png) no-repeat;
   float : right;
   font-size : 14px;
   margin-top : -15px;
   margin-right : 2px;
   text-align : center;
   padding-top:10px;
   }

   
   
2. If you want your comment counter to be left aligned instead of right you will need to change the CSS styling from float:right; to float:left;

In today's Blogger tutorial I have covered how to add a comments counter to a Blogger blog (blogspot blog) that will appear to the right of your blog post title. A comments counter is a way to encourage visitors to comment and is a way of showing off the credibility of your blog posts. Good luck! Any comments about installing this blogger hack are most welcome.