Floating Sosial Network Black Icon Cool Versi UTta'

Sosial Network merupakan salah satu cara agar pengunjung diblog kita dapat lebih mudah menemukan kita diberbagai situs jejaring sosial yang kita miliki.
Dan pada postingan saya sebelumnya juga memberikan tutorial memasang 'Sosial Network With Animasi Bubble Tooltip CSS3' diblog, dan sekarang saya akan memberikan tutorial yang berbeda dari sebelumnya yaitu Memasang 'Floating Sosial Network Black Icon Cool'.disini saya juga sudah memberikan effect pada icon Sosial Network ini, sehingga tampilannya lebih menarik tuk dilihat. :D

Demo Sosial Network Black Icon

Oke kita mulai saja ya, tidak usah banyak cing cong...haha..!!

Silahkan ikuti tahap-tahap berikut :
2. Pilih Rancangan/Tata Letak
3. Cari Kode ]]></b:skin> , Lalu Masukan Kode CSS Berikut tepat diatasnya.

/* Sosial Network Black Cool   */
#social-networking
{
position:fixed;
z-index:9999;
float:top;right:0px;top:0px;
height:34px;
padding:0;
margin:0;background:#111111;
border-top:1px solid #444;
border-bottom:2px solid #444;
padding-top:2px;
}
#social-networking ul
{
list-style-type:none;list-style:none
}
#social-networking li
{
float: left;
}
#social-networking a
{
display: block;
padding: 0 3px 0 0;
position: relative;
}
#social-networking span
{
opacity:0.5;
width: 24px;
height: 24px;
display: block;
border:4px solid #252628;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
box-shadow:inset 0 2px 6px #000000;
webkit-shadow:inset 0 2px 6px #000000;
-moz-shadow:inset 0 2px 6px #000000;
transition: all linear 400ms;
-o-transition: all linear 400ms;
-moz-transition: all linear 400ms;
-webkit-transition: all linear 400ms;
}
#social-networking span:hover
{
border:4px solid blue;
opacity:0.9;
}
#social-networking .social-icon
{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtnqmvTkT_JF1u-02bgY0In1zMYinLtTjZxL21joHwfIBcot1jLCJAXa_rKzcGkOQn-FyfriRwPF9eEzm76qMvcwlJg0vZIbGCyJa9AKqk-R17EkjIhRpEGwGDypfOZKS2l_1WY0FAQBA/s1600/social.png') no-repeat;
}
#social-networking .social-icon:hover
{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);
}
.opacity #social-networking .social-icon { opacity: 0.85; }
.opacity #social-networking a:hover .social-icon { opacity: 0.6; }
#social-networking .facebook { background-position: 0 -28px; }
#social-networking .flickr { background-position: 0 -87px; }
#social-networking .vimeo { background-position: 0 -233px; }
#social-networking .youtube { background-position: 0 -291px; }
#social-networking .linkedin { background-position: 0 -322px; }
#social-networking .googleplus { background-position: 0 -353px; }
#social-networking .dribbble { background-position: 0 -205px; }
#social-networking .tumblr { background-position: 0 -177px; }
#social-networking .skype { background-position: 0 -262px; }
#social-networking .delicious { background-position: 0 -149px; }
#social-networking .digg { background-position: 0 -117px; }
#social-networking .rss { background-position: 0 -57px; }

4. Langkah terakhir tambahkan gadget, pilih yang HTML/Javascript, Copy paste Code Berikut :

<!-- start #Sosial Network Black Cool-->
<div id='social-networking'>
<ul id='social-networking'>
<li><a href='https://twitter.com/#!/YOUR-ID' id='twitter-link' target='_blank' title='twitter'><span class='twitter social-icon'></span></a></li>
<li><a href='http://www.facebook.com/YOUR-ID' id='facebook-link' target='_blank' title='facebook'><span class='facebook social-icon'></span></a></li>
<li><a href='skype:YOUR-ID?call' target='_blank' title='skype'><span class='skype social-icon'></span></a></li>
<li><a href='http://www.youtube.com/YOUR-ID' id='youtube-link' target='_blank' title='youtube'><span class='youtube social-icon'></span></a></li>
<li><a href='http://lk.linkedin.com/in/YOUR-ID' id='linkedin-link' target='_blank' title='linkedin'><span class='linkedin social-icon'></span></a></li>
<li><a href='https://plus.google.com/u/0/YOUR-ID/' id='googleplus-link' target='_blank' title='googleplus'><span class='googleplus social-icon'></span></a></li>
<li><a href='http://delicious.com/url/YOUR-ID' id='delicious-link' target='_blank' title='delicious'><span class='delicious social-icon'></span></a></li>
<li><a href='http://digg.com/YOUR-ID' id='digg-link' target='_blank' title='digg'><span class='digg social-icon'></span></a></li>
<li><a href='http://feeds.feedburner.com/YOUR-ID' target='_blank' title='rss'><span class='rss social-icon'></span></a></li>
<li><a href='http://www.flickr.com/YOUR-ID' target='_blank' title='flickr'><span class='flickr social-icon'></span></a></li>
<li><a href='https://www.tumblr.com/YOUR-ID' target='_blank' title='tumblr'><span class='tumblr social-icon'></span></a></li>
<li><a href='http://dribbble.com/YOUR-ID' target='_blank' title='dribbble'><span class='dribbble social-icon'></span></a></li>
<li><a href='http://vimeo.com/YOUR-ID' target='_blank' title='vimeo'><span class='vimeo social-icon'></span></a></li>
</ul></div>
<!-- end #Sosial Network Black Cool-->

5. Simpan template..........

Selamat mencoba, dan kembangkan sesuai keinginan masing-masing... :)

Jika ada pertanyaan jangan sungkan untuk meninggalkan jejak di kotak komentar trim atas kunjungannya ^_^ Please rate this article: