You've noticed a button bar on my blog all right; and you are interested to make your own? Whenever you have static or dynamic pages. These buttons are going to be very useful for your blog. I placed it below the blog header, and I just set them up as tabs. Well you can set them up if you want to.
Why do I need this button bar on my blog? That's an alternative to the pages gadget, but you still might need it to go to these pages and grab the displayed URL on your browser.
With a button bar, you have actual buttons, made of a <button> tags. It's useful for some blog visitors who are using screen-readers to navigate your blog.
Let's start off with the following code for the button bar!
If you take a look of the code below; you can see how the button bar will be built. The div element wraps around the button bar,--composed of these buttons. To make it visible, specify the border-color for the div element by using inline CSS inside the div element.
Before you grab the code, follow the instructions:
- 1. Go to Blogger to enter your dashboard.
- 2. Go to more options, and choose layout.
- 3. Go below the blog title, and activate "Add a Gadget: link.
- 4. Choose the HTML/Java-script widget, but leave the title field blank.
- 5. Copy the given code below. Replace [URL] with an exact URL of your blog page, or dynamic page. Replace [Page or Dynamic Page] with an exact name of your page or dynamic page. Customize the border color if you wish, and hit save. Be sure to view your blog to varify if the widget is working.
You can add more buttons to extend your button bar.
If you like this tutorial, or you want to share this, use the social buttons below this post.