Senin, 12 November 2012

Cara Memasang Widget Recent Tweet

0 komentar
Mungkin widget ini sudah pasaran bagi kalian. Tapi widget ini mungkin lebih berbeda dari biasanya yang mana widget recent tweet ini menggunakan fungsi slider, fungsi CSS dan juga menggunakan JavaScript. Widget ini dikemukakan oleh Syed Faizan yang merupakan author dari sebuah website ternama yaitu http://www.mybloggerlab.com . Kalian bisa melihat demonya disini

  • Login Blogger
  • Template >> Edit HTML >> Tunggu Proses
  •  Sekarang kalian cari code ]]></b:skin>, letakan code di bawah ini diatas ]]></b:skin>

#mblfeedtop {
width: 280px;
height: 79px;
margin-bottom:-6px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh4BnKOStI73ZvYI8CPBtTTtx3-QkpSWG3LW8kMmYP5evJjibff8qAmOZUIR0OhHMxitoCyqfSfGV8II1G-Vl_VPBbYx-mMx3kDojwMJqhucBwNmmjgjww7wjMMrmJ6AVNEBAozhVSUfk/s1600/MBL_TOPPER.png) no-repeat;
}

#mblfeedbottom {
width: 280px;
height: 7px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ6FnkvhmF3Wb2xqEYn2y9k7UaK8EENQW7f0uFeIXZ22ziBt2AlmPeoRPkg4hFlCCDXWvpFCJvICCE70q8f8vAdgkw7nC7flQhTsQWWED3E4tLKVpOigDEWZWl8Ms8yRFPe26v_jOBrTo/s1600/MBL_BOTTOM.png) no-repeat;
}

#mblfeedinner {
     width: 280px;
     font-family: Arial, Verdana, sans-serif;
     font-size: 12px;
     color: #000000;
}

.ttw-date {
     color: #949494 !important;
     display: block;
}

#mblfeedinner a {
     text-decoration: none;
     color: #095f8f;
}

#mblfeedinner ul {
     margin: 0;
     padding: 0;
     list-style: none;
}

#mblfeedinner ul li {
background: #63defa url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqQFfr1qRcMgH_vMLcuDQaH9r8FnHlMjVTWm-DijtD3XzKV0LL79_vFUGBPKX25kvk7gIBc0W0ziOWcPkOZe9Bvr7014bwohXEXG108LlIdzbV_hHUAVrLQN2AyMG1AEuWQfApGm02NY/s1600/MBL_DIVIDER.png) repeat-x;
padding: 11px 9px;
min-height: 42px;
}

.ttw-body {
     display: block;
}

#mblfeedinner img {
     margin-right: 10px;
     float: left;
}

#mblfeedinner strong {
     margin-right: 5px;
  • Lalu kalian cari code  </head>, letakan code JavaScipt ini di atas code </head> tadi
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery.jtweetsanywhere-1.3.1.min.js"></script>
 
    <script>
/*$(document).ready(function(){
    $('div#mblfeedinner').twitterTrackbacks({
        url:'http://twitter.com/@A_Dhaa',
        n:4,
        show_n:0,
        image_width: 42,
        reply: '',
        retweet: '',
        info: '',
        show_author: 1
    });
});
$(document).ready(function(){
      $('div#mblfeedinner').relatedTweets({
         query: 'mybloggerlab',
         realtime:0,
         n:4,
         image_width: 42,
         show_source: 0
      });
   });
*/
$(document).ready(function(){
    $('#mblfeedinner').jTweetsAnywhere({
        username: '',
        searchParams: 'q=@A_Dhaa',
        count: 3,
        showTweetFeed: {
            showProfileImages: true,
            showUserScreenNames: true
        },
        showTweetBox: {
            label: '<span style="color: #303030">Spread the word ...</span>'
        }
    });
});
</script> 
  • Ganti A_Dhaa dengan nama twitter kamu
  • Simpan Template Kalian
  • Ini belum selesai kalian perlu menuju tata letak >> Tambah Gadget >> Edit HTML/JavaScript
  • Isi HTML/JavaScript itu dengan code di bawah ini
<div id="mblfeedtop"></div>
<div id="mblfeedinner"></div>
<div id="mblfeedbottom"></div>
  • Simpan
 Semua Selesai : Sekarang Widget Recent Tweet kalian sudah terpasang di blog kalian.

Leave a Reply