Pada kesempatan kali ini saya mau mencoba untuk share sedikit tentang cara gimana otak-atik tampilan template . Ciee.. ciee.. mau bagi-bagi tutorial nih jadi ceritanya??? ^_^ Hehehe.. iyaa bisa dibilang mungkin seperti itu lah, sob. Walaupun emang sih awalnya saya agak sedikit ragu mau munculin postingan berlabel Tutorial – Blogger gini.

Karena pasalnya, saya tahu diluar sana pasti udah banyak banget tuh blog-blog yang ngebahas tutorial-tuorial seperti ini bahkan pun udah lebih lengkap. Tapi gak tahu nih, bisa jadi karna kemarin saya ada sharing-sharing gitu sama salah seorang yang memang udah lebih senior dibandingkan dengan saya.

Jadi tiba-tiba saya semacam dapet semangat yang lumayan sampe saya akhirnya kepikiran untuk mau berbagi lebih banyak tentang artikel-artikel How To atau semacamnya gini. Daripada nanti pun kalau disimpan-simpan malah saya jadinya bisa lupa mendingkan saya bagikan aja.

Terus pun yang saya perhatikan dari blog-blog sahabat yang kontennya hanya ngebahas tentang Tutorial Blogger itu, hampir semuanya nerapin cara COPAS ABIS-abisan. Iyaa, emang mungkin mau gimana lagi yaah, namanya juga caranya udah pasti sama misal untuk membuat blog, jelas kita butuh email, sign up di sebuah platform, mengisi segala macam sampai akhirnya jadi tuh blog. Langkah-langkahnya yaa pasti udah begitu. Gak mungkin donk kita rubah-rubah??

Tapi, yang sangat saya sayangkan adalah kenapa sampai cara membahasnya pun bisa SAMA tulisannya?? Kan kelihatan banget tuh namanya gak ada niat tuk belajar nulis blog!! Gitu pun saya gak sepenuhnya nyalahin sih, karna emang ada sisi bagusnya juga lah yang penting kita punya niat untuk mau berbagi. Pun masih banyak juga yang serius dengan konten ORIGINAL nya sendiri. 🙂

Kebetulan beberapa hari yang lalu saya habis ngotak-atik template saya ini. Ada dua masalah yang Alhamdulillah udah berhasil saya perbaiki. Salah satunya adalah yang bakalan kita bahas. Bagaimana caranya mengganti Avatar para pengguna yang memakai OpenID dan Name/URL pada saat memberikan komentar di blog kita. Emang kenapa kok repot-repot mesti diganti??

Kalau saya yang ditanya, karena saya pikir Avatar bawaannya (baca:default) itu gak sesuai sob dengan yang saya inginkan. Lihat aja format Komentar di blog saya ini, saya buat gambar/avatar nya dengan ukuran yang besar yaitu 125px. Sementara ukuran secara default nya aja 36px dan 16px. Hasilnya iyaa jadi kelihatan pecah deh. Terus alasaan yang kedua, supaya CANTIK aja kelihatannya. 😀 Hehehe..

Pertama, Login ke Blogger dan pastikan sahabat udah berada di dashboard blog yang ingin di perbaiki tampilannya. Buka menu Template > Edit HTML. Diantara tag <head> … </head> coba cari script kode seperti ini:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

Itu adalah script untuk mengaktifkan fitur Jquery pada template sahabat. Jika belum ada ketemu silahkan copy script ini dan paste kan diatas </head>. Kalau sudah ada yaa jangan ditambahin lagi. Karna dalam sebuah template gak boleh ada dua Jquery yang jenis nya sama (jquery.min) walaupun beda versi antara 1.8.3 dan 1.9.1 bisa-bisa scriptnya nanti malah gak jalan.

Kedua, Letakkan kode berikut ini diatas kode penutup tag Body atau cari yang seperti ini tulisannya </body> . Ini supaya kodenya terbaca dibagian akhir jagi gak memperlama proses loading konten atau tulisan. Copy kode ini untuk mengganti Avatar pengguna dengan OpenID :

