Monday, 19 January 2015

Another Classic Social Widget for Blogger

Classic Social Widget for Blogger

Tips4tricx is the responsive blogger template specially designed for tech, magazine, personal, and news blogs. It has user friendly interface by which the readers will enjoy the easy navigation as it as also important from many sides. It has two main columns, main content column and right sidebar column and it also has four column footer widgets where you can place about us, social join.
Another Classic Social Widget for Blogger

It’s always necessary to use such widgets and plugins on our blogs which may bring positive affect to our blogs. There are many widgets which are recommend by pros, experts to use and social subscription widgets are also one of them. There are a lot of social widgets and plugins which we can use easily on our blogs but it’s also important to choose the better widget which may really let us know that there is a widget which is really working like increasing social fans, subscribers and more. Today we’re going to share social subscription widget which can really help you to obtain high number of social followers, fans and subscribers.
This is the professional, unique, attractive and well designed social subscription widget which is built with simple HTML and CSS3 for Blogger blogs. If you’re looking for the best widget which can help you to gather good number of subscribers then we’ll highly recommend you to use it because it has attractive layout which will bring people to get in touch with your brand on several social networks. It will simply fit in the sidebar of your blog and it’s best place for it by keeping eye on several points. This widget consists of several social buttons which are Facebook page like, Twitter follow, Google Plus Follow, Pinterest Follow and Feedburner Email Subscription. So, if you want to increase subscribers on all these networks then you should surely use this widget we does not require anything back for it and it’s totally free to use lifetime.

Tutorial

  • Go To Blogger >> Dashboard >> Layout >> Add a WIdget
  • Choose “HTML/JavaScript”
  • Copy The Following Code and Paste It In The “Content” Box.
<div id="socialsubwidget">
            <div class="heading">
                        <h4><span style='font-weight:300;'>Want To Get </span><b>Hot Updates?</b></h4>
                        <p>
                                    Follow Us On Your Favourite Social Networking Site To Start Getting Notified!
                        </p>
            </div>
            <div class='fb-likebox'>
                        <iframe src="//www.facebook.com/plugins/like.php?href=http://facebook.com/FACEBOOKUSERMAE&amp;send=false&amp;layout=standard&amp; width=250px&amp;show_faces=false&amp;action=like&amp;colorscheme=dark&amp; font&amp;height=100px&amp;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; color:whitesmoke;" width='250px' height='50px'>
                        </iframe>
            </div>
            <div class='twitter-follow'>
                        <iframe title="" style="width: 300px; height: 20px;" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp; align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp; lang=en&amp;link_color=&amp;screen_name=TWITTERUSERNAME&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no">
                        </iframe>
            </div>
            <div class='gplus-follow'>
                        <!-- Place this tag in your head or just before your close body tag. -->
                        <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
                        <!-- Place this tag where you want the widget to render. -->
                        <div data-width="298" data-href="//plus.google.com/G+ ID OR USERNAME" data-theme="dark" data-layout="landscape" data-rel="publisher">
                        </div>
            </div>
            <div class='pinterest-follow'>
                        <a href="http://pinterest.com/PINTERESTUSERNAME/"><img src="http://passets-cdn.pinterest.com/images/about/buttons/follow-me-on-pinterest-button.png" width="169" height="28" alt="Follow Me on Pinterest"/></a>
            </div>
            <div class='feedburner-emailsubs'>
                        <form action='http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNERUSERNAME' method='post' target='_new'>
                                    <input class='feedburner-email' name='email' placeholder='Your Email Address' type='text'/>
                                    <input class='feedburner-button' type='submit' value='Sign Up!'/>
                        </form>
            </div>
            <style>
.fb-likebox {padding:10px; background:#3b5998; height:25px;}
.twitter-follow {padding:10px;background:#3a92c8;height:20px; }
.gplus-follow {margin-left:-1px;}
.pinterest-follow {padding:10px;background:#cb2027;height:25px;margin-top:-10px;}
.linkedin-follow {padding:10px; background:#069; height:25px;}
.feedburner-emailsubs {padding:10px; background:#f39c12;}
.feedburner-email {width: 66%;
height: 20px;
padding: 8px;
background-color: white;
color: black;
border-radius: 5px 5px 5px 5px;
font-family: open sans;
outline: none;
border: 1px solid #F7B276;}
.feedburner-button {padding: 8px 10px;
vertical-align: top;
margin: auto;
margin-left: -7px;
text-align: left;
width: auto;
-moz-border-radius-topright: 5px !important;
-moz-border-radius-topleft: 0 !important;
-webkit-border-top-right-radius: 5px !important;
-webkit-border-top-left-radius: 0 !important;
-moz-border-radius-bottomright: 5px !important;
-moz-border-radius-bottomleft: 0 !important;
-webkit-border-bottom-right-radius: 5px !important;
-webkit-border-bottom-left-radius: 0 !important;
background: #95a5a6;
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #95a5a6),color-stop(1, #7f8c8d));
background-image: -moz-gradient(linear,left bottom,left top,color-stop(0, #95a5a6),color-stop(1, #7f8c8d));
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
border-width: 1px;
border-style: solid;
border-color: #bdc3c7;
font: 14px open sans;
color: #fff;
cursor: pointer;
font-weight: 600;
text-shadow: 0 1px 0 rgba(0,0,0,.2);
transition:background-image 400ms;
-webkit-transition:background-image 400ms;
-moz-transition:background-image 400ms;
}

.feedburner-button:hover {
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #7f8c8d),color-stop(1, #95a5a6));
}
#socialsubwidget {
    float: left;
    width: 296px;
    background: #95a5a6;
    border: 2px solid #7f8c8d;
    font-family:open sans;
}
#socialsubwidget .heading {
    height: 110px;
    padding: 5px;
}
#socialsubwidget .heading p {
    text-shadow: none;
    font-size: 14px;
    padding: 0px;
    margin: 0px;
    line-height: 20px;
    color: #fff;
    margin-top: 5px;
    text-align: center;
}
#socialsubwidget .heading h4 {
    text-shadow: none;
    font-size: 21px;
    margin: 0px;
    padding: 0px;
    text-align: center;
    line-height: 25px;
    color: #fff;
    padding-top: 15px;
    padding-bottom: 10px;
}
            </style>
</div>
  • Ø Replace FACEBOOKUSERMAE with your Facebook page username.
  • Ø Replace TWITTERUSERNAME with your Twitter username.
  • Ø Replace G+ ID OR USERNAME with your Google+ ID or Username.
  • Ø Replace PINTERESTUSERNAME with your Pinterest Username.
  • Ø Replace FEEDBURNERUSERNAME with your Feed burner username.
  • Ø Click Save Button.
  • Ø That’s it.
Final Words
So friends, that was our social subscription widget which will bring more fans to your 

Don't Remove Footer Link

If you love, like or Respect Tips4tricx then Please don't remove footer credits, we are new in Templates markets we need some credits from you. Thank you!

Previous Post
Next Post

post written by: