Monday, February 18, 2013

BloggerMint Style Social Subscribe Widget for Blogger

Bloggermint is a very popular blog with very high traffic and awesome design. Many people try to make their blog look like bloggermint but does not have resources to do it. Today I'll show you How to get BloggerMint style Social Subscribe Widget for Blogger Blogs.

Features

Email Subscribe Form
Social buttons of Facebook, Twitter, RSS
Professional Look

Add Bloggermint Social Widget to Blogger

Installation is very simple and anyone can do it without any problems But still if you find any problems then don't hesitate leaving a comment.

Log in to Blogger
Go to Template > Edit HTML (Backup your Template First)
Now search for ]]></b:skin>
Copy the following code and Paste before ]]></b:skin>

#pbt_subscribe-box {
    float: right;
    width: 300px;
    margin: 0 0 10px
    }

#bleft {
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
    -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 0 25px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.1) inset;
    background: none repeat scroll 0 0 #EEE;
    float: left;
    height: 160px;
    width: 300px;
    border: 1px solid #CCC;
    position: relative;
    border-bottom: 1px solid #BBB
    }

#bleft .icon {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_QE09JLug4f5_aHxdQOmbQ3wmBf1Fki0E1NAg10HOdFBfdS9OR1naFuIOazshpjgnE3pwJj5eAhmXWB0tE1El6o3BV-UwMQYSm74KjS15m_K4Ur6Hu5llBegUe1fFKFMF-AAd9kNOVdQ2/s1600/letter.png) no-repeat scroll center center transparent;
    display: block;
    float: left;
    width: 70px;
    height: 64px;
    margin: 16px;
    }

#bleft .sub-email {
    float: right;
    width: 195px;
    margin: 10px 0 0
    }

#bleft .sub-email h4 {
    color: #000;
    font-family: arial;
    font-size: 20px;
    font-weight: bold;
    margin: 10px 0;
    text-shadow: 0 1px #FFF
    }

#bleft .sub-email p.getposts {
    color: #777;
    font-family: arial;
    font-size: 13px;
    text-shadow: 0 1px 0 #FFF;
    width: 175px
    }

#bleft form {
    float: left;
    margin: 0 0 0 20px
    }

#bleft .sbox {
    -webkit-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) inset;
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) inset;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) inset;
    border: 0 none;
    float: left;
    height: 30px;
    padding: 4px;
    width: 165px;
    border-bottom: 1px solid #CCC
    }

#bleft .go {
    -webkit-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    -webkit-box-shadow: 0 -12px 0 rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 -12px 0 rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 -12px 0 rgba(0, 0, 0, 0.15) inset;
    background: none repeat scroll 0 0 #82B832;
    border: 1px solid #689328;
    color: #FFF;
    float: left;
    font-weight: bold;
    margin: 0 0 0 10px;
    cursor:pointer;
    padding: 5px
    }

#bright {
    -webkit-border-radius: 0 0 10px 10px;
    -moz-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
    background:#EEE;
    background: -moz-linear-gradient(center bottom, #FFF 0%, #EEE 100%) repeat scroll 0 0 transparent;
    background:-webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(255,255,255)),
    color-stop(1, rgb(238,238,238))
);
    border: 1px solid #CCC;
    float: left;
    height: 50px;
    margin: -10px 0 10px;
    width: 300px;
    -webkit-box-shadow: 0 10px 13px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 10px 13px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 10px 13px rgba(0, 0, 0, 0.1) inset
    }

#bright ul {
    float: left;
    list-style: none outside none;
    margin: 20px 0 20px 15px !important;
    padding: 0 !important
    }

#bright ul li {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbK5pGzB9RdsjBH05JZOG1gEiNdQdGXYf9Hr3594kGLm-nldNhGyFuGq9UOe-rIZL1UqKxxmbnzLEbK68UMaOE-sJ-pbIauWSuu_Lb7bvU8lpLgjVgHz9eG0CkxImuOcICMmtyIA2GVfxI/s1600/subs-icons.png) no-repeat;
    float: left;
    margin: 3px 0;
    width: 93px;
    position: relative;
    padding:1px;
    }

#bright ul li a {
    color: #555;
    float: left;
    font-family: arial, helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    margin-left: 25px;
    margin-top: -2px;
    background:0 none;
    text-shadow: 1px 1px #FFF
    }

Now Save Template

Next step is adding the HTML Code

Adding HTML Code

Go to Blogger > Layout
Click on 'Add a Gadget'
Choose HTML/Javascript
Paste the following code inside it

<div id="pbt_subscribe-box"><div
id="bleft"><div
class='icon'> </div><div
class='sub-email'><h4>Subscribe now!</h4><p
class="getposts">Get Our Latest Posts in Your Inbox For Free.</p></div><form
onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?trickyblogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify"> <input
type="email" name="email" class="sbox" placeholder="Your email address here!"> <input
type="hidden" name="uri" value="trickyblogger"> <input
type="hidden" value="en_US" name="loc">  <input
type="submit" value="Subscribe" class='go'></form></div><div
id="bright"><ul><li
style="background-position: 0 -3px;"><a
href='http://feeds.feedburner.com/trickyblogger'>RSS Feed</a></li><li
style="background-position: 0 -24px;"><a
href='http://www.facebook.com/trickyblogger'>Facebook</a></li><li
style="background-position: 0 -45px;"><a
href='http://twitter.com/trickyblogger'>Twitter</a></li></ul></div></div>