<script>
// ganti gambar OpenID
$("img[src='http://img1.blogblog.com/img/openid36-rounded.png']")
.attr('src', 'http://2.bp.blogspot.com/-Q29MnmeH730/UfvC-hbioRI/AAAAAAAACW4/CY9pKQfhtCQ/s125/Wakdir-malu.png')
.ssyby('blank')
</script>

NB: Kode yang berwarna Ungu silahkan diganti dengan alamat Gambar Avatar yang sahabat inginkan.
Kode yang berwarna Orange silahkan disesuaikan dengan alamat Gambar Avatar bawaan template sahabat.

Dan copy kode yang dibawah ini untuk mengganti Avatar pengguna dengan Name/URL (Anonim) :

<script>
// ganti gambar OpenID
$("img[src='http://img1.blogblog.com/img/anon36.png']")
.attr('src', 'http://1.bp.blogspot.com/-fcWQfCNGvZQ/UfvC-ANylHI/AAAAAAAACWw/8SBRwV4JK0c/s125/Wakdir-malu2.png')
.ssyby('blank')
</script>

NB: Kode yang berwarna Ungu silahkan diganti dengan alamat Gambar Avatar yang sahabat inginkan.
Kode yang berwarna Orange silahkan disesuaikan dengan alamat Gambar Avatar bawaan template sahabat.

Ketiga, Silahkan klik Save Template untuk menyimpan perubahan tersebut. Dan coba lihat salah satu tulisan di blog sahabat yang ada komentar dari pengguna OpenID atau yang menggunakan Name/URL (Anonim). Ini hanya untuk memastikan apakah pengaturan diatas sudah bener-bener bekerja atau belum di template blog sahabat. Kalau belum, boleh kita sharing-sharing disini insya Allah pasti saya bantu. Atau kalau sahabat berubah pikiran dan pengen dengan yang pengaturan sebelumnya aja, iyaa gampang tinggal hapusin aja script code yang barusan kita masukin di langkah pertama dan kedua. ^_^ Mudah kan???

Sedikit Penjelasan:

Sebelum melakukan perubahan diatas ada baiknya, saya sarankan sahabat untuk melihat terlebih dahulu tulisan di blog sahabat yang ada komentar OpenID atau Anonimnya, terus coba check gambar default yang digunakan. Caranya dengan klik Kanan > Periksa Elemen. Atau dengan CTRL + U untuk membuka fitur View Page Source, setelah itu CTRL + F untuk menemukan kode gambar default yang digunakan. Cari kode ini:

http://img1.blogblog.com/img/openid (Alamat gambar untuk OpenID default)

dan ini juga

http://img1.blogblog.com/img/anon (Alamat gambar untuk Anonim default)

Tujuannya supaya alamat Gambar Avatar bawaan yang mau diganti sesuai atau istilahnya tepat sasaran. Karna bisa jadi di template yang sahabat gunakan gambar default nya berbeda ukuran (16px) dengan yang ada di template saya (36px).

Berikut ini screenshot tampilan Avatar komentar OpenID dan Anonim di blog saya yang masih dalam pengaturan default bawaan :

Komentar dengan Avatar OpenID yang lama
(Komentar dengan Avatar OpenID yang lama)
Komentar dengan Avatar Anonim atau pengguna Name/URL yang lama
(Komentar dengan Avatar Anonim atau pengguna Name/URL yang lama)

Setelah saya otak-atik dengan pengaturan seperti yang diatas, gambar avatarnya jadi begini nih:

Avatar OpenID pada Komentar BloggerAvatar Anonim pada Komentar Blogger
Model diperankan oleh : Wakdir

Selesai. Akhirnya tampilan komentar di blog Chaidir’s Web ini jadi makin keren deeh. ^_^ Hehehe..
Yuuk, boleh dicoba tinggalkan komentar disini yaaaa!! Bebas mau pakek OpenID atau Name/URL sobat. Salah satu keuntungannya adalah saya tentunya akan jadi semakin mudah untuk Blogwalking atau mengunjungi balik ke Blog sahabat atau bisa juga diarahkan menuju ke Facebook dan Twitter sahabat.

Selamat Mencoba!! Tetap Semangat Berkarya!! 🙂