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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXQRZNZcgmf97QEX5AMR4DQIo6kubEoGWg-BXrVN4zzh9HL37ez1Q8QCL7aKXupPlWfdCXWomxM5IGMhUcsiRkMZpmfvLmA_BtEuZjVdaEx1E6cpUoMqswb3y9Qcx09XOAan8xB3O7oHt_/s1600/way2blogging-facebook.png"); } ul.way2blogging-social li.way2blogging-twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQMjCwOhwAhGW_LSgaep-5nn28EbfTi49VQSrBeCuIwn_wKKYKZaEWvj6BJoS4EHURKcd8dzxPSjdW9qWiHoZsoYGuMsPhuVJubp0rA_-7xli6x4_rIfCACRULpAVjgy5pxgKAEpKmzPPQ/s1600/way2blogging-twitter.png"); } ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-SwbhoL6OghxtDfTinF-sBMAnl7xh3sfnb-y84wtSKW8XnoEkJjfUAv8eRtT_c6TVpjnyRemVrp6VzYCmL5xrXYLG6frj74x_T5LoRmQhs-vfTA5OFXMKmYeXet_yOUwMLD2tCHMuUA7-/s1600/way2blogging-googlebuzz.png"); } ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0K9iOfz8B6jQD5F7mUTR4zrHy-xjjlWpafqdl0VZN_ATXBiLCvSP52pitUet_ixwBEaPGLUh56B7Mpr7bLoEB83HRETEmyDQqW_1jxiPnkheuZWu0OMmZxy_g93dL6NTXerUqJ9ZTTs6R/s1600/way2blogging-stumbleupon.png"); } ul.way2blogging-social li.way2blogging-digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLWTCIgxZduz2eIT5TvtAVdydVdwSTDhHqUwdG1jZ_OJh0zp2Fuqkv4z5l4P1W4icz1rN4D9sXx8IOgjXcc61JWZo0bJqT94sgfebZkkS3u58XY0IN_pbh7yxqeDK_MmUkYnXkVfd5ope6/s1600/way2blogging-digg.png"); } ul.way2blogging-social li.way2blogging-delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil9CTMSa5yPkQnIQ0Hl_4uOJBXyTQu8M5NjeyxoVoujVTUPUXKYiLYY3SMhR7ZwK2ReJw1I2SGntgCET8GiwK3XYmtPtjwYfmd8qwxsJO6zB3HAXu5SVByaiSn7xDv2DNQS2mlXg8N3iVi/s1600/way2blogging-delicious.png"); } ul.way2blogging-social li.way2blogging-linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga87F8for-aEebJ5tisgVs9MczXxexl4HUT26HZJegljkSRafQQljp8lcf4eocV_fSqkUzFyWukQh2eHvXIUP4aX-Tn7UXhpzGZ8lwp5G9dVlo203og_bwX4Mwi38CGizr8rhgsp9aFAWd/s1600/way2blogging-linkedin.png"); } ul.way2blogging-social li.way2blogging-reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIN80VotT4imOCBfGmhglxEpGJZ_Le60saR0kUjtxWE-ZxeheLMjXKPPIOEFncIh3REXieHeCuUjaPz_XGJa4_dfLHQIiTZ6LHNwkPuj3_J75vsxRHKSuXBOhgXfCUCcae-bJ8mCpmvo0C/s1600/way2blogging-reddit.png"); } ul.way2blogging-social li.way2blogging-technorati { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivnp4aiyDfrMrRTS19V34WkwmEOOBLXhqlvAwezibsKRYkujTX7aphysAF8xVdnxd5sG0MEnpzsNXQ3epEQw4vWJnPy__A1sySPHJrc0H7yJD5Hq-ZEHa16a9iecimUliggiXBdYiePeR7/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.