Friday, October 18, 2013

Tips Merubah Template Blogspot atau Blogger


Berani menulis judul di atas bukan berarti saya ahli dalam hal template. Tulisan ini hanya berbagi pengalaman saja dalam hal merubah template, lebih tepatnya mempercantik template blog blogspot. Kalau merubah template kok kesannya membuat template baru, padahal saya kan cuma modifikasi sedikit template yang sudah ada. Bukan template bawaan blogspot. Template hasil copy template gratis.

Jadi gini.... saya kok merasa tampilan gambar untuk tiap postingan saya di halaman depan atau Home terlalu kecil, ukurannya cuma 125 x 125 pixel. Kecil kan! Untuk tahu gambar apa yang ada di postingan, orang yang mengunjungi blog saya harus memicingkan mata untuk melihatnya, bahkan harus pakai kaca pembesar *kalimat terakhir hanya gurauan saja. Maka dari itulah saya ingin membuat tampilan gambar tiap posting di halaman depan jadi lebih besar. Bisa dilihat tanpa membelalakkan mata atau harus memakai kaca pembesar #Halah

Untuk modifikasi template, saya harus masuk template kemudian klik edit template. Karena posisi gambar di postingan, maka saya memperkirakan untuk mengubah ukuran gambar, ada di bagian body html. Mulailah 'metani' baris-baris html yang saya sendiri tidak tahu maksudnya. Karena gambarnya adalah gambar postingan, maka saya mencari kata kunci 'post image'. Tetapi setelah beberapa kali mencoba dengan trail dan error, belum juga ada hasilnya. Hampir putus asa dan siap-siap cari template baru yang mempunyai fitur gambar yang lebih besar.

Iseng-iseng pada halaman depan atau Home, postingan yang ada gambarnya saya klik kanan gambar dan pilih inspect element. Di bagian bawah muncul beberapa baris kode html. Di kotak pojok kanan muncul keterangan kode html untuk gambar yang saya klik kanan tadi. Iseng-iseng lagi, saya cari letak baris kode html untuk gambar tersebut di atas. Jreeeng! Sepertinya inilah jawaban untuk memodifikasi gambar biar tampil lebih besar. Saya masukkan angka 280 x 480 pixel -> Save Template -> lihat blog. Sukses! Gambar jadi lebih besar. 
Catatan penting: untuk merubah ukuran gambar di halaman depan untuk tiap postingan ternyata di bagian kode ''post-body" cari kode html tersebut, jika ingin merubaha ukuran gambar, rubah pada bagian image.



Ringkasan
Sebelum memberikan ringkasan, saya ingin menginfokan jika dalam melakukan modifikasi template ini menggunakan browser opera, jika Anda menggunakan browser selain opera, mungkin tidak sama.
Ringkasan sebagai berikut untuk merubah ukuran gambar postingan di halaman depan, sebagai berikut:
- Masuk dasboard
- Klik template
- Klik Edit Template
- cari kode html 'post-body' seperti di bawah ini

<div class='post-body entry-content'>
<p><script type='text/javascript'>
summary_noimg = 400;
summary_img = 400;
img_thumb_height = 250;
img_thumb_width = 450; 
</script>
<script type='text/javascript'>

- rubah ukuran gambar pada skrip 'img_thumb_height' dan 'img_thumb_width' sesuai keinginan
- untuk mengatur posisi gambar di kiri, di kanan, atau di tengah, cari kode html di bawah ini

imgtag = '<span style="float:center; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

- selesai
- klik save template

Tips di atas mungkin tidak berlaku untuk model template lain, jadi Anda perlu melakukan tips yang sudah saya berikan, yaitu klik kanan, kemudian pilih inspect element

Semoga bermanfaat

1 comments:

simple banget ni caranya, nice share
btw, lam kenal mas bro

Post a Comment