Attractive/Cool Css Buttons Styles For Blogger

Vertical bar is also really helpful, when
we need to keep some link on side bar.
So, this vertical bar include nice hover
style like dancing style.Earlier i posted
about How To Add Cool Vertical Drop
Down Menu For Blogger. Its also include
nice style with drop down.You can follow
this easy steps to add it to your blog.

DEMO

1. Log in to blogger  Design > Page Element.

2. Find this tag by using Ctrl+F   ]]></b:skin>

3. Paste below code Before ]]></b:skin> tag

.awesome, .awesome:visited {
    background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7J1JMvlhedDPMHWzK4bNlsGdK43BWMPxEBYUYmk03EwjquoW-LVkBuzYyLNBSdyfhLcVM0Eo-BhxTk-paYI3D-KJVjYuUQPWaIUGSNmiLSLPTpOa4KvU_tU7Kf1kAnaaJv1oF0kXrn7U/s1600/overlayy.png) repeat-x;
    display: inline-block;
    padding: 5px 10px 6px;
    color: #fff;
    text-decoration: none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
        border-radius:5px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative;
    cursor: pointer;
font-family:Calibri, Arial, sans-serif;
}

    .awesome:hover                            { background-color: #111; color: #fff; }
    .awesome:active                            { top: 1px; }
    .small.awesome, .small.awesome:visited             { font-size: 18px; padding: ; }
    .awesome, .awesome:visited,
    .medium.awesome, .medium.awesome:visited         { font-size: 24px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
    .large.awesome, .large.awesome:visited             { font-size: 30px; padding: 8px 14px 9px; }
   
    .green.awesome, .green.awesome:visited        { background-color: #91bd09; }
    .green.awesome:hover                        { background-color: #749a02; }
    .blue.awesome, .blue.awesome:visited        { background-color: #2daebf; }
    .blue.awesome:hover                            { background-color: #007d9a; }
    .red.awesome, .red.awesome:visited            { background-color: #e33100; }
    .red.awesome:hover                            { background-color: #872300; }
    .magenta.awesome, .magenta.awesome:visited        { background-color: #a9014b; }
    .magenta.awesome:hover                            { background-color: #630030; }
    .orange.awesome, .orange.awesome:visited        { background-color: #ff5c00; }
    .orange.awesome:hover                            { background-color: #d45500; }
    .yellow.awesome, .yellow.awesome:visited        { background-color: #ffb515; }
    .yellow.awesome:hover                            { background-color: #fc9200; }

    .pink.awesome, .pink.awesome:visited        { background-color: #e22092; }
    .pink.awesome:hover                            { background-color: #c81e82; }

4. Now HTML Code here

For Large Buttons

<a href="LINK" class="small awesome">NAME</a>
<a href="LINK" class="small blue awesome">NAME</a>
<a href="LINK" class="small pink awesome">NAME</a>
<a href="LINK" class="small magenta awesome">NAME</a>
<a href="LINK" class="small green awesome">NAME</a>
<a href="LINK" class="small red awesome">NAME</a>
<a href="LINK" class="small orange awesome">NAME</a>
<a href="LINK" class="small yellow awesome">NAME</a>

For Small Buttons

<a href="LINK" class="large awesome">NAME</a>
<a href="LINK" class="large blue awesome">NAME</a>
<a href="LINK" class="large pink awesome">NAME</a>
<a href="LINK" class="large magenta awesome">NAME</a>
<a href="LINK" class="large green awesome">NAME</a>
<a href="LINK" class="large red awesome">NAME</a>
<a href="LINK" class="large orange awesome">NAME</a>
<a href="LINK" class="large yellow awesome">NAME</a>

Replace  Name with your any name.

7. Now save your HTML/Javascript'.

    You are done...

How To Add Cool Social Sharing Widget To Blogger Post

This is also Nice social Bookmark buttons.
This buttons helps you to get more visitors by
sharing your post.Because it large button Earlier
i posted about How to add "Add This" Social
Bookmark Buttons. This is more attractive than it.
In this tutorial also helps you to add this social
bookmark button to below post title and end of the post.

1. Log in to blogger account and Go to Design >> Edit HTML
    (make sure backup your template first)

3. Add check mark in Expand Widget Templates. 

4. Find this tag by using Ctrl+F   <div class='post-footer-line post-footer-line-1'/>

5. Paste below code before <div class='post-footer-line post-footer-line-1'/> code

<b:if cond="data:blog.pageType == &quot;item&quot;">
<style>
.promote_post_bg {
    height: 103px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6sP07VP2jpLv7WL6UlOUkTQJ1w-t8e-Mb8GdPqAfj7Faxj42wrNtPczPmRYSFYlO2vO5Ay9g9FaCcXX0ZTyH_5A5m0RjfuXUro3_xHhjhZ0fvsh6c9jVbfZ-Z_WwMNNkrG-K65pCKOIVj/s1600/sharing-widget.png) 0 -7px no-repeat;
    width: 500px;
    margin-left: 65px;}
.promote_twitter {
    width: 130px;
    height: 38px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 13px;
    text-align: center;} 
.promote_facebook {
    width: 115px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 63px 0 0 28px;
    text-align: center;}
 .promote_google {
    width: 65px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 28px;
    text-align: center;
}
</style>
</b:if>
<div class="promote_post_bg">
<div class="promote_twitter">
<a class="twitter-share-button" data-via="helperblogger" href="https://twitter.com/share">Tweet</a>
<script>
                !
                function (d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (!d.getElementById(id)) {
                        js = d.createElement(s);
                        js.id = id;
                        js.src = "//platform.twitter.com/widgets.js";
                        fjs.parentNode.insertBefore(js, fjs);
                    }
                }(document, "script", "twitter-wjs");
            
</script></div>
<div class="promote_facebook">
<fb:like action="like" colorscheme="light" expr:href="data:post.canonicalUrl" font="verdana" layout="button_count" send="false" show_faces="false"></fb:like>
<div>
<b:if cond="data:post.isFirstPost">
<script>
                        (function (d) {
                            var js, id = 'facebook-jssdk';
                            if (d.getElementById(id)) {
                                return;
                            }
                            js = d.createElement('script');
                            js.id = id;
                            js.async = true;
                            js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
                            d.getElementsByTagName('head')[0].appendChild(js);
                        }(document));
                    
</script>
</b:if></div>
</div>
<div class="promote_google">
<g:plusone annotation="none" size="medium"></g:plusone>
<script type="text/javascript">
                (function () {
                    var po = document.createElement('script');
                    po.type = 'text/javascript';
                    po.async = true;
                    po.src = 'https://apis.google.com/js/plusone.js';
                    var s = document.getElementsByTagName('script')[0];
                    s.parentNode.insertBefore(po, s);
                })();
            
</script></div>
</div>

6. Now save your Template. You are done.

Demo below

Tweet

How To Add Floating Horizontal Share Button For Blogger

This Is also Another Cool another cool tutorial.
You can add floating horizontal bar for blogger.
It include with share buttons.When users will
scroll  down, Horizontal bar will appear on top.
I think this helps you to get share your post and
blog.So,there have lot of social networks to share.
Earlier i post about 4 In 1 Smooth Social
Subscribing Slide Out For Blogger. You can
Follow these steps to add it to your blog.





1. Log in to blogger account and Go to Design >> Edit HTML

2. Find this tag by using Ctrl+F   </head>

3. Paste below code Before </head> tag

<script type="text/javascript">
var addthis_config = {
    bar_show_below : 150
}
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>

4. Again Find this tag by using Ctrl+F   </body>

3. Paste below code Before </body> tag

<div class="addthis_bar addthis_bar_medium">
    <label>Share This Page:</label>
    <div class="addthis_toolbox addthis_default_style addthis_32x32_style">
        <span><a class="addthis_button_preferred_1"></a></span>
        <span><a class="addthis_button_preferred_2"></a></span>
        <span><a class="addthis_button_preferred_3"></a></span>
        <span><a class="addthis_button_preferred_4"></a></span>
        <span><a class="addthis_button_compact"></a></span>
        <span><a class="addthis_counter addthis_bubble_style"></a></span>
    </div>
</div>

7. Now save your template
    you are done.

Cool Css Button With Hover Style For Blogger

This is Cool Css button. It include with cool
hover style.you can add this button any where
in your blog with this code.Follow these steps
to add it to your blog.

Demo

1. Log in to blogger account and Go to Design >> Edit HTML

2. Find this tag by using Ctrl+F    ]]></b:skin>

3. Paste below code Before ]]></b:skin> tag

.hb-buttons{
background-color:#4b3f39;
font-family: 'Verdana', sans-serif;
font-size:12px;
text-decoration:none;
color:#fff;
position:relative;
padding:10px 20px;
padding-right:50px;
background-image: linear-gradient(bottom, rgb(62,51,46) 0%, rgb(101,86,78) 100%);
border-radius: 5px;
box-shadow: inset 0px 1px 0px #9e8d84, 0px 5px 0px 0px #322620, 0px 10px 5px #999;
}

.hb-buttons:active {
top:3px;
background-image: linear-gradient(bottom, rgb(62,51,46) 100%, rgb(101,86,78) 0%);
box-shadow: inset 0px 1px 0px #9e8d84, 0px 2px 0px 0px #322620, 0px 5px 3px #999;
}

.hb-buttons:before {
background-color:#322620;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_LT5RyVc_EjoSp4ShcQWrGLTrSCi6-6OFccoG33JdwBH8oSeMMrv9AC09AdHNBq02H4U5YHFyqey1qJtcfFENOF6aZCMc_e4UsbW3bsOjxDGj_e_ICI3b2xcqxTouBb8Djit_Ei2pH9g/h80/helper-blogger-right-arrow.png);
background-repeat:no-repeat;
background-position:center center;
content:"";
width:20px;
height:20px;
position:absolute;
right:15px;
top:50%;
margin-top:-9px;
border-radius: 50%;
box-shadow: inset 0px 1px 0px #19120f, 0px 1px 0px #827066;
}

.hb-buttons:active::before {
top:50%;
margin-top:-12px;
box-shadow: inset 0px 1px 0px #827066, 0px 3px 0px #19120f, 0px 6px 3px #382e29;
} 

Now you can save your Template.
When you want to add it to your blog. Use Like below

<a href="YOUR LINK " class="hb-buttons">Button name</a>

When you want to add button use above link and.
* Replace YOUR LINK With your URL
*Replace Button name With any name you want.

Done, Cheers.