Friday, February 14, 2014

Energy Saving Mode pada Blog



Seperti yang kita ketahui saat blogwalking, banyak sobat blogger memasang "energy saving mode" dengan berbagai macai tulisan dan gambar.
Manfaat dari Membuat Blog Hemat Energy adalah dengan menggunakan fitur ini sobat telah membantu untuk menghemat energi.
Setiap menitnya blog sobat yang dikunjungi per orang telah mengeluarkan rata-rata 1.2 kg ke atmosfer hanya untuk memuat data-data ataupun banner yang ada di blog/situs anda.
sobat tidak perlu repot2 upload js dan bla bla bla...

Simak cara sederhananya ya...

 1. Login blog
2. Kemudian ke template
3. Letakkan kode di atas </head>
<script language='javascript' src='http://cybermig-screensaver.googlecode.com/files/cybermigscreensaver.js' type='text/javascript'/>
5. Simpan Template

Selanjutnya...

1. Masuk ke layout
2. Klik "Tambah Gadget"
3. Pilih "HTML/JavaScript"
4. Masukkan kode di bawah ini
<style type='text/css'>
div#energysaving, div#energysaving * { -moz-border-radius: 0; -webkit-border-radius: 0; border: 0; background: url(url gambar sobat) no-repeat center center fixed black; }
div#energysaving p span {display:none;visibility:hidden;}
</style>
 5. Simpan dan lihat hasilnya!!

Mudah bukan? 
Selamat mencoba dan semoga berguna tentang cara membuat energy saving mode dengan gambar pada blog

Labels:

Background Slide pada Blog

Cara Membuat Background Slideshow pada Blog


Agar kelihatan atraktif para sobat blogger pasti tertarik dengan efek slide pada background.
Background tidak statis itu-itu saja tapi berganti gambar lain.

Jika sobat ingin mengetahui Cara Membuat Background Slideshow pada Blog simak yang berikut:

1. Siapkan 3 sampe 5 url wallpaper/background seukuran desktop
2. Load background dengan jquery dengan cara, letakkan kode berikut di atas </head>
<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js'
type='text/javascript'></script>
<script
src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js'
type='text/javascript'></script>

3. Ubah css body minimal menjadi,

body {

background: black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj4wvEmHDlUL09WxQuPyJHEvh63nBa1-sprNYVm0L_xL3-AAnLnSZHeWL89t4CF_iAYa5YwMnjTGy5lOk34nbn4sBtDN6gZ_FDWVUYFFjyKeUa3I-uDlssyxFL8SrUQHnGMdTrBzKklKI/s1600/eagle.jpg)
repeat-x fixed top
center;
-moz-background-size:100%;
-webkit-background-size:100%;
-o-background-size:100%;
background-size:100%;
}

3. Letakkan script berikut pada elemen layout "html/javascript"

<script type='text/javascript'>
var ssBG={
gbr:[
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH6yYBSXDMeBs6UYOqY1su569lr7H7r1RPUOVoYIqKKhuF382uIJrYyd_QvaiEY7Ks6_kQrVKyij4WjHQEkKnClgsPMG2hKczzLSdRU3cuhfW4AaLItFS9MailKrSKDa_zyuLSAd7Z3s8/s1600/eagle1.jpg"
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjluijbStXMbb4QXHoI3hbefmBwP0d_JqLvHdp28vNTosRHnzKbzcCSXgbF-czBQTLH55HLHL34Vln0-3XHHzyVn0gz6mXOmLjxG74GHb5YR_ktuioskSzwIjYCQalsdow28nfSoLgoBA/s1600/eagle2.jpg",
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzRUMQoaed9Vd5BO8q8Y2FVEussi4fqNLAxnX5IvMVWSGbQ_qG5NF14YfPmPX8ea6cL5n9km2X74DyvEejEDMhUhCYNIp_Cb2gNMZq87MaB5X0TJwHMsglRqkjWmXy-DPR7v2RXcwG0n8/s1600/eagle3.jpg"
],
now:0,
SlideMyBG:function(list,style,speed,bgPos,bgSize,bgRep){
if(!ssBG.SlideMyBG.hasRun){ssBG.SlideMyBG.hasRun=true;
if(list==null||list==''){list=ssBG.gbr}else{if(typeof
list!='object'){list=ssBG.gbr}}
if(style==null||style==''){style='random'}
if(speed==null||speed==''){speed=5000}
if(bgPos==null||bgPos==''){bgPos='top
center'}
if(bgSize==null||bgSize==''){bgSize='100%'}
if(bgRep==null||bgRep==''){bgRep='repeat'}
ssBG.gaya=style;ssBG.jeda=speed;ssBG.gbr=list;ssBG.pos=bgPos;ssBG.size=bgSize;ssBG.rep=bgRep;
ssBG.opt={'background-attachment':'fixed','background-repeat':ssBG.rep,'-moz-background-size':ssBG.size,'background-size':ssBG.size};
}
if(ssBG.gaya=='random'){ssBG.gbr=ssBG.gbr.sort(function(){return
0.5-Math.random()})}
var img=new Image();var
brp=ssBG.gbr.length;if(ssBG.now>=brp){ssBG.now=0}
var
gbrSkrng=ssBG.gbr[ssBG.now];ssBG.now++;
if($('#bg-fader').length==0){$('body').prepend('<div
id="bg-fader"
style="opacity:0.0;top:0;left:0;width:100%;height:100%;background-color:'+$('body').css('background-color')+'"></div>');$('#bg-fader').css(ssBG.opt);$('body').css(ssBG.opt)}
$(img).load(function(){
$('#bg-fader').css({'background-image':'url('+gbrSkrng+')','background-position':ssBG.pos}).animate({opacity:1.0},'slow','linear',function(){
$('body').css({'background-image':'url('+gbrSkrng+')','background-position':ssBG.pos});
$(this).animate({opacity:0.0},'slow','linear');
setTimeout("ssBG.SlideMyBG()",ssBG.jeda);
});
}).attr('src',gbrSkrng).error(function(huh){ssBG.SlideMyBG()});
}
};
</script>
<script
type='text/javascript'>$(window).load(function(){ssBG.SlideMyBG()})</script>

4. Langkah terakhir save dan lihat hasilnya.

Tambahan: agar background blog terlihat tidak kabur, pasanglah background
seukuran wallpaper desktop.

Labels: