Tags: Blogger Tricks / Buttons / CSS Tricks

How to Add a Spoiler or Hide/Show Button in Blogger

- 31 Comments

Impressing you visitors is important for driving more traffic to your blog. Everybody knows that content is the king and its important to write good and interesting content. You can also impress your visitors by adding special effects to your blog posts and today we're going to share one of them. This effect is known as spoiler or hide/show effect. This effect displays a button with text, clicking it will expand the content and on clicking it again will hide the content. It uses a simple script and you can use it anywhere. You can hide whatever you want an image, code, text etc. So today in this tutorial we'll learn that How to Add Spoiler or Hide/Show Button in Blogger. See it in action, click the button below :-

How to Add Spoiler or Hide/Show Button in Blogger

Adding this button/spoiler to a blogger post is extremely easy, simply Copy (Ctrl+C) the below code >> In the blogger post editor click on HTML tab and Paste (CTRL+V) it where you want to add this button.

<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>
<button title="Click to Show/Hide Content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show/Hide</button>

Customization:
Replace ADD YOUR HIDDEN CONTENT HERE with the content that you want to show on click
You can also replace button text i.e Show/Hide
That's it, you're done.

From Editors Desk

We hope this article has helped you in learning How to Add Spoiler or Hide/Show Button in Blogger. Share it with your friends and don't forget to subscribe us :-)

Tags: Blog Design / Blogging Tips / Buttons

How to Create a Button/Badge for your Blog

- 3 Comments

You might have seen that many blogs and directories are using Buttons for their promotion. Blog buttons are becoming a very popular way to promote and link back to your blog. A badge in your blog's sidebar is really a good way to provide your readers something that they can use and display on their own blog to show that which blog's they read and it'll also increase your blog's traffic. It's really easy to create a button for promoting your blog. You can choose color, border, font style, background and text for your button by using this button maker tool. Using this tool is extremely easy and in this article we'll show you How to Create a Button/Badge for your Blog using Button maker tool.

How to Create a Button/Badge for your Blog

Go to this page and Customize you badge
Customization:
1- Choose a base color or keep it transparent
2- Choose a border color or keep it transparent
2- Select your Button Size and
4- Choose a vertical bar color or keep it transparent
5- For better look, write a small abbreviation of your blog or whatever you want (Left Side Text) and select its background and text color
6- Write your main keyword in the (Right Side Text) and select it background and text color
7- Click on Update >> Looks good so right click on the image and Save it
8- Upload it to blogger to get its link

How to Add this Badge to your Blog

<a href="Your-Blog-URL" ><img border="0" src='Your-button-link' rel="Keyword"/></a>

1- Replace Your-Blog-URL with the url of your blog
2- Replace Your-button-link with the link of your button
3- Replace Keyword with your blog's keyword
Now to add this button to your blog Log in to your Blogger Account >> Layout >> Add a Gadget >> Scroll down the page and select HTML/JavaScript gadget from the list of gadgets. Paste the above code after customization in the empty HTML/JavaScript Box and click on Save Button.

From Editors Desk

I hope this article helped you in learning How to Create a Button/Badge for your Blog and How to Add it to your Blog. Share this article with your friends and don't forget to subscribe us. Take Care!