Tutorial Membuat CSS Sprite Image dengan Mudah - Hallo sobat blogger kali ini saya akan menuliskan artikel tentang Membuat CSS Sprite Image, mungkin sebagian orang ada yang belum mengetahui apa maksud dan tujuan CSS Sprite Image ini. CSS Sprite Image adalah suatu tekhnik dimana kita menggabungkan semua gambar menjadi satu, dengan begini blog kita bisa semakin cepat dan ringan saat di akses karena CSS Sprite Image mampu mengurangi HTTP request.
Untuk lebih jelasnya begini logikanya umpama ada sebuah website dengan 5 gambar di dalamnya, nah pada saat browser mengunjungi website tersebut browser harus bolak-balik mengunduh file gambar hingga 5x coba jika browser hanya mengunduh file gambar hanya sekali sudah di pastikan loading blog kita akan lebih baik tidak peduli walaupun ukuran file gambar tetap sama, untuk melakukan tekhnik tersebut silahkan ikuti langkah-langkah di bawah ini.
1. Kunjungi http://spritepad.wearekiss.com/
2. Lalu Drag & Drop gambar yang ingin kita buat Sprite
 |
| Klik untuk memperbesat Gambar |
3. Lalu klik Fit document jika sudah klik Download
 |
| Klik untuk memperbesat Gambar |
4. Jika sudah di download kalian akan mendapatkan kode CSS dan Gambar
5. Silahkan kalian upload file gambar ke http://postimg.org/ lalu copy link direct
Perhatian : Sebelum kalian upload disarankan compress dulu gambar sprites ke https://tinypng.com/6. Buka file CSS yang kalian dapatkan tadi lalu ganti kode yang saya beri tanda merah dengan link gambar yg sudah anda upload ke Postimg.
CONTOH:
CSS CODE
.paper_bag, .retina{
background: url(sprites.png) no-repeat;
}
.paper_bag{
background-position: -3.0034523010253906px -80.00693130493164px ;
width: 70px;
height: 70px;
}
.retina{
background-position: 0 0;
width: 80px;
height: 70px;
}
7. Jika sudah letakan kode CSS ke template kalian, caranya masuk Template>>Edit HTML lalu letakan kode CSS sebelum kode ]]></b:skin>
8. Sekarang cara menampilkan gambarnya yaitu dengan mengetikan kode dibawah ini, yang saya beri tanda hijau silahkan ganti dengan class masing2 yang ada pada kode css tadi.
<div class="retina"></div>*untuk penerapan pada blog lebih jelasnya silahkan ganti kode gambar kalian dengan kode di atas, CONTOH :
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1j-LPcqvxIjmF5gEdLhkiecS3bWe2_gYlqirws6TJAD6h8eqrqcLyR9-ZH_BkCWwhyphenhyphenTrFU94mMeT1t_-C2ePNExErl23zBdLzpHmrSB1r9449qussqEwE6sD-yzZt0nVqc7RdI3E2TQU/s1600/welcome.jpg" alt="Data uploadku" />di ganti dengan
<div class="retina"></div>Masih Bingung? silahkan bertanya :D
