Cara Membuat Widget Twitter Di Blog

Bagi anda para blogger yang memiliki twitter tidak ada salahnya untuk memasang widget twitter. Selain untuk mempromosikan twitter-nya agar memiliki banyak followers, widget twitter akan menampilkan tweet anda secara acak. Sebetulnya ada banyak variasi dalam memasang widget twitter anda juga bisa mengambilnya langsung pada akun twitter yang anda punya tetapi seperti jika mengambil langsung dari akun twitter sudah biasa dan sepertinya membosankan.

Kali ini Mas Adhie akan berbagi cara bagaimana cara membuat widget twitter keren yang sudah dioprek-oprek sehingga tampilannya cukup menarik.

Untuk membuat widget twitter keren silahkan mengikuti tutorial dibawah ini :

1. Silahkan login ke akun blogger anda

2. Klik Tata Letak (Layout)

3. Pilih Tambah Gadget > pilih HTML/Javascript

4. Pilih Mode HTML kemudian paste kode dibawah ini :

Kode Widget Twitter :

<div style="background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHrcuv5_dapMNPvK2iCoGiaZb8gzB4RoPEaerTg4mxW_lNvwNpUJh_Ic6dKO3dbWqShfPRT1L2H4FCWe9HRnXVeE_WRDCIBj8I3w7J64bGF5wqkHfA4XyTp7RIgz3Nau15u6lr4mrd4Kg/s1600/bg_twitter.gif) no-repeat; padding-left: 5px; padding-top: 40px;">
<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: 118,
  theme: {
    shell: {
      background: 'transparent',
      color: '#000000'
    },
    tweets: {
      background: 'transparent',
      color: '#000000',
      links: '#B45F04'
    }
  },
  features: {
    scrollbar: true,
    loop: true,
    live: true,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'default'
  }
}).render().setUser('Isikan dengan Username Anda').start();
</script>
</div>

Kode Widget Twitter :

<div id="twitter-ticker">

<div id="top-bar">

<div id="twitIcon">

<img alt="Twitter icon" height="64" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF180OAZiJwWvDHAc1hqIsWcTA7lT7KsPortxY3DfUMSXu3Wb5hlxdPtEKYmPPQCrDmxeahD5UsS-uKWPX3SrkHxtccME4s-OAggmQX6wseMFAFfg0z33n-Gc2GyZZoTEaw_j2qfs99FY/s1600/otowebsite.blogspot.com-twitter.png" width="64" /></div>

<h2 class="tut">

My Tweets</h2>

</div>

<div id="tweet-container">

<img alt="Loading.." height="11" id="loading" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggwrd5gM-Ebl6meno9dLt49Mvn44aqxU_KuNqRqz7NkobC5wiz_8OB9F_Of1uLYdqDeUQaVSYTKLUd43BRtWa6xgMbOzw6-dz10AvIsfwSRAHz_JwkYL46-B_FeMgArszPeFGtuJFHKNo/s1600/otowebsite.blogspot.com-loading.gif" width="16" /></div>

<div id="scroll">

</div>

</div>

