Home Blog Trick Horizontal bannner Social Media Icons Widget Code

Horizontal bannner Social Media Icons Widget Code

April 19, 2017

Horizontal bannner Social Media Icons Widget Code




Horizontal bannner Social Media Icons Widget Code . Iss Article me Social Icons Widget Code Share  kara Gaya hai . Jisse Aap Aapne Blog ko Cool looking  kar Sakte hai .

Horizontal bannner Social Media Icons Widget Code




Agar Aap Aapne Blog ke Sidebar me Horizontal bannner Social Media Icons Add karna Chahate hai to Niche Giye code ko Bloggler Html Widget me kar dijiye .


NOTE - Icons ki width Size 280px hai Issliye Aapke Blogger ka Sidebar ya footer ka Size Isske liye Comfortable hona chahiye . Nahi to icons fit nahi aayege . 


  • <div id="socialLogin">
  • <button type="button" id="fblogin">
  •                 f&nbsp;&nbsp;&nbsp;<em id="fbname"></em> 
  •                 <span id="fbtext"><a href="https://www.facebook.com/profile.php?id=100010707693867/" target="_blank" class="fblogin">Sign In with Facebook</a>
  • </span></button>
  • <button type="button" id="fglogin">
  •                 f&nbsp;&nbsp;&nbsp;<em id="fgname"></em> 
  •                 <span id="fgtext"><a href="https://m.facebook.com/groups/1730002040610276?" target="_blank" class="fglogin">Join with Facebook Group</a></span>
  • </button>
  •               
  • <button type="button" id="gpluslogin">
  • g+<em id="gpname"></em> 
  • <span id="gptext"><a href="https://plus.google.com/117239690223868549385" target="_blank" class="gpluslogin">Sign In with Google</a></span>
  • </button>
  • <button type="button" id="youlogin">
  •                 y&nbsp;&nbsp;&nbsp;<em id="youname"></em> 
  •                 <span id="youtext"><a href="https://m.youtube.com/channel/UChC1OoafAA94eJkqSpLOQSw" target="_blank" class="youlogin">Sign In with youtube</a></span>
  • </button>
  • <button type="button" id="twtrlogin">
  • T&nbsp;&nbsp;&nbsp;<em id="twtrname"></em> 
  • <span id="twtrtext"><a href="https://twitter.com/KnowlegdeMoney" target="_blank target="_blank"class="twtrlogin">Sign In with Twitter</a></span>
  • </button>
  • </div>
  • <style>/* Social Login Buttons */
  • #loginHead{position:relative;top:0;left:480px;width:500px;color:#FFF;text-align:center;font-size:18px}#socialLogin{position:relative;top:0;left:0;height:200px;width:280px}#socialHead{position:relative;top:0;left:0;width:280px;color:#666;text-align:center;font-size:18px}#fblogin{color:#fff;cursor:pointer;display:block;float:none;top:0;left:0;height:50px;position:relative;text-align:left;text-decoration:none solid #444;text-shadow:#fff 0 1px 0;vertical-align:middle;white-space:nowrap;width:280px;background:rgba(0,0,0,0) -webkit-linear-gradient(#5678bc,#314a7b) repeat scroll 0 0 / auto padding-box border-box;background:rgba(0,0,0,0) linear-gradient(#5678bc,#fff) repeat scroll 0 0 / auto padding-box border-box;border-top:1px solid #314a7b;border-right:1px solid #2a4069;border-bottom:1px solid #2a4069;border-left:1px solid #2a4069;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;font:normal normal 16px/normal 'Helvetica Neue',Helvetica,'?????? Pro W3','Hiragino Kaku Gothic Pro',????,Meiryo,'MS P????',arial,sans-serif;font-size:16px;margin:0;outline:#444 none 0;overflow:hidden;padding:10px 18px}#fbname{background-position:0 0;bottom:0;box-shadow:rgba(0,0,0,0.0470588) 1px 0 0 0;color:#fff;cursor:pointer;display:block;height:48px;left:0;position:absolute;text-align:center;text-decoration:none solid #444;text-shadow:#fff 0 1px 0;top:0;vertical-align:middle;white-space:nowrap;width:50px;align-self:flex-start;background:rgba(255,255,255,0.0784314) no-repeat scroll 0 0 / auto padding-box border-box;border:0 none #444;font:normal normal 16px/normal 'Helvetica Neue',Helvetica,'?????? Pro W3','Hiragino Kaku Gothic Pro',????,Meiryo,'MS P????',arial,sans-serif;outline:#444 none 0}#fbtext{color:#fff;cursor:pointer;display:inline-block;height:17px;text-align:left;text-decoration:none solid #fff;text-shadow:rgba(0,0,0,0.247059) 0 -1px 0;vertical-align:middle;white-space:nowrap;width:150px;align-self:flex-start;border:0 none #fff;font:normal normal bold 16px/normal 'Helvetica Neue',Helvetica,'?????? Pro W3','Hiragino Kaku Gothic Pro',????,Meiryo,'MS P????',arial,sans-serif;margin:-3px 0 0 42px;outline:#fff none 0}#fglogin{color:#fff;cursor:pointer;display:block;float:none;top:10px;left:0;height:50px;position:relative;text-align:left;text-decoration:none solid #444;text-shadow:#fff 0 1px 0;vertical-align:middle;white-space:nowrap;width:280px;background:rgba(0,0,0,0) -webkit-linear-gradient(#5678bc,#314a7b) repeat scroll 0 0 / auto padding-box border-box;background:rgba(0,0,0,0) linear-gradient(#0000cd,#ff0) repeat scroll 0 0 / auto padding-box border-box;border-top:1px solid #314a7b;border-right:1px solid #2a4069;border-bottom:1px solid #2a4069;border-left:1px solid #2a4069;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;font:normal normal 16px/normal 'Helvetica Neue',Helvetica,'?????? Pro W3','Hiragino Kaku Gothic Pro',????,Meiryo,'MS P????',arial,sans-serif;font-size:16px;margin:0;outline:#444 none 0;overflow:hidden;padding:10px 18px}#fgname{background-position:0 0;bottom:0;box-shadow:rgba(0,0,0,0.0470588) 1px 0 0 0;color:#fff;cursor:pointer;display:block;height:48px;left:0;position:absolute;text-align:center;text-decoration:none solid #444;text-shadow:#fff 0 1px 0;top:0;vertical-align:middle;white-space:nowrap;width:50px;align-self:flex-start;background:rgba(255,255,255,0.0784314) no-repeat scroll 0 0 / auto padding-box border-box;border:0 none #444;font:normal normal 16px/normal 'Helvetica Neue',Helvetica,'?????? Pro W3','Hiragino Kaku Gothic Pro',????,Meiryo,'MS P????',arial,sans-serif;outline:#444 none 0}#fgtext{color:#fff;cursor:pointer;display:inline-block;height:17px;text-align:left;text-decoration:none solid #fff;text-shadow:rgba(0,0,0,0.247059) 0 -1px 0;vertical-align:middle;white-space:nowrap;width:150px;align-self:flex-start;border:0 none #fff;font:normal normal bold 16px/normal 'Helvetica Neue',Helvetica,'?????? Pro W3','Hiragino Kaku Gothic Pro',????,Meiryo,'MS P????',arial,sans-serif;margin:-3px 0 0 42px;outline:#fff none 0}#gpluslogin{color:#fff;cursor:pointer;display:block;float:none;top:10px;left:0;height:50px;position:relative;text-align:left;text-decoration:none solid #444;text-shadow:#fff 0 1px 0;vertical-align:middle;white-space:nowrap;width:280px;background-color:#DD4B39;background:-webkit-linear-gradient(#DD4B39,#D14836);background:linear-gradient(#DD4B39,#D14836);border-top:1px solid #e65858;border-right:1px solid #e34242;border-bottom:1px solid #e34242;border-left:1px solid #e34242;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;font:normal normal 16px/normal 'Helvetica Neue',Helvetica,'?????? Pro W3','Hiragino Kaku Gothic Pro',????,Meiryo,'MS P????',arial,sans-serif;font-size:16px;margin:0;outline:#444 none 0;overflow:hidden;padding:10px 18px}#gpname{background-position:0 0;bottom:0;box-shadow:rgba(0,0,0,0.0470588) 1px 0 0 0;color:#fff;cursor:pointer;display:block;height:48px;left:0;position:absolute;text-align:center;text-decoration:none solid #444;text-shadow:#fff 0 1px 0;top:0;vertical-align:middle;white-space:nowrap;width:50px;align-self:flex-start;background:rgba(255,255,255,0.0666667) no-repeat scroll -43px -44px / auto padding-box border-box;border:0 none #444;font:normal normal 16px/normal 'Helvetica Neue',Helvetica,'?????? Pro W3','Hiragino Kaku Gothic Pro',????,Meiryo,'MS P????',arial,sans-serif;outline:#444 none 0}#gptext{color:#fff;cursor:pointer;display:inline-block;height:17px;text-align:left;text-decoration:none solid #fff;text-shadow:rgba(0,0,0,0.247059) 0 -1px 0;vertical-align:middle;white-space:nowrap;width:133px;align-self:flex-start;border:0 none #fff;font:normal normal bold 16px/normal 'Helvetica Neue',Helvetica,'?????? Pro W3','Hiragino Kaku Gothic Pro',????,Meiryo,'MS P????',arial,sans-serif;margin:-3px 0 0 42px;outline:#fff none 0}#youlogin{color:#fff;cursor:pointer;display:block;float:none;top:10px;left:0;height:50px;position:relative;text-align:left;text-decoration:none solid #444;text-shadow:#fff 0 1px 0;vertical-align:middle;white-space:nowrap;width:280px;background:rgba(0,0,0,0) -webkit-linear-gradient(#5678bc,#314a7b) repeat scroll 0 0 / auto padding-box border-box;background:rgba(0,0,0,0) linear-gradient(#ff4500,#314a7b) repeat scroll 0 0 / auto padding-box border-box;border-top:1px solid #314a7b;border-right:1px solid #2a4069;border-bottom:1px solid #2a4069;border-left:1px solid #2a4069;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;font:normal normal 16px/normal 'Helvetica Neue',Helvetica,'?????? Pro W3','Hiragino Kaku Gothic Pro',????,Meiryo,'MS P????',arial,sans-serif;font-size:16px;margin:0;outline:#444 none 0;overflow:hidden;padding:10px 18px}#youname{background-position:0 0;bottom:0;box-shadow:rgba(0,0,0,0.0470588) 1px 0 0 0;color:#fff;cursor:pointer;display:block;height:48px;left:0;position:absolute;text-align:center;text-decoration:none solid #444;text-shadow:#fff 0 1px 0;top:0;vertical-align:middle;white-space:nowrap;width:50px;align-self:flex-start;background:rgba(255,255,255,0.0784314) no-repeat scroll 0 0 / auto padding-box border-box;border:0 none #444;font:normal normal 16px/normal 'Helvetica Neue',Helvetica,'?????? Pro W3','Hiragino Kaku Gothic Pro',????,Meiryo,'MS P????',arial,sans-serif;outline:#444 none 0}#youtext{color:#fff;cursor:pointer;display:inline-block;height:17px;text-align:left;text-decoration:none solid #fff;text-shadow:rgba(0,0,0,0.247059) 0 -1px 0;vertical-align:middle;white-space:nowrap;width:150px;align-self:flex-start;border:0 none #fff;font:normal normal bold 16px/normal 'Helvetica Neue',Helvetica,'?????? Pro W3','Hiragino Kaku Gothic Pro',????,Meiryo,'MS P????',arial,sans-serif;margin:-3px 0 0 42px;outline:#fff none 0}#twtrlogin{color:#fff;cursor:pointer;display:block;float:none;top:10px;left:0;height:50px;position:relative;text-align:left;text-decoration:none solid #444;text-shadow:#fff 0 1px 0;vertical-align:middle;white-space:nowrap;width:280px;background:rgba(0,0,0,0) -webkit-linear-gradient(#5678bc,#314a7b) repeat scroll 0 0 / auto padding-box border-box;background:rgba(0,0,0,0) linear-gradient(#ff0,#314a7b) repeat scroll 0 0 / auto padding-box border-box;border-top:1px solid #314a7b;border-right:1px solid #2a4069;border-bottom:1px solid #2a4069;border-left:1px solid #2a4069;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;font:normal normal 16px/normal 'Helvetica Neue',Helvetica,'?????? Pro W3','Hiragino Kaku Gothic Pro',????,Meiryo,'MS P????',arial,sans-serif;font-size:16px;margin:0;outline:#444 none 0;overflow:hidden;padding:10px 18px}#fbname{background-position:0 0;bottom:0;box-shadow:rgba(0,0,0,0.0470588) 1px 0 0 0;color:#fff;cursor:pointer;display:block;height:48px;left:0;position:absolute;text-align:center;text-decoration:none solid #444;text-shadow:#fff 0 1px 0;top:0;vertical-align:middle;white-space:nowrap;width:50px;align-self:flex-start;background:rgba(255,255,255,0.0784314) no-repeat scroll 0 0 / auto padding-box border-box;border:0 none #444;font:normal normal 16px/normal 'Helvetica Neue',Helvetica,'?????? Pro W3','Hiragino Kaku Gothic Pro',????,Meiryo,'MS P????',arial,sans-serif;outline:#444 none 0}#twtrname{background-position:0 0;bottom:0;box-shadow:rgba(0,0,0,0.0470588) 1px 0 0 0;color:#fff;cursor:pointer;display:block;height:48px;left:0;position:absolute;text-align:center;text-decoration:none solid #444;text-shadow:#fff 0 1px 0;top:0;vertical-align:middle;white-space:nowrap;width:50px;align-self:flex-start;background:rgba(255,255,255,0.0666667) no-repeat scroll -43px -44px / auto padding-box border-box;border:0 none #ff0;font:normal normal 16px/normal 'Helvetica Neue',Helvetica,'?????? Pro W3','Hiragino Kaku Gothic Pro',????,Meiryo,'MS P????',arial,sans-serif;outline:#444 none 0}#twtrtext{color:#fff;cursor:pointer;display:inline-block;height:17px;text-align:left;text-decoration:none solid #fff;text-shadow:rgba(0,0,0,0.247059) 0 -1px 0;vertical-align:middle;white-space:nowrap;width:133px;align-self:flex-start;border:0 none #fff;font:normal normal bold 16px/normal 'Helvetica Neue',Helvetica,'?????? Pro W3','Hiragino Kaku Gothic Pro',????,Meiryo,'MS P????',arial,sans-serif;margin:-3px 0 0 42px;outline:#fff none 0}  </style>


NOTE - Code ke Andar jaha Red Colours  ke font hai Waha Aapko Aapne Socials media link Add karne hai .


  1. your Facebook link
  2. your Facebook Group link
  3. your Google Plus link
  4. your Youtube link
  5. your Twitter link 


Blogger par Iss code ko Html Widget me Add kar dijiye or save kar dijiye . 
Tags :

No comments:

Subscribe to: Post Comments ( Atom )
'; (function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })();
Powered by Blogger.