Designed by Veethemes.com

New tabbed Social Share , subscribe and connect widget for Blogger

Saturday, April 13, 2013 by Mohan Singh No Comment
Social sharing widget is most important part of blog post because most of blogger want to  improve seo [search engine optimization ] and increase traffic on your blog/website. Social media perform important roll to increase traffic rank and user attraction to your blog. So today I’m create a New tabbed Social Share , subscribe and connect widget for Blogger and give tuts on how to add and use this widget  on blogger. This widget create simply use of css code and html code.





Important features of this widgets

Social share :  In this tab include four section for sharing tools and user comments by user.


  1. Twitter share : this section for share the post on twitter wall.
  2. Facebook share : this section for share the post on facebook wall.
  3. Comment : It’s use for comment moderation for blogger comment and disqus comment (Use for activate comment box).
  4. Google plus share : this section for share the post on facebook wall.

Subscribe : In this tab include three section for subscribe , feeds and faq.


  1. Rss : This section use for go to rss feedburner page.
  2. Newsletter: This section use for subscribe your newsletter of your blog.
  3. Faq : This section use for faq [frequently ask question ]page.
Social Connect : In this tab include four section for social connect [ social page follow , like and youtube subscribe ].


  1. Twitter: This section follow twitter page.
  2. Facebook: This section for like your facebook page.
  3. Youtube: This section use for youtube page.
  4. Google Plus : This section use for connect to google plus page.
How to Add this widget on Blogger 

  • Go To Blogger Dashboard >Template >Edit HTML.
  • Now Search (CTRL + F) for this code: ]]></b:skin>
  • Paste the below code just above ]]></b:skin>

