dasdas hihi
work from home paling santuy

Optimalisasi Grafis Blog Jilid 2

Optimalisasi Grafis BlogOptimalisasi Grafis Jilid 2 ini masih melanjutkan sedikit bahasan posting sebelumnya tentang posting seputar peran grafis dalam Optimalisasi Blog.
Orde Baru Jilid 2 kali ini (huss jangan nyenggol-nyenggol area politik..); Begini saudara-saudara, pada Tips Optimalisasi SEO kali ini ; haiyyaah ... maksud alkatro Optimalisasi Grafis Blog Jilid 2 kali ini menyajikan tentang optimalisasi grafis blog menggunakan sedikit kombinasi script, image dan hosting pada blogger.
Hal ini mungkin diperlukan bagi Anda yang hobby melakukan modifikasi template pada website atau blog kesayangan anda agar lebih terlihat meriah dan segar; bagi anda yang sudah expert dengan hal ini silahkan diminum dulu teh celupnya.. sruput ... sueggerr.. he he.
Tujuan dari optimalisasi Grafis Blog adalah untuk mempercepat waktu loading page sehingga visitor bisa mengakses halaman website atau blog anda dan bisa juga untuk mengurangi angka eksternal link karena penggunaan free hosting third party seperti tinypic atau photobucket.
Tips Optimalisasi Grafis Jilid 2 tersebut antara lain:

1. Optimalisasi Ukuran File Image
Jika anda telah menentukan jenis file image yang diinginkan terpasang pada blog anda; langkah optimalisasinya yaitu simpan ulang file tersebut dengan menurunkan 'sedikit' kualitas image misalnya 10% -20% persen saja (hal ini tidak begitu nampak mempengaruhi dari segi indera penglihatan kita; tetapi dapat mengurangi ukuran bobot file secara signifikan dan secara langsung mengurangi juga bobot loading page pada blog atau website Anda).

2. Optimalisasi image pada Gradasi warna.

Beberapa seniman grafis kadang menyukai teknik gradasi warna dalam memoles keindahan latar belakang sebuah template baik latar belakang pada, heading side bar content, main content maupun menu dropdown.
Langkah Optimalisasinya yaitu dengan menggunakan kombinasi script dan guntingan dari image tersebut. Hal ini bisa menghemat ukuran image sampai 20x ukuran normal. Jika contoh di bawah yang akan saya uraikan hanya menyusut sekitar 2 sampai 8 kali dari ukuran semula; itu hanyalah simulasi sederhana karena file background yang sesungguhnya pada blog biasanya memiliki ukuran panjang atau lebar sampai 700 pixel. Contoh hasil optimalisasi blog yang menggunakan cara tersebut bisa anda lihat pada blog saudara Alkatro (tenang saja sekarang servernya sudah aman; setelah kemarin siang sempat lenyap karena ada banjir pada kampung server domain dan hosting kontrakan 'luar biasa' he he)

Secara standar Efek Gradasi warna hanya mengacu pada dua jenis, yaitu:

a. Efek Gradasi Lansdcape (melebar)
Biasa dipakai untuk menghiasi background logo, header dan menu dropdown.
Contoh nama file background gambar adalah optimalisasi-blog.jpg ;ukuran file 16.3 kb dan script awal:
background-image: url(../optimalisasi-blog.jpg);


Optimalisasi Grafis Blog



Optimalisasi Grafis Blog
Langkah Optimalisasinya:
potong image tersebut dengan lebar (width)1 px dan panjang (height) tetap;seperti pada gambar di samping; ukuran file yang semula 16.3 kb sekarang menyusut menjadi sekitar 2.2 kb dengan kualitas yang sama.
kemudian tambahkan pada script blog repeat-x di baris berikutnya sehingga scriptnya menjadi :

background-image: url(../optimalisasi-blog.jpg);
background-repeat: repeat-x;

Optimalisasi Grafis Blogb. Efek Gradasi potrait (memanjang).
biasa dipakai untuk menghiasi background sidebar widget dan main content.Contoh imagenya terlihat seperti pada gambar di samping. Contoh nama file background gambar tersebut anggap saja adalah optimalisasi-blog-juga.jpg ;ukuran file 6.6 kb

