Twitter Friends Widget ver 2.0 (jQuery Plugin)

Twitter Friends Widget ver 2.0

Setelah sebelumnya saya menulikan artikel mengenai widget Google+. Kali ini saya akan menuliskan tentang widget Twitter. Seperti yang sebelumnya widget ini juga dari Moretechtips.
Widget ini akan memperlihatkan daftar follower/teman Anda di Twitter. Jadi ini akan terlihat seperti widget Facebook fab box.
Nah langsung saja.

Pemasangan Widget

Pertama-tama masuklah ke halaman tata letak dengan mengeklik menu Tata Letak:

Tata letak Blogger
Masuk ke halaman Tata Letak

Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian salin salah satu kode dibawah ini dan letakkan di dalam formulirnya:

Profil dan Follower [DEMO 1]

pada Demo 1 ini tampilannya akan menyerupai Facebook fan box dengan memunculkan profile dan photo follower anda.
<!-- Include javascript and CSS once -->
<link href="http://twitter-friends-widget.googlecode.com/svn/v2/light.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ivyth.googlecode.com/svn/js/jquery.twitter-friends-2.0.min.js" type="text/javascript"></script>

<!-- Required HTML -->
<div class="twitter-friends" data-options="{ username:'IVYthemes' }">
   <a class="tfw-info" href="http://mkr-site.blogspot.com" target="_blank">Twitter Friends/Followers Widget</a>
</div>
<!-- Required HTML -->
  • NB: pada contoh demo diatas sudah termasuk CSS, jQuery Library, dan Twitter Friends jQuery Plugin.
  • Jika pada template anda sudah ada jQuery Library (pada widget ini 1.8.2). Hapus saja <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
  • untuk mengganti themes silahkan ganti CSSnya dari "light.css" dengan "dark.css".

Profil dan Friends/Follower dengan Friends/Follower Tweets [DEMO 2]

<!-- Include javascript and CSS once -->
<link href="http://twitter-friends-widget.googlecode.com/svn/v2/dark.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ivyth.googlecode.com/svn/js/jquery.twitter-friends-2.0.min.jsquot; type="text/javascript"></script>

<!-- Required HTML -->
<div class="twitter-friends">
   <!-- { 
      username: 'IVYthemes'
      ,friends: 1
      ,width:358
      ,users_max:16
      ,users_height:120
      ,user_image:40
      ,user_animate:'width'
      ,tweet:1
      ,tweet_height:60
      ,loop:1
   } -->
   <a class="tfw-info" href="http://mkr-site.blogspot.com" target="_blank">Twitter Friends/Followers Widget</a>
</div>
NB: Pada demo ini CSS yang digunakan dark. menampilkan profil dan follower/friends photo, dan merotasi tweetsnya.

Untuk opsi pengaturan yang lebih lengkap silahkan klik DISINI.
Sekian dulu sedikit penjelasanya

Sumber Kode: Moretechtips ~ Twitter Friends Widget v2.0
Satank Mkr Beri Komentar
Design by MKRSite Copyright © 2012 ~ 2017 Powered by Blogger
TOP