Merubah Tampilan Widget Blog's Stats Blogger

Satu yang terpikirkan ketika ada keinginan untuk menggunakan widget Blog's Stats Blogger adalah "tampilannya yang sangat tidak menarik". Kalau boleh dikatakan secara jujur, bentuk dan tampilannya sangat ndeso tak ubahnya si gubhugreyot" yang "ndeso kluthuk". Berangkat dari dari inilah maka terpikir untuk sedikit mengubah si "widget blog's stats" ini agar terlihat lebih "pantas dipajang di halaman blog". Yah..., biar blog juga nggak terlihat semakin amburadul, gitu, lhoh!

Merubah gaya dan penampilan widget blog's stats blogger dapat dilakukan melalui penggunaan kode css atau xHTML atau sekaligus keduanya. Beberapa perubahan yang dapat dilakukan diantaranya pada jenis font (font-family), ukuran font (font-size), warna font (color), background serta dimungkinkan juga menambah beberapa properti css baru agar tercipta perubahan yang lebih drastis dari aslinya. Dalam posting ini akan kita buat sebuah bentuk kode css baru (mengacu pada kode yang digunakan widget blog' stats blogger) yang bisa anda kembangkan lagi hingga mendapatkan bentuk perubahan tampilan widget lebih maksimal dan mungkin saja lebih fantastis.

Cara merubah tampilan widget blog's stats blogger

Sebelum memulai perubahan pada widget anda wajib mengaktifkan widget blog's stats blogger terlebih dahulu melalui add a gadget di elemen laman (page elements). Panduan cara mengaktifkan widget bisa anda buka dengan klik di sini ! Setelah widget berhasil di tampilkan di halaman blog, silahkan ikuti panduan berikut.

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard).
3. Klik Rancangan (Design).
4. Klik Edit HTML.
5. Lakukan backup template dengan cara:
   
   • Klik Download Template Lengkap (Download Full Template).
   • Simpan file template di folder PC. File yang sudah tersimpan ini berfungsi untuk mengembalikan template ke kondisi sebelum perubahan dilakukan jika terjadi kesalahan yang mengakibatkan kerusakan desain blog. Untuk memulihkan template seperti sebelum perubahan anda bisa klik Browse dan dilanjutkan Upload.
6. Cari kode ]]></b:skin>.
7. Copy dan pastekan kode CSS di atas kode ]]></b:skin>.
8. Klik Simpan Template (Save Template).

Kode CSS Widget Blog's Stats (modif):

#Stats1 .widget-content{
       background:#aaa url(http://gubhugreyot-images.googlecode.com/files/gubhugreyot-bg-grad-transp-2-50.png) left center repeat-x;
       width:150px;
       padding:4px;
       border:1px solid #eee;
       box-shadow:0 0 8px #000;
       text-align:center;
       border-radius:6px;  /* by : gubhugreyot, 01 Febuari 2011 */ 
}
#Stats1 .widget-content .counter-wrapper{
       height:30px;
       width:140px;
       padding:0;
       border:1px solid #aaa;
       box-shadow:0 0 6px #000;
       background: url(http://gubhugreyot-images.googlecode.com/files/gubbhugreyot_bg-anima-grad-111-35.gif) center center repeat-x;
       border-radius:4px;
       color:#555;
       font-weight:600 !important;
       font-family:Tahoma;
       letter-spacing:2px;
       font-size:18px;
}

Catatan/Keterangan:

Pilihlah bentuk tampilan widget blog's stats yang hanya berupa teks tanpa background seperti terlihat pada gambar di atas!