Cara Membuat Social Networking Menu Dengan CSS

Social networking menu adalah link yang menghubungkan blog kita dengan jejaring sosial. Menu ini sangat penting dan wajib ada di sebuah blog karena kini jejaring sosial seperti facebook, twitter, digg adalah media yang sangat baik untuk mempromosikan isi blog kita pada semua friendlist. Menu sosial networking yang baik adalah yang punya tampilan yang menarik, sehingga pengunjung dengan sukacita akan sharing ke jejaring sosial tentang postingan yang dianngap berbobot bagi mereka.


Di bawah ini adalah salah satu contoh menu jejaring sosial. Jika tertarik menggunakannya, silahkan dicoba sendiri. Menu ini diolah dengan kode CSS plus HTML, tanpa kode javascript.

• 
  
  
  
  • 
  
  
  • 
  
  
  • 
  
  
  
  • 
  
  
  • 
  
  
  • 
  
  
  • 
  
  
  • 
  
  
  
  
  

Kode menu ini terbagi dua, pertama kode CSS yang akan diletakkan pada CSS blog. Caranya: Login ke blogger >> Element Halaman >> Edit HTML dan letakkan kode di bawah ini sebelum /skin.

ul.topul, ul.topul ul {padding:0; margin:0; list-style:none; position:relative;}
ul.topul ul {position:absolute; left:-9999px; background:url(); opacity:0;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
ul.topul {margin:50px auto; width:80px; height:80px;}
ul.topul ul li {width:48px; height:48px; float:left; display:inline;}
ul.topul li.topli {width:80px; height:80px; float:left;}
ul.topul :hover ul {left:-48px; top:-48px; width:176px; height:176px; opacity:1;}
ul.topul ul li img {width:48px; height:48px; display:block; border:0; position:relative; left:0; top:0;
-webkit-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
ul.topul li.p1 {margin-left:16px; margin-top:16px;}
ul.topul li.p3 {margin-top:16px;}
ul.topul li.p5 {margin-left:80px;}
ul.topul li.p6 {margin-left:16px;}
ul.topul li.p7 {margin-top:16px;}
ul.topul :hover ul li a:hover {position:relative; z-index:100;}
ul.topul li:hover ul li a:hover img {width:64px; height:64px; left:-8px; top:-8px; z-index:100;}

/* for IE6 */
ul.topul table {border-collapse:collapse: position:absolute; left:0; top:0; margin:-4px;}
ul.topul li a:hover {direction:ltr;}
ul.topul li a:hover ul li a:hover img {position:absolute; width:64px; height:64px; left:-8px; top:-8px; z-index:100;}

Kemudian Simpan template anda lalu tambahkan kode di bawah ini ke sidebar. Caranya: Klik Element Halaman >> Add Widget >> HTML/javascript. Paste kode berikut ini:

<div id="jahe">

<ul class="topul">

<li class="topli" id="s1"><!--[if lte IE 6]><a href="#url"><table>
<tr><td><![endif]--><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Wn7Ir7mO4bewY3vN9F7AAZWjiV1ocoaGiPqjkT3tI1mYhOuhaZr9ZPngeTlQrll20hx-dtn_Ant7L8JIvhMAIxsjZq3Jv8LDFcH9X4n2JA_AffpJFnnfnFNxvDyDxOydmQzqN34OUr0/s400/social.png" alt="">

<ul>

<li class="p1"><a href="#url"><img src="http://4.bp.blogspot.com
/-X3H0LV1IcM4/TbaWoIx7GuI/AAAAAAAAAoY/J8_fUGpn5mM/s400/delicious.png" alt=""></a></li>

<li class="p2"><a href="#url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJVDhWTO_b6tM3YfSjLGRiUzoKS_Mdg7kM6S2t3D0WXz-kLbk3pP7RT1Xv1vgiD929EgczojK0BwK0E8x60q0kkF2IjLVqCMX59vguvL7qOsk3ihTFJWbpgJZRLZhPeMnuaIRLSB_iLcU/s400/digg.png" alt=""></a></li>

<li class="p3"><a href="#url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinbvgLxP_XCyuF76FvQdjX8BNrJwgq9TP3rIniF8OTKNdpqKwdAdDCocOrKMysRh00vNnHiiPS3nnu63aru6Zz4YylqEfc5p_GOPSC0t1j83liyLZ9bBoY8oclcWE-sWY7_1v8N_tM8dQ/s400/facebook.png" alt=""></a></li>


<li class="p4"><a href="#url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKh-s58bURbXT78LVDTMqHHmk1SAArUXtl-XomdNXPIB2jfA9w4HNGbxAzC9pYA0f3NN9o24BWXho_b99RJCCadbg7dX9O3SziADPSIG4EHT4ZKLa7mAUDcKceApUGvuUN01QI9_uphJ8/s400/flickr.png" alt=""></a></li>

<li class="p5"><a href="#url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgp6OSu1s6BcflImF9n2iQNkUFD6hDj6nzIp2SaHq6wTt45cAon92KIw2uYgOfDqLepv47NQd6GPBDdKEctk9nglQLWknywfSJZRugltet2LdWwVKXZrPo9k3eIUFJyiEFYuUsIhXnBak/s400/linkedin.png" alt=""></a></li>

<li class="p6"><a href="#url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOWo_PNMKLy3wIrzsrVkcuxqFqKZGoe-je8gs2IT6SHae1471_Iixa0AMY4bu8cDytbBoPUpkfHUbL0Nby7xQ_5FUEP6bJJpfWfOcsYZieQQ0IO4k3kf_PxMcKuKD7zzIIrheKC-w1SvU/s400/myspace.png" alt=""></a></li>

<li class="p7"><a href="#url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw6nDb9327cZbEGleXXdhNQrJmcojhxanxxj7eUK2atvC-U8mUYRYyJbl8tR_ndVhUK9wMcC7bB37AWeyqj1FooYfp0NB77r_lcHiWyqoBWWXe2MDBE4sMmdqZcG-5LbcTe_3koC5DKfM/s400/stumbleupon.png" alt=""></a></li>

<li class="p8"><a href="#url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPgoAFmi3yC1OgWQD25kAkwcQpIrv5a0ARJh3D5_bANbhaj-x5AJ4i88tTQTv6tgqFTsVzmVWTs0zu6PL8fPfNW_UXJM4aNjy9Rxvi6RBZpsTFBE3J5Oo4t32LH68FwXuk2_Z_bDk7W-8/s400/twitter.png" alt=""></a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

</ul>

</div>

Kemudian Save dan lihat hasilnya. Setelah itu anda hanya perlu mengelola link agar sesuai dengan alamat jejaring sosial anda.


Selamat mencoba.