5In1 Banner Pendidikan Dengan Css Sprite

Banner merupakan gambar yang mewakili sebuah alamat URL situs, web, blog. Tujuannya yakni biar pembaca dan pengunjung sanggup dengan cepat eksklusif menuju situs tertentu, tanpa mengetikkan URL di addressbar browser. Melainkan cukup dengan sekali klik banner tersebut, maka pengunjung eksklusif 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 sanggup membedakan antara blog pendidikan dan blog bisnis. Sedikit citra perihal blog bisnis biasanya berisi konten bisnis, pernak-pernik penghias blog umumnya diisi dengan banner iklan suatu produk, alasannya tujuan si pembuat blog tersebut yakni untuk memonetasi blognya biar sebisa mungkin sanggup menghasilkan rupiah.

Live Demo 5in1 Banner Pendidikan dengan CSS Sprite

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

CSS Sprite banyak para web designer memanfaatkannya untuk membangun blog, alasanya menurut beberapa sumber yang pernah aku baca ternyata CSS Sprite sanggup menekan membengkaknya loading blog. Atau dengan kata lain CSS Sprite sanggup mempercepat loading. Alasan tersebut masuk nalar alasannya dengan CSS Sprite, gambar yang jumlahnya banyak sanggup diwakili oleh satu URL gambar.

Maka dari itu pada postingan kali ini aku beri judul 5in1 Banner Pendidikan dengan CSS Sprite. Dengan memakai 1 (satu) gambar saja tetapi sudah mewakili 5 (Lima) banner. Kalau biasanya anda memasang 5 banner itu membutuhkan lima buah gambar, dan sehabis diupload didapat 5 URL Gambar, tetapi kali ini hanya 1 (satu) URL gambar yang dijadikan untuk menciptakan 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 diharapkan kawasan dengan lebar minimal 250px. Jika kawasan yang tersedia terlalu lebar, misalkan lebarnya 300px anda sanggup memodifikasinya pada bab padding.

Bagi pengelola situs pendidikan, blog guru, blog sekolah atau siapa saja yang ingin memasang 5in1 Banner Pendidikan dengan CSS Sprite, sudah aku buatkan, anda tidak perlu bersusah payah menciptakan scripting dan koding yang amat memusingkan. Anda tinggal copy instruksi di bawah ini kemudian 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/AVvXsEihBEv5YOfyTWPDSNM6o9cxAoUeOabghXUnx7inwx_S5o2Bj_2bVvG4bXYwP05nGyybR9sTS7zK2LyYzeNFEyOy7aVYgj470VvcrOhLN7_IWyv_sh6-hCejX2BzLvQGwJrj7aVeojF3obr9/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 goresan pena ini aku berpesan, apabila anda berhasil memasang 5in1 Banner Pendidikan dengan CSS Sprite ucapkanlah syukur Alkhamdulillah. Namun apabila gagal silahkan ejekan pertanyaan mudah-mudahan aku sanggup menjawabnya. Terima kasih.
Sumber http://www.notesku.com/

Share this post