Sabtu, 23 Maret 2013

Cara Membuat Widget Twitter "Join the conversation"

Banyak orang yang mengharapkan blognya dapat tampil unik dan menarik disetiap mata pengunjungnya ataupun terlihat unik dari blog-blog sahabat. Salah satunya yaitu dengan menambahkan widget-widget dihalaman blog. Kebetulan berhubungan dengan mempercantik tampilan halaman blog saya ingin share tetang Cara Membuat Widget Twitter "Join the conversation" seperti pada gambar dibawah ini :


Untuk sobat yang tertarik untuk memasang widget seperti diatas langsung saja, saya sudah sediakan kodenya dibawah. Langkah-langkah untuk memasang widget Twitter juga tidak terlalu sulit karena tidak perlu melakukan Edit HTML. Berikut Cara Membuat Widget Twitter "Join the conversation" :

  1. Login Kehalaman Blogger
  2. Pilih Tata Letak
  3. Tambah Gadget
  4. Pilih Widget HTML/Java Script
  5. Copy Kode Berikut
<div style="background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaicS8jN4xJnrgIkUFps2aOf2Af9RDYrXst-06kRi-y9RpEZ4Osb2QlPtnx28XlEu6nHIxvZjXRJ7sxGr3zWfIHOlJJkdkkyR7n10_O0Iz7XHN-PaMQoLgA_-X-KlF4gBLm2aDTbbh9VT0/s1600/twitter.png) no-repeat; padding-left: 8px; padding-top: 45px;width: 320;">
<script src="http://widgets.twimg.com/j/2/widget.js">
</script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 10,
interval: 3000,
width: 300,
height: 123,
theme: {
shell: {
background: 'transparent',
color: '#000000'
},
tweets: {
background: 'transparent',
color: '#000',
links: '#9A170D''
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'default'
}
}).render().setUser('SetyaGGMU').start();
</script>
</div>

    Keterangan :
    • Kode Warna Merah adalah Lebar Widget Twitter
    • Kode Warna Biru adalah Tinggi Widget Twitter
    • Kode Warna Hijau adalah Nama Akun Twitter (silahkan ganti sesuai dengan akun twitter sobat)
     6. Masukan kode kode diatas kedalam Widget HTML/JavaScript tadi
     7. Terakhir Klik Simpan

0 komentar:

luvne.com resepkuekeringku.com desainrumahnya.com yayasanbabysitterku.com

Posting Komentar