B
erikut ini adalah plugin background change color untuk merubah warna background blog. Dengan menekan button change, maka warna background akan berubah warna. Untuk demonya cari tombol "change" dalam artikel ini (pojok kanan bawah) dan silahkan di klik. Dan untuk file-file yang dibutuhkan dalam background change color ini, yaitu beberapa file JQuery dan juga beberapa baris CSS.Ada beberapa hal yang perlu diperhatikan, bahwa dengan menambah plugin semacam ini pastinya akan menambah ukuran berat blog, dan bisa jadi akan menambah sedikit beban loading.
Langsung saja kita merujuk pada artikel menambahkan widget background changer, untuk sekilas kode-kodenya bisa dilihat dibawah ini.
| Javascript |
|---|
| <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script src='https://binkbenkdjoel55.googlecode.com/svn/tool/javascript/chager-bg-color.js'></script> |
| Stylesheet |
|---|
| button{background:rgba(0,0,0,.5);border-radius:4px;border:1px solid #888;font:12px Arial;padding:2px;color:#ddd;position:fixed;right:0;bottom: 0;cursor:pointer; } button:hover{background:#fc0;color:#333;border:1px solid #333; } button:hover:before{width:100px;position:fixed;bottom:35px;right:20px;content:"Change Background";border-radius:3px;background:rgba(0,0,0,.5);padding:5px;font:11px Arial;color:#ddd;border:1px solid #999; } button:hover:after{content:'';position:absolute;top:-13px;left:5px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #999; } |
A
pabila di pasang di dalam template sebuah blog, usahakan main background hanya menggunakan warna, karena apabila menggunakan background image maka efek dari plugin ini tidak akan terlihat karena pada dasarnya background warna berada di belakang background gambar.Apabila sobat pengen meng-eksplorasi plugin ini lebih lanjut dan mengaplikasikannya ke widget-widget di blog, bisa langsung mengunjungi sumbernya yaitu di http://jqueryui.com/widget/, karena yang saya tulis disini sudah sedikit mengalami perombakan.
Sekian dulu semoga apa yang saya tulis ini, yang notabene hanya hasil editan, bisa sedikit bermanfaat...!!!
Sumber artikel : http://jqueryui.com/widget/
Posted On : 10 Desember 2013 Time : 22.50
