Membuat variasi widget jejaring sosial CSS3 dengan ikon warna hitam

Widget yang satu ini selain sangat atraktif juga memiliki desain yang elegan. Widget ini murni menggunakan CSS3 sehingga loading cepat dan ditambah beberapa flatform jejaring sosial terkenal seperti facebook, twitter dan yang lainnya. Dengan background ikon warna hitam menambah sempurna bagi kebanyakan template blogger. Berharap anda menyukai dan menambahkannya di blog..:)

View Demo

LANGKAH-LANGKAHNYA:

• Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu

• Kemudian pilih -> Template -> Edit HTML

• Cari tag/kode ]]></b:skin> tekan  CTRL+F untuk memudahkan pencarian
• Kopi dan pastekan kode CSS berikut tepat diatas kode ]]></b:skin> 

<style> ul.bssocial { list-style:none; display:inline-block; margin:15px auto; } ul.bssocial li { display:inline; float:left; background-repeat:no-repeat; } ul.bssocial li a { display:block; width:50px; height:50px; padding-right:10px; position:relative; text-decoration:none; } ul.bssocial li a strong { font-weight:400; position:absolute; left:20px; top:-1px; color:#fff; 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); padding:3px; } ul.bssocial li.bsfacebook { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxkM5nXdwfjrMMT0Dth4tVdlczSZw1tm3fA9m9HZpuejeINJgLmGbY5nqtC2yaa0gYomVg5jzGwQTbB9fabFfYU_FZCDPraMnTN-5D5r9HvGBb2FAPaSW2D7w3dI0bkDfrMA8FNqfYeHmG/s320/BS+Black+facebook.png); } ul.bssocial li.bstwitter { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAyldCDgYSMc9_1IlQnKkbYnjVjf0awThzsO3XdzNhjAnka8iqb0cqRRTMrxkN6Kn8Yxng1kwKsAmby9hVnzK7qopW8qwmZ2WIKVTqEvtU6S_HZmfr9Sdl94ccTq4U_n6H8_-FOIyVTC5R/s320/BS+Black+twitter.png); } ul.bssocial li.bsredit { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLbRUP_j76kWxGjdRTUrC1uP0JWXaQAAuwFHjr-BR_ZFQGZHpL-tPI6sfI7UXgfHHqwr2X9kaO148vI5yKICE8O9YIjBQdVRBRLmmu38YfdxNRtcRewEuEAYyFx6qdhj7c9AwCVGpd3WV8/s320/BS+Black+reditt.png); } ul li.bstechnorati { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgstMTFke8O5nLaMKaJfhjGuAEi0mOsaDd-DpE-fK-BNlTxWBXiMWYveuJlf7vDzMbe7E_dkMaK4q2HpXDxHVfGvDrJRaNvYfR0XI7pDQhxzyoxDK8NDN3jAs83McwK5MRAKgc8XTJhnmiC/s320/BS+Black+technorati.png); } ul.bssocial li.bsstumbleupon { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZxsydyb_CW-y6mz6-KKBzHvSOLbCaN9lR9oian4qR-0of7YD3XdT9h7sb0clgq7VHljVqdg-JPnYY3BYNnSS6YJxMesBHMBw1jdMCjW8NUuCAHoWDknwgCigj1bgSVEA6tt4iLgKa9dkD/s320/BS+Black+stumbleupon.png); } ul.bssocial li.bsdig { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKKLpr9tNZtajOY3rABHA1VOPa7s0iC41gv6nX26HJlnLt9gKafCyWJtRfkAA3c9rzqDN2yTAQKV333N_pmVvVYQSP0YiXLsTaf0FQpvQF_L7dlApnWo_D9AT03roHAwqpUIZGwsCEdiCD/s320/BS+Black+digg.png); } ul.bssocial li.bslinkedin { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS8SRFDSPhdqhKmc8HseyCfmjmgoKLwZ-7iT5U7YMw-mJwm4CzhyejDfkGbUtbluImaW1G1Ea1HfXfyPYLRLRDaJ5IiV2C63bRKvX8135Qtw6eildcVdhoY2uaRzQs3j5UOjhVXQQJTGse/s320/BS+Black+linkedin.png); } ul.bssocial li.bsdelicious { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj01bk_C0wm3A9ZSO5rf6NOzY1BKSvR1fnzrNm1S2utzrM7zJstuazKYWwxfLshhNHKRFnNa96xTtchCheKcJx50dZ-Osjr2AQlDub5iIe-6YrzYvRjIrkvXzlJVRj82lrllAb42GtSnuN-/s320/BS+Black+delicious.png); } #bscssanimation:hover li { opacity:0.2; } #bscssanimation li { -webkit-transition-property:opacity; -webkit-transition-duration:500ms; -moz-transition-property:opacity; -moz-transition-duration:500ms; } #bscssanimation li a strong { opacity:0; -webkit-transition-property:opacity, top; -webkit-transition-duration:300ms; -moz-transition-property:opacity, top; -moz-transition-duration:300ms; } #bscssanimation li:hover { opacity:1; } #bscssanimation li:hover a strong { opacity:1; top:-10px; } </style>

• Kemudian cari lagi kode <data:post.body/>
• Pastekan kode berikut setelah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='font-size: 22px;'><b>Anda Menyukai Postingan di Atas? Silahkan di share...</b></div>
    <ul class='bssocial' id='bscssanimation'>
    <li class='bsfacebook'>
    <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'><strong>Facebook</strong></a>
    </li>
    <li class='bstwitter'>
    <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
    </li>
    <li class='bsredit'>
<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow'><strong>Reddit</strong></a>
    </li>
    <li class='bstechnorati'>
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Technorati</strong></a>
    </li>
    <li class='bsstumbleupon'>
    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>
    </li>
    <li class='bsdig'>
      <a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><strong>Dig</strong></a>
    </li>
    <li class='bslinkedin'>
    <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' target='_blank'><strong>LinkedIn</strong></a>
<li class='bsdelicious'>
    <a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>Delicious</strong></a>
    </li>
    </li>
    </ul>
    </b:if>   

• Simpan template, selesai...

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 00.04