Cara mengatasi combine images using CSS sprites

Deal Score0

[dropcap]B[/dropcap]anyak sekali faktor yang mempengaruhi performa sebuah blog diantaranya adalah images. Jika Anda melakukan cek pagespeed website Anda di gtmertix.com biasanya akan muncul salah satu faktor performa kecepatan website yaitu Combine images using CSS sprites. Meskipun mendapatkan prioritas “medium”  namun mengkombinasikan images (gambar) dengan CSS ini merupakan hal yang penting agar website lebih cepat terload.

Combine images using CSS sprites

Untuk melakukan combinasi images dengan CSS, kita dapat menggunakan  free tools SpriteMe ini. Namun sebelum itu ada baiknya Anda tes terlebih dahulu website Anda di gtmetrix.com untuk mengetahui skor performa blog Anda. Langkah-langkahnya yaitu:

  1. Buka gtmetrix.com
  2. Ketikkan blog Anda pada kolom “Enter URL to Analyze” kemudian klik tombol Analyze
  3. Silahkan tunggu beberapa saat.
  4. Setelah proses analisa selesai, maka akan muncul skor performa  blog Anda mulai dari PageSpeed Score, YSlow score, Page load time, total page size dan Request.
  5. Fokuskan pandangan Anda pada nilai angka yang tertera di PageSpeed Score saja. Berapa nilai skor blog Anda sebelum di perbaiki faktor Combine images using CSS sprites.

Setelah Anda mengetahui skor pagespeed blog Anda di gtmetrix.com, langkah selanjutnya yaitu menginstal tools SpriteMe pada  toolbar browser Anda. Langkah-langkahnya yaitu:

  1. Buka situs spriteme.org ini
  2. Klik dan seret SpriteMe (yang ada di bawah Installation) ke Toolbar browse Anda.

Bingung, tidak tau dimana toolbar browser? Silahkan lihat video tutorial dibawah. Jika perlu download videonya menggunakan IDM v6.23 build 17 yang dirilis 24 Juli 2015 kemarin :)

Combine images using CSS sprites wordpress

Ok… kita teruskan. Langkah selanjutnya  yaitu:

  1. Buka website Anda
  2. Setelah website terbuka, klik SpriteMe yang ada di toolbar browser Anda dan tunggu sebentar
  3. Pada Suggested Sprites, klik Make Sprite
  4. Save as di komputer gambar yang dihasilkan dari SpriteMe, biasanya file gambar bernama spriteme1.png
  5. Upload file gambar spriteme1.png ke hosting blog Anda lalu copy linknya kemudian paste di notepad agar tidak lupa. Contoh link spriteme1.png  hasil upload milik saya : http://cahborneo.com/wp-content/uploads/2015/07/spriteme1.png
  6. Kembali buka blog Anda lalu klik Export CSS, maka akan terbuka halaman  SpriteMe Export CSS.

combine images using css sprites

Pada halaman SpriteMe Export CSS ini Anda akan melihat kode CSS yang harus Anda tambahkan ke file yang akan dikombinasikan dengan file gambar. Pada kasus ini saya mencontohkan file yang akan di kombinasikan yaitu file css yang terdapat pada folder plugin Live News. File-file yang perlu di kombinasikan gambarnya (Combine images using CSS sprites) yaitu file-file yang ada dibawah Suggested Sprites.  Jadi jika yang muncul di Suggested Sprites hanya 2 link saja maka hanya dua link itu yang harus dikominasikan, namun jika lebih Anda tinggal sesuaikan saja. Disini ada 2 file yang harus di kombinasikan (lihat gambar hasil Export CSS dibawah ini)

cara combine images using sprites css file[box type=”info” align=”” class=”” width=””]Dalam kasus ini, file CSS yang harus dikombinasikan (Combine images using CSS sprites) yaitu file front-style.css dengan file gambar spriteme1.png yang linknya telah Anda simpan di notepad pada langkah sebelumnya.

Dari gambar diatas, file gambar yang harus diganti (Combine images using CSS sprites) dalam file front-style.css yaitu kode yang diberi tanda garis panjang, diganti dengan kode yang ada dibawahnya dan ditambah background-position.[/box]

Selanjutnya login ke blog wordpress Anda untuk memasang dan mengedit kode css sesuai dengan perintah SpriteMe Export CSS yang Anda dapatkan. Tutorial ini saya sesuaikan dengan kasus saya, Anda tinggal menyesuaikan.

  1. Pada gambar diatas, front-style.css berada pada root /plugins/live-news/css/ sehingga saya harus membuka Plugins > Editor kemudian saya pilih plugin live-news/css/front-style.css untuk mengedit file css plugin live news.
  2. Untuk mempermudah penggantian kode, saya memanfaatkan searching (tekan Ctrl +F) dan menuliskan #dc-ln-clock dan #dc-ln-close
  3. Hasilnya:

