Nama Proyek
Beranda » CSS » Beautiful Social Bookmarking Widget CSS ala Kang Kapuk

Beautiful Social Bookmarking Widget CSS ala Kang Kapuk

Ditulis oleh: -
Beautiful Social Bookmarking Widget CSS ala Kang Kapuk 

<style>
/* Beautiful Social Bookmarking Widget CSS */
#info{margin:13px 0;padding:6px;border:#3c3c3c solid 2px;overflow:hidden;}
ul.kapukganteng-social { list-style:none; margin:0;padding:20px 35px 15px;display:inline-block; }
ul.kapukganteng-social li { display:inline; float:left; background-repeat:no-repeat; }
ul.kapukganteng-social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
ul.kapukganteng-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; 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);}
ul.kapukganteng-social li.kapukganteng-facebook { background-image:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQim3AUWHi4n-HIuatKV5CsNplbY8v-2dMs8sFTQvdlvxYHIzptIv6mG7x-ShsbC3Y2U3vW8caPfl4Fu0DIva_Tx6X0pP3dJj8xV-AYHFmBjrWOHlwpAbkoKMJrmguRg80OezFETQNrjrW/s1600/kapukganteng-facebook.png&quot;); }
ul.kapukganteng-social li.kapukganteng-twitter { background-image:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf6xbanedf8DdNGrmCejBgI1V0s-nm6i2Xd0PB3F4wCA-1MbqoKcm3Rknl4iz4Sf19qQmgBlbOlhxKE44odPNI5a4vcIyNSorDWnTu6XcW4hXKZhJY4CAH6zVm6aQ2di-LFyHVtz1lNeaE/s1600/kapukganteng-twitter.png&quot;); }
ul.kapukganteng-social li.kapukganteng-googlebuzz { background-image:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgblSNYvqKY4yCMgCN0hGlp_mDB4e0bGIR5cvO5e-d7C3hioM5HsOzJ8BJIn-uapWt4Xb7Ufpa3cXMfz_p4A1IRn6rj2nsb0UC7IbjgdAokl1wpxMx1NAu7SN7SHiLzGumzoZan1dDm-kN2/s1600/kapukganteng-googlebuzz.png&quot;); }
ul.kapukganteng-social li.kapukganteng-stumbleupon { background-image:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcG2ZHhyphenhyphenLksFyy5ApUxDWvxdNcsRJbMrAuNmFijbO___4GeFiq8u6aPx11AqinJT_538sqW3gXlBNy_eU2ffG_VwxvQzcMCSJSJOuGHG8kgPJCRYQufcuFiFaqYNSzAyh7fWjPZKj_xW0S/s1600/kapukganteng-stumbleupon.png&quot;); }
ul.kapukganteng-social li.kapukganteng-digg { background-image:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWYhWslXP3c2aA5_6nv9ioQz3WaDN5Yt5g5T6MOphJ_TLTn33GAEF0tfXvmiHzGslhBgWVGoH9MlFPSc3MY2WX5PtxWn9TXJ_J7yc33-7FI6NvNIhDiAX9tctXQ8pBX72cBTj434PRxilU/s1600/kapukganteng-digg.png&quot;); }
ul.kapukganteng-social li.kapukganteng-delicious { background-image:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsaR3fI1Qp5BA6ofZwfqVarAdIzsmLA_2OMY_QG8MT1GVndPVWkTthAWsop9DM0f_U2J4st6GrZ-8LYXT960Ee-sowjDVpxK-E6IEZKUaHy9yxzgBSd35bj8adfpkEuOYVIH6ngJuIxLxI/s1600/kapukganteng-delicious.png&quot;); }
ul.kapukganteng-social li.kapukganteng-linkedin { background-image:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmhn-aD4_LOtLjQmgiep9AjpV62k93KCS0BO8a6PBYHMnFC8shXSSuH0Ye-HhYAXn0iXC2nWVTokK3XIAJhoWU0F9U6qBLWdh2xYO5sqdhBBS1QfLQT_WkFBphZEQbrps9Wvnmkfp23cP/s1600/kapukganteng-linkedin.png&quot;); }
ul.kapukganteng-social li.kapukganteng-reddit { background-image:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRuHuNeHb7GIVy_48ZQiPiBWHPF2ZtW_rmT8BYyYXmyeixo3ZrpB2RWYGaYAbwFk24zxpXOA2H3W-sm-g0qXdftLZ8WfY0gXEwVmsgxkRjctjIBNetuT0WBMfWvGvdXeVtvTZKMHR0oQtd/s1600/kapukganteng-reddit.png&quot;); }
ul.kapukganteng-social li.kapukganteng-technorati { background-image:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDzr44EsGnyk5iuCDi2dnoVy9-nJiJyR3b4mNhrfFsBVYJGmOpM2i1ly3nrx0No8hPQ7gqmbU5_BY5P_RiLj-7bzT0-Q7zUwlDBLgpfArX1ukbgNFtZeNYIXQcbhDEJGoq3mqbqVydOsJw/s1600/kapukganteng-technorati.png&quot;); }
#kapukganteng-cssanime:hover li { opacity:0.2; }
#kapukganteng-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
#kapukganteng-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
#kapukganteng-cssanime li:hover { opacity:1; }
#kapukganteng-cssanime li:hover a strong { opacity:1; top:-10px; }
</style>
Letakkan diatas 

</head>
Lalu, pasang code berikut setelah 

<data:post.body/>
Kodenya adalah sebagai berikut 

<div id='info'>
 <ul class='kapukganteng-social' id='kapukganteng-cssanime'>
  <li class='kapukganteng-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' title='Share this on Facebook'><strong>Facebook</strong></a>
  </li>
  <li class='kapukganteng-twitter'>
   <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a>
  </li>
  <li class='kapukganteng-googlebuzz'>
   <a expr:href='&quot;http://www.google.com/buzz/post?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot;' rel='nofollow' title='Post on GoogleBuzz'><strong>Google Buzz</strong></a>
  </li>
  <li class='kapukganteng-stumbleupon'>
   <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a>
  </li>
  <li class='kapukganteng-digg'>
   <a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Digg this!'><strong>Digg</strong></a>
  </li>
  <li class='kapukganteng-delicious'>
   <a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a>
  </li>
  <li class='kapukganteng-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' title='Share this on LinkedIn'><strong>LinkedIn</strong></a>
  </li>
  <li class='kapukganteng-reddit'>
   <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a>
  </li>
  <li class='kapukganteng-technorati'>
   <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a>
  </li>
 </ul>
 </div>

Share This.....

Twitter Facebook Google+ Digg Linkedin RSS

Subscribe via Email...!!

Artikel terkait :

2komentar: