Acep-Computer

Tips Triks Komputer, Download Software Gratis, Dan Tutorial Blog

Cara Membuat Social Sharing Keren Dengan CSS


Cara Membuat Social Sharing Keren Dengan CSS
Single Link
Alternative Link : [ Click Here... ] Direct Link
Cara Membuat Social Sharing Keren Dengan CSS


Cara Membuat Social Sharing Keren Dengan CSS | Hay sobat apa kabar kalian semua ? Kali ini Acep-Computer akan berbagi tutorial blog. Tutorial blog kali ini adalah Cara Membuat Social Sharing Keren Dengan CSS. Widget ini berfungsi sebagai membagikan postingan artikel kita ke bergabai social media seperti facebook , twitter , google plus , digg dan masih banyak lainnya. Untuk demonya anda bisa melihat di bawah postingan artikel blog saya ini. Tutorial ini sumber inspirasinya berasal dari blog www.way2blogging.org . Nah, setelah anda melihatnya, pasti anda ingin memasangnya kan ? Oke langsung simak saja ya sob tutorialnya :

1. Buka blogger.
2. Masuk ke Template => Edit Template => centang / ceklis Expand Widget Template
3. Lalu sobat taruh kode dibawah ini tepat diatas kode ]]></b:skin>


/* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */ ul.way2blogging-social { list-style:none; margin:15px auto;display:inline-block; } ul.way2blogging-social li { display:inline; float:left; background-repeat:no-repeat; } ul.way2blogging-social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; } ul.way2blogging-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.way2blogging-social li.way2blogging-facebook { background-image:url("http://lh6.googleusercontent.com/-YbqE_WaWM_I/TYAygBXhxdI/AAAAAAAAAdk/_X3pWlNFRgs/s1600/way2blogging-facebook.png"); } ul.way2blogging-social li.way2blogging-twitter { background-image:url("http://lh4.googleusercontent.com/-5ZvxVwDY5H4/TYAyiGsT2WI/AAAAAAAAAd8/Farwy9vHqjU/s1600/way2blogging-twitter.png"); } ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url("http://lh5.googleusercontent.com/-jg3XFSK3GF0/TYAygs6-mQI/AAAAAAAAAdo/PVRayMMzHE4/s1600/way2blogging-googlebuzz.png"); } ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("http://lh6.googleusercontent.com/-mldTY6HrKnY/TYAyh1qKYMI/AAAAAAAAAd4/pkdFcTxmYfA/s1600/way2blogging-stumbleupon.png"); } ul.way2blogging-social li.way2blogging-digg { background-image:url("http://lh5.googleusercontent.com/-u5KAanTOCIQ/TYAyfn6qvpI/AAAAAAAAAdg/l9F0MjdOox0/s1600/way2blogging-digg.png"); } ul.way2blogging-social li.way2blogging-delicious { background-image:url("http://lh6.googleusercontent.com/-w1KohkQHuqY/TYAyfct003I/AAAAAAAAAdc/3a-vbAhOlTg/s1600/way2blogging-delicious.png"); } ul.way2blogging-social li.way2blogging-linkedin { background-image:url("http://lh3.googleusercontent.com/-D1_qyJ6YuAg/TYAyg-wrT_I/AAAAAAAAAds/S_GkMjA5ZJ8/s1600/way2blogging-linkedin.png"); } ul.way2blogging-social li.way2blogging-reddit { background-image:url("http://lh3.googleusercontent.com/-IcX_Sdky5Ok/TYAyhn1obuI/AAAAAAAAAd0/MCWNQkbr818/s1600/way2blogging-reddit.png"); } ul.way2blogging-social li.way2blogging-technorati { background-image:url("http://lh6.googleusercontent.com/-qPJl0bdRDhc/TYA0oJaVlvI/AAAAAAAAAeA/PeJpSyxdyBs/s1600/way2blogging-technorati.png"); } #way2blogging-cssanime:hover li { opacity:0.2; } #way2blogging-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; } #way2blogging-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; } #way2blogging-cssanime li:hover { opacity:1; } #way2blogging-cssanime li:hover a strong { opacity:1; top:-10px; } /* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */

4. Cari kode <data:post.body/> , lalu taruh kode dibawah ini dibawah kode <data:post.body/>

<b:if cond="data:blog.pageType == &quot;item&quot;">
    </b:if><br />
