Berbagi tanpa Batas

Sabtu, 10 Maret 2012

Cara Mempercantik Tampilan Twitter Conversation

with 2 comments
MalvinShare-Menyambung postingan sebelumnya tentang Cara Memasang Twitter Conversation di Blog maka pada postinga kali ini, saya akan membahas tentang Cara Mempercantik Tampilan Twitter Conversation. Seperti yang kita ketahui bahwa tampilan default Twitter Conversation adalah seperti Screenshot berikut
Memang Tampilannya sudah menarik, namun akan lebih cantik dan menarik lagi apabila tampilannya kita beri background yang cantik pula (lihat screenshot).
Dengan mempercantik tampilan Widget Twitter Conversation milik kita, maka otomatis akan mempercantik blog/web kita juga dan membuat Twitter Conversation milik kita Identik dari Twitter Conversation kepunyaan orang lain.

Tutorial Cara Mempercantik Tampilan Widget Twitter Conversation
1. Siapkan Code default Twitter Conversation yang akan diberi background.
contoh
<script charset="utf-8" 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: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#000000',
      color: '#ffffff',
      links: '#4aed05'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    behavior: 'all'
  }
}).render().setUser('MalvinMaurer').start();
</script>

2. Setelah itu sisipkan kode background berikut ini
<div style="background:#fff url(http://2.bp.blogspot.com/-Ip7u_DM5Jo0/TdEkitMSqDI/AAAAAAAAAoY/5_t7Y2A59Lg/s1600/bg_twitter.PNG) no-repeat;padding-top:40px;padding-left:5px">
Contoh : 
<div style="background:#fff url(http://2.bp.blogspot.com/-Ip7u_DM5Jo0/TdEkitMSqDI/AAAAAAAAAoY/5_t7Y2A59Lg/s1600/bg_twitter.PNG) no-repeat;padding-top:40px;padding-left:5px">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 10,
  interval: 3000,
  width: 285,
  height: 120,
  theme: {
    shell: {
      background: 'transparent',
      color: '#555555'
    },
    tweets: {
      background: 'transparent',
      color: '#222222',
      links: '#3b5998'
    }
  },
  features: {
    scrollbar: true,
    loop: true,
    live: true,
    hashtags: true,
    timestamp: false,
    avatars: false,
    behavior: 'default'
  }
}).render().setUser('MalvinMaurer').start();
</script></div>
3. Simpan
Tambahan :
a. Untuk backgroud berwarna biru pakailah kode berikut
<div style="background:#fff url(http://2.bp.blogspot.com/-Ip7u_DM5Jo0/TdEkitMSqDI/AAAAAAAAAoY/5_t7Y2A59Lg/s1600/bg_twitter.PNG) no-repeat;padding-top:40px;padding-left:5px">

b. Untuk backgroud berwarna kuning pakailah kode berikut
 <div style="background:#fff url(http://2.bp.blogspot.com/--wR32CVxlbU/T1sbffPGepI/AAAAAAAAAGU/9nLAAOm--4Q/s1600/bg_twitter.gif) no-repeat;padding-top:40px;padding-left:5px">

2 komentar:

  1. mantabs,,, tips yg bermanfaat,,
    dan ini kunjungan balik saya, oiya silakan komen ulang jika saudara ingin backlink,,

    BalasHapus
  2. postingnya bagus, jika ada waktu mampir yuk ke blog saya
    http://hoshikanoshi.blog.stisitelkom.ac.id/
    ditunggu ya ^^

    BalasHapus

Protect by