Friday, July 10, 2015

Mashable Mashshare Social Media Sharing Widget For Blogger V2

3
Mashable Mashshare Social Media Sharing Widget For Blogger V2
Step 1 : Navigating (?)
    Go to Blogger
    Template
    Backup your Template
    Press Edit HTML

Step 2 : Adding the Code
    Find (ctrl+f) <b:skin>
    Copy the following code and paste it before <b:skin>

<link href='http://fonts.googleapis.com/css?family=Raleway%3A400%2C800%2C700&amp;ver=1.0' id='googlewebfont-css' media='all' rel='stylesheet' type='text/css'/>

    Find (ctrl+f) ]]></b:skin>
    Copy the following code and paste it before ]]></b:skin>

#sharrrrre{
float:left;
margin: -10px 5px 0 0;
padding: 15px 15px 15px 0;
background: url(http://3.bp.blogspot.com/-TguUlFiODMQ/U_Ex40j2nPI/AAAAAAAAHDQ/UPbx0X7po-U/s1600/diagonal.png) no-repeat 100% 50%;
);
}
.sharrre .count {
  color:#7fc04c;
  font-weight: bold;
  display:block;
  font-size:50px;
  position:relative;
  text-align:center;
  text-decoration:none;
  width:100px;
  line-height: 40px;
  padding: 0;
}
.sharrre .share {
  color:#666;
  display:block;
  font-size:10px;
  height:10px;
  text-align:center;
  text-decoration:none;
  width:100px;
  padding: 0;
}
@import url(http://fonts.googleapis.com/css?family=Raleway:600);
.social-div a{
text-decoration:none!important;
display:inline-block;
}
.social-div a img{
display:inline-block;
width: auto;
height: auto;
margin: 0 8px 0 -5px;
vertical-align:middle
}
#socialshare{
display:inline-block;
vertical-align: middle;
text-align: center;
color:#ffffff;
font-size:16px;
padding:14px 20px 15px 20px;
text-decoration:none;
font-family:Raleway;
margin-right:5px;
-webkit-font-smoothing:antialiased;
-webkit-text-rendering:optimizeLegibility;
}
#socialshare:active {
padding: 15px 20px 15px 20px;
margin-bottom: -1px;
}
#socialshare:hover{
opacity: 0.9;
}
.share-toggle{
position:relative;
display:inline-block;
cursor:pointer;
vertical-align:middle;
text-align:center;
color:#fff;
}
.share-toggle a{
color:#fff;
text-decoration:none;
}
.social-div{
vertical-align:middle;
}
#expand-social{
display:inline-block;
position:relative;
vertical-align:middle;
height: 53px;
}
#social-expand{
display:inline-block;
vertical-align:middle;
position:relative;
top:0px;
left:0px;
}
.expand {
box-shadow: 0px 3px 0px 0px #c5bebe;
background:#cdcccc;
position: relative;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 200%;
}
.expand:active {
box-shadow: 0px 1px 0px 0px #c5bebe;
height: 41px;
margin-bottom:-1px;
}
.expand:hover {
opacity:0.9;
}
.expand-minus{
display:none;
}
.socialshare2 {
width:50px;
height:50px;
display:inline-block;
}
.socialshare2:active {
height:51px;
margin-bottom:-1px;
}
.socialshare2:hover {
opacity:0.9;
}
.mbafacebook{
background:#507bbf;
box-shadow: 0px 3px 0px 0px #4671b5;
}
.mbafacebook:active{
box-shadow: 0px 1px 0px 0px #4671b5;
}
.mbatwitter{
background:#63cef2;
box-shadow: 0px 3px 0px 0px #57c4e9;
}
.mbatwitter:active{
box-shadow: 0px 1px 0px 0px #57c4e9;
}
.mbagoogle-plus{
box-shadow: 0px 3px 0px 0px #43454c;
background:#4d4f54 url(http://2.bp.blogspot.com/-JUU52V5MYVo/U_A3giibA_I/AAAAAAAAHCM/SzeQhUA-Bxo/s20/g%2B.png) no-repeat center;
}
.mbagoogle-plus:active{
box-shadow: 0px 1px 0px 0px #43454c;
}
.mbalinkedin {
box-shadow: 0px 3px 0px 0px #12a4db;
background:#1aace3 url(http://4.bp.blogspot.com/-QMNlNpoulTE/U_BXjWZny7I/AAAAAAAAHCc/-EfrIknqbWo/s20/in.png) no-repeat center;
}
.mbalinkedin:active{
box-shadow: 0px 1px 0px 0px #12a4db;
}