<ul class="way2blogging-social" id="way2blogging-cssanime">
<li class="way2blogging-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 " href="https://www.blogger.com/blogger.g?blogID=6848954497918727921" onclick="window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;" rel="nofollow" title="Share this on Facebook"><strong>Facebook</strong></a>
    </li>
<li class="way2blogging-twitter">
    <a expr:href="&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url " href="https://www.blogger.com/blogger.g?blogID=6848954497918727921" rel="nofollow" title="Tweet This!"><strong>Twitter</strong></a>
    </li>
<li class="way2blogging-googlebuzz">
    <a expr:href="&quot;http://www.google.com/buzz/post?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot;" href="https://www.blogger.com/blogger.g?blogID=6848954497918727921" rel="nofollow" title="Post on GoogleBuzz"><strong>Google Buzz</strong></a>
    </li>
<li class="way2blogging-stumbleupon">
    <a expr:href="&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title " href="https://www.blogger.com/blogger.g?blogID=6848954497918727921" rel="nofollow" title="Stumble upon something good? Share it on StumbleUpon"><strong>StumbleUpon</strong></a>
    </li>
<li class="way2blogging-digg">
    <a expr:href="&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title " href="https://www.blogger.com/blogger.g?blogID=6848954497918727921" rel="nofollow" title="Digg this!"><strong>Digg</strong></a>
    </li>
<li class="way2blogging-delicious">
    <a expr:href="&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title " href="https://www.blogger.com/blogger.g?blogID=6848954497918727921" rel="nofollow" title="Share this on del.icio.us"><strong>Delicious</strong></a>
    </li>
<li class="way2blogging-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;" href="https://www.blogger.com/blogger.g?blogID=6848954497918727921" rel="nofollow" title="Share this on LinkedIn"><strong>LinkedIn</strong></a>
    </li>
<li class="way2blogging-reddit">
    <a expr:href="&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title " href="https://www.blogger.com/blogger.g?blogID=6848954497918727921" rel="nofollow" title="Share this on Reddit"><strong>Reddit</strong></a>
    </li>
<li class="way2blogging-technorati">
    <a expr:href="&quot;http://technorati.com/faves?add=&quot; + data:post.url " href="https://www.blogger.com/blogger.g?blogID=6848954497918727921" rel="nofollow" title="Share this on Technorati"><strong>Technorati</strong></a>
    </li>
</ul>

5. Lalu simpan.

NB : Sebelum mencoba widget ini, alangkah baiknya anda membackup dahulu template anda agar tidak terjadi hal hal yang tidak diinginkan
Oke cukup sekian tutorial Cara Membuat Social Sharing Keren Dengan CSS dari saya, semoga tutorial diatas bisa bermanfaat untuk kita semua. Bila tutorial diatas tidak work, silahkan anda beritahu saya lewat kolom komentar dibawah ini.

TAGS :
Social Sharing | Membuat Social Sharing | Membuat Social Sharing Keren | Cara membuat Social Sharing | Cara Membuat Social Sharing Keren | Tutorial Membuat Social Sharing Keren Dengan CSS | Socal Sharing Dengan CSS | Social Sharing Keren Dengan CSS | Sharing Is Sexy Dengan CSS | Membuat Sharing Is Sexy Dengan CSS | Cara Membuat Sharing Is Sexy Dengan CSS 

11 Komentar untuk "Cara Membuat Social Sharing Keren Dengan CSS"

wah, patut dicoba nih, mantap.. :D..

follow and comment back >>> zhmiepallace.blogspot.com

Blogwalking nih, visit back yah :D

mantap gan, thank untuk sharenya telah berbagi info

Thanks ya sob udah share tips n triksnya Insya Allah bermanfaat
Sekalian mo ane coba praktekin nie sob....

Amin ya Allah
silahkan, semoga berhasil ya mas...?

PERATURAN BERKOMENTAR :

1. Dilarang Spam.
2. Dilarang Memasang Link Aktif.
3. Dilarang Menghina, Sara, Dan P*rn.
4. Dilarang Promosi.
5. Komentar Harus Relevan Dengan Artikel.

Jika anda melanggar 5 point diatas, maka komentar anda akan kami hapus langsung tanpa pemberitahuan sebelumnya.
Terima kasih dan selamat berblogging ria.

 
Copyright © 2014 Acep-Computer - All Rights Reserved
Template By Catatan Info Supported By Acep Game
Back To Top