Limited Time Offers: » ONLY $10/year «
Free Domain + 20GB Hosting with Unlimited Bandwidth

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

3 langkah simple mendapatkan $50 per hari tanpa SEO

Sutradalang: alkatro com

alkatro com Artikel tentang Optimalisasi Grafis Blog Jilid 2 ini diedarkan on Thursday, November 26, 2009.
Cek update info tambahan di kotak komentar, karena kemungkinan topik tentang belajar SEO atau dollar gratis yang saya tulis antara tahun 2009 - 2013 sudah ada yang expired atau tidak relevan di tahun ini. Makasih sudah mampir. :)

Share "Optimalisasi Grafis Blog Jilid 2" yuuk

share on facebook

» Comment From Handphone, klik ning kene »

57 comments:

insanitis37 said...

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

alkatro said...

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-

alkatro said...

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:)

Munir Ardi said...

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

NURA said...

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

Zippy said...

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

Willyo Alsyah P. Isman said...

yiahhhh......aku dpt ilmu baru...thanks...

al-basri said...

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.

alkatro said...

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

blog buat bloggers said...

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

nnice posting keep blogging!!!!

Anaa said...

thanks dah sharing ilmu, guna bgt tuk newbi sprti anaa

alkatro said...

@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)

harto said...

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

Seti@wan Dirgant@Ra said...

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

alkatro said...

@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 :)

Munir Ardi said...

berkunjung mas cari tempat ngaso kekenyangan nih

bisnis online said...

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

bliyanbayem said...

mangsstabb.... coba praktek dulu ya!!!

alkatro said...

@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 :)

secangkir teh dan sekerat roti said...

repeat ya.. saya akan coba..

nuansa pena said...

Belum berani coba! Coba diblog lain dulu!

alkatro said...

@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 :)

moenas said...

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

Rizky2009 said...

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

masterGOmaster said...

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

Manchester United Indonesia said...

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

alkatro said...

@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 :)

Munir Ardi said...

tambah ramai blognya sahabat sukses selalu

akhatam said...

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

rumah blogger said...

yang penting tidak mempengaruhi kualitas gambar, nice info nich

sabirinnet said...

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

alkatro said...

@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 :)

Hitler Jr. said...

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

berita unik said...

emang bih enak naruh di blogger ato picassaa, bih ringan

Financial Adviser said...

kalo di wp enakan taruh di hosting langsung cuman ngurangin space

alkatro said...

@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

Willyo Alsyah P. Isman said...

datang lagi dgn semangat baru...hiaaatttt.....

Fajar said...

matur nuwun atas pencerahannya.....salam kenal..

alkatro said...

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

@Fajar :
sami-sami.. maturnuwun he he

Munir Ardi said...

berkunjung ke blog sahabat dengan semangat maju terus

Financial Adviser said...

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

Aryo Halim said...

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

alkatro said...

@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 :)

alkatro said...

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

Munir Ardi said...

lagi sibuk yah alkatro

secangkir teh dan sekerat roti said...

kok belum update2 kang..?

alkatro said...

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

ichaelmago said...

nice article..

ichaelmago said...

makasih ya atas kunjungannya ke blogku :)

MULYONO W SPd said...

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

come n share said...

Mantap abizz nih mas..sangat bermanfaat..

van said...

infona top markotop....

Endra said...

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

emperor edutainment said...

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

Jiox said...

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

= jeo = said...

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

blogging mania said...

BLOGGERspherepedia Like this review, Thank you.
http://bloggerspherepedia.blogspot.com

Post a Comment

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

 
Copyright © 2009 - Blog Teknologi|Bisnis Online|SEO|Script design by Wpthemedesigner . Converted By Anshul