How To Add Stylish CSS3 Push Buttons In Blogger

Previously, we shared Tech Shadow Blogger Template, Newsletter Email Subscription Widget and Socializer Widget but now we're back with another great thing which is CSS3 Push Buttons. So today we're going to add the stylish css3 push buttons in blogger which can make your blog more professional and beautiful. You can add these buttons in post area or anywhere you want. These are the quality, stylish, beautiful, unique and pure buttons that's why I'm going to share this and I've got these button from Medly Web so all the credit goes to them. Before we get into the tutorial about installing this in blogger first let me tell you something about this.

Stylish CSS3 Push Buttons

These are the unique and beautiful buttons which can be used as DEMO, DOWNLOAD or any kind of button in blogger. These are build with pure CSS3. We've two themes of this button which are red and blue. These buttons have stylish background like these a placed in a hole. It also has hover and active effect which makes this more unique. The developer of these buttons has integrated the "OSWALD" font family which even more beautify these buttons. Adding these buttons in blogger is not so difficult, it is easy so let's begin the tutorial.

Installing This In Blogger

• Go To Blogger >> Template >> Edit HTML
• Click Anywhere In The Coding To Active It
• Search For ]]></b:skin>
• Paste The Following Code Above ]]></b:skin>

<!-- Start Push Button By Www.BloggerYard.Com -->
.push_button {
position: relative;
width:220px;
height:40px;
text-align:center;
color:#FFF;
text-decoration:none;
line-height:43px;
font-family:'Oswald', Helvetica;
display: block;
margin: 30px;
}
.push_button:before {
background:#f0f0f0;
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D0D0D0), to(#f0f0f0));

-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;

-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
-moz-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;

position: absolute;
content: "";
left: -6px; right: -6px;
top: -6px; bottom: -10px;
z-index: -1;
}

.push_button:active {
-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset;
top:5px;
}
.push_button:active:before{
top: -11px;
bottom: -5px;
content: "";
}

