Membuat Widget Follow Us Model J-Query

Widget "Follow Us" ini mungkin tidak asing lagi bagi sobat blogger, sehingga tidak terlalu penting untuk diketahui. Tapi jangan salah sobat blogger. Widget "Follow Us" yang ada di dalam blog kita itu adalah hasil bawaan dari blogger sendiri. Nah tips kali ini saya akan memberikan tips membuat widget follow us model J-Query. mungkin di antara sobat blogger ada bertanya, seperti apa itu modek J-Query. Nah sobat bisa lihat gambaer di bawah ini.

Fitur-fitur yang terdapat pada widget ini:

• Ukuran widget yang otomatis sesuia dengan template blogger.
• 4sosisl icon ( facebook, twitter, mail letter, and rss feeds).
• J-Query hover effect ( tooltip ).
• Bersih dan desain unik.

Kira-kira seperti itulah bentuknya sobat blogger. Jika sobat blogger ingin menampilkan widget itu dalam blogger sobat, silahkan ikuti langkah-langkah di bawah ini.


1. Login ke blogger dengan account sobat
2. Pilih Template/Edit HTML.
3. Cari kode  ]]></b:skin>
4. Letakkan kode berikut ini diATAS kode ]]></b:skin>

  #social {
  width: 98%;
  height: 45px;
  margin: 0;
  padding: 10px 5px 5px 30px;
  list-style: none;
  border-right:solid 1px #853529;
  position: relative;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSaSR0dq5jelyu5oBWR7AY4_gPXWbt7caiN1THiw3byJnYcy_ETiZ_Ugm0ytWoe_iY0yuwCDyYkB-EURQLyx6goJNVrUP6NmUr8YpzJ0A1EDwP_eXePamCzKuT2LgsPubGSK69Px-CaG4/) no-repeat left top;
  }

#social p{
  font-size:1.5em;
  color:#FFFB98;
  font-weight:bold;
  float:left;
  margin: 10px 10px 0 0;
  text-shadow: 1px 1px 0px #000000;
  filter: dropshadow(color=#000000, offx=1, offy=1); 
  }

.abt{
  font-size:0.8em;
  color:#787878;
  float:right;
  margin: 0 -30px 0 0;
  text-shadow: 1px 1px 0px #ffffff;
  filter: dropshadow(color=#ffffff, offx=1, offy=1); 
  }

#social li {
  width: 32px;
  height: 32px;
  float: left;
  margin-right: 3px;
  }

#social li a {
  float: left;
  display: block;
  width: 100%;
  height: 100%;
  text-indent: -1000em;
  background-repeat: no-repeat;
  text-decoration: none;
  }

#social #rss {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid-rEmGwVIyv-LGIjm696Ok8gWBtlwav_GX9o-1Vifz9In8DMxNkMySaBlQdgr2s-yaMKJFtZMDWHe89EWKpKboSe3_ZafBMTVfL9csb73M_O3a6ADaNWSKifvrsjUrrNe4rs0BwM9yfU/s400/allblogtools_rss.png);
  }

#social #facebook {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge7pxuiTxGSUEHtBS6wuATRqAvOS3G32egdhAcQc76Yp0NiIwHcbNyDXobpIihlygGPDQjypinvziSGwvhJtpV09J3L2H3Q6NB8IIaLhyphenhyphen6jFHEgryJS8qZE8jdLs4e1vR2ALsElbyH1kY/s400/allblogtools_facebook.png);
  }
  #social #twitter {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5xOyfUqfcP80dDhZHSPU6zVdjy2mRI-WQr-iMSzNyz0v8_kLLeJWcOTbfYi6E5sWnYR3EE6h6W1yXy1rBNTQDNYt4oNl7e6KT4cIyeeQf5fiZPcs-QvoOSrLBKdOgiJYNHJ0qAF1ke7M/s400/allblogtools_twitter.png);
  }
  #social #mail {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP5RaaGRixzYs9fnCIoH562PUEV8vP-wOrJudNh-w5YPblH0HXIg7SF7MXdBpOwliC1yMT4kIxO6vFyDFFGX1A3LfTXB4WrGOllYgx-WvtrOBguFGQCZQfs3KJAXw4ZgqZ9vlERfq50hk/s400/allblogtools_email.png);
  }

span.tooltip {
  background: #575757;
  padding: 3px;
  display: block;
  width: 140px;
  border: 1px solid #000000;
  position: absolute;
  margin-top:-40px;
  color: #F0F0F0;
  font-size:10px;
  text-indent: 0;
  font: Arial, sans-serif;
  text-align: center;
  -webkit-box-shadow: inset 2px 2px 2px #616161;
  -moz-box-shadow: inset 2px 2px 2px #616161;
  box-shadow: inset 2px 2px 2px #616161; 
  -moz-border-radius: 5px;
  border-radius: 5px; 
  }

5. Kemudian cari kode </body>
6, Kemudian tambahkan kode J-Query dengan cara meletakkan kode berikut ini diATAS kode </body>.

<script type='text/javascript'>
  window.setTimeout(function() {
  document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
  }, 10);
  </script>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
  <script type='text/javascript'>
  //<![CDATA[
  $(document).ready(function() {

 $('#social li').each(function() {

  var $li = $(this);
  var title = $li.find('a').attr('title');

  $li.find('a').removeAttr('title');

  $('<span class="tooltip"/>').text(title).appendTo($li.find('a')).hide();


  $li.find('a').mouseover(function() {


  var top = $(this).position().top;
  var left = $(this).position().left;

  $(this).find('span').fadeIn()({
  top: top,
  left: left
  }, 'slow'); 

  });

  $li.find('a').mouseout(function() {


  $(this).find('span').fadeOut('slow');


  });

  });


});

//]]>
  </script>

7. Setelah Selesai silahkan SIMPAN TEMPLATE.
8. Kemudian pilih Tata Letak.
9. Kemudian Tambah Gadget ==>> HTML/JavaScript.
10. Pastekan kode berikut ini ke dalam kolom HTML/JavaScript.

<ul id="social">
  <p>Follow Us </p>
  <li><a href="http://BLOG-NAME.blogspot.com/feeds/posts/default?alt=rss" id="rss" title="Follow Our Feeds">Rss</a></li>

<li><a href="MailLink#" id="mail" title="Subscribe To Our News Letter">Mail</a></li>

<li><a href="FaceBookLink#" id="facebook" title="Be Our FaceBook Fan">Facebook</a></li>

<li><a href="TwitterLink#" id="twitter" title="Follow Us On Twitter">Twitter</a></li>
  </ul>

<b class="abt"><a href="http://tips-untuk-blogger.blogspot.com/#">Get This Widget</a> | By <a href="http://www.allblogtools.com">AllBlogTools.com</a></b>

11. Kemudian SAVE. Dan jangan lupa untuk mengedit tulisan yang berwarna hijau.
Semoga berhasil dan mohon maaf jika ada error. (Jkt/2012)