Show Mobile Navigation
,

Add a 3D Push-Pop Button in Blogger

Hemant Verma - 12:57 PM

Buttons and others effects are very important in blogging and specially when our blog related with designing and blogging blog that's why looks and feels are very important in the blog. From lasts post our team provided the buttons for live demo and for other stuffs like icons and other some stuff and so today we have a 3D Push-Pop button we can add in the blogger post and it's very unique kind of widget and it have a 3D look and easily customizable and has a Push - Pop effect when you click on the button.




Add Push-Pop Button in Blogger

  • Login to Blogger > Dashborad
  • Click on Drop Down Menu and select Template
  • Backup your Template before making any changes to your blog
  • Now Click on Edit HTML > Proceed > Expand Widget Templates
  • Press Ctrl + F and search the code shown below.

</head>

  • Paste below code before </head>


<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'></link>

  • Now again find below code

]]></b:skin>


  • Paste below code before ]]></b:skin>

#wg-pushbutn a {
position: relative;
color: rgba(255,255,255,1);
text-decoration: none;
background-color: rgba(219,87,5,1);
font-family: 'Yanone Kaffeesatz';
font-weight: 700;
font-size: 30px;
display: block;
padding: 4px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
-moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
margin: 10px auto;
width: 200px;
text-align: center;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}
#wg-pushbutn a:active {
-webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
-moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
position: relative;
top: 6px;
}

  • Save Your Template.


How to Add it in Post....?

  • Go to posting area > HTML
  • Now paste code in it.

<div id="wg-pushbutn"><a href="#" target="_blank">Live Demo</a></div>



Make Changes...!

  • Replace # it with your link.
  • Replace Live Demo it with your own text.




    If Any Problem Comes, Ask in Comments


    5 comments:

    1. @Sheikh ArsLan AfzaLI'm Sorry that link was not complete, but now it fixed.

      Check it now. Thanks for telling me my mistake.

      ReplyDelete
    2. Its not working in my blog..please help

      ReplyDelete
    3. Luciana McCarvilleJuly 17, 2013 at 10:16 PM

      Really, I am impressed from this post. The person who create this post is truly great. Thanks for sharing this with us. I found this informative and interesting blog so I think its very useful and knowledgeable. I would like to thank you for the efforts you have made in writing this article.

      Best regards,

      Luciana McCarville
      rock indé

      ReplyDelete

    You may use these HTML tags and attributes: <a href="" title=""> </a> <b> </b><strong> </strong>

     



    Make Your Blog Like a Pro
    About | Contact | Affiliates | Privacy Policy | TOS