Thursday, December 15, 2011

Menambahkan Widget Follow Jquery Ke Dalam Blogger

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(http://2.bp.blogspot.com/-Nf6QgqI-jkc/Tas56HEUrwI/AAAAAAAAAxQ/hw_KYA9pPZA/follow-bg-abt.png) 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(http://2.bp.blogspot.com/-27yL99iDt70/Tas569zVJWI/AAAAAAAAAxo/NIEumM2DKRo/s400/allblogtools_rss.png);
  }
#social #facebook {
  background-image: url(http://4.bp.blogspot.com/-lfZmi7_j72c/Tas56hfwNxI/AAAAAAAAAxg/D_xE4bPyo60/s400/allblogtools_facebook.png);
  }
  #social #twitter {
  background-image: url(http://2.bp.blogspot.com/-BHCqkqm4Dnw/Tas57UCTyAI/AAAAAAAAAxw/fCj4yjzJE0g/s400/allblogtools_twitter.png);
  }
  #social #mail {
  background-image: url(http://1.bp.blogspot.com/--tzwYodHzk8/Tas56U26pSI/AAAAAAAAAxY/Xqxm-jfCPkA/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.

add gadget template - vianjb  

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

0 comments:

Post a Comment


Silakan kirimkan komentar anda entah itu kritik atau saran anda dan mohon maaf jika komentar anda tidak mendapatkan tanggapan karena saya tidak selalu online 24 jam