Cara Membuat Menu Jejaring Social Dengan CSS

Berikut ini kita akan Membahas Cara Membuat Menu Jejaring Social Dengan CSS, yaitu kelanjutan dari Cara Membuat Menu Bentuk Bunga Dengan CSS. Sekarang mari kita lanjut Totorialnya. 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 dianggap 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 (untuk Blogspot) Untuk WordPress Masukan dalam CSS Template anda

ul.topul,ul.topul ul{list-style:none;position:relative;margin:0;padding:0}
ul.topul ul{position:absolute;left:-9999px;background:url();opacity:0;transition:opacity .5s ease-in-out}
ul.topul{width:80px;height:80px;margin:50px auto}
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;transition:.2s ease-in-out}
ul.topul li.p1{margin-left:16px;margin-top:16px}
ul.topul li.p5{margin-left:80px}
ul.topul li.p6{margin-left: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}
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}
ul.topul li.p3,ul.topul li.p7{margin-top:16px}

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

<ul>
<li id=”s1″><!–[if lte IE 6]><a href=”#url”><table><tr>
<td><![endif]–><img src=”https://limsweb.files.wordpress.com/2012/11/social.png” alt=”social” />
<ul>
<li><a href=”#url”><img src=”https://limsweb.files.wordpress.com/2012/11/delicious.png” alt=”delicious”/></a></li>
<li><a href=”#url”><img src=”https://limsweb.files.wordpress.com/2012/11/digg.png” alt=”digg” /></a></li>
<li><a href=”#url”><img src=”https://limsweb.files.wordpress.com/2012/11/facebook.png” alt=”facebook” /></a></li>
<li><a href=”#url”><img src=”https://limsweb.files.wordpress.com/2012/11/flickr.png” alt=”flickr” /></a></li>
<li><a href=”#url”><img src=”https://limsweb.files.wordpress.com/2012/11/linkedin.png” alt=”linkedin” /></a></li>
<li><a href=”#url”><img src=”https://limsweb.files.wordpress.com/2012/11/myspace.png” alt=”myspace” /></a></li>
<li><a href=”#url”><img src=”https://limsweb.files.wordpress.com/2012/11/stumbleupon.png” alt=”stumbleupon” /></a></li>
<li><a href=”#url”><img src=”https://limsweb.files.wordpress.com/2012/11/twitter.png” alt=”twitter” /></a></li>
</ul>
<!–[if lte IE 6]></td></tr></table></a><![endif]–></li>
</ul>

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