Langkah Optimalisasinya:
hampir sama seperti pada langkah optimalisasi pada efek gradasi landscape;
potong image tersebut dengan lebar (width) tetap dan height 1 px ;
ukuran file yang semula 6.6 kb sekarang menyusut menjadi sekitar 2 kb dengan kualitas yang sama.

Optimalisasi Grafis Blog
kemudian tambahkan script repeat-y di baris berikutnya.
sehingga scriptnya menjadi :
background-image: url("optimalisasi-blog-juga.jpg");
background-repeat: repeat-y;

T i p s :
sebenarnya tanpa menambahkan script di baris berikutnya; browser akan mengulang otomatis image tersebut dan akan terpasang di layout seperti saat sebelum terpotong menyesuaikan lebar kolom. (jadi ga usah ditambahin script sebaris di bawahnya juga tidak masalah he he)


Jika anda menggunakan image real seperti pemandangan; anda bisa memotong gambar menjadi beberapa bagian dan alkatro sarankan menggunakan bantuan software saudara Dreamweaver dan Flash yang bernama Fire Work.

3. Menggunakan Blogger Sebagai tempat Hosting Image
Bukan rahasia lagi bahwa photobucket dan tinypic merupakan tempat favorit bagi para webmaster untuk menyimpan koleksi file image yang dimilikinya untuk kemudian dipasang pada sidebar widget; sebagai logo atau icon pada blog.
Pada tips optimalisasi blog kali ini, alkatro sedikit menawarkan alternatif penyimpan image dengan menggunakan hosting kampung kita sendiri yaitu hosting di blogger.com. Hal ini dimaksudkan untuk mengurangi load data image external dari luar blogger (istilah kerennya third party)
dan juga sebagai antisipasi kalau suatu saat server image hosting tersebut mengalami down.
Caranya adalah:
a. Login ke account blog anda di blogger.com.
b. Klik New Posting; berilah judul posting Blogger Hosting Image;
c. kemudian klik icon image (seperti saat anda mengupload image pada ilustrasi posting)
d. nah pada posting editor biasanya akan tercantum kode script misalnya seperti contoh di bawah ini :

.... ="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_RCYaNaIoU-I/Sv0p1-LU5bI/AAAAAAAAAM0/12klAcl33SU/s1600-h/hari+pahlawan.jpg"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 200px; height: 145px;" src="http://3.bp.blogspot.com/_RCYaNaIoU-I/Sv0p1-LU5bI/AAAAAAAAAM0/12klAcl33SU/s320/hari+pahlawan.jpg" alt="" id="BLOGGER_PHOTO_ID_5403521135114773938"....

Nah, alamat image yang dihosting tercantum dalam syntax script, di dalam tanda petik setelah text 'src=', yaitu :
"http://3.bp.blogspot.com/_RCYaNaIoU-I/Sv0p1-LU5bI/AAAAAAAAAM0/12klAcl33SU/s320/hari+pahlawan.jpg"

Anda bisa menyimpan beberapa file sekaligus sesuai keinginan anda ke dalam posting tersebut kemudian simpan sebagai draft. Memang alamat image source terlihat agak panjang dibandingkan jika kita mengupload di tinypic ataupun photobucket; namun dari sisi load bisa lebih cepat karena image yang kita ambil masih berasal dari kampung kita sendiri.
Kalau anda lebih berminat menggunakan free image hosting ekternal juga tidak apa-apa; posting ini hanya sekedar menawarkan alternatif sederhana bagi optimalisasi grafis pada blog dan yang pasti untuk arena update posting baru he he.. sretujuu..??

Thanks 4 Your Time
Optimalisasi Grafis Blog Jilid 2 Reviewed by alkatro on 13:18 Rating: 5

57 comments:

  1. ckckckc...
    Wah, mas katro ini emang ahli grafis ya...
    Pengetahuan ttg grafisnya mapan sekali.
    Sekalian konsul nih mas (hehe): kenapa ya, setiap kali sy pasang read more di post yang tampil di depan, kok gadget yg yg di sidebar jd geser ke bawah. Pokonya jd acak2an deh...
    Mungkin mas Katro punya solusi...
    Tp konsulnya gretongan y, hehe

    ReplyDelete
  2. gretong forever dah .. He he .. kalo blog pengetahuan ane masih pas-pasan .. saya hanya biasa dolanan html murni dan juga sedikit joomla.. mas rumah-blogger kayaknya lebih jagoan dah.. pokoke dijamin -mantaf-

    ReplyDelete
  3. side bar yang turun biasanya krn terjadi over width pd main wrap; setahu saya coba dikurangi sj angka width pada main contentnya mas.. kalo ngga salah sih he he:)

    ReplyDelete
  4. kembali keasal mas artikel memperkaya wawasan, makasih Alkatro sudah berbagi lagi

    ReplyDelete
  5. SALAM SOBAT
    TRIM TIPSNYA
    menggunakan blogger sebagai tempat hosting image.
    trims sudah dibrikan alamat imagenya.

    ReplyDelete
  6. XIxixiix...mantep deh, pembelajaran yang simpel tapi berguna banget... ;)
    *Saya juga biasanya pake hostingan blogspot :D

    ReplyDelete
  7. yiahhhh......aku dpt ilmu baru...thanks...

    ReplyDelete
  8. salam,
    wahh...ilmu yang manfaat, saya memang 'zero' tentang hal begini.

    orang kata, "kalau ingin berilmu bertemanlah dengan yang lebih berilmu, dan kalau ingin maju bertemanlah pada yang lebih maju"

    terima kasih sob, saya tumpang belajar ni.

    ReplyDelete
  9. @ mas munir, @ sobat wilyo,
    @sobat Zippy, @ mba nura, @sobat al-basri:
    iya nih; sekedar buat update posting blog saja.. siapa tahu ada manfaatnya.. makasih :)

    ReplyDelete
  10. iya betul sob!!! tambahan ni supaya gambar terindeks google image, tambahkan alt + teh celup, seruput - serput,hehe..

    nnice posting keep blogging!!!!

    ReplyDelete
  11. thanks dah sharing ilmu, guna bgt tuk newbi sprti anaa

    ReplyDelete
  12. @blog buat blogger:
    yoii.. benuul banget sudah saya post ttg alt img '' di artikel sebelumnya .. sueggeer.. he he..

    @anaa:
    sama-sama sobat.. alkatro juga masih blogger pemula (baru mulai aktif di bln september hi hi)

    ReplyDelete
  13. whuiih... boleh juga nih ilmunya, mang g salah deh kalo mampir kemari, banyak ilmunyaaa...
    Trims yaa dah berbagi ilmu, semoga suksess n tetap semangat

    ReplyDelete
  14. Kunjungan pertama,...
    makasih mas sudh berbagi.
    Salam kenal.

    ReplyDelete
  15. @Mas harto :
    ngga banyak lah mas.. hanya sedikit bermain dengan huruf dan angka ... salam sukses selalu
    makasih :)

    @Mas Setiawan Dirgantara:
    wangalaikum salam.. terimakasih sudah berkunjung di gubug saya .. salam kenal balik :)

    ReplyDelete
  16. berkunjung mas cari tempat ngaso kekenyangan nih

    ReplyDelete
  17. wah mantaps nich sobat, menambah pengetahuan. thanks ta tipsnya. salam sukses

    ReplyDelete
  18. mangsstabb.... coba praktek dulu ya!!!

    ReplyDelete
  19. @Mas Munir :
    Monggo silahkan Daeng, diminum dulu teh celupnya .. thanks :)

    @bisnis online:
    Sama-sama mas.. salam suxes selalu. thanks :)

    @bliyanbayem:
    silahkan ..boleeh banget.. he he .. thanks :)

    ReplyDelete
  20. Belum berani coba! Coba diblog lain dulu!

    ReplyDelete
  21. @kakve-santi:
    iya silahkan.. tapi di backup dulu mas temlate aslinya.. buat jaga-jaga.. he he.. mkasih :)

    @nuansa pena:
    samma.. kl gradasi saya juga baru coba2 di blog lain.. baru kalo dah fix tinggal ditempelin.. makasih :)

    ReplyDelete
  22. mantabbb broww tutorialnya,,,
    tp ane gak pny niat untuk utak-atik blog lg coz judulnya udah acak-kadut

    ReplyDelete
  23. mantab kawan nambah ilmu seputar blog.... maksi.. makasih

    ReplyDelete
  24. makasih son tips-tips jitunya aku bawa ya buat oleh oleh.makasih

    ReplyDelete
  25. Yg no 3 tu benar... Biarpun agak panjang, yg penting load-nya cepat... Saya jg sprti itu.

    ReplyDelete
  26. @moenas :
    wkwkwk.. ane juga hanya hobi ngacak-ngacak template temen buat experiment he he thanks :)

    @rizky2009:
    silahkan makasih makasih makasih juga :)

    @mastergomaster:
    silahkan dibungkus dulu . thank you :)

    @Manchester United Indonesia :
    Yups setuju sobat.. panjang dikit yang penting loadingnya lebih ngiritz.. thank you :)

    ReplyDelete
  27. tambah ramai blognya sahabat sukses selalu

    ReplyDelete
  28. Wah boleh juga nih tipsnya...!!keep bloggingg...

    ReplyDelete
  29. yang penting tidak mempengaruhi kualitas gambar, nice info nich

    ReplyDelete
  30. saya langsung coba ya, terima kasih udah bagi2 ilmu mas.

    ReplyDelete
  31. @mas munir, @mas akhatam :
    amiin.. makasih mas .. tetap semangat :)

    @rumah blogger :
    yup betul banget.. kualitas expor dah he he makasih mas :)

    @mas sabirin :

    silahkan.. makasih juga mas :)

    ReplyDelete
  32. Hehehe saya kalau titip gambar di photobucket dan ternyata berat, sepertinya saya akan titp gambar di Blogger aja dech. Terima kasih tipsnya ya .

    ReplyDelete
  33. emang bih enak naruh di blogger ato picassaa, bih ringan

    ReplyDelete
  34. kalo di wp enakan taruh di hosting langsung cuman ngurangin space

    ReplyDelete
  35. @hitler jr:
    sama-sama sobat sremangaat he he :)

    @berita unik, @financial adviser :
    yoi bener banget.. apalagi kalo wordpress bs editnya offline lebih ngiritz bandwith.. thanks

    ReplyDelete
  36. datang lagi dgn semangat baru...hiaaatttt.....

    ReplyDelete
  37. matur nuwun atas pencerahannya.....salam kenal..

    ReplyDelete
  38. @Bang Wilyo:
    yoii.. senang rasanya lihat sobat bersemangat.. ayo ... sremangaat.. :)

    @Fajar :
    sami-sami.. maturnuwun he he

    ReplyDelete
  39. berkunjung ke blog sahabat dengan semangat maju terus

    ReplyDelete
  40. wah bagus nih...
    sangad bermanfaat buat para blogger baik pemula seperti saya ^^

    ReplyDelete
  41. salut bro bikin postingan bisa begitu detail dan rapi, saya sih sekarang jarang punya waktu buat postingan! Sukses ya bro

    ReplyDelete
  42. @finansial Adviser: o iya saya lupa belum komen balik.. makasih.... langsung ke tkp --->
    @mas aryo : mumpung lagi ada waktu luang kemarin.. sekarang aja belum update posting lagi.. agak cibuk juga he he... makasih mas :)

    ReplyDelete
  43. @ mas munir : semangaat mas.. akku dataangg.. byur he he

    ReplyDelete
  44. @mas munir, @kakve:
    iya nih lagi ada order dikit.. ane update posting seadanya.. makasih :)

    ReplyDelete
  45. makasih ya atas kunjungannya ke blogku :)

    ReplyDelete
  46. Bagus juga info makasih ya mau tukaran link banner and follow yuk comment balik ya

    ReplyDelete
  47. Mantap abizz nih mas..sangat bermanfaat..

    ReplyDelete
  48. infona top markotop....

    ReplyDelete
  49. konsep posting buat hosting image, wah wah.. pencerahan yang menarik sekali ini bang. makasih ya..

    ReplyDelete
  50. mantabs tipsnya. tapi entah kenapa saya lebih suka pake hosting sendiri buat nyimpen semua image. walaupun buang space&bandwith tapi lebih terjamin. :D

    come to Blog Bisnis

    ReplyDelete
  51. @all : thank you.... :)
    tetap semangaat :)

    ReplyDelete
  52. sretujuuu dah... hehe.. thx buat info nya pak.. :)

    ReplyDelete

Cek update info tambahan ada di box komentar.
Damai di hati - Damai di bumi. Thanks sudah mampir. :)

All Rights Reserved by Bisnis Online | Blog SEO | Script © 2009 -
Powered By Blogger

Contact Form

Name

Email *

Message *

Powered by Blogger.