Tutorial: Cara Membuat Widget Twitter di Blog

Cara Membuat Widget Box Twitter di Blog – Membuat atau memasang widget Twitter untuk Tweet (update status) serta follower Twitter selain untuk kebutuhan share artikel juga untuk mempercantik blog. Kali ini yang saya posting khusus buat  update status (tweet) atau search name account Twitter dan follower twitter yang boleh anda pasang di sidebar. Demo hasil widget bisa lo lihat pada screenshoot dibawah dan scriptnya bisa langsung dicopy aja terus pasang di sidebar blog sobat dan jangan lupa ganti username twitternya.

- Inilah kode script  Search Name Account Twitter dan Follower Twitter yang bisa langsung lo copas:

<div style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0FOKb2ISPFm9ItZXqd4Gg8P_SxaB3c-SbEEOb8CPPACsoil9BwXv1nuSy0BMj36rXCTpXcucZirNhbY3uOg4mFvSwHbde0fxaWGE_MjmQiZw13V_O6_nKF_jH98sMqkYeD9KKGnXhe0M0/s1600/tweet.png) no-repeat;padding-top:45px;padding-left:8px"> <script src="http://widgets.twimg.com/j/2/widget.js"></script> <script> new TWTR.Widget({ version: 2, type: 'search', search: 'mbroooh', interval: 30000, title: 'Putra Andana Purnama', subject: '#SuperheroMendatang', width: 285, height: 123, theme: { shell: { background: 'transparent', color: '#000000' }, tweets: { background: 'transparent', color: '#444444', links: '#a60606' } }, features: { scrollbar: false, loop: true, live: true, hashtags: true, timestamp: true, avatars: true, behavior: 'default' } }).render().start(); </script> </div> <br /> <div class="twitter"> <!-- Twitter --> <span style='float:left;'><a class='twitter-follow-button' data-button='grey' data-link-color='#00AEFF' data-text-color='#000000' href='http://twitter.com/mbroooh '>Follow @mbroooh</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></script></span></div>

- Ini demo screenshoot hasil script diatas:

- Inilah kode script  update status (tweet) dan follower twitter yang bisa langsung lo copas:

<div style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0FOKb2ISPFm9ItZXqd4Gg8P_SxaB3c-SbEEOb8CPPACsoil9BwXv1nuSy0BMj36rXCTpXcucZirNhbY3uOg4mFvSwHbde0fxaWGE_MjmQiZw13V_O6_nKF_jH98sMqkYeD9KKGnXhe0M0/s1600/tweet.png) no-repeat;padding-top:45px;padding-left:8px"> <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: 123, theme: { shell: { background: 'transparent', color: '#000000' }, tweets: { background: 'transparent', color: '#444444', links: '#a60606' } }, features: { scrollbar: false, loop: true, live: true, hashtags: true, timestamp: true, avatars: true, behavior: 'default' } }).render().setUser('mbroooh').start(); </script> </div> <br /> <div class="twitter"> <!-- Twitter --> <iframe title="" style="width: 300px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&align=&button=blue&id=twitter_tweet_button_0&lang=en&link_color=&screen_name=mbroooh&show_count=&show_screen_name=&text_color=" frameborder="0" scrolling="no"></iframe> </div>

 - Ini demo screenshoot hasil script diatas:

Setting Option Javascript

• search: search name account twitter anda, misalkan search name account gue "mbroooh" gantilah sesuai keinginan lo, intinya sih username account lo.
• Background: desain lah sekreatip mungkin, kalo yang aslinya kaya gini (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0FOKb2ISPFm9ItZXqd4Gg8P_SxaB3c-SbEEOb8CPPACsoil9BwXv1nuSy0BMj36rXCTpXcucZirNhbY3uOg4mFvSwHbde0fxaWGE_MjmQiZw13V_O6_nKF_jH98sMqkYeD9KKGnXhe0M0/s1600/tweet.png) desainlah sesuai skil lo.
• Khusus untuk twitter follow button gantilah sesuai dengan username twitter lo, misalkan account twitter gue "papspir" gantilah dengan account twitter lo, begitu juga dengan linknya yang tertera pada kode script pertama kaya gini "https://twitter.com/papspir" gantilah dengan link account twitter lo. 

Intinya sih buatlah sesuatu yang berbeda, coba liat dibagian sidebar gue yang bertittle "Celotehland" adakah perbedaan? #okesip

Jika ada kendala dalam script yang gue share, mohon bela sungkawa buat ngoreksi, sebelum dan sesudah banyak-banyak terimakasih :)

Selamat mencoba~~~