Create 'Toggle Me' Button For Your Blog

A nice design for blog is the main part of a blog. If the Design is eye catching, we can attract visitors and make them visit our blog again and again, There are some blog which i'm visiting daily because i'm inspired by their good design. Many things plays their vital role to make a blog eye-catching, even a small mistake can destroy your blogging carrier. Color Combination, widgets, font style and even a single link style can attract your visitor.That's why today i'm here with a small but very useful widget, which will help your readers to be engaged with your blog. Yes im writing about a pretty Toggle Button which will allow you to show content.Lets see a demo and get start to add it on your blog.

Demo

Click Here To See a Demo Of Toggle Me Button.

How to add it to blogger?

It's very simple to add a Toggle Me button to blogger, follow these steps

• Go To Blogger > Template > Edit HTML > Search for ]]></b:skin>
• Just above  ]]></b:skin>  paste following Css code :

.container {
  margin: 10px auto;
  padding: 20px;
  width: 350px;
  text-align: center;
}.container h1 {
  font: bold 40px/1.5 Helvetica, Verdana, sans-serif;
} .container p {
  font: 13px/1.5 Helvetica, Verdana, sans-serif;
}label {
  display: block;
  margin: 20px auto;
  width: 200px;
  height: 50px;
  background: #232323;
  color: #fff;
  text-align: center;
  font: 14px/50px Helvetica, Verdana, sans-serif;
}
label:hover {
  background: #444;
  cursor: pointer;
}
input#toggle {
   position: absolute;
   top: -9999px;
   left: -9999px;
}
.modal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -100;
  margin: auto;
  padding: 20px;
  width: 500px;
  height: 200px;
  border-radius: 10px;
  background: rgba(255,255,255,0.7 );

  -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.1);
  box-shadow: 3px 3px 3px rgba(0,0,0,0.1);
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transition: opacity 1s ease;
  -moz-transition: opacity 1s ease;
  -ms-transition: opacity 1s ease;
  -o-transition: opacity 1s ease;
  transition: opacity 1s ease;
}
.modal h2 {
  color: #232323;
  text-transform: uppercase;
  font: 35px/1.5 Helvetica, Verdana, sans-serif;
}
 .modal p {
  color: #444;
  text-align: left;
  font: 13px/1.8 Georgia, Times, sans-serif;
}
input#toggle:checked + .modal {
  opacity: 1;
  z-index: 1;
}
input#toggle:checked + .modal {
  opacity: 1;
  z-index: 1;
}
media all and (max-width: 767px) {
  .modal {
    width: 300px;
    height: 250px;
  }
   .modal h2 {
    font: 30px/1.5 Helvetica, Verdana, sans-serif;
  }
   .modal p {
    font: 12px/1.8 Georgia, Times, sans-serif;
  }
}

Now Save Template. Use The Html code given below where you want to show Toogle Me button, you can use it in Page, Post or widget.

<div class="container">
  <label for="toggle">Toggle Me</label>
  <input type="checkbox" id="toggle" />
  <div class="modal">
    <h2>Content Header</h2>
    <p>Your Content</p>
  </div>
</div>

Costomization

Replace Toggle Me with Button Name, Content Header with Content Name and Your Content With Content To Show, You are Done. 

From The Editor's Desk

I found This pretty button useful for me  so i decide to share it with you guys, you can use this button for various purpose such as about me, click to see code, to show some paragraph and so on. If you face any problem during these steps feel free to write on comment box below, Peace, Happy Blogging.