Trik menghilangkan dan mengganti Icon Bogger di Widget profile

Jika mungkin anda tertarik untuk menghilangkan atau mengganti icon blogger di widget profile blogger, inilah cara yang paling tepat. Anda hanya perlu menambah sedikit kode CSS di atas kode ]]></b:skin>, maka dalam sekejap ucon blogger akan hilang atau berganti dengan icon baru. Bahkan, jika ingin menambah daya tarik tampilan widget profle, anda bisa menggunakan sebuah image/gambar animasi (bergerak), seperti misalnya bendera negara atau emoticon dan berbagai gambar animasi lain dengan ukuran kecil. Gunakan icon pengganti dengan ukuran lebar max 20px dan tinggi 20px.
Kode CSS yang berfungsi untuk menghilangkan icon blogger di widget profil ini bisa dikembangkan atau digabungkan dengan kode css yang berfungsi untuk membuat image profil blogger berbentuk bulat, sehingga membuat widget profil anda menjadi jauh berbeda dengan tampilan widget profil default blogger. Jika ingin menggabungkannya, anda tinggal menambahkan kode CSS-nya dan menyimpan kedua kode CSS di atas ]]></b:skin>. Panduan berikut kode CSS untuk membuat image profil blogger berbentuk bulat (lingkaran) dapat dibuka melalui link di bawah ini:
Trik Merubah Image Profile Blogger menjadi bulatTutorial cara merubah tampilan image profile blogger yang berbentuk kotak menjadi berbentuk bulat. Perubahan ini akan membuat tampilan widget profile jauh lebih menarik dan terlihat berbeda dari biasanya.

Kode CSS untuk menghilangkan Icon Blogger

Dengan kode CSS ini maka icon blogger di widget profile akan hilang sehingga yang tersisa hanya Nama Blogger.

.profile-name-link{
 background:none !important;
}

Kode CSS untuk menghilangkan & mengganti Icon Blogger

Jika anda menggunakan kode CSS yang ini, maka selain icon blogger menjadi hilang, maka diposisi icon blogger tersebut akan ditampilkan icon baru yang bentuk dan jenis gambarnya dapat anda pilih secara bebas.

.profile-name-link{
 background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQEphPCJ7Dd-G8vahZJM5SDc4lxI5pjL7Ps-bM-SPTz2EUDgyrqWlzkHrKmq7bimlwcIk3Lst-8fgcVQHao0xIaj9XpwmatHaH1FJ0Z2ypPewT4EK6O5ExmVi8Q40ziY_7Ts2vKBAvtQg/h120/indonesian-flag-20x15.gif')  no-repeat !important;
 padding-left:30px;
}

URL icon baru :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQEphPCJ7Dd-G8vahZJM5SDc4lxI5pjL7Ps-bM-SPTz2EUDgyrqWlzkHrKmq7bimlwcIk3Lst-8fgcVQHao0xIaj9XpwmatHaH1FJ0Z2ypPewT4EK6O5ExmVi8Q40ziY_7Ts2vKBAvtQg/h120/indonesian-flag-20x15.gif
Ganti URL icon ini dengan URL icon yang lain. Anda bisa menggunakan gambar statis atau gambar animasi .gif. Ukuran Icon berkisar width (20px) dan height (20px) atau dibawah ukuran tersebut.

Cara menyimpan Kode CSS

1. Login ke Blogger
2. Dasbor (Dasboard)
3. Template
4. Backup/Restore Template.
5. Edit HTML
6. Template › Edit HTML
   • Procced (Lanjutkan)
   • Cari Kode : ]]></b:skin>
   • Gunakan Ctrl + F untuk mempermudah & mempercepat pencarian.
   • Copy & paste-kan kode css tepat di atas kode tersebut.
   • Simpan Template/Save Template
7. Selesai...
8. Buka blog dan lihat penampilan image profile blogger baru anda!

Bentuk kode css (dg icon baru) di box edit-template :

.profile-name-link{
 background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQEphPCJ7Dd-G8vahZJM5SDc4lxI5pjL7Ps-bM-SPTz2EUDgyrqWlzkHrKmq7bimlwcIk3Lst-8fgcVQHao0xIaj9XpwmatHaH1FJ0Z2ypPewT4EK6O5ExmVi8Q40ziY_7Ts2vKBAvtQg/h120/indonesian-flag-20x15.gif')  no-repeat !important;
 padding-left:30px;
}
]]></b:skin>

Bagikan ke :

Facebook Google+ Twitter Digg Technorati Reddit