Postingan ini sebenarnya mau diterbitkan bulan lalu, tapi karena tanggung, lebih baik diterbitkan awal bulan ini saja biar lebih terasa nuansa semangat tanggal mudanya.. ^^ ..
Beberapa dari sobat blogger pasti pernah dan /atau masih menggunakan widget Twitter Updates pada platform blogger yang dibuat oleh BloggerBuster. Kali ini, kalian bisa membuat alternatifnya dengan kode Javascript. Keuntungannya apa...!!?? Hehe... Tentu saja widget ini jadi lebih gampang dimodifikasi dibandingkan dengan widget yang biasa, meskipun mungkin membingungkan, tapi tenang saja, karena saya akan membantu langkan demi langkah agar widget ini lebih mudah di utak-atik.
Masuk pada Dasbor Blogger, kemudian pilih Tata Letak (Edit Layout), lalu pilih Edit HTML, kemudian beri centang pada Expand Template Widget. Cari kode ]]></b:skin> (gunakan Ctrl+F pada browser untuk mencari kode) kemudian letakkan kode CSS berikut tepat di atasnya.
.twittop{margin:5px 0px 0px 0px;height:30px;background:#141313 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjfLEoxY28cXqB0LonSNDCd4hbBPrFkQyEnjHfXJ-p83xatyrHMnTSx2CPPwLlu-qRKHqyVYlcjxCkojY6FPNytbchNaUxSwxhUloykpaYLz1lZ5VrToVLqlQHizm9WSzkjo2_mYXGscM/s1600/twitop.jpg) no-repeat; /* Gambar Header*/
width:335px;}
#twitter_div{width:333px; /* Lebar Widget*/
float:left;height:100%;padding:0px 0px;margin:0px 0px;background:#fff;border-left:1px solid #fff;border-right:1px solid #fff;border-bottom:1px solid #fff;font-family:Tahoma,Century gothic,verdana, Arial, sans-serif; /* Jenis Huruf*/ }
ul#twitter_update_list{list-style:none;padding: 0px 0px;margin:0px 0px;}
ul#twitter_update_list li{font-size: 11px; /* Ukuran Teks Status*/
list-style:none; /* pilih bentuk daftar circle, disc, square, atau none*/
padding: 5px 5px;margin:0px 0px;line-height:18px;background:#B5D3DD url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeEH_omJWMQAx8xnX6SGCNKpUS10cElXbH_VCvJY-RrJe9u1n1mkhFTr_STEyhtdvfIvWZjY3pNW_WoHMc5ST54Ij2PNi1S8vJYxcfNS3aFR-gTBhE-BrXkXi5d7iEhyphenhyphennxQj7OawFa4FM/s1600/twit.jpg) repeat-x; /* Gambar Background Update Status*/
border-bottom:1px dotted #ccc; /* Warna Border*/
color:#222; /* Warna Teks Update Status*/}
/* Berikut atur saja sama seperti di atas, tetapi yang ini untuk saat mouse over (ketika kursor mouse menghampiri kotak)*/
ul#twitter_update_list li:hover{font-size: 11px; /* Ukuran Teks Status saat hover*/
list-style:none; /* pilih bentuk daftar saat hover*/
padding: 5px 5px;
margin:0px 0px;
line-height:18px;
background:#dcdcdc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3Hl3HGDjKpLTGDcxigCAcl_gpLoAsfEqnQraQhDj-BeSFzeJBucgVOHZeHDSuWYEGdQP8Ff66eMkvGAzGmXjIBxuvNrIQcHmsLTFPPYjVKNSrquj_vkmU4rb5Fg4Xjebrhy-UzFzBTm4/s1600/twith.jpg) repeat-x; /* Gambar Background Update Status saat hover*/
border-bottom:1px dotted #ccc;}
/* Berikut aturan untuk tautan (link)*/
#twitter_update_list li a:link, #twitter_update_list li a:visited{color:#D3116D;}
#twitter_update_list li a:hover{color:#BC0C0F; /* Warna Teks Links saat hover*/ }
Perhatikan teks catatan berwarna biru, kalian tinggal mengganti lokasi gambar atau bisa juga hanya menggunakan warna, ubah warna & ukuran teks dsb. Setelah itu Simpan (Save), lalu masuk pada Elemen Halaman (Page Elements), kemudian tambah gadget, pilih Kode HTML/Javascript, dan paste-kan kode javascript berikut, kemudian Simpan.
<div class='twittop'> </div> <div id='twitter_div'> <ul id='twitter_update_list'/> </div>
<script src='http://twitter.com/javascripts/blogger.js' type='text/javascript'/> <script src='http://twitter.com/statuses/user_timeline/ID-user-twitter.json?callback=twitterCallback2&count=5' type='text/javascript'/><br/>
<center><a href='http://twitter.com/ID-user-twitter'>Ikuti Saya di Twitter</a></center>
Ubah ID-user-twitter dengan user twitter milik kalian, dan ganti angka 5 yang menunjukkan jumlah tweet yang akan muncul pada widget.
Cara ini kelihatan rumit, tapi kalau diikuti dengan hati-hati dapat memuaskan sobat semua, karena bentuknya yang lebih unik, orisinil buatan kalian sendiri, baik itu terlihat dari gambar, warna, bullet, dan gambar.
Contoh widget ini terdapat pada bagian bawah blog ini, tapi pada blog ini saya tidak menggunakan gambar background, hanya menggunakan permainan warna saja.
Ini cuma untuk latihan dan menambah pengalaman saja, jadi jangan ragu mencoba... ^^ ...
KEMBALI KE ATAS
