Minggu, 31 Oktober 2010

Modifikasi Template Blogspot

Bagi anda yang mempunyai blog di blogspot yang sudah mengganti template default yang diberikan blogspot dengan template hasil modif orang lain trik berikut bisa mempercepat loading blog anda.

Modifikasi ini mungkin tidak terlalu signifikan, namun menurut saya pribadi sangatlah diperlukan untuk memaksimalkan kecepatan loading blog kita, terutama bila template blog kita tersebut menggunakan banyak background gambar pada layoutnya.

Pertama yang harus anda lakukan adalah membuka template anda di blogspot dengan masuk ke menu Layout dan pilih Edit HTML. Disana anda akan melihat deretan kode CSS/Stylesheet dan HTML, kita fokuskan dulu pada CSS-nya. Bingung apa itu CSS/Stylesheet silahkan googling apa itu CSS/Stylesheet.


Pada Blogspot kode CSS biasanya di mulai dengan tag <b:skin><![CDATA[/*, dan diakhiri dengan kode ]]></b:skin>.

Lalu bagaimana cara modifikasinya agar loading blog kita bisa lebih cepat dan hanya me-load gambar baik itu background atau yang lainnya hanya pada satu lokasi. Simak cara berikut ini.

Pada kode CSS anda coba cari kode semisal seperti ini

.post ul li {
background:transparent url(http://img6.imageshack.us/img6/8688/controlplay.png) no-repeat scroll left center;
line-height:25px;
padding-left:20px;
}


dan lihat pada kode yang saya tebalkan. Pada CSS/StyleSheet tersebut ternyata template ini mengambil sebuah gambar dari imagehack.us, dan sepertinya itu akan sangat memakan waktu ketika blog kita dikunjungi. Belum lagi kalau misalkan batasan bandwidth dari imagehack telah habis, maka mau tidak mau gambar tersebut tidak akan tampil pada blog kita.
Nah lantas bagaimana agar gambar tercebut hanya di load dari blogspot sendiri???

Caranya coba anda copy URL gambar pada Stylesheet anda dan paste pada tab baru browser anda, lalu setelah gambar terbuka simpan gambar tersebut di komputer anda.

Selanjutnya anda buat sebuah postingan baru dan beri judul misal images. Lalu klik tombol untuk memasukkan gambar pada post editor anda. Lihat gambar ini :
Image button
Popup dialog
Setelah diklik akan muncul dialog baru untuk memasukan gambar dari komputer anda, silahkan klik saja pada tombol Browse dan cari gambar tadi yang telah anda simpan sebelumnya. Tunggu hingga proses Upload selesai.

Setelah selesai klik pada OK, dan lihat gambar tersebut kini sudah berada pada editor anda. Lalu untuk menampilkan gambar tersebut pada stylesheet anda, yang harus anda lakukan adalah mengetahui URL gambar tersebut, caranya dengan mengganti mode editor anda dari yang tadinya mode Compose ke Mode Edit HTML. lihat gambar.
Tab Select

dan anda akan melihat deretan kode seperti ini

<div style="clear: both; text-align: center;">

<a href="http://1.bp.blogspot.com/_gofqmfenqic/SyR-0OKW5II/AAAAAAAAAOE/R1m228oN8BM/s1600-h/images_anda.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/_gofqmfenqic/SyR-0OKW5II/AAAAAAAAAOE/R1m228oN8BM/s320/images_anda.jpg" /></a></div>

Lihat pada kode yang saya cetak tebal tersebut, itu adalah URL untuk gambar tersebut, anda tinggal salin saja URL-nya dan ganti URL dari imagehack tersebut di atas dengan URL ini.

Namun sebelum gambar tersebut dapat tampil pada blog anda, jangan lupa untuk menyimpan new post images anda tadi sebagai Draft dan bukan sebagai postingan. *Pada "draft post images" ketika anda selesai memasukan image jangan mengklik tombol Publish Post tapi klik pada tombol Save Now.

Ini dimaksudkan agar post ini hanya disimpan di draft dan tidak akan tampil pada archive blog anda. Dan nantinya ketika anda ingin menambah gambar lainnya anda tinggal pilih menu Posting >> Edit Posts dan di sana anda akan melihat ada postingan anda yang tersimpan sebagai draft seperti gambar berikut ini
Draft post
images on draft
ketika anda edit draft post ini maka gambar tadi masih tetap ada di situ.

Selanjutnya silahkan anda ganti satu persatu URL gambar pada stylesheet anda dengan cara yang sama. Hingga nantinya seluruh gambar pada template anda hanya me-load gambar dari blogspot itu sendiri.

Jakarta,31 Oktober 2010

0 comments:

Posting Komentar

Mohon memberikan komentar yang sesuai dengan topik artikel. Komentar Anda akan kami review dahulu sebelum ditampilkan !!!