Cara Membuat Tombol Share Media Sosial di Blog

Diposting oleh Unknown , 19.04 Be the first to comment!

<data:post.body/>

<!-- share start here http://satu-delapan.blogspot.com/ --><b:if cond='data:blog.pageType == &quot;item&quot;'>   <div class="sharelordhtml"> <center><div class="headinglordhtml">Like the Post? Do share with your Friends.</div>     <ul class='social' id='cssanimation'>     <li class='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='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='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='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='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='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='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='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='technorati'>     <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Technorati</strong></a>     </li>     </ul></center></div>   <link href='http://fonts.googleapis.com/css?family=Englebert' rel='stylesheet' type='text/css'/>​ <style> ul.social { list-style:none; display:inline-block; margin:15px auto; }  ul.social li { display:inline; float:left; background-repeat:no-repeat; }  ul.social li a { display:block; width:50px; height:50px; padding-right:10px; position:relative; text-decoration:none; }  ul.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.social li.facebook { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGvxwlY6koWUq811BbDWhqpVkATPLaeeewTu3Tw8KqN5jWtKarafcw9mnebXTRvNRPLcC3OB7rCFN9S_Xghb0RxOTe7OwVdCoeXAW3JtpDMbPLwB98npkUxbUqXAzKkEh7TmM3Klu4sEQ/s50/facebook.png); }  ul.social li.twitter { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsSCn6SoOZ1gAUPus7-k6XZgPrsR-VPD7v6A2Wb_gm9qERWFAnEv_SDflLJFihT90FsaIAZnI0YsZOIbrZTYnuURghyphenhyphenaAtQZe61tYlivu5BHpXqHg72iFma9O8yqLLatz6TkYzAxJQqtA/s50/twitter.png); }  ul.social li.googleplus { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtNGXNS4QA4nLFCGG-6DPR0LthJKjKEjgZ27X7uuCA8Lw034VNJ3N1n4FYnq75348hFzGb3LjqpsPTuJYMI5C6EoS_IHIGQJJXF_qjXhYpD77K_xMbZNJou5OvRQ01Pei41vEZSGOs5RI/s50/google%252B.png); }  ul li.pinterest { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9q8qxBVSdP53O_1RhJPARRorw2goZVA_nEnPRVRdnyxsx5EIyeo2BXwJEYEPs4AsyQy8e1sjC7KkICCjiCaAhegwcv9KcCazMFtrLXymVL3du44pFEWFsaVLIF26e9qGLvciwcTpSic0/s50/pinterest.png); }  ul.social li.stumbleupon { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8IRtW4X45Cmsez6sByEM0Tu3s3oVJZ3hwfwkUMs8UB7genrevt5W53Mk9kbtrNr9BarCP20BoP1wDYQx8DyvMXc5sjvOPQcw8nPLUqEJvmldTFoAzaPiqwwsEJCrUpcBox2v6vzCvC6s/s50/stumbleupon.png); }  ul.social li.delicious { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjO4xiWYm_3Eg-S97TDLCyfMCMC0xG7mrd8BB3kn1fWCUcOgNnDpi-8firojcNhYgKkuzwXav_wyNYtI7zCS9TYDI4WTIygHKniB7tygVoEuhzv7kzuzalsi3lf8yCQqKtzAQ3zE9kHBs/s50/delicious.png); }  ul.social li.linkedin { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibiyCwVeHL7_rJpcl3QVKgT1ZnUX5JMK9jzNd4Za__AvITowcPlv1fn2A5OjJnChyShxtuqrv_2hUvTVndRBPgbDRFAEFX6yNyj5TsR70zx62eJh4f1h-KH4FgZO6Sf2UtgTS5dsThohs/s50/linkedin.png); }  ul.social li.reddit { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtkEGyIAo2K57-uErAA9oa6AEnWAFXmVBHoDyUh85RxxNP3LFrFqYPFQVaM8Nf-6xc50MlR3LlXwl7VGjNY-jrI_qLUa3GSrpjREYTgdGj2rahgh6Dg0tye-w9HvBv7I-ADoa6DaaVikY/s50/reddit.png); }  ul.social li.technorati { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgCYguLrHoN43VBv3gQBZd75rnCULPRpuA-DGuZNh2CGBGEz-R_8SDh9ze3n4smNK_bJY6FYP81RhXX2utp_8byQZBRxy97Rb1tmySTfl-0X0MtWJaU4V42UmwDI_4nDg3sXYzWDl5TDLS/s1600/TBI-technorati.png); }  #cssanimation:hover li { opacity:0.2; }  #cssanimation li { -webkit-transition-property:opacity; -webkit-transition-duration:500ms; -moz-transition-property:opacity; -moz-transition-duration:500ms; }  #cssanimation li a strong { opacity:0; -webkit-transition-property:opacity, top; -webkit-transition-duration:300ms; -moz-transition-property:opacity, top; -moz-transition-duration:300ms; }  #cssanimation li:hover { opacity:1; }  #cssanimation li:hover a strong { opacity:1; top:-10px; } .headinglordhtml{     font-size:25px;     font-family: 'Englebert', sans-serif; } .sharelordhtml{   border-top:30px solid #3873CC;      padding:16px;         -webkit-box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75); -moz-box-shadow:    0px 7px 9px rgba(50, 50, 50, 0.75); box-shadow:         0px 7px 9px rgba(50, 50, 50, 0.75);     transition: background .777s; -webkit-transition: background .777s; -moz-transition:background .777s; -o-transition: background .777s; -ms-transition: background .777s;     background:#D9D6FF; }  .sharelordhtml:hover {         background:white;  }  ​ </style>  </b:if><!-- share end here http://satu-delapan.blogspot.com/ -->

Author: Mohammad

Mohammad is the founder of STC Network which offers Web Services and Online Business Solutions to clients around the globe. Read More →