Widget ini akan menampilkan profil twiter anda dengan follower, tweets dari follower/teman, dan profil akun twitter anda dengan banyaknya pilihan opsi dan pengaturan serta dengan 2 macam tema tampilan.

Twitter Friends Widget ver 2.0 (jQuery Plugin) - MKR site | Berbagi Tanpa Batas, Blogger Tips, Widget, Template

Widget ini akan menampilkan profil twiter anda dengan follower, tweets dari follower/teman, dan profil akun twitter anda dengan banyaknya pilihan opsi dan pengaturan serta dengan 2 macam tema tampilan.

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
Bagikan kepada teman!
Garis

10 comments:

  1. Balasan
    1. Harus merubah kode CSSnya khusunya yang berhubungan dengan warna..
      btw mau jadi warna apa??
      sya liat diblog agan comunityfamily48.blogspot.com
      slidernya tidak berfungsi..
      hal itu mungkin karena jQuery librarynya lebih dari satu..
      jadi pada widget yang diatas jangan copy jQuery librarynya..
      karena di template sudah ada..

      Hapus
    2. Nah iya gan, blog saya juga slidernya tidak berfungsi. Cara untuk memperbaikinya bagaimana?? dan membedakan jQeury Library slider dan yang bukan slider bagaimana??
      Terima Kasih sebelumnya .. :)

      Hapus
    3. eh eh eh gak usah min, udah ketemu cara ngidupin slidernya lagi :-d :-d maaf maaf :>) :>) ganti pertanyaan aja. Em biar slidernya automatis gambar dan post yang ane postingin bagaimana? soalnya slider saya tidak sesuai dengan postingan saya. Agar sesuai bagaimana? :)

      Hapus
  2. Thanks ya sob
    Tutorialnya mantaf nih :)

    BalasHapus
    Balasan
    1. Mantab nih buat nambah tutorial. selain tutorial Cara Membuat Twitter, kan bisa yang ini juga.

      Thanks yah

      Hapus
  3. mantap kanda, nice post.
    kalo boleh tau, blogger makassar ki?

    BalasHapus
  4. nice theme.visit my blog for demo this theme.
    http:www.boshdwallpapers4u.blogspot.com

    BalasHapus
  5. Error Bos Scriptnya...alias bermasalah

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB: Jangan menuliskan link aktif karena akan terhapus secara automatis.

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah

 
Design by MKR Copyright © 2012 ~ 2013 Powered by Blogger
TOP