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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC21lBJkMHcbl3uDcIdNZsqoLdPTeYF1ZwPHt2EbDtHxRFQx8TXYZPDHvGwNaga_x__w8Yh13m-ucwcNIoKGePaN2Zx3ofH4WzTQ4GH_cUMpu_BDzWbVU4aYki27awledJHd4v_PkCPIM/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/AVvXsEgr7G7cEnUHPwGmGFJnKaXzL3NNMMftXKrZ-N66F62ewOO_W1CGWaf4UVOZgg6NrlaNkInr2M2BpOOUbyb2Yw7RFrm6xo93ybTl5r9RBmtL_LyvV_PBjSdefbwb73qO3tkz1YMuaahYN38/s400/digg.png" alt=""></a></li>
<li class="p3"><a href="#url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghDG1a-rpgR-r83DWYJke7GsXNAvzZws7aTsN37LgPX1ezv0pHMv2LMsr7eTFPA-hUxv9Fx-d6dNjHDi_PVxx-Yx-14ijGGfk4WMIJxg0AOO_AyH25hbbbiYw9k9L8H1W1Y5gZYpDBwUc/s400/facebook.png" alt=""></a></li>
<li class="p4"><a href="#url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh0_CdordILeB-DcUUd0FdULNpspp26vxRCmaqp2NYdZpmMNckjnqZIJa87QCgFXAu8Msd23sC5VoTRQ9YeHMngjjmh0FfkREuvhyphenhyphenrGuo8d8mCzTAQqx8PFieo2wqzFwQGAQ126qmprZ0/s400/flickr.png" alt=""></a></li>
<li class="p5"><a href="#url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY6mEXDjX8qZgwCLjqAn20Ytzs-n3-JQuLs7NMm2g_1SFP6moGcLsLZQnTe5bz4d5I8knBkaN9AsSyqgy6_enXbQJCQ1cBHHztWFLZEpb_tPiYfly7-xYRgiEIGS5sbtrkmyNAxuu7aEo/s400/linkedin.png" alt=""></a></li>
<li class="p6"><a href="#url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVb44w3x_Q7yUGqMsPEbm_qlpos_U-XRHbDJ5t8KhTodKOHbyo__8VPSxf0bI3U29cn6xUBiFwCOn53synt5TTDA4SZR6iqfNnqgI7SzOSET7HYjXvOywxq4ndfQv2tHScw_CbjFQLqC8/s400/myspace.png" alt=""></a></li>
<li class="p7"><a href="#url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD-VAJjZCp3GDc_NLacadhnJL4hDorEAOCsimv-mMQohw_K03PLF2t2XRqzF8OdE7sGjK7qTq-SS385mMPRO1RVxVym9iv-Cv7OdTkSgIzn80V85SwP1D4ngEflFyqlKlOTDYe8Vdf9qk/s400/stumbleupon.png" alt=""></a></li>
<li class="p8"><a href="#url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpS1r6q-dcRt-P2gUvJ5UtyHukUVCYmwpvjmbZblR2ZyEShEd8YRY9Wv6xjt1l_x8VEUFc5GhxR0xeiAkclQKGPyAS4l2Mk0-ci08Vk928DrCxEzLNJ-gL3dcWi4ZqCCatvVUu90paC0k/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:
Posting Komentar