5in1 Banner Pendidikan dengan CSS Sprite

Banner merupakan gambar yang mewakili sebuah alamat URL situs, web, blog. Tujuannya adalah agar pembaca dan pengunjung dapat dengan cepat langsung menuju situs tertentu, tanpa mengetikkan URL di addressbar browser. Melainkan cukup dengan sekali klik banner tersebut, maka pengunjung langsung dibawa ke situs yang terwakili oleh banner tersebut.

Banyak para guru sudah mulai kreatif, terbukti semakin banyaknya bermunculan blog guru, blog pendidikan, blog pembelajaran dan juga blog atau website sekolah. Sebagai praktisi blog tentu sudah bisa membedakan antara blog pendidikan dan blog bisnis. Sedikit gambaran tentang blog bisnis biasanya berisi konten bisnis, pernak-pernik penghias blog umumnya diisi dengan banner iklan suatu produk, karena tujuan si pembuat blog tersebut adalah untuk memonetasi blognya agar sebisa mungkin dapat menghasilkan rupiah.

Live Demo 5in1 Banner Pendidikan dengan CSS Sprite

Lain halnya dengan blog pendidikan, tujuanya adalah untuk sharing ilmu dan memamanfaatkan media blog untuk menunjang transformasi pembelajaran. Karena tujuannya untuk pendidikan maka gadget yang terpasang pun adalah yang berhubungan dengan pendidikan. Termasuk juga banner pendidikan selain sebagai tombol untuk menuju situs pendidikan juga dapat mempercantik keindahan blog tersebut.

CSS Sprite banyak para web designer memanfaatkannya untuk membangun blog, alasanya berdasarkan beberapa sumber yang pernah saya baca ternyata CSS Sprite dapat menekan membengkaknya loading blog. Atau dengan kata lain CSS Sprite dapat mempercepat loading. Alasan tersebut masuk akal karena dengan CSS Sprite, gambar yang jumlahnya banyak dapat diwakili oleh satu URL gambar.

Maka dari itu pada postingan kali ini saya beri judul 5in1 Banner Pendidikan dengan CSS Sprite. Dengan menggunakan 1 (satu) gambar saja tetapi sudah mewakili 5 (Lima) banner. Kalau biasanya anda memasang 5 banner itu membutuhkan lima buah gambar, dan setelah diupload didapat 5 URL Gambar, tetapi kali ini hanya 1 (satu) URL gambar yang dijadikan untuk membuat 5 buah banner pendidikan.

Kelima banner pendidikan itu terdiri dari :

1. Banner NISN, dengan URL: http://nisn.jardiknas.org/
2. Banner NUPTK, dengan URL: http://psdmp.kemdiknas.go.id/index.php/nuptk
3. Banner BSE, dengan URL: http://bse.kemdiknas.go.id/
4. Banner NPSN, dengan URL: http://npsn.jardiknas.org/
5. Banner E-dukasi.net, dengan URL: http://e-dukasi.net/index.php

5in1 Banner Pendidikan ini berukuran lebar 250px sehingga untuk memasangnya dibutuhkan tempat dengan lebar minimal 250px. Jika tempat yang tersedia terlalu lebar, misalkan lebarnya 300px anda bisa memodifikasinya pada bagian padding.

Bagi pengelola situs pendidikan, blog guru, blog sekolah atau siapa saja yang ingin memasang 5in1 Banner Pendidikan dengan CSS Sprite, sudah saya buatkan, anda tidak perlu bersusah payah membuat scripting dan koding yang amat memusingkan. Anda tinggal copy kode di bawah ini lalu pasang pada sidebar blog.
Berikut ini kodenya :

<div id='banner-pendidikan'>
<a class="banner-pendidikan1" href="http://nisn.jardiknas.org/"target='_blank'></a>
<a class="banner-pendidikan2" href="http://psdmp.kemdiknas.go.id/index.php/nuptk"target='_blank'></a>
<a class="banner-pendidikan3" href="http://bse.kemdiknas.go.id/"target='_blank'></a>
<a class="banner-pendidikan4" href="http://npsn.jardiknas.org/"target='_blank'></a>
<a class="banner-pendidikan5" href="http://e-dukasi.net/index.php"target='_blank'></a></div>
<style>
#banner-pendidikan{background:#dddddd;float:left;width:250px;margin:0;overflow:hidden;padding:0;}
#banner-pendidikan a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQC2UaqRoEo-brgVts82AE0rVPolnv6IehAivnQezKQiN4vN6g1a-cvWMiDwV4H1WxBZcKCIzLpwV78rtgx4MPljV0i9HQb_JtrIIkqM8ze7wbEztrwdhMoOXfvjI3mmKzry6ivHoO7CRl/s1600/pendid.png);
float:left;height:75px;margin:2px 3px 3px;width:244px;opacity:1.0;filter:alpha(opacity=100);}
#banner-pendidikan a:hover,#banner-pendidikan a:focus{
opacity:0.8;filter:alpha(opacity=80);height:75px;margin:2px 3px 3px;}
.banner-pendidikan1{ background-position: 0px 0px;}
.banner-pendidikan2{ background-position:0 -77px;}
.banner-pendidikan3{background-position:0 -154px;}
.banner-pendidikan4{background-position:0 -231px;}
.banner-pendidikan5{background-position:0 -308px;}
.banner-pendidikan1:hover{ background-position:0 -0px;}
.banner-pendidikan2:hover { background-position:0 -77px;}
.banner-pendidikan3:hover {background-position:0 -154px;}
.banner-pendidikan4:hover {background-position:0 -231px;}
.banner-pendidikan5:hover {background-position:0 -308px;}
</style>

Mangakhiri tulisan ini saya berpesan, apabila anda berhasil memasang 5in1 Banner Pendidikan dengan CSS Sprite ucapkanlah syukur Alkhamdulillah. Namun apabila gagal silahkan ajukan pertanyaan mudah-mudahan saya bisa menjawabnya. Terima kasih.