/* dhi social share subscribe and connect widget css code----------------------------------------------- */
.dhi_menu,.dhi_menu ul,.dhi_menu li,.dhi_menu a { margin: 0; padding: 0; border: none; outline: none;}
.dhi_menu { 
 height: 40px; 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: 40px; 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: 6.3px 0; line-height: 28px; 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: #8fde62; }
.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: 1px solid #353539;}.dhi_menu ul li:last-child a { border: none; }.dhi_menu a.twitter { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwsr9P1azUn5KSVMgKCWkhxfag-_F6Stb_J-OeGpmLBVClGhvQPcWd21Y8VNaW8vkQqi2F-Fqg1cJKjihs0uM-twCF5Q6P8NxVGzFdL4FPDR0o_OxaY06qsC1C0VaF99gPMmUpFl2zf20/s1600/03-twitter-20.png) no-repeat 6px center; background-color:#0ba6f7; }.dhi_menu a.comment { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqb02zvDs921NsRpokbrer4aDPH_7XMZpU2qbS111jsK1GMDV0ehMn1oycT9YPr0KGeLvm8cX3W8fNTH8YE3VHkLMEeWj7Y8TRupe8fP9nq5hRz28L97Y9MUxhTakNPVtIoO7hr2QC3zg/s1600/bubble-24-20.png) no-repeat 6px center; background-color:#1950bf; }.dhi_menu a.share { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgACFlADJNsDWSQDuskBqqwROV_R9qV_Zkb2QryhyphenhyphenBMv66qTnldATBvHjCnzcCV8wn1EVGvnXD6b14o5UK9SSs4DphCUqtpPAOOD0LWCwsjaaFv1xDy2fqTj5J_dL7vUdHM8kOhe583t2k/s1600/06-facebook-20.png) no-repeat 6px center; background-color:#3b3c3c; }.dhi_menu a.plus { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtv1G-7PdT3M2xfTTPt4Pwnv1m7weaMVLEGoz7bGXDKAYQNKFVxlo448G0LKW-BPfwvF461fKi775AM4VNFK0urVJrH7adDoOam3oLRE4uPLo-2FBkQRHKT7kQbej9wprvD3ipTbUCymA/s1600/40-google-plus-20.png) no-repeat 6px center; background-color:#dc311b; }
.dhi_menu a.rss { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvXMDDNeQYXOBfsVwFHd29iv1BfXeTi_OUK06S4eTyBQUSRG2Itx34Bh983wgGrs_Jm2TlOMrO2uryfXoyMSB8XC6kmL6XxDng9nwpWWOC0aMTr13Sa3BNC1Sg9UJ7jlLtUzZROng4uXI/s1600/60-rss-20.png) no-repeat 6px center; background-color:#dc311b; }.dhi_menu a.newsletter { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaViAihComUv2aF2lxBKoB16HBs9cJEM-72wBQwiJRa30aLr2MVkOEeWrxHnjMH-6V5q_jULZOQZ50qD0DsnZ6GbD0UIIzL4Ni6kGycIjySGUWYK-Kgc79bgzetE40nZxDs3MqTfpIhSI/s1600/Black_Email.png) no-repeat 6px center; background-color:#3b3c3c; }.dhi_menu a.faq { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8ZT3hUxOzAL7fqtsaYlDCiCx8FZrwrp9Hetgv1aqd_5dHrHh6HebxLAxsEhjcUc7P5moSHy5_66IXkUZmt2whGAar4WQ8X7Ekw1Qtfc9fvk3wXLWHiVvNCb5FGq6ZgwAhotjTIDXP7sI/s1600/question-faq-128.png) no-repeat 6px center; background-color:#1950bf; }
.dhi_menu a.follow { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwsr9P1azUn5KSVMgKCWkhxfag-_F6Stb_J-OeGpmLBVClGhvQPcWd21Y8VNaW8vkQqi2F-Fqg1cJKjihs0uM-twCF5Q6P8NxVGzFdL4FPDR0o_OxaY06qsC1C0VaF99gPMmUpFl2zf20/s1600/03-twitter-20.png) no-repeat 6px center; background-color:#0ba6f7; }.dhi_menu a.fanpage { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgACFlADJNsDWSQDuskBqqwROV_R9qV_Zkb2QryhyphenhyphenBMv66qTnldATBvHjCnzcCV8wn1EVGvnXD6b14o5UK9SSs4DphCUqtpPAOOD0LWCwsjaaFv1xDy2fqTj5J_dL7vUdHM8kOhe583t2k/s1600/06-facebook-20.png) no-repeat 6px center; background-color:#1950bf; }.dhi_menu a.youtube { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb8oIn6cfFda8M9M1u1dLSXWOqQ-a1RRyui41ufRIZ5RVDQZopZhDQFkQfCrmEZgd51nfOirehmdTgqy_F25R3gn27pSlEyP9SUrUEt_t8sldS0Gli6Kh4zwzwgDq3nsPPUT84NKx4wFQ/s1600/18-youtube-20.png) no-repeat 6px center; background-color:#0b6fdf; }.dhi_menu a.google { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtv1G-7PdT3M2xfTTPt4Pwnv1m7weaMVLEGoz7bGXDKAYQNKFVxlo448G0LKW-BPfwvF461fKi775AM4VNFK0urVJrH7adDoOam3oLRE4uPLo-2FBkQRHKT7kQbej9wprvD3ipTbUCymA/s1600/40-google-plus-20.png) no-repeat 6px center; background-color:#dc311b; }
  • Now Search the following code: <div class='post-footer'>
  • just above it, copy and paste the below code :
<!--dhi social share subscribe and connect widget code-->
<ul class='dhi_menu'>
 <li><a href='#'>share &#9660;</a>   <ul>
<li><a class='twitter' data-via='blogsfunda' 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'>plus</a></li>
  </ul>   </li> <li><a href=''>subscribe &#9660;</a>   <ul>    <li><a class='rss' href='http://feeds.feedburner.com/digitalhubinc' target='_blank'>rss</a></li> <li><a class='newsletter' href='http://feedburner.google.com/fb/a/mailverify?uri=DigitalHubInc' 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/digitalhubinc' target='_blank'>follow</a></li>   <li><a class='fanpage' href='http://facebook.com/digitalhubinc' target='_blank'>fanpage</a></li>   <li><a class='youtube' href='https://www.youtube.com/user/Windows8Tech' target='_blank'>youtube</a></li>    <li><a class='google' href='https://plus.google.com/116441114801311321617/' target='_blank'>google</a></li>
  </ul>
 </li>
</ul>
  • Save the template.That's it:)
How to customize this widget 

1. If you want to use for comment moderation for blogger comment and disqus comment (Use for activate comment box).

<a class='comment' href='#comments1' id='cmtbtn'>comment</a>

2. Replace the feedburner id : digitalhubinc

3. Replace the twitter follow id :digitalhubinc

4. Replace the facebook page id : digitalhubinc

5. Replace the google plus page id : 116441114801311321617


"If you like this widget , please reply , share and feel free to use."


ATTENTION: This widget and its coding are solely generated by Ghanshyam Singh. However, anyone can share this widget on his blog until or unless he gives proved credits to Digitalhubinc.com and blogsfunda.com . It’s a warmhearted request from our Team.

Mohan Singh

SUBSCRIBE

Subscribe now to get notified about exclusive offers from Us every Weeks!