.red {
text-shadow:-1px -1px 0 #A84155;
background: #D25068;
border:1px solid #D25068;

background-image:-webkit-linear-gradient(top, #F66C7B, #D25068);
background-image:-moz-linear-gradient(top, #F66C7B, #D25068);
background-image:-ms-linear-gradient(top, #F66C7B, #D25068);
background-image:-o-linear-gradient(top, #F66C7B, #D25068);
background-image:linear-gradient(to bottom, #F66C7B, #D25068);

-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;

-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);
-moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);
box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);
}

.red:hover {
background: #F66C7B;
background-image:-webkit-linear-gradient(top, #D25068, #F66C7B);
background-image:-moz-linear-gradient(top, #D25068, #F66C7B);
background-image:-ms-linear-gradient(top, #D25068, #F66C7B);
background-image:-o-linear-gradient(top, #D25068, #F66C7B);
background-image:linear-gradient(top, #D25068, #F66C7B);
}

.blue {
text-shadow:-1px -1px 0 #2C7982;
background: #3EACBA;
border:1px solid #379AA4;
background-image:-webkit-linear-gradient(top, #48C6D4, #3EACBA);
background-image:-moz-linear-gradient(top, #48C6D4, #3EACBA);
background-image:-ms-linear-gradient(top, #48C6D4, #3EACBA);
background-image:-o-linear-gradient(top, #48C6D4, #3EACBA);
background-image:linear-gradient(top, #48C6D4, #3EACBA);

-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;

-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
-moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
}

.blue:hover {
background: #48C6D4;
background-image:-webkit-linear-gradient(top, #3EACBA, #48C6D4);
background-image:-moz-linear-gradient(top, #3EACBA, #48C6D4);
background-image:-ms-linear-gradient(top, #3EACBA, #48C6D4);
background-image:-o-linear-gradient(top, #3EACBA, #48C6D4);
background-image:linear-gradient(top, #3EACBA, #48C6D4);
}
<!-- End Push Button By Www.BloggerYard.Com -->

• Click "Save Template"
• Now You've Installed These Buttons In Your Blog. Let's Jump To Next Step, 

Adding This In Blogger

• Go To Blogger >> New Post >> HTML Tab

• Pick Up The Button From Below Code
• Paste It There In The HTML Tab.

Copy Below Code For Red Button : 

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<a href="#" class="push_button red">Push the button</a>

Copy Below Code For Blue Button : 

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<a href="#" class="push_button blue">Push the button</a>

• Now Complete Your Post and Hit "Publish" Button. 
• You Can Also Check It In The Preview.
• CONGRATULATIONS! You've Successfully Got This Button In Your Blogger Blog!

Stylish Note, Announce, Success and Warning Boxes For Blogger

It has been long we've not shared such beautiful blogger widgets, so when today I came to write a new post then I thought why not I share any unique widget to my loyal readers and visitors. After a little research, I found a simple, cute and unique widget or plugin for all blogger.com users. Today, I'm going to share Note, Announcement, Success and Warning message or notification boxes for blogger along with a step by step tutorial.

These are some best stylish notification boxes which will attract your readers to get notified. You might have seen such kind of boxes on several websites even WordPress based blogs are also using them. These cute message boxes will help you to inform your readers or visitors about any kind of message because they are looking professional in the design and eye-catching with smart icons. I strongly recommend everyone to use these boxes in appropriate way, time and place because they will also give more beauty to your blog posts or content.

Credits

I don't know surely who is the creator of these boxes but the truth as I'm going to tell you guys that I got these message boxes from a WordPress them which was designed by MyThemeShop. So, all the credit goes to the MyThemeShop developers team. 

How To Create These Message Boxes In Blogger Posts ?

Creating these amazing message boxes in blogger posts was very difficult for newbies but now this tutorial is going to make it easy for everyone. Here you will be guided step by step to install and create these message or notification boxes in blogger posts. Let's enter into the tutorial.

Step#1 : Installation

• Go To Blogger >> Template >> Backup Your Template
• Click Edit HTML >> Search For ]]></b:skin>
• Paste The Following CSS CODE Above ]]></b:skin>

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
  }
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
  }


  .message_box {
    margin:15px 0;
  }

  .note {
    color:#666;
    font-family:"Open Sans";
    font-size:16px;
    border:1px solid #FDEBA5;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjesVDrSvb2F-okNCi2OGlxrwK6qh54t4NP3BGF8c0dcvZYFR8LelUzsJyOH_aa3BO0VbD2r_P7SWw8inQUsLkOfKZXBfeWrEAa6pQFTDueQOQBGf2q0UgoSeGrDXTI35e4wzo2g8Vz4Ie5/s1600/thumb.png) no-repeat scroll 10px center #FEF4C8;
    padding:.5em 1em .5em 3em;
  }

  .announce {
    color:#666;
    font-family:"Open Sans";
    font-size:16px;
    border:1px solid #BEE5F8;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihb4HMeWsY1jmoTH3mdINjltWKtG6v9zpR7Gr7lHExVNofhR7fpGr_71pNspX0oE0i3GjqYE2CDBI2Jp-sGOUvnUregKxl7tqTC3JMuUxSLUq6na4MqOcmy9TpOhdxsrRQ7R-kXEdkzB5j/s1600/speaker.png) no-repeat scroll 10px center #D7EFFB;
    padding:.5em 1em .5em 3em;
  }

  .success {
    color:#666;
    font-family:"Open Sans";
    font-size:16px;
    border:1px solid #DEF1BF;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjelwKBsNy46h73PDi4RH8JOplbSu1xG1T50hNWUD8tgF4Lj5Ps90h2IFJ0l6IzEF06eM2qxSkA8IjMgvIlmvSTEpcjCF62PTViR7fQgc6yFo7GRCVe7PoaVVc7b_VpVL5a2traRBmP5Mfe/s1600/tick.png) no-repeat scroll 10px center #E8F6D2;
    padding:.5em 1em .5em 3em;
  }

  .warning {
    color:#666;
    font-family:"Open Sans";
    font-size:16px;
    border:1px solid #FFDBDB;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhvWkqWJMt8N4kZ3LRzGp_b0g_IVdm6xZMOpPCX5tLjm_ypywG2LKgdbh9trJISodSZURyeqjjKUGyrAc7tq5subdwHUfjC_OFLQzgfYbUuDKBBn70BsC_KKK3C8YU9ntOKer4cTnhPzCF/s1600/cross.png) no-repeat scroll 10px center #FFE7E7;
    padding:.5em 1em .5em 3em;
  }

• Click "Save Template".
• You're Done in The First Step. 

Step#2 : Creating Boxes In Blogger Posts

Ads not by this site

• Go To Blogger >> Create New Post
• Go To The HTML Tab
• Choose Any Box From The Following Which You Want To Add.
• Copy Any Box's Code From The Following.
• Paste Their In The HTML Tab.

Note Box :

<div class="message_box note">
  Hi, I am Mr.Noter. I'll notify your readers about the news.
</div>

Announce Box :

<div class="message_box announce">
  Mr.Annoucer is having meetup with Blogger Yard's Readers.
</div>

Success Box :

<div class="message_box success">
  Mr.Success. Never give up! A day wil come when you will catch me.
</div>

Warning Box : 

<div class="message_box warning">
  Mr.Warner. I will try my best to warn from such worst things.
</div>

• Replace The Green Text With The Message You Want To Show.
• Publish The Post.
• That's All.

Auto Scrolling Recent Posts Widget For Blogger / Blogspot

If you have a lot of post on the blog, or if you want to show everyone your list of favorite books, but have little space in the sidebar widget this will be a great help to you. This post explains how to add auto scrolling (marquee) recent posts Widget on his blog that looks good on your blogspot blog. This is similar to the display of recent post in your sidebar, but this will have a marquee in this widget. Now if you want to show your blog in this way, either on top or bottom of your blog, then you can use this new widget:

How to Install This Widget On 'Blogger' ?

1. Customize Options in Given Widget Generator Form
2. Click on Generate Button
3. Click Preview** Button to see your widget Preview
4. Finally Click Add to Blogger Button to add this widget on Your blog

**Note:- After changing any values, First Click Generate Button and then See Your Preview

 Note:- Choose appropriate Image Bullet or Icon That have transparent Background and small in Size 

How To Add Facebook Like Box Without Border in Blog?

How To Add Facebook Like Box Without Border?

However, I had specially created following widgets to reduce the work of those blogger who use blogger platform. If you are using other than this than simply copy and paste generated code from Code/Demo field. For blogger user i had mention few simplest step below just go through it step by step.

• Click on Generate button  and Add To Blogger button respectively.
• Than you will find Other page where you need to select your blog.
• Click On Add Widget Button.
• That Set, Arrange Widget as per your requirement & save layout page of blogger blog.

Rotating Social Media Widget Generator For Blogspot.

Below is a widget creator for your blog, which will helps you to add 3d spinning social widget inside your blogger sidebar

Instruction Regarding Usage of Above Widget Generator:

• Before using this generator make sure that you login into your blogger account.
• Modify the values of FaceBook Page ID, Twitter Username, Google + ID, Youtube User Name and Rss Feed burner User ID with your own user id and click on Generate Button.
  you will redirected to other page, their you need to give title to your widget like " Subscribe US, Follow Us etc" and than click on add widget.
• if still you are unable to install code in blogger template, then simply copy generated code from Code/Demo field and paste in below navigation path
  
  Blogger dashboard > Select Blog > Layout tab > Add Widget Button > HTML/JavaScript.

Final Words:

Now a days people are highly engaged with the social networking websites. Adding attractive hover effect to a blogspot blog, its a tactics to motivate to visitors to subscribe you on various social networking account. It will helps visitors to stay connected with your blog.