Rabu, 22 Mei 2013

CARA PASANG BACKGROUND BERUBAH-UBAH


Salam blogger, pastinya anda sobat blogger pasti pengen tahu cara mengganti background blog anda, tapi kalau setiap kali ganti trus harus edit template pastinya bakalan lama editnya. Dan setelah utak-atik lewat blog sobat lain akhirnya dapat terpasang juga background yang dapat berubah-ubah dan disertai opsi pilihannya. Seperti dalam blog saya tampilan pilihan background ada di sebelah kiri atas tampak pada gambar 

Berikut ini kodenya silahkan pastekan di HTML/ Javascript

<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

<div style='display:scroll; position:fixed; top:40px; left:25px;'>

<div class="widget-content"> <left><blink style="color: rgb(0, 102, 0);"><span style="font-weight: bold; color: rgb(0, 153, 0);">Change Background of This Blog!</span></blink><br /><br /> <left><select onchange="document.body.style.background = this.value;this.style.background = this.value;" name="DADcbgc" title="Change Background Image" width="185" height="30"> <option value="url() repeat center center fixed" />None <option value="url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_Jij0nhyOfo9YedfQZj_z1P5zqlufjhgnfk3CvhJ1dDeIrg27LjH1lAfSP_raQMtS-glpQAirpLbMB65bTm07kZS0PsfFNuWsycn0Dwy__0lmxgMx_wlE79jsOULzXUyaZKBlLQ_DhXk/h120/Phoenix_Animation.gif) repeat center center fixed" />Fire phonix <option value="url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2n4yXudwOAAJBn0H-TXpnDbj-AJj887njIGKkrKrDuHlamz7aGFrz2p_D0CBErRt1xPljb6qLtUe42qyOw9HLhMfU9sri_hz7aNXgNzbXRZs-BbWPLlOtsp4y36aCvL72C-oaH0aaCqE/h120/horse_fire1.jpg) repeat center center fixed" />Fire horse <option value="url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgddpZlNhA_FK7y_ij8bH2CO0gIjpnVAGrCCY3OypPPfqZg1O9lgR_Rm5EmhZY_lAdcPKVRdGz5sKenPQ7DHSSYsoW3PO8UKP-h-_ydRDVTZEZBak5wrsQGx8NgYjqiBarVgkq001Aai2A/h120/hujan.gif) repeat center center fixed" />Rain <option value="url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBsawl_b9n9E4jwFYaRCgz4XmLp9K4G4AbuxoszH_i26ECTZ68cGv7uCdUMzaRuSbARea1VS00oeIwqmQjjPbGx-4T41p4NEob9WTpVg4Km8mTWMEcyiq-08AK0WneJaJxOojckrhXZMQ/h120/ikan+komet.jpg) repeat center center fixed" />Ikan <option value="url(http://yahyarezpectors.files.wordpress.com/2011/01/sharingan_wheel_by_neronin2.gif) repeat center center fixed" />Sharingan <option value="url(http://data0.eklablog.fr/hinata/mod_article214242.gif) repeat center center fixed" />Sharingan 2 <option value="url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2ldqx_6GM4dJOMuhagGf9WfF14RpnCsJ2_zzFWdsW42EkF2CvJ3wu0nOIiAG7wD_NX0-vkbyBnYGS8B53JO3uRUTxmUUM9W_YePetr5VxhNBOs72QsN4xy3uSszpEJQ6SmNb0jkF_Qnyv/s1600/death-note%25284%2529.jpg) repeat center center fixed" />Death Note 1 <option value="url(http://i469.photobucket.com/albums/rr57/dragonknight0000039/ae/death20note20L.jpg) repeat center center fixed" />L Lawliet 1 <option value="url(http://lh5.googleusercontent.com/_GaKwmMcf4N4/TZF_GOqPR_I/AAAAAAAAEsY/iGS-uTIVDs8/DADbg.JPG) repeat center center fixed" />Hidden Leaf <option value="url(http://lh4.googleusercontent.com/_GaKwmMcf4N4/TZGC4NlmmMI/AAAAAAAAEvk/cma5mtW-beU/DADbg2.JPG) repeat center center fixed" />Rikimaru <option value="url(http://lh6.googleusercontent.com/_GaKwmMcf4N4/TZGC24bJuCI/AAAAAAAAEvg/O1mDH3LU91w/DADbg0.jpg) repeat center center fixed" />Yu-Gi-Oh! <option value="url(http://lh5.googleusercontent.com/_GaKwmMcf4N4/TZGDGbOqsnI/AAAAAAAAEwI/FWAbOOZu2go/DAD1.jpg) repeat center center fixed" />Deidara <option value="url(http://lh4.googleusercontent.com/_GaKwmMcf4N4/TZGC7eK9TtI/AAAAAAAAEvw/Ly5L0UA3D4s/DADcloud.gif) repeat center center fixed" />Akatsuki Cloud <option value="url(http://lh5.googleusercontent.com/_GaKwmMcf4N4/TZGC7UA67RI/AAAAAAAAEv0/ehJ-oez_akU/DADbluematrix.gif) repeat center center fixed" />Blue Matrix <option value="url(http://lh3.googleusercontent.com/_GaKwmMcf4N4/TZGC9O9ZNUI/AAAAAAAAEv8/Idjb8xIrw60/DADgreenmatrix.gif) repeat center center fixed" />Green Matrix </select> </left></left></div><br/><left><a href="http://winduherang.blogspot.com/" target="_blank">Lihat</a></left>



</div>

untuk menambah atau mengubah gambar background silakan ganti atau sisipkan kode berikut:

<option value="url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgddpZlNhA_FK7y_ij8bH2CO0gIjpnVAGrCCY3OypPPfqZg1O9lgR_Rm5EmhZY_lAdcPKVRdGz5sKenPQ7DHSSYsoW3PO8UKP-h-_ydRDVTZEZBak5wrsQGx8NgYjqiBarVgkq001Aai2A/h120/hujan.gif) repeat center center fixed" />Rain 


untuk tulisan warna merah adalah posisi tempat widget berada
untuk tulisan warna hijau adalah jarak widget dari tepi 
untuk tulisan warna biru adalah url gambar dan option pilihan yang akan ditampilkan dalam widget
untuk tulisan warna kuning adalah kata bantu widget silahkan diganti sesuai keinginan sobat
untuk tulisan warna ungu adalah posisi tulisan yang diganti sobat
untuk tulisan warna orange adalah url yang sobat ingin link dengan widget ini

ok Gan selamat mencoba ...... kalo belum jelas silakan tanya pada kotak komentar.


Tidak ada komentar:

Posting Komentar

Salam Sukses