Cara Mempercantik Tampilan Twitter Conversation

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZttRkuw1Hm0WmmezkrGRDeNZMfubHt3ashVyRJZH3P5Va_EsY5xXWoBeIA6jOrkcnqtyfkTCZLeeS8yaoy5h3wZ5e3unKGvFQ0SLOyRvd8Mb1fedzAGgnLc34wdvHnMWTl29Pq4Evwck/s1600/bg_twitter.PNG) no-repeat;padding-top:40px;padding-left:5px">

Contoh : 

<div style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZttRkuw1Hm0WmmezkrGRDeNZMfubHt3ashVyRJZH3P5Va_EsY5xXWoBeIA6jOrkcnqtyfkTCZLeeS8yaoy5h3wZ5e3unKGvFQ0SLOyRvd8Mb1fedzAGgnLc34wdvHnMWTl29Pq4Evwck/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZttRkuw1Hm0WmmezkrGRDeNZMfubHt3ashVyRJZH3P5Va_EsY5xXWoBeIA6jOrkcnqtyfkTCZLeeS8yaoy5h3wZ5e3unKGvFQ0SLOyRvd8Mb1fedzAGgnLc34wdvHnMWTl29Pq4Evwck/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirZiRNVcdiQ2pdDnLJnLUiFuSj0jfvfTeafvprH0KMTPjE6wzsKKPEcn_rxKj4X_cw9TtDhMtFoRBGxd8kYKPcBSGAN3_QnuKfQW7W4r0m1OKPbGKU8Kx70AZtLLrA3qEJavghl9FFrd8/s1600/bg_twitter.gif) no-repeat;padding-top:40px;padding-left:5px">