» » CARA MEMBUAT Horizontal social sharing tooltip widget DI BLOGSPOT

CARA MEMBUAT Horizontal social sharing tooltip widget DI BLOGSPOT

Ivankgribatako
Add Comment
WIDGET SOSIAL MEDIA
Kamis, 31 Desember 2015

Horizontal social sharing widget for Blogger



*  buka blog mu
*  klik template >>> edit HTML
*  cari kode ini ]]></b:skin>
*  copy kode dibawah dan letakkan diatas kode ]]></b:skin>
ul.absocial {
list-style:none;
display:inline-block;
margin:15px auto;
}
ul.absocial li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul.absocial li a {
display:block;
width:50px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}
ul.absocial 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.absocial li.abfacebook {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr9Twx5XIOlskOJbRzE-bL-xVbWKvRFoIBupVUnef6ZVWB02AmZihvorNN_Ma858wLPt1ZUSXGGEJ9jzveWQDlI_qubuF3mA3GWIJw61n5U0hyphenhyphenlf4E8hidqEUtA6XLD6P3q1xHrji22W-y/s1600/BS+facebook.png);
}
ul.absocial li.abtwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8UhVRZn0gOm7U_MOap4xMasnQ14n5C0bj1vrEIN7TdoriWAtpdWYYCtK08ARIyC_YBi9YFMVZYeT0Ke3CxyDgLYtxkgIcusBrjWrljKpxnVxvUpeufgF0eMf6MqbaxpWTVG1pYfNZG7MV/s1600/BS+twitter.png);
}
ul.absocial li.abgoogleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvpJ23eWKJac7RkenCu6tiB6Hh-bXe6rML95nt5u4bSWPf_OA_9p9naYOC6B43f7CyIZqzvwOptt8Sf15dvZbZWOZrqvvcpaC1sWsXqqmfDt84wp9605bfLM1dOnL01C6SoHZyWOf7T286/s1600/BS+google-plus.png);
}
ul li.abpinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqaauklAe3V9-0LpUd2GPkuSg41dDEdG_LzlxoyB3J2l0VhFca2lWpOpRZJvqkP5EEC6F-ej3foGllFWJ3uVcAdrL6ps18KX1BbpmPhIQnuw8mMo17JYrQOtCYTU8V_PSqLki_yYmhyE4w/s1600/BS+pinintrest.png);
}
ul.absocial li.abstumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCLcLeAVsjST6l5KqBzdFxLsv17L7Pu-A3cN0z25mDAir1AWtGgzu15voq0e0sjni1e7DDpda5OA1L7Sdroooe3bPhUMjYjAW81_Su5aqxBhFG1_Hk6k7qpmAo4Bku6Jp3oAGp5kjjiqEV/s1600/BS+stumbleupon.png);
}
ul.absocial li.abdig {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqun62seyc3dn_LknPrRK92EziJFTNG3Yo_o9Am7ewax2p5snOh9yDhTxupQ2E6rSrM0vBegJ7yCxLZt5YPmFEI8xd3h_D0hdxSsrrLWmiu4FsSsLgUbWNLp1PJCs_IVeeqVGg8-ufA6b_/s1600/BS+digg.png);
}
ul.absocial li.ablinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzKgzWA6GJMyy3vCMTOStepk6Q6G6kEUwK1AMW4xIFXIMpSewUZz3bKIxwX_Q4H7bwShiacfczy-EB28dhKWkrcq4HrKn7D1FgiY6rwF6v6iBrEEZWvTprr2Js1mtA0KHjV8sTK7a_qs1B/s1600/BS+linkedin.png);
}
#abanimation:hover li {
opacity:0.2;
}
#abanimation li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
}
#abanimation li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
#abanimation li:hover {
opacity:1;
}
#abanimation li:hover a strong {
opacity:1;
top:-10px;
}
*  kemudian cari kode ini <data:post.body/>
*  dan copy kode dibawah tepat dibawahnya kode <data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='font-size: 22px;'><b>If you Like Post Share it with Your Friends.</b></div>
<ul class='absocial' id='abanimation'>
<li class='abfacebook'>
<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='abtwitter'>
<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='abgoogleplus'>
<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='abpinterest'>
<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='abstumbleupon'>
<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='abdig'>
<a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><strong>Dig</strong></a>
</li>
<li class='ablinkedin'>
<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>
</ul>
</b:if>
*  terakhir silahkan di save

 ###  SEMOGA  BERHASIL  ###
Baca Juga Artikel Terkait Lainnya

Thanks For Your Comment Here
Langganan: Posting Komentar (Atom)