[one_half]Sebelum

#dc-ln-clock{
position: absolute;
left: 0;
bottom: 0;
width: 80px;
background: url(‘/../img/clock.png’) repeat-x;
height: 40px;
line-height: 40px;
text-align: center;
color: #111;
font-size: 28px;
font-weight: 700;
}[/one_half]

[one_half_last]Sesudah

#dc-ln-clock{
position: absolute;
left: 0;
bottom: 0;
width: 80px;
background: url(‘http://cahborneo.com/wp-content/uploads/2015/07/spriteme1.png’) repeat-x;
background-position: 0px -10px;
height: 40px;
line-height: 40px;
text-align: center;
color: #111;
font-size: 28px;
font-weight: 700;
}[/one_half_last]

dan yang satunya

[one_half]Sebelum

#dc-ln-close{
background: url(‘/../img/close-button.png’) repeat-x;
cursor: pointer;
position: absolute;
right: 0;
bottom: 0;
width: 80px;
background-color: #fff;
height: 40px;
line-height: 40px;
text-align: center;
}[/one_half]

[one_half_last]Sesudah

#dc-ln-close{
background: url(‘http://cahborneo.com/wp-content/uploads/2015/07/spriteme1.png’) repeat-x;
    background-position: 0px -70px;
cursor: pointer;
position: absolute;
right: 0;
bottom: 0;
width: 80px;
background-color: #fff;
height: 40px;
line-height: 40px;
text-align: center;
}[/one_half_last]

File-file css yang harus di kombinasikan dengan gambar (Combine images using CSS sprites) tidak mesti harus file css dan gambar yang ada dalam folder plugins, namun semua file yang muncul dalam danftar Suggested sprites. Dan kebetulan pada blog ini yang muncul dalam daftar Suggested Sprites. Jadi silahan disesuaikan.. diatas hanya contoh langkah-langkahnya saja.

Tutorial combine images using CSS sprites wordpress

Update artikel dari blog ini selalu saya bagikan (share) di Facebook Fans Page, Twitter dan Google Plus. Silahkan follow saya agar tidak ketinggalan info updatenya!

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz
CahBorneo.Com
Register New Account
Reset Password
pulsa gratis
Mau PULSA GRATIS Kayak Gini?
Simple caranya, Gan!
* Siapkan Hp Android Anda
* Download dan Pasang apknya
* Geser-geser layar anda
* Bila perlu, ajak teman anda
* Itu saja!
SCAN atau KLIK gambar dibawah untuk memasang apknya!
pulsa gratis
SHARE
OR
SUBSCRIBE
atau
verifikasi paypal 2016 gratis
HOT!! Cara verifikasi Paypal Terbaru 2016 dengan kartu ATM Permata Bank

BACA DISINI!
GET IT NOW
FREE BACKLINK DOFOLLOW LINKS
TIPS & TRICK
SEARCH ENGINE OPTIMIZATION
A P K
FREE PREMIUM APK
MONEY
MAKE MONEY ONLINE
KEYS
ANTIVIRUS
AND MORE...
LIKE THIS PAGE TO GET UPDATES
Update terbaru selalu saya posting di Facebook Page saya. Silahkan klik Like tombol disamping agar tidak ketinggalan info update.
Info
Update IDM terbaru!
idm full crack
IDM 6.26 Build 14
Edisi 30 November 2016
Download update IDM full terbaru tanpa register gratis.
Smadav Rev. 11.0
UPDATE SMADAV PRO!
Dan penyempurnaan lainnya
Penyempurnaan fitur startup Smadav
Perbaikan gagal install pada Windows XP
Penambahan database 230 virus baru
Perbaikan kesalahan deteksi
Info
Daftar Backlinks Terbaru
idm full crack
Edisi Agustus 2016
Follow Fans Page CahBorneo.Com untuk mendapatkan update terbaru
pulsa gratis
Mau PULSA GRATIS Kayak Gini?!
Simple caranya, Gan!
* Siapkan Hp Anda
* Install APKnya
* Lakukan tugas (geser, lihat or install)
* Bila perlu, ajak teman
* Itu saja!
SCAN kode batang (QR Code) dibawah lalu install APKnya!
pulsa gratis