.mbapinterest{
box-shadow: 0px 3px 0px 0px #e85756;
background:#f16261 url(http://4.bp.blogspot.com/-vOmei_tL7Jk/U_BY4sC_jYI/AAAAAAAAHCo/EkqbJL7hvJg/s20/pinterest.png) no-repeat center;
}
.mbapinterest:active{
box-shadow: 0px 1px 0px 0px #e85756;
}
.mbastumbleupon{
box-shadow: 0px 3px 0px 0px #f5a635;
background:#fdaf40 url(http://3.bp.blogspot.com/-VtXmJrq9NWo/U_BZpBmH5gI/AAAAAAAAHCw/2B-pqn5B3Wk/s20/stumble.png) no-repeat center;
}
.mbastumbleupon:active{
box-shadow: 0px 1px 0px 0px #f5a635;
}
    Find (ctrl+f) <div class='post-footer-line post-footer-line-1'>
    Copy the following code and paste it before <div class='post-footer-line post-footer-line-1'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='social-div'>
<div id='sharrrrre'>
  <div data-title='SHARES' id='shareme'/>
</div>
<div style='display: inline-block; margin-bottom: 20px;'>
 <a class='mbafacebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' id='socialshare' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
 <img src='https://googledrive.com/host/0B8D3MQmcZTyvN1kzV3lfS2h6NW8'/>
 Share on Facebook
 </a>
 <a class='mbatwitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' id='socialshare' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
 <img src='https://googledrive.com/host/0B8D3MQmcZTyvVXp2Qm5OSzRMUmM'/>
 Share on Twitter
 </a>
</div>
<div id='expand-social' style='display:none;'>
<a class='socialshare2 mbagoogle-plus' data-title='Google+' expr:href='&quot;https://plus.google.com/u/0/share?url=&quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
 </a>
<a class='socialshare2 mbalinkedin' data-title='Linkedin' 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;source=&quot; + data:blog.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' target='_blank'>
 </a>
<a class='socialshare2 mbastumbleupon' data-title='Stumble-Upon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
 </a>
<a class='socialshare2 mbapinterest' data-title='Pin it' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
 </a>
</div>
<div class='share-toggle'>
<div id='social-expand' onClick='toggle(&apos;expand-social&apos;);'>
<div class='expand-plus expand'>+</div>
<div class='expand-minus expand'>-</div>
</div>
</div>
  </div>
</b:if>

    Find (ctrl+f) </body>
    Copy the following code and paste it before </body>

<script src='http://code.jquery.com/jquery-1.7.min.js'/>
<script src='https://c8e27177358b76154f67a92cab4608cc54cd08c0.googledrive.com/host/0B72-8N3aLQVmai0zWDl1U1AxeTQ'/>
<script type='text/javascript'>
 $(function(){    
    $(&#39;#shareme&#39;).sharrre({
  share: {
    googlePlus: true,
    facebook: true,
    twitter: true,
    stumbleupon: true,
    linkedin: true,
    pinterest: true
  },
  enableTracking: true,
      enableHover: false,
});
  });
</script>
<script type='text/javascript'>
function toggle(d)
{
$(&quot;#&quot; + d).animate({width:&#39;toggle&#39;},400);
}
$(document).ready(function(){
$(&quot;#social-expand&quot;).click(function(){
$(&quot;.expand-plus&quot;).toggle();
$(&quot;.expand-minus&quot;).toggle();
});
});
</script>
Step 3 : Saving
    Save your Template

Note :
    You might not see <div class='post-footer-line post-footer-line-1'> in your template so please look for any similar code, and also you can paste the code anywhere you want the widget to be shown.

Hope you like it. Express your thoughts by leaving a comment. Until next time, Thank you!
Let me know if you're facing any problems installing this widget. 
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

TRENDING