<style>/* CSS Document */h2.tut{/* This is the "MY TWEETS" title */    color: white;font-family: "Myriad Pro", Arial, Helvetica, sans-serif;font-size: 16px;padding: 12px 0 0 58px;text-transform: uppercase;/* The CSS3 text-shadow property */    text-shadow: 2px 1px 6px #333;}#twitter-ticker{/* Styling the ticker */    width: 300px;height: 300px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-HWSqMUQMOSc99rFkXBPBcx7ImY8aVH4O2Vhjdxz-U2VqvDxqLpzAUBJkBZLzDA0pzDDM-VxFqOvRzlJ4MbO_4D1r4qN63pusWlXbQcdh2a12gPINfFZu6uteLE0LKBDnF0h_Q_HYyNA/s1600/otowebsite.blogspot.com-slickbg.png) no-repeat #f5f5f5;color: #666666;display: none;/* Rounded corners */    -moz-border-radius: 10px 10px 6px 6px;-khtml-border-radius: 6px;-webkit-border-radius: 6px;border-radius: 6px;text-align: left;}#tweet-container{/* This is where the tweets are inserted */    height: 230px;width: auto;overflow: hidden;}#twitIcon{/* Positioning the icon holder absolutely and moving it to the upper-left */    position: absolute;top: -25px;left: -10px;width: 64px;height: 64px;}#top-bar{height: 45px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBH66dJlomcLK_2M1dL7AFWf5XZF9O0YbPI3F1qsPIdW1syqV0V6X52j3rePNy5UxW6qf4aifehMBiKVlskS8NqIsQml9YWYh8tEMxzbI7E2V5NdIFJ4OEFQfgjqt4Z7LLez4G8VFya3Y/s1600/otowebsite.blogspot.com-top_bar.png) repeat-x;border-bottom: 1px solid white;position: relative;margin-bottom: 8px;/* Rounding the top part of the ticker, works only in Firefox unfortunately */    -moz-border-radius: 6px 6px 0 0;}.tweet{/* Affects the tweets */    padding: 5px;margin: 0 8px 8px;font-family: calibri;border: 1px solid #F0F0F0;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfsGFCpJBgz7stJ6adPmw1rdDFposVDcJYWjjCkJvY6wD716fwfty7w_kaO90GT_B9ABTosCi8G3DfORSMg6o33-6PI5XujXpVw5y4lyNOmcoRelU3BGJEghHtH6j3v0jhPKrYixpq1hk/s1600/otowebsite.blogspot.com-transparent.png);width: auto;overflow: hidden;}.tweet .avatar, .tweet .user, .tweet .time{float: left;}.tweet .time{text-transform: uppercase;font-size: 10px;color: #AAAAAA;white-space: nowrap;}.tweet .avatar img{width: 36px;height: 36px;border: 2px solid #eeeeee;margin: 0 5px 5px 0;}.tweet .txt{/* Using the text container to clear the floats */    clear: both;}.tweet .user{font-weight: bold;}a, a:visited{/* Styling the links */    color: #00BBFF;text-decoration: none;outline: none;}a:hover{text-decoration: underline;}#loading{/* The loading gif animation */    margin: 100px 95px;}.jScrollPaneContainer{position: relative;overflow: hidden;z-index: 1;}.jScrollPaneTrack{position: absolute;cursor: pointer;right: 4px;top: 0;height: 100%;background: #ddd;}.jScrollPaneDrag{position: absolute;background: #999;cursor: pointer;overflow: hidden;}.jScrollPaneDragTop{position: absolute;top: 0;left: 0;overflow: hidden;}.jScrollPaneDragBottom{position: absolute;bottom: 0;left: 0;overflow: hidden;}a.jScrollArrowUp{display: block;position: absolute;z-index: 1;top: 0;right: 0;text-indent: -2000px;overflow: hidden;/*background-color: #666;*/    height: 9px;}a.jScrollArrowUp:hover{/*background-color: #f60;*/}a.jScrollArrowDown{display: block;position: absolute;z-index: 1;bottom: 0;right: 0;text-indent: -2000px;overflow: hidden;/*background-color: #666;*/    height: 9px;}a.jScrollArrowDown:hover{/*background-color: #f60;*/}a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover{/*background-color: #f00;*/}</style><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script><script src="https://otowebsite-blogspot.googlecode.com/svn/trunk/jquery.mousewheel.js" type="text/javascript"></script><script src="https://otowebsite-blogspot.googlecode.com/svn/trunk/jScrollPane-1.2.3.min.js" type="text/javascript"></script><script src="https://otowebsite-blogspot.googlecode.com/svn/trunk/ticker-script.js" type="text/javascript"></script><script type="text/javascript">var tweetUsers=['isikan dengan username twitter anda'];</script>

</div>

5. Klik Simpan dan lihat hasilnya.

Semoga artikel bagaimana cara membuat widget  twitter di blog ini bisa bermanfaat untuk teman-teman semua, akhir kata selamat mencoba dan semoga berhasil