Box Social Media Plugin for Blogger

Hai Friends! Today I'm going to share a new social media plugin for the blogger. This plugin helps you to serve your social media links in an attractive look on your blogger sidebar. 

For those, who want to try this plugin make sure to take a look at this plugin by clicking on the below demo button.

LIVE DEMO

Now if you like it and want to install it on your own blog then, simply follow the below simple steps and install it without any problem.

At the first, go to the blogger dashboard, Go to the "Template" section and then click on the "Edit Html" button.

This widget uses font Awesome , There for add the following CSS link above </head> tag:

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

Then copy and paste the below code before ]]></b:skin> tag:

/* Social Media Box Widget */.sidebarbox-info h4{background:transparent;position:relative;padding:0;margin:0;border:0;text-align:center;font-size:120%;}.sidebarbox-img{position:relative;max-height:140px;overflow:hidden}.sidebarbox-img img {width:100%;transition:all .6s;}.sidebarbox-img:hover img{transform:scale(1.2) rotate(-10deg)}.sidebarbox-img:before{content:'';background:rgba(0,0,0,0.3);position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;transition:all .3s}.sidebarbox-img:hover:before{background:rgba(0,0,0,0.6);}.aboutfloat-img{width:55%;position:absolute;top:35%;bottom:35%;left:22.5%;z-index:3}.sidebarbox-float{text-align:center;display:table;width:100%;height:100%}.sidebarbox-float a{background:transparent;color:#fff;padding:8px 14px;z-index:2;display:table-cell;width:100%;font-size:90%;text-transform:uppercase;vertical-align:middle;border:2px solid #fefefe;border-radius:3px;transition:all .3s}.sidebarbox-float:hover a{background:#e74c3c;color:#fff;border-color:transparent;}.sidebarbox-float a i{font-weight:normal;margin:0 5px 0 0}.sidebarbox-wrpicon{display:block;margin:15px auto;position:relative;}.sidebarbox-wrpicon .extender{width:100%;display:block;}.extender{text-align:center;font-size:16px}.extender .sidebarbox-icon{display:inline-block;border:0;margin:0;padding:0;width:32%;}.extender .sidebarbox-icon a{background:#ccc;display:inline-block;font-weight:400;color:#fff;padding:0 12px;line-height:32px;border-radius:3px;font-size:12px;width:70%;}.extender .sidebarbox-icon i{font-family:fontawesome;margin:0 3px 0 0}.sidebarbox-icon.fbl a{background:#3b5998}.sidebarbox-icon.twitt a{background:#19bfe5}.sidebarbox-icon.crcl a{background:#d64136}.sidebarbox-icon.fbl a:hover,.sidebarbox-icon.twitt a:hover,.sidebarbox-icon.crcl a:hover{background:#404040}.extender .sidebarbox-icon:hover a,.extender .sidebarbox-icon a:hover{color:#fff;}.sidebarbox-info{margin:10px 0 0 0;font-size:13px;text-align:center;}.sidebarbox-info p{margin:0px 0}.sidebarbox-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#444;font-weight:700;border-bottom:2px solid #e73138;padding:5px;}

Now go to the "Layout" section. Click on the add a widget option. (According to your need). Select Html/JavaScript from the popup menu. Add the below Html code in the Html/javascript box.

<div class='sidebarbox-img'>
        <img class="img-responsive" height="auto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6_EGbFGDlcLuMPwSSjmnHSfs9RUogfjRnAtOU5-KOFyIiqe96CIGRWFTzrluWhCGOEAPf87EJ8LS-_AH3a2KAxEvjDL9NXJWHIuUcmbLEelW6pEJ5qb2K8mo3n0VyMFTf2eEGqIpY43M/s720/synch-social-channel-with-email.jpg" width="300" />
        <div class='aboutfloat-img'><span class='sidebarbox-float'><a href='#' rel='nofollow' target='_blank' title='Join Our Site'><i class='fa fa-user'></i> Join Our Site</a></span></div>
    </div>
    <div class='sidebarbox-info'>
      <h4>Smartpik</h4>
      <p>Sharing Techniques</p>
    </div>
    <div class='sidebarbox-wrpicon'>
      <ul class='extender'>
        <li class='sidebarbox-icon fbl'>
          <a href='https://www.facebook.com/smartpik.in/' target='_blank' title='Follow Our Facebook'><i class='fa fa-facebook fa-fw'></i> Like</a>
        </li>
        <li class='sidebarbox-icon twitt'>
          <a href='https://twitter.com/smartpik_in' target='_blank' title='Follow Our Twitter'><i class='fa fa-twitter fa-fw'></i> Follow</a>
        </li>
        <li class='sidebarbox-icon crcl'>
          <a href='https://plus.google.com/u/0/+Smartpikin/' rel='nofollow' target='_blank' title='Follow Our Google+'><i class='fa fa-google-plus fa-fw'></i> Circle</a>
        </li>
      </ul>
  </div>

Then replace the highlighted codes with your picture, blog title, description, and links to your social media accounts.

That's it! I hope you like this plugin! Stay tuned for more cool plugins like this! Thanks for reading!