This tutorial applies to all templates (versions 3.1.0 +) purchased on or after November 1, 2017. See the "Sidebar Gadget Setup (Old)" if you purchased prior to November 1, 2017.
Our Blogger templates include a standard set of commonly used sidebar gadgets/widgets which include:
- About Me profile widget
- Follow by Email
- Contact Form
- Custom search widget,
- Customized Popular Posts
- Customized labels widget
- Custom Recent Posts widget
Some of the gadgets come already installed. Some need to be added and configured to meet your needs.
FOR SOCIAL MEDIA WIDGETS LIKE SOCIAL ICONS, SET THE SOCIAL MEDIA WIDGETS TUTORIAL.
- To setup up your Blogger Profile, log in to your Blogger dashboard and go to Settings > User Settings.
- Under General > User Profile select whether you want to use the Blogger or the Google + profile.
- To edit your Blogger profile, click on the Edit link under the Blogger option.
- Under Edit User Profile, add a picture under Profile Picture and your description in the Additional Information > Introduction.
- Make sure your profile is set to "Share my profile" under the Privacy settings at the top.
- Slick the orange Save Profile button at the bottom of the page to save your profile.
- To set your Google + profile, visit your Google + profile page and click the Edit Profile button.
- To finish configuring your Profile gadget,navigate to the Layout configuration page.
- Click on the Edit link at the bottom right hand corner of the About Me gadget box (usually found under the box with the link Add a Gadget).
- If you don’t see the Profile (About Me) box in the list under the Add a Gadget box, click on the Add a Gadget link. The Add a Gadget window will open. The Profile gadget is under the Basics tab. Click the + icon next to it to add it to your sidebar.
- After you click the Edit link on the Profile box, the Configure Profile dialogue box will open.
- Enter your gadget title and choose whether you want to show the Introduction from your Blogger profile by checking or unchecking the Show about me option. You can also choose to show your location by checking the Show location option.
- Click the Save button to save your new Profile gadget settings.
If you feel comfortable editing a bit of code, you can redirect readers to an alternate page when they click on your profile picture. Instead of your Blogger profile, you can send them to any web page address you would like.
- Go to your Blogger Dashboard > Theme page.
- Click on the gray “Edit HTML” button. The code editor will open.
- Left-click anywhere in the code box then press the [Cntrl] + [F]keys (or command + F on Mac) to open the search window at the top right corner of the code box.
- Type “About Me” into the search box (no quotes) and hit enter 3 times.
- The code you are looking for should be about 2 lines below a line that says “<div class=’sidebar-wrapper’>”
- Next to the line that has “About Me” in it, click the black arrow on the left side to open up the code.
- You are looking for 2 pieces of code that look like: expr:href=‘data:i.userUrl’
- Get rid of the “expr:” part. Just delete or backspace it away.
- Replace the: data:userUrl with the Web Address (URL) for your about page. i.e. http://myblog.blogspot.com/about
- Click the orange Save Theme button at the top.
- Visit your blog (in another browser tab) and click on the image to make sure this worked. Worse case, the widget will disappear.
- If this happens, go back to the code editor tab. Hit the [Cntrl] + [Z] keys (command + Z) to undo your last steps until you get back to the original code then try again.
- In the Layout configuration page, you can add the gadget by clicking on the Add a Gadget link.
- Choose the Follow by Email gadget by clicking on the + next to it.
- In the Layout configuration page, click on the Edit link at the bottom right hand corner of the Follow by Email box.
- The Configure Follow by Email box will open.
- Enter your desired gadget title in the Title field.
- Blogger will automatically assign your blog a Feedburner URL.
- Click the orange Save button to save your gadget settings.
- Add the Contact gadget to your sidebar using the Add a Gadget link on the Layout configuration page.
- Open the Configure Contact Form Gadget by clicking on the Edit link at the bottom right hand corner of the Contact box.
- Enter your gadget title into the Title field.
- Click the Save button to save your new gadget settings. Blogger will use the email from your Blogger profile.
- In the Layout configuration page, click on the Edit link at the bottom right hand corner of the Labels (Hot Topics) gadget box.
- In the Title field, enter an optional gadget title.
- You can choose to show all blog topics or selected with the Show options.
- Labels can be sorted Alphabetically or by Frequency (Popularity).
- Choose cloud option under Display to display labels as a styled tag cloud.
- Click the Save button to save your new gadget settings.
- In the Layout configuration page, click on the Edit link at the bottom right hand corner of the Popular Posts gadget box.
- Enter your gadget title in the Title field.
- You can choose to show the most viewed posts from all time, last 30 days or last 7 days with the Most viewed option.
- in the Show options, make sure you select to show the image thumbnail. The snipped will not show, only the title and the thumbnail. You can choose to display between 1 and 10 posts in your gadget.
- Click the Save button when done adjusting settings.
- In the Layout configuration page, click on the Edit link at the bottom of the Search box.
- Enter your gadget title in the Title box.
- Click the Save button to save your new gadget settings.
- In the Layout configuration page, choose the sidebar where you would like to install the gadget and click on the Add a gadget link.
- Enter a title for your gadget in the Title box.
- Open the recent_posts_gadget.txt file included in the Widgets folder inside the template file that you downloaded.
- Copy and paste all the contents of the recent posts file into the Content section of the configure window.
- Click the orange Save button.
You can configure several settings for the Recent Posts gadget. Settings are changed directly in the code of the recent_posts_gadget.txt file.
The following options can be changes:
- Number of posts: Find the “var numposts = 3;” code; change the number to your desired number of posts to show.
- Show thumbnails: Find the “var showpostthumbnails = true;” code; to hide the post pictures, change true to false.
- Display “More” link: Find the “var displaymore = false;” code; to display the “More” link, change false to true.
- Show comments number/link to comment form: Find the “var showcommentnum = false;” code; to display the comments link, change false to true.
- Show the post date: Find the “var showpostdate = false;” code; to display the post date, change false to true.
- Show post summary: Find the “var showpostsummary = true;” code; to hide the post summary/excerpt, change true to false.
- Post summary length: Find the “var numchars = 50;” code; to change the length of the post summary, change the 50 to any number of your choosing. This is the number of letters/spaces in the post summary.
- You can arrange your gadgets in the Layout configuration page by hovering over the gadget box until you see the four-way arrow cursor.
- Then you can right click and hold to drag and drop it into your desired location.
- Make sure you click the Save Arrangement button when you are done rearranging your gadgets to save your new settings.
Most gadgets can be remove with the exception of the menu.
- To remove a gadget, go to the Layout configuration page.
- Click on the edit link for the gadget you wish to remove.
- The configuration window will open.
- Click on the gray Remove button at the bottom of the window.
- A confirmation box will appear to confirm you wish to delete the gadget. Click OK to permanently remove the gadget.