INFO TERKINI

Widget yang akan saya share kali ini yaitu widget follow dengan sosial ikon seperti Facebook, Twitter, RSS Feed dan tombol Berlangganan dengan Email . Widget follow ini dikembangkan dengan menggunakan jQuery dan CSS. Widget ini secara otomatis cocok di setiap template blogger dan dilengkapi dengan jQuery tooltip hover. Jika anda penasara bagaimana bentuk nya , anda bisa klik view demo dibawah ini untuk melihat demonya :



Jika anda berminat untuk meletakkan widget follow ini kedalam blogger anda, maka ikuti langkah berikut ini :

Memasang Widget Follow Jquery Ke Dalam Blogger :

1. Masuk pada akun blogger anda , pada menu dasboard pilih design > edit html .



Note : untuk menghindari sesuatu yang tidak di inginkan pada saat pemasukkan kode html maka backup template anda dengan cara mengklik download full template

2. Cari kode ]]></b:skin> lalu copy kode html dibawah ini lalu masukkan kode tersebut sebelum 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/AVvXsEgR2sN7cYAiZqhNlmPtN8KRGB_TOE-Rs_aaH_V1PycBRcwD51iiKmvL0Kc1KLMfAwQI6KgoPEXch-Wi5NpXOEEqXeRgwWdkr8M3QM9hqXxaNvmSYCRM1_IOrM6CTavzSzpgJpAz3U882Rs/) 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/AVvXsEhndCfuVxq_-874gbxRic-oQBiP6Mg9gLAWiNGAf1mhCFtQlSy2ZXMtcXbFacUA8tx5BuBFRf-fIhPT0E4pwXYrkMJZmNNAJypuguUeamx5captTwF98ILZ8arKbmOEJQAODWkCAGKS7ys/s400/allblogtools_rss.png);
  }
#social #facebook {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG2PHufvtPHiXq4FsuINIoueWoT9E5JesdKi_txYUFEWb77YblJ_kPmiUnw1p1VVoJRCs2HGpZ_yUR8Aedbsf8wmsqvAvSZXjk46tzI7QnFQ6Cn_4xKPImOxSOfs-fbSLbbzHmsJffgwg/s400/allblogtools_facebook.png);
  }
  #social #twitter {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivJTpRkwsDlaAlNUwsFuGKlxobkW4x6RvYkl7BzoCtkPaFZl8xLfH837yE6CXY3iwYM4o5jYNeS2TDXDYDs7WA3svcVcL48t8uiKkfn0L2reb_IRyFENBJLwOaCvqxBbJihs3OjjN38KM/s400/allblogtools_twitter.png);
  }
  #social #mail {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQg5x-4UaCpyCu6zB7c0DsGXhwro-2yYYPZJte76_DA41LSJweqySZa023amLYK21XNErP0ZK8Of4unHny9gNh8XhzUMNuxPABRWYRQ2hvsZtBHMqMVedSw0ttK6rucKyLVu-lrf3d2Aw/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;
  }

3. Setelah anda berhasil meletakkan kode html diatas , maka kini cari kembali kode </body> lalu letakkan kode dibawah ini lagi sebelum 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>

4. Save template anda lalu pada bagian edit html pergilah menuju page element.

5. Pada menu page element klik add gadget > html / java script.

  

5. Masukkan kode berikut ini kedalam kotak html / javascript .

<ul id="social">
 <p>Follow Us </p>
 <li><a href="http://feeds.feedburner.com/INFO-TERBARU" id="rss" title="Follow Our Feeds">Rss</a></li>
<li><a href="http://feedburner.google.com/fb/a/mailverify?uri=INFO-TERBARU" id="mail" title="Subscribe To Our News Letter">Mail</a></li>
<li><a href="https://www.facebook.com/Blogviki" id="facebook" title="Be Our FaceBook Fan">Facebook</a></li>
<li><a href="https://twitter.com/#!/Vickey_cihuy" id="twitter" title="Follow Us On Twitter">Twitter</a></li>
</ul>
<b class="abt"><a href="http://vianjb.blogspot.com">Get This Widget</a> | By <a href="http://vianjb.blogspot.com/2011/12/menambahkan-widget-follow-jquery-ke.html">Vianjb</a></b>

Note :

• Ganti kode berwarna merah dengan url feeds anda
• Gantik kode berwarna hijau dengan url fitir langganan artikel anda
• Ganti kode berwarna biru menjadi kode fan pages atau facebook anda
• Ganti kode kuning dengan alamat twitter anda.

5. Setelah semua selesai , anda bisa mengklik save dan anda bisa melihat hasilnya di blogger anda