Tips and Trick Add Share Link use CSS3

Sudah mempraktekan trik maknyus who want to be a master CSS3 khususnya mengenai blur dengan memakai transition variable! Bila baru sedikit ngeuh menempel di kepala sobat, saatnya digenjot lagi dengan hal serupa tetapi berbeda penerapan. Tau dong dengan yang namanya share and bookmark link, biasanya fitur ini guna berbagi (share) sebuah link ke seantero situs jejaring yang terkenal. Pokoknya itu lah sob :D tombol berbagi/bookmark :P
Kita pasangkan attribute transition opacity, dirangkai dengan ordered and unordered list variabel, pakai gambar dan juga sentuhan list hover style ;) Pokokke hasil akhir akan menggoda mata =P~

Demo

• Facebook
• Twitter
• GoogleBuzz
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati

Waktu disorot, link lainnya serasa menghilang, pas dihover link share tujuannya terlihat jelas dan ada titlenya. Manis, indah, good kayak Beben Koben si bloglang anu ganteng kalem tea yah :">

Kode CSS

ul.techblaster-social {list-style: none;margin: 15px auto;display: inline-block;}
ul.techblaster-social li {display: inline;float: left;background-repeat: no-repeat;}
ul.techblaster-social li a {cursor: pointer;display:block;width: 48px;height: 48px;padding-right: 10px;position: relative;text-decoration: none;}
ul.techblaster-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.techblaster-social li.techblaster-facebook {background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-Yix42472x2u_R7hcYOrMDkIiLeXfXODZbUApgyX3sbaTMNc9XJ0jCKsvxH92596vcwfYmXx7l-5Qq6Wtjdth1edXCrUm4K5auV_uKoiiv_492cnpWmIoMCkhGdWSKCf00lEAVhk7EOk/");}
ul.techblaster-social li.techblaster-twitter {background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMbnlgM5KwE-iHxWARLP8PNfQahUvCCSkQn-DKIkPg9WpOAgZ-Sl_pYksvzwS0sEaVE8NYuN1YxNGBI3-zQwCzB14Rbq483HGYHSV6Pd98sgD0h2jsBKp6b6YkgG8wMj8feg1ObtTgcgg/");}
ul.techblaster-social li.techblaster-googlebuzz {background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCzZBtiwtISSdQ1GIm_9dmDR5H83OTxU9q9sQLJLKJByPdE_KKaDrQv1HNhsSIgpza4naUpVVNLbvT_oICAa1B-MyNIhuWdZyCIcV5lMFSFRvNw79VDRJ5yeiE8LkbtSOuUkqp4FUzTqg/");}
ul.techblaster-social li.techblaster-stumbleupon {background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrwQyp9pr36QP4Qcw_KmXofHRwbjiWXwryWvKlvFsj0qDHVSgF7ZfT2PiAS7xHDJzjNyaa4MhN_1OCMoOm6wi9EuLVPKD6klXyfdL6NoIRLA9ODF-I1NaEKexch_OyroblepGIB3ukXbY/");}
ul.techblaster-social li.techblaster-digg {background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuJErmHTatcLe0evHTSQXoi2xtoe_98GfCiUrSh-g16dJcgC8QiL5LNdWjmrivTneOM6YYPeeXEy9hFvoZ506tNTSk4rmeQEtRu6DeqGDACXmyHdOJ7hyphenhypheno_whnYhbOyMKMm7jsJy2yhVE/");}
ul.techblaster-social li.techblaster-delicious {background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVI3ttvE8qvtP8lRqNXGLRFbpPnUpyKsv8HS8ohgBbJbJlP5H_CPZUI8z329tiT3NMEP9W3kVmDsuolRZCnCM-WJCSloQK8EYGnoFh0itBU5sYEndJA8vqidfLvMELGFRV9LKGikPf-RA/");}
ul.techblaster-social li.techblaster-linkedin {background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjled7Nu5He6Xiht5UyxNefVtSkT-ymuO1m5ZJ7rp98csNMnMGiGLu4WT61UePAwtm0r1LnpRWDeBPdkoXBjUX_ECtYELQ3LvI2XRc08DQPZBnsVf00kz3Hdo5qGd9vozRwD14d3OfPXtw/");}
ul.techblaster-social li.techblaster-reddit {background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0QlQBGCaPqpQupbgNXpeSpGT1SMhFqVwmrQGZZZZdiTKHrOdCH2MOcFkgVLTenXr07vMeifI3hVzZOYUe6aXbyKOz_nD0fpCMuwSxla9aTG-XjW1sECNLx4Fv7DtKwxhnBDx0JAhAAFo/");}
ul.techblaster-social li.techblaster-technorati {background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqGqNb5YQ9RBnHB3AclsOU5YndRToLHgDWEXunrBocqRazBWncewWD-yzRBy1kv08usM7hq_Z77tOO4nNPdVPKiplQjCJCuGfeUG9Ad5CAvEMsinwK_xcV-iu9g7476YhhlUE4Tu943DE/");}
#techblaster-cssanime:hover li {opacity: 0.1;}
#techblaster-cssanime li {-webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms;}
#techblaster-cssanime li a strong {opacity: 0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
#techblaster-cssanime li:hover {opacity:1;}
#techblaster-cssanime li:hover a strong {opacity: 1;top: -30px;left: 0;}

Kode HTML

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<ul class='techblaster-social' id='techblaster-cssanime'>
<li class='techblaster-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='techblaster-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='techblaster-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>GoogleBuzz</strong></a>
</li>
<li class='techblaster-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='techblaster-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='techblaster-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='techblaster-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='techblaster-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='techblaster-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>
</b:if>

Koben gak akan kasih tauk kemana itu kode² harus ditaruhnya. Biasanya mah untuk kode HTML ditaruh dibawah code <data: post.body/>
SAVE...liat hasil kerja :)

Perasaan pernah juga memosting yang beginian tapi lopa :P
Tapi inti artikel kali ini, Koben cuman mau berbagi satu blog usefully banget. Cocok buat melatih skill kite². Please welcome my friend...

Diacak-acak yaaa )))
Semoga bermanfaat \m/