Cara Membuat Tombol Share Yang Unik di Blog


Cara Membuat Tombol Share Yang Unik di Blog menu adalah link yang menghubungkan blog kita dengan beberapa 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.

Screen Shot :

Cara Membuat Tombol Share Yang Unik di Blog - Coretan Diko


 Langsung Saja Nich Tutornya :
 1. Login ke blogger
 2. Element Halaman
 3. Edit HTML
 4. Cari Kode berikut ( Gunakan Ctrl+f Untuk memudahkan ) ]]></b:skin>
 5. Lalu pastekan Kode dibawah ini Diatasnya :

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:
 1. Klik Element Halaman
 2.Add Widget
 3. HTML/javascript.
 4.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.

1 komentar: