Tuesday, February 4, 2014

Membuat social sharing widget dengan css3 + 2 tooltip


    Nah, widget ini, keren kalau menurut saya. Karena, selain dengan 2 tooltip, juga dilengkapi dengan efek hover. Caranya juga mudah. Anda tidak perlu mengedit script lagi. Ok, mulai.......


1. Login blog.
2. Template.
3. Edit HTML.
4.  Lanjutkan -> Centang Expand Template Widget -> Klik CTRL + F
5. Cari kode </head>, letakkan kode dibawah ini diatas kode </head>
<style type="text/css">
/* Beautiful Social Bookmarking DONT EDIT!! @ Infoiki.blogspot.com/ */
ul.infoiki-social { list-style:none; margin:15px auto;display:inline-block; } 
ul.infoiki-social li { display:inline; float:left; background-repeat:no-repeat; }
ul.infoiki-social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; } 
ul.infoiki-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.Infoiki-social li.Infoiki-facebook { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6oJCU461XQpQf_d2-jDJHhyphenhyphenev7xu43ln3oXQgf6QJz-HlC9cuix9YexfdiUXW_z53E7DzjfuAFndFfPkdbR_HDvC9mo2nUb3YXJar1G7NR2Imn0pHlD840CE3RmRGtM_opbkNAkVncj4B/s1600/theoriginalbloggertricks-facebook.png"); } 
ul.Infoiki-social li.Infoiki-twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCOSRAUHzBkpbVZgt7e6E7xIJVNlnnWBETbqOUThys8uBlAPLi80ZM6AgAFtybkVx-ore-1-wFV0lW0bKrpJ0QqX7lhJZ5J5ZGnXYUEijb5RN1H9CzqIc8s9c-85tbNBjDsLjaKDvs2as1/s1600/theoriginalbloggertricks-twitter.png"); }
ul.Infoiki-social li.Infoiki-googlebuzz { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEx6ftkXCSa2A0JiQqFKZ1Thvjw0POeUwpvOXA8fr4g3XihOTTF3Jbj9LwZ3HbZUlnhbT0FrNlH4cfqOEuy8VLGoBWYPKgskw3GPy0uv-GuKqxBZphlPmQQV8U_1x42U1O3Gvwtv5v7Pqj/s1600/theoriginalbloggertricks-googlebuzz.png"); } 
ul.Infoiki-social li.Infoiki-stumbleupon { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihb4Rx4iW6_rS7l7j6CZW5PKrPs-x1XBmSv4pF_lF8Fd5FXyRGxVSleU7tRTrrqnPqQWUaKO4XlyOUCaoNvtEeqdUADbEh37vpQyskDJEOEgQuJs5-rmYYXjzbND6N8O9NUhMdCNPTDm5x/s1600/theoriginalbloggertricks-stumbleupon.png"); } 
ul.Infoiki-social li.Infoiki-digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqfiO0sEPFp42CE6Anm_qSNktGF1EWLJnPe3rHY9nbNpUDHyK-I36XWKrK43_aQ94F95BYqjUmoFqIHjFS2G3tHVXOJm924YGYYjx0afEeB5BZi9YvJxU8ExjUwWicsx3sXKKlMUGx9GNW/s1600/theoriginalbloggertricks-digg.png"); } 
ul.Infoiki-social li.Infoiki-delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVifDovXYqKKjvp7OMqX6-hp4D2z7kEnK8crk0Vxon7Q_D2TFJGgAZk0U7kwJU4IqOoBrV59q09UmoqfZyidDjLJmgaMQzZSlar5NCld7i0MczBmqs2huG9u9mpHLr1rn37GNvTXnpFWGX/s1600/theoriginalbloggertricks-delicious.png"); } 
ul.Infoiki-social li.Infoiki-linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNTIo7lXsueXAM-OChPfEFE33Z1XxRcbynn8zHs4exptuatzSKArXfP7Gt-uO0EgKGMjNhyE5fnIX0a8sORR8BdbgLwLXshK1N5W_peeOT91PpdIqwAWNbxWfqiSFAZfl4Tz9o9k6jIrPi/s1600/theoriginalbloggertricks-linkedin.png"); } 
ul.Infoiki-social li.Infoiki-reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEincY9eGFNl1A4zigkLsI0Wuw_ur54EdSgHS7VH43F3bCT3gMcliWLlfb0D9n-PsvGmCwReIr20zEl2nmOpi7B_q11sMumUH7dnf0rJzQHpFsNcovAI9HT9kJqCxEonwjZgloBLjqQrF_d7/s1600/theoriginalbloggertricks-reddit.png"); } 
ul.Infoiki-social li.Infoiki-technorati { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Eh_ye-bynXw8vaq1wh2gTLivnyUwknZ_CakM_PW9AuRxFsGtC1Funb4SzaXLqvXlGoVvTlc2URDHfk-d0sKTuFW-cMhdloUygcdSFNKSSHs3xLIRZxjXBBqArIJs3jbyoeuBTQhq1aJp/s1600/theoriginalbloggertricks-technorati.png"); } 
#Infoiki-cssanime:hover li { opacity:0.2; } 
#Infoiki-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; } 
#Infoiki-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; } 
#Infoiki-cssanime li:hover { opacity:1; } 
#Infoiki-cssanime li:hover a strong { opacity:1; top:-10px; } 
/* Beautiful Social Bookmarking Widget By Yustin Annisa@ http://Infoiki.blogspot.com/ */
</style>

6. Setelah itu, cari kode <data:post.body/>. Bila kode <data:post.body/> ada dua, pilih yang bekerja.
7. Letakkan kode dibawah ini, dibawah kode no.6
<!-- EDIT SCRIPT BILA INGIN SCRIPT TIDAK BEKERJA --!> <b:if cond='data:blog.pageType == &quot;item&quot;'><ul class='Infoiki-social' id='Infoiki-cssanime'>
<li class='Infoiki-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='Infoiki-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='Infoiki-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='Infoiki-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='Infoiki-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='Infoiki-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='Infoiki-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='Infoiki-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='Infoiki-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>
 

8. Langkah terakhir, save template. And, you are done!



Bagikan ke :

Facebook Google+ Twitter Digg Technorati Reddit
0 Comments
Tweets
Komentar

0 comments:

Post a Comment