Advertisment

June 19, 2016

Sleek Social Media Sharing Buttons With Css3 Tool Tips


Sleek Social Media Sharing Buttons With Css3 Tool Tips


Hello Friendz ! My name is Mehwish Hayat .today I have come up with one of the beautiful, sleek and most used social sharing widget with tool tip effect on mouse hover for blogger blogs.

I’m not going to eat your head by giving brief introduction to this widget and I will judge the rating of this widget in a single word saying ‘Mind Blowing‘. 

The live demo of this widget is already available at the bottom of my blog posts and kindly take a minute to share my blog posts with your social friends if you found any of my blog posts real helpful.



  • Part # 1
Go to Blogger dashboard –> Template –> Edit Html (Tick Expand widget template option).
  • Part # 2

Find for ]]></b:skin> tag and place the following peace of code just above it.
/* www.sayyadgraphic1.blogspot.com */
ul.BTbiz-social {list-style:none;display:inline-block;margin:10px auto;padding:2px;}ul. BTbiz -social li {display:inline;float:left;background-repeat:no-repeat;}ul. BTbiz -social li a {display:block;width:50px;height:50px;padding-right:10px;position:relative;text-decoration:none;}ul. BTbiz -social li a strong {font-weight:400;position:absolute;left:20px;top:-1px;color:#fff;z-index:9999;text-shadow:1px 1px 0 rgba(0,0,0,0.75);background-color:rgba(0,0,0,0.7);-moz-border-radius:3px;-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);-webkit-border-radius:3px;-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);border-radius:3px;box-shadow:0 0 5px rgba(0,0,0,0.5);padding:3px;}ul. BTbiz -social li.TBI-facebook {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCTklnbtYRia_f5RP0ZmjnqusLc8PSjyMPjAuWH09A8e0yb1f5UGbjE4OQp_Whz07ZFPG54IAyhUYgHk1se_M62VO4KJ-d2ABPPtW4eTg5UByeWa7x81wzKcTQbgrd1W_aaw6xRg2c8VE/s50/facebook.png);}ul. BTbiz -social li.TBI-twitter {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjZErPFIbldjsW8DDuomfO8HUKz98nnE-_ozuW8vZwl7YTK2nc1Y1soQf8Z8ZXftqbwBTUiYyar6qNqeAyoZDPTP94B-uPUpaNzlzoM8ocT3IbMQI_diPRRtAAtq4MkbZ60c3nSqL4K2U/s50/twitter.png);}ul. BTbiz -social li.TBI-googleplus {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb8g5qWeZY-XJerljjfZOt74heRMv8IG0bfrkfEPJbaSJHjWRWeccyGiUeeXYsSIfbEUrXOgvyfrVRQvg20wAhGtm2oT7lUERP5Ypt7f4DUlogxjSdg5Xb0g3Q4DCJOuGxZVK5uF2ZboE/s50/google%252B.png);}ul li. BTbiz -pinterest {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCwQppR9glcVvu-w_8zrJ8E4INp6Cq4aENYWp9U1tCtGDEKwDLC87TMA55SOJLLe4ZORE3jVEkhoRKey2ASsKYBomr9zDLuuzCJkbvj7QlvjDv1p2TtXIWkkuewpsXk7lZNDxc0uj60Qo/s50/pinterest.png);}ul. BTbiz -social li.TBI-stumbleupon {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgph3iBKto9LXMF3mNGANRKTmAekBlUXyQT8w5OHvF1H1HL1jKe687FVttfwb8_ivfxpRzZ8yVrwWRwAUBeH5LnOFbMBeqobTyCSjF7-L2sl_fcXOnWRHytUP92t4ok_N_8Ss6Pm4AbUV8/s50/stumbleupon.png);}ul. BTbiz -social li.TBI-delicious {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHHu6hWjgNC35BH8W-DH1GioPGrURXw2vzuRqQUnr3fjs_hH4QuqBpp6l8G85d6MB3Q9-tWidldKgjIqL3SrM45tn2VAvXnRrRyyB7Oyi9BruVd4Ak2sYJ29dhnMdKwqhxcVUweC5m-vg/s50/delicious.png);}ul. BTbiz -social li.TBI-linkedin {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy7Bf9tmpE655n049GsMWVjG_L-XxJE7COgWmDWHecx9WfUh7QCl3ry32MHGR8BWgcOD6V9vzmKwOmx3yX102buz5x7H0y5W7-7J47gn9du8kLr3cvk1vF-EGTlN0WR_nwb9Yu-PAJ4Es/s50/linkedin.png);}ul. BTbiz -social li.TBI-reddit {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxqomVylXtl8lcc9wxRCwHkUKoC0yv3XbpMXVdaEV1AGUumZRclKI-yn48dWg1-pJc5Zt96thujTAHalGS_Kgp-CngKWhgYH50Fyk4pOmRFwLCaTtLmF7UcTtk-Y8lwN7j0RQ_yX4dQfs/s50/reddit.png);}ul. BTbiz -social li.TBI-technorati {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDVKVedTuwQ6wpaVsxY3SkEZZ9R2t-CAtqFpCFJe4e1yPHDDqdO2xgOrg_U7Dv3udZ9CGzE2Q6lTzr8fK7mMdbTeoZsqmZVFp5ROFysUmEqG3T66pSk1AHeT1S1D8kwhF5MReaVPiphSQ/s1600/technorati.png);}# BTbiz -cssanimation:hover li {opacity:0.2;}# BTbiz -cssanimation li {-webkit-transition-property:opacity;-webkit-transition-duration:500ms;-moz-transition-property:opacity;-moz-transition-duration:500ms;padding:2px;}# BTbiz -cssanimation li a strong {opacity:0;-webkit-transition-property:opacity, top;-webkit-transition-duration:300ms;-moz-transition-property:opacity, top;-moz-transition-duration:300ms;}# BTbiz -cssanimation li:hover {opacity:1;}# BTbiz -cssanimation li:hover a strong {opacity:1;top:-10px;}

Sleek Social media sharer widget code

  • Part # 3
Now find for <data:post.body/> and place the following peace of code just below it.


/*www.sayyadgraphic1.blogspot.com*/<b:if cond=’data:blog.pageType == &quot;item&quot;’><div style=’font-size: 22px;’><b>You Like It!? Then kindly share with your Friends.</b></div> <ul class=’BTBIZ-social’ id=’BTBIZ-cssanimation’> <li class=’BTBIZ-facebook’> <a 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’><strong>Facebook</strong></a> </li> <li class=’BTBIZ-twitter’> <a expr:href=’&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; — &quot; + data:post.url ‘ rel=’nofollow’ target=’_blank’><strong>Twitter</strong></a> </li> <li class=’BTBIZ-googleplus’><a expr:href=’&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url’ onclick=’window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;’ rel=’nofollow’ target=’_blank’><strong>Google+</strong></a> </li> <li class=’BTBIZ-pinterest’><a href=’javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute (&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());’ rel=’nofollow’ target=’_blank’><strong>Pinterest</strong></a> </li> <li class=’BTBIZ-stumbleupon’> <a expr:href=’&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ‘ rel=’nofollow’ target=’_blank’><strong>StumbleUpon</strong></a> </li> <li class=’BTBIZ-delicious’> <a expr:href=’&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ‘ rel=’nofollow’ target=’_blank’><strong>Delicious</strong></a> </li> <li class=’BTBIZ-linkedin’> <a expr:href=’&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;’ rel=’nofollow’ target=’_blank’><strong>LinkedIn</strong></a> </li><li class=’BTBIZ-reddit’> <a expr:href=’&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ‘ rel=’nofollow’><strong>Reddit</strong></a> </li> <li class=’BTBIZ-technorati’> <a expr:href=’&quot;http://technorati.com/faves?add=&quot; + data:post.url ‘ rel=’nofollow’ target=’_blank’><strong>Technorati</strong></a> </li> </ul> </b:if>

  • Part # 4
4. Save the Template.
  • Note
As this is a social media sharer widget, there is no part of adding your social media profile links here. I reminded this because few bloggers previously asked Me about adding their social media profile links in a sharer widget. This widget buttons shares the blog post which the user is sharing from.

No comments:
Write comments

Thank you for getting in touch!
We appreciate you contacting us about [Contact Reason]. We try to respond as soon as possible, so one of our Customer Service colleagues will get back to you within a few hours.
Have a great day ahead!

About Owner


Sayyad Miskeen is a 3D Modeler , Programmer, web and Game developer, SEO Consultant and Online Mentor who has been working since 2011 if you want to know more about him then Please Click Here. He has been awarded Best Graphics Designer in 2016 at Islamabad International Design Award Seminars.

About My Father


My father name is Muhammad Miskeen. He is born on 1957.He is a senior Teacher at BISE Rawalpindi.he is Joined his Duty as a art & Drawing Teacher in G.H.S.S Ausia Rawalpindi (12-08-1976) 
Qualifaction: 
carer O'level in G.H.S.S
Intermediate And Graduation in Art & Drawing + Statistics + Economics {1974 - A.I.O.U}

Advertisment

Total Pageviews in this Week

Best Post of The Weak

© 2013-21 Sayyad Graphics. Designed by Sayyad Miskeen & Distributed by sayyadgraphic1.blogspot.com