buku info

Browse Manual » Wiring » black » cool » floating » icon » network » sosial » utta » versi » Floating Sosial Network Black Icon Cool Versi UTta

---

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/AVvXsEiwfRBaNMdXPnYHZlv0ZtmFHz25dMp0mzmrimNBfGFYYYkTMjp_9r03NHxYSGU0xPHPx8pcPGBiE55f5zgcWNGtOgX2bCfEll5AfogFCxzw-DMYAG_-PMuN61vGFlkZ7V4eK-bDWw1D_fE/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 ^_^