jQuery Slide Twitter

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

Setelah tidak posting, alhamdulillah saya sekarang akan memposting tentang tips blogging, sesuai dengan judulnya Slide Widget Twitter untuk Blog, Membuat Widget Twitter tersembunyi atau bisa juga dikenal dengan jQuery Slide Twitter karena scriptnya menggunakan jQuery dan pada waktu lalu saya juga telah membuat widget facebook, bila sobat belum membacanya silahkan baca artikelnya. Sebenarnya artikel ini berhubungan dengan artikel yang kemaren tentang Membuat Widget Twitter untuk Blog. Bila sobat belum membaca artikel tersebut, saya sarankan untuk sobat membacanya dulu biar nantinya bisa dibuat dengan baik widgetnya. Bila sobat tertarik untuk membuat jQuery Slide Twitter, maka ikuti saja langkah - langkah yang saya buat.

1. Seperti biasa login ke akun blogger sobat
2. Setelah itu, klik Rancangan, lalu Elemen Laman
3. Buka kembali widget twitter yang telah dibuat kemaren.
Bila sobat belum membuat silahkan sobat membaca artikel tentang membuat widget twitter.
4. Selah terbuka, silahkan sobat simpan kode HTML twtter tersebut
Ini adalah contoh kode HTML twitter saya

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 30000,
  width: 250,
  height: 300,
  theme: {
    shell: {
      background: '#63bdfd',
      color: '#ffffff'
    },
    tweets: {
      background: '#ffffff',
      color: '#63bdfd',
      links: '#4aed05'
    }
  },
  features: {
    scrollbar: false,
    loop: true,
    live: false,
    behavior: 'default'
  }
}).render().setUser('Junioriqfar').start();
</script>

5. Kemudian masukkan kode di bawah ini ke HTML/Javascript tadi

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".TwitBox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.TwitBox {
background: url("http://i766.photobucket.com/albums/xx310/Ikhfar/Twitter.png") no-repeat scroll left center transparent !important;
display: block;
float: right;
height: 270px;
padding: 0 5px 0 46px;
width: 245px;
z-index: 99999;
position:fixed;
right: -250px;
top: 20%;
}
.TwitBox div{
border:none;
position:relative;
display:block;
}
</style>
<div class="TwitBox" style=""><div>
MASUKKAN KODE TWITTER SOBAT DISINI
MASUKKAN KODE TWITTER SOBAT DISINI
MASUKKAN KODE TWITTER SOBAT DISINI
MASUKKAN KODE TWITTER SOBAT DISINI
MASUKKAN KODE TWITTER SOBAT DISINI
</div>

6. Pada tulisan yang berwarna hijau, sobat bisa mengatur sendiri sesuai dengan kebutuhan sobat seperti height: 270px; width: 245px; right: -250px; top: 20%;
7. Dan pada tulisan yang berwarna merah muda, sobat bisa mengganti kode HTML twitter sobat sendiri.
Bila sobat belum membuat widget twitter, silahkan sobat membaca artikel tentang membuat widget twitter.
8. Simpan

Jika sobat masih bingung terhadap langkah - langkah yang saya buat, silahkan sobat berkomentar dimana letak kebingungannya.

ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِينَ

Artikel Terkait