Manual na Rede: Apagar e acender a luz do seu blog

sábado, 16 de abril de 2016

Apagar e acender a luz do seu blog

Apagar e acender a luz do seu blog

Hoje vamos aprender a apagar a luz do seu blog ou deixar ele com menos luz possível. Essa função é muito importante, principalmente quando você costuma ficar por muito tempo na frente do seu computador. E também é possível deixar a luminosidade 100% escuro com a tela toda preta.

1- Clique em Modelo » Clique em Editar HTML » Dê Ctrl+F e encontre
<body expr:class='"loading" + data:blog.mobileClass'> copie o código abaixo, e depois de copiado, cole embaixo da linha pesquisada (em rosa) e salve.

2- Na mesma caixa do editor do seu blog, Dê Ctrl+F e localize </head> depois de localizado, copie esse código abaixo, e cole acima do </head> e salve.

3- Localize agora o ]]></b:skin> e depois de encontrado, copie esse código abaixo, e depois cole acima da linha pesquisada e salve.

4- E por ultimo, saindo do seu editor HTML, Vá em seu Layout >> Em Adicionar um Gadget e quando abrir uma janela, escolha o HTML/JavaScript copie esse código abaixo, cole e salve.

<style>
/*primeiro botão*/
.ligar {
    position: relative; width: 53px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.ligar-checkbox {
    display: none;
}
.ligar-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #F5F5F5; border-radius: 6px;
}
.ligar-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.ligar-inner:before, .ligar-inner:after {
    display: block; float: left; width: 50%; height: 75px; padding: 0; line-height: 75px;
    font-size: 10px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.ligar-inner:before {
    content: "Off";
    padding-left: 24px;
    background-color: #76E854; color: #FFFFFF;
}
.ligar-inner:after {
    content: "On";
    padding-right: 24px;
    background-color: #6FA876; color: #FFFFFF;
    text-align: right;
}
.ligar-switch {
    display: block; width: 11px; margin: 32px;
    background: #14E014;
    position: absolute; top: 0; bottom: 0;
    right: -26px;
    border: 2px solid #F5F5F5; border-radius: 6px;
    transition: all 0.3s ease-in 0s; 
}
.ligar-checkbox:checked + .ligar-label .ligar-inner {
    margin-left: 0;
}
.ligar-checkbox:checked + .ligar-label .ligar-switch {
    right: 0px; 
}
/*segundo botão*/
.desligar {
    position: relative; width: 53px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.desligar-checkbox {
    display: none;
}
.desligar-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #F5F5F5; border-radius: 6px;
}
.desligar-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.desligar-inner:before, .desligar-inner:after {
    display: block; float: left; width: 50%; height: 75px; padding: 0; line-height: 75px;
    font-size: 10px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.desligar-inner:before {
    content: "Off";
    padding-left: 24px;
    background-color: #6FA876; color: #FFFFFF;
}
.desligar-inner:after {
    content: "On";
    padding-right: 24px;
    background-color: #76E854; color: #FFFFFF; 
    text-align: right;
}
.desligar-Amim {
    display: block; width: 11px; margin: 32px;
    background: #14E014;
    position: absolute; top: 0; bottom: 0;
    right: -26px;
    border: 2px solid #F5F5F5; border-radius: 6px;
    transition: all 0.3s ease-in 0s; 
}
.desligar-checkbox:checked + .desligar-label .desligar-inner {
    margin-left: 0;
}
.desligar-checkbox:checked + .desligar-label .desligar-Amim {
    right: 0px; 
}
/*deixar varios botões lado a lado*/
.horLado {vertical-align:top;width:94px;text-align:center;display:inline-block;margin-bottom:10px;margin-right:-19px;margin-left:-19px;}
</style>
<div style="position:fixed;bottom:300px;left:10px;"id="apagador">
<div class="desligar SomPlayer14">
    <input type="checkbox" name="desligar"class="desligar-checkbox" id="desligar"/>
    <label class="desligar-label" for="desligar">
        <span class="desligar-inner aceso"></span>
        <span class="desligar-Amim aceso"></span>
    </label>
</div>
</div>
<script>
var SomPlayer14 = new Audio('http://www.freesfx.co.uk/rx2/mp3s/2/2710_1329133090.mp3');
document.addEventListener('change', function(e){
 if(e.target.parentNode.className.indexOf('SomPlayer14') != -1){
  SomPlayer14.currentTime = 0;
  SomPlayer14.play(); 
 }
});
</script>

Pronto... agora o seu blog tem um interruptor na lateral a esquerda para acender ou apagar, caso desejar que o interruptor fique no lado direito, localize a linha
<div style="position:fixed;bottom:300px;left:10px;"> da janela 4 e troque o left por right.

Nenhum comentário:

Postar um comentário

Assinar: Postar comentários (Atom)