All-in-One Social Share, Subscribe & Connect Widget for Blogger


Best Commentator: Apple iPhone 7 Plus (256 GB) WINNER: Michalina Logan
To claim your prize, please send us an email.


all-in-one social subscription widget
Social Medias are the best way to promote your blog at present. And if you Google for a social subscription widget, you may find thousands of widgets all around the web. But I hope you may not seem any tabbed all-in-one social share, comment and connect widget for your Blogspot blog. Im pretty much sure that itll attract your readers to share, subscribe and connect with you through Social Medias. This tabbed widget is created only in pure CSS and HTML code snippets.

As always, you can see a demo screenshot that I named by screening each tab separately. I hope youll be able to understand it within below screenshot itself. Moreover, if you wanna see this widget in action, please checkout our demo blog via this link: http://goo.gl/HdWMb


tabbed social share, subscribe, connect widget for blogger

Please note: This widget includes nofollow tag for external links and dofollow tags for internal links. So you dont have to cope with any penguin update, PageRank flow and even any crawling errors while linking Log In structures or IFrames. Because, Ive experienced the pros and cons of these tags formerly.


 Add this All-in-One Social Widget to your Blog
Due to Bloggers tweak in Blogger template HTML editor, become more advanced for developers. So if youre a newbie Blogger, follow each steps provided below very carefully and in advance, backup your template before you dive into template HTML editor. 

Also make sure to steer clear untrue click on invalid clicks on Format template, Revert changes and Revert widget templates to default buttons, if youre using high customized Blogger template.

  • Go to Blogger Dashboard » Template
  • Backup your Blogger Template before making any changes
  • Click on Edit HTML
  • Expand your Blogger template skin | See how it's - screenshot
  • Press Ctrl + F and search the code shown below

]]></b:skin>

Now copy & paste the below code right above/before ]]></b:skin> [use Ctrl+F to find the code].

/* All-in-one-social share widget by LabStrike----------------------------------------------- */
.dhi_menu,.dhi_menu ul,.dhi_menu li,.dhi_menu a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
.dhi_menu {
    height: 34px;
    width: 304px;
    background: #b8b8bc;
    background: -webkit-linear-gradient(top, #b8b8bc 0%,#38383a 10%);
    background: -moz-linear-gradient(top, #b8b8bc 0%,#38383a 10%);
    background: -o-linear-gradient(top, #b8b8bc 0%,#38383a 10%);
    background: -ms-linear-gradient(top, #b8b8bc 0%,#38383a 10%);
    background: linear-gradient(top, #b8b8bc 0%,#38383a 10%);
}
.dhi_menu:hover {
    height: 34px;
    width: 304px;
    background: #4c4e5a;
    background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 10%);
    background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 10%);
    background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 10%);
    background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 10%);
    background: linear-gradient(top, #4c4e5a 0%,#2c2d33 10%);
}
.dhi_menu li {
    list-style: none;
    float: left;
    display: block;
    height: 40px;
}
.dhi_menu li a {
    display: block;
    padding: 0 14px;
    margin: 6px 0;
    line-height: 25px;
    text-decoration: none;
    border-left: 1px solid #393942;
    border-right: 1px solid #4f5058;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #f3f3f3;
    text-shadow: 1px 1px 1px rgba(0,0,0,.6);
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
}
.dhi_menu li:first-child a {
    border-left: none;
}
.dhi_menu li:last-child a {
    border-right: none;
}
.dhi_menu li:hover > a {
    color: #FFCC00;
}
.dhi_menu ul {
    position: absolute;
    left: 0;
    opacity: 0;
    background: #1f2024;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    -webkit-transition: opacity .25s ease .1s;
    -moz-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
}
.dhi_menu li:hover > ul {
    opacity: 1;
}
.dhi_menu ul li {
    height: 0;
    overflow: hidden;
    padding: 0;
    -webkit-transition: height .25s ease .1s;
    -moz-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
}
.dhi_menu li:hover > ul li {
    height: 36px;
    overflow: hidden;
    padding: 0;
}
.dhi_menu ul li a {
    width: 75px;
    padding: 4px 0 4px 40px;
    margin: 0;
    border: none;
    border-bottom: 0px solid #353539;
}
.dhi_menu ul li:last-child a {
    border: none;
}
.dhi_menu a.twitter {
    background: url(http://1.bp.blogspot.com/-wzEBGWKeZU4/UV8inczouBI/AAAAAAAABUs/wBzqqtU7bic/s1600/03-twitter-20.png) no-repeat 6px center;
    background-color: #0ba6f7;
}
.dhi_menu a.comment {
    background: url(http://3.bp.blogspot.com/-uFd2iWN1pH8/UV8ippwVBsI/AAAAAAAABVc/AEkvcrJD-lI/s1600/bubble-24-20.png) no-repeat 6px center;
    background-color: #999999;
}
.dhi_menu a.share {
    background: url(http://4.bp.blogspot.com/-seFPyokr-r0/UV8inXo3xfI/AAAAAAAABU0/yi_NpXThs3g/s1600/06-facebook-20.png) no-repeat 6px center;
    background-color: #003366;
}
.dhi_menu a.plus {
    background: url(http://3.bp.blogspot.com/-u4-khRFgegA/UV8ioVy1XlI/AAAAAAAABVE/akdLtl9TaPg/s1600/40-google-plus-20.png) no-repeat 6px center;
    background-color: #dc311b;
}
.dhi_menu a.rss {
    background: url(http://4.bp.blogspot.com/-NLIejdClsKM/UV8ioW74__I/AAAAAAAABVI/Bci6hRET2hg/s1600/60-rss-20.png) no-repeat 6px center;
    background-color: #FF6600;
}
.dhi_menu a.newsletter {
    background: url(http://3.bp.blogspot.com/-qMK337O8X50/UV8iotjSeCI/AAAAAAAABVQ/C6h5DlEq5Os/s1600/Black_Email.png) no-repeat 6px center;
    background-color: #3b3c3c;
}
.dhi_menu a.faq {
    background: url(http://3.bp.blogspot.com/-fdquoSfUK74/UV8isjc9lVI/AAAAAAAABVk/Cghj6GrqX4Y/s1600/question-faq-128.png) no-repeat 6px center;
    background-color: #CDBFAC;
}
.dhi_menu a.follow {
    background: url(http://1.bp.blogspot.com/-wzEBGWKeZU4/UV8inczouBI/AAAAAAAABUs/wBzqqtU7bic/s1600/03-twitter-20.png) no-repeat 6px center;
    background-color: #0ba6f7;
}
.dhi_menu a.fanpage {
    background: url(http://4.bp.blogspot.com/-seFPyokr-r0/UV8inXo3xfI/AAAAAAAABU0/yi_NpXThs3g/s1600/06-facebook-20.png) no-repeat 6px center;
    background-color: #1950bf;
}
.dhi_menu a.youtube {
    background: url(http://2.bp.blogspot.com/-4QNq2BrfTaA/UV8inTMhcZI/AAAAAAAABUw/nOtg0NV3EC4/s1600/18-youtube-20.png) no-repeat 6px center;
    background-color: #880000;
}
.dhi_menu a.google {
    background: url(http://3.bp.blogspot.com/-u4-khRFgegA/UV8ioVy1XlI/AAAAAAAABVE/akdLtl9TaPg/s1600/40-google-plus-20.png) no-repeat 6px center;
    background-color: #dc311b;
}

Important: You can easily fiddle with the above CSS code snippet to change the button text, font, background color, height & width and more, only if you know a little bit of CSS. But, if you cant, never hesitate to mention your valuable needs via comment.

Once more press Ctrl+F and search for <div class='post-footer'> then copy & paste the below code just above/before the searched code snippet. Place the code given below as a plain text in your Blogger template.

<ul class='dhi_menu'>
<li>    <a href='#'>
Share &#9660;
</a> <ul> <li>
<a class='twitter' data-via='labstrike' expr:href='&quot;
http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot;
+ data:post.url ' rel='nofollow' target='_blank' title='Tweet This!'>Twitter</a>
</li> <li>
<a class='share' expr:href='&quot;http://www.facebook.com/share.php?
v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; 
+ data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,
&apos;toolbar=0,status=0,width=626,height=436&apos;);
return false;' rel='nofollow' target='_blank' title='Share this on Facebook'>Share</a>
</li> <li>
<a class='comment' href='#comments1' id='cmtbtn'>Comment</a>
</li> <li>
<a class='plus' expr:href='&quot;https://plus.google.com/share?url=&quot; 
+ data:post.url + &quot;&amp;imageurl=&quot;' 
rel='nofollow' target='_blank' title='Post on GoogleBuzz'> Google+</a>
</li> </ul> </li> <li>
<a href=''>Subscribe &#9660;
</a> <ul> <li>
<a class='rss' href='http://feeds.feedburner.com/xxxxxxx' target='_blank'>RSS</a>
</li> <li>
<a class='newsletter' href='http://feedburner.google.com/fb/a/mailverify?uri=xxxxxxx'
target='_blank'>Newsletter</a>
</li> <li> 
<a class='faq' href='#faq' target='_blank'>FAQ</a>
</li> </ul> </li> <li>
<a href='#'>Connect &#9660;
</a> <ul> <li>
<a class='follow' href='http://twitter.com/xxxxxxx' target='_blank'>Follow</a>
</li> <li>
<a class='fanpage' href='http://facebook.com/xxxxxxx' target='_blank'>Fanpage</a>
</li> <li>
<a class='youtube' href='https://www.youtube.com/user/xxxxxxx' target='_blank'>YouTube</a>
 </li> <li>
<a class='google' href='https://plus.google.com/xxxxxxx/' target='_blank'>Google+</a>
</li> </ul> </li> </ul>

Customization: Replace all your social profile link URLs including Google+ ID [replace all xxxxxxx] in the li with your own linkage. If youre not using comment moderation in either Blogger or Disqus comments, remove the line highlighted in line no: line no: 15.

Also see: Add Fast Loading Email Subscription Widget in Blogger

Preview (able to see within same window itself) of your Blogger template, unless any error error occurred, if youre satisfied, scarcely click on Save template and youve added the all-in-one social widget excellently. Were hoping your feedback and sharing. Thanks...!!!
Resource: Digital Hub Inc.