Cara Cepat Hamil

Trik dan Cara membuat social Network dengan menu CSS



Trik dan Cara membuat social Network dengan menu 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.
Langkah membuat menu Social Network dengan gaya CSS
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 kode ]]></b: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="http://2.bp.blogspot.com/-ickuq6mXjmQ/TbaWPCAZOuI/AAAAAAAAAno/gTk72N7iOA4/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="http://3.bp.blogspot.com/-LSwmw-3CabI/TbaWnlKcJQI/AAAAAAAAAoQ/MC5l2anflW4/s400/digg.png" alt=""></a></li>
<li class="p3"><a href="#url"><img src="http://3.bp.blogspot.com/-Pb7jB22D5lg/TbaWnfUZ8HI/AAAAAAAAAoI/VdJhJk7pSPo/s400/facebook.png" alt=""></a></li>
<li class="p4"><a href="#url"><img src="http://2.bp.blogspot.com/-RahxiTN2D2A/TbaWndW8oKI/AAAAAAAAAoA/zsVKF400Ue4/s400/flickr.png" alt=""></a></li>
<li class="p5"><a href="#url"><img src="http://4.bp.blogspot.com/--MdDLkyddw0/TbaWPR6KueI/AAAAAAAAAn4/OoN-gSWDIL0/s400/linkedin.png" alt=""></a></li>
<li class="p6"><a href="#url"><img src="http://2.bp.blogspot.com/-YsS9aXzKNTg/TbaWPYZ8QxI/AAAAAAAAAnw/4w1K7-TmOqI/s400/myspace.png" alt=""></a></li>
<li class="p7"><a href="#url"><img src="http://4.bp.blogspot.com/-HCeqkQDkoVE/TbaWO7mAkLI/AAAAAAAAAng/z7LtJmr59AA/s400/stumbleupon.png" alt=""></a></li>
<li class="p8"><a href="#url"><img src="http://1.bp.blogspot.com/-zlY6je0EIKE/TbaWOhECtaI/AAAAAAAAAnY/tk_DVQFNBvI/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 dan semoga berhasil.
Trik dan Cara membuat social Network dengan menu CSS 9out of 10 based on 10 ratings. 9 user reviews.


Posted by : Gadis ~ / Software, Blog Tips and Trik, Tutorial , Internet, Bisnis

Artikel Trik dan Cara membuat social Network dengan menu CSS diposting oleh Gadis . Terima kasih atas kunjungannya. Kritik dan saran dapat disampaikan via kotak komentar.. Jika diperlukan Artikel ini bisa disebarluaskan melalui blog sobat, hanya mohon sebutkan sumbernya dengan tautan link aktif ke postingan ini. Terima kasih. Happy blogging

0 komentar:

Poskan Komentar