Blog - Efect "Colt de pagina intors" pentru Blogger

Pentru a vedea ce este un colt de pagina intors uitati-va in coltul din dreapta al blogului meu sau intrati aici pentru demo. Pentru a vedea cum functioneaza treceti mouse-ul pe deasupra lui. Utilizare efect: 1. In primul rand puteti pune o avertivare cu privire la abonarea la feed-ul blogului, asa cum este si in demo. 2. In al doilea rand puteti pune un link catre o pagina din blogul vostru pe care vreti ca vizitatorii sa o acceseze mai des. 3. O a treia intrebuintare ar fi punerea unui anunt prin care anuntati alte site-uri ca isi pot face publicitate chiar in acel loc. Si daca aveti cereri o puteti face schimband anumite parti din cod. Veti vedea la sfarsitul articolului cum sa faceti. Daca va mai vine si altceva in cap cu atat mai bine. Instalare efect - dificultate in instalare: medie 1. La punctul unu vom adauga in codul html al sablonului, codul CSS si codul JavaScript care genereaza efectul. Intrati la Aspect --> Editati html si neaparat faceti o copie a sablonului, ca de fiecare data cand umblam la codul lui. Acest lucru poate fi util in cazul in care ceva nu merge cum trebuie si vom fi nevoiti sa revenim la forma actuala a sablonului. Cu ajutorul combinatiei de taste Ctrl+F cautati acest cod:</head>  Dupa ce l-ati gasit, copiati inaintea lui urmatorul grup de coduri:
<style type='text/css'>
img { behavior: url(iepngfix.htc) }
#pageflip {
    position: relative;
    right: 0; top: 0;
    float: right;
}
#pageflip img {
    width: 50px; height: 52px;
    z-index: 99;
    position: absolute;
    right: 0; top: 0;
    -ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
    width: 50px; height: 50px;
    overflow: hidden;
    position: absolute;
    right: 0; top: 0;
    background: url(http://www.wallheaven.com/subscribe.png) no-repeat right top;
}
</style>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Page Flip on hover

    $(&quot;#pageflip&quot;).hover(function() {
        $(&quot;#pageflip img , .msg_block&quot;).stop()
            .animate({
                width: &#39;307px&#39;,
                height: &#39;319px&#39;
            }, 500);
        } , function() {
        $(&quot;#pageflip img&quot;).stop()
            .animate({
                width: &#39;50px&#39;,
                height: &#39;52px&#39;
            }, 220);
        $(&quot;.msg_block&quot;).stop()
            .animate({
                width: &#39;50px&#39;,
                height: &#39;50px&#39;
            }, 200);
    }); 
});
</script>2. La punctul doi vom adauga codul html care formeaza efectul. Acesta este format din link-ul catre care v-a trimite clicul pe acest widget, si poza coltului intors. Tot in pagina Editati html cautati urmatorul cod: Cei care au sablonul facut cu designerul de sabloane trebuie sa caute acest cod: </body>  si imediat dupa el copiati urmatorul grup de coduri:
<div id='pageflip'> 
<a href='http://feeds2.feedburner.com/TotulDespreBlogger'><img alt='' src='http://www.wallheaven.com/page_flip.png'/></a> 
<div class='msg_block'></div> 
</div>
Ce puteti schimba, sau chiar trebuie schimbat la aceste coduri: 1. Pentru a schimba imaginea care apare cand coltul se lasa in jos, schimbati codul scris cu albastru ( http://www.wallheaven.com/subscribe.png ) cu adresa imaginii voastre. 2. Link-ul scris cu rosu in codul de mai sus este link-ul catre care trimite clicul dat pe acest widget. Schimbati-l dupa cum doriti.