duminică, 28 martie 2010

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://3.bp.blogspot.com/-wWlKzAdORIk/Txcwej4_50I/AAAAAAAAP3Y/Q_Dr0e_gGxI/s1600/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:

<body>

Cei care au sablonul facut cu designerul de sabloane trebuie sa caute acest cod:
<body expr:class='"loading" + data:blog.mobileClass'>
si imediat dupa el copiati urmatorul grup de coduri:

<div id='pageflip'>
<a href='http://feeds2.feedburner.com/TotulDespreBlogger'><img alt='' src='http://1.bp.blogspot.com/-0s0mkpSivHw/Txcu4s6v8aI/AAAAAAAAP3Q/YkjzKwFmGCo/s1600/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.

Truc creat de: Simple Page Peel Effect for Blogger

64 de comentarii:

  1. Super frumos si interesant ! Chiar am sa incerc sa-l fac astazi...nu stiu daca am sa reusesc da ma rog....incerc...sunt super incepator..
    salutari all si multumim ca postezi lucruri asa interesante !

    RăspundețiȘtergere
  2. uff... cam nasol... dacă pun poză apare doar poza sus şi nu se mai vede aşa fain ca un plic...
    nu şti cum putem să personalizăm acesta ? să scriem sus cum vrem ? şi să fie tot ceva de genu ca o foaie...

    RăspundețiȘtergere
  3. Cristi poza pe care trebuie sa o modifici este cea scrisa cu albastru.
    Da clic pe acest link sa vezi cum arata http://www.wallheaven.com/subscribe.png

    RăspundețiȘtergere
  4. Am modificat aseara si mi-a iesit super... am pus in colt o fotografie... dar pe astazi, fotografia mi-a disparut... habar nu-am de ce... imi apare doar coltul care se desface...

    RăspundețiȘtergere
  5. Daniel, sa stii ca acum apare... nu stiu ce s-a intamplat...
    oricum a iesit super...

    RăspundețiȘtergere
  6. In sfarsit!Bine ca ai postat!Cred ca e bun tutorialul,inca nu am incercat:D.

    RăspundețiȘtergere
  7. Buna ziua, detin mai multe siteuri de succes si as dori o colaborare cu dumneavoastra fiind din aceeasi nisa de activare. Daca prezint vre-un interes as dori un email la adresa sitestiri@gmail.com

    RăspundețiȘtergere
  8. Nu inteleg,chiar nu inteleg:((!Am fcut tot ce ai spus in post dupa pasi si tot nu imi merge,nu imi apare imaginea si bannerul trece prin ea,tot ce merge este daca dai click se duce unde am vrut.Uita-te pe blogul meu ca sa vezi mai multe e http://cpstiri.tk

    RăspundețiȘtergere
  9. Mariya5, la ora 9:40 seara cand am cautat in sursa blogului tau nu am gasit codul instalat, asa ca nu pot sa-mi dau seama daca e gresit ceva.
    In al doilea rand blogul tau este afisat printr-un iframe si e posibil ca tocmai asta sa impiedice functionarea corecta a scriptului.

    RăspundețiȘtergere
  10. Da,scuza-ma dar lam dat jos:D.Mersi oricum

    RăspundețiȘtergere
  11. As vrea sa pun codul html de la o imagine sub ea fara sa se transforme si sa fie in casuta de sa le poti copia asa cum le pui si tu,sau uite cum e aici http://pandandaro.wordpress.com/2009/11/19/pandandaro-widgets/

    RăspundețiȘtergere
  12. Am pus din noua efectul si apare tot asa,am sa-l las ca sa vezi.

    RăspundețiȘtergere
  13. Mariya5 codul este adaugat bine.
    Ce cred eu ca impiedica aparitia pozei de fundal este acel cod css si javascript pe care il ai in sablon dupa tagul ]]></b:skin>, creat cu Artisteer si care nu stiu ce genereaza.
    Nu stiu daca este pus de tine sau asa a fost sablonul dar parerea mea asta e.
    Nu iti pot spune sa stergi acel cod ptr. ca nu stiu ce genereaza si ar putea cauza aspectului blogului tau. Daca o faci, o faci pe proprie raspundere.

    RăspundețiȘtergere
  14. si eu am aceiasi problema ca sii marya5.oare o fii din cauza sablonului creeat cu artisteer?~X(:((

    RăspundețiȘtergere
  15. Este foarte posibil, dar cum spuneam si mai sus, nu bag mana in foc.
    Daca puteti sa-mi trimite-ti pe mail o copie a unui astfel de sablon voi face niste teste pe el pt a fi sigur.
    Adresa mea o gasiti in pagina Contact

    RăspundețiȘtergere
  16. deci?ce-ati rezolvat?ce nu merge?:(

    RăspundețiȘtergere
  17. Daniel,as vrea sa adaugi la acest topic efecte p entru"colt de pagina intors" cum ar fi reflectarea imaginii de dupa el,miscarea coltului si altele cum sunt pe http://cpstylez.com si http://riffycp.com :) Incerci?

    RăspundețiȘtergere
  18. Salut Daniel ! Ce zici oare as putea integra 2 poze in colt? Vreau sa pun o poza(care sa fie de fapt 2) cu trimitere catre twitter si facebook. Astept un reply, iti multumesc.Multa bafta ! contacteaza-ma pe: corleone115@yahoo.com

    RăspundețiȘtergere
  19. cand dai sa caut codul body nu imi apare nimic de ce?

    RăspundețiȘtergere
  20. vreau sa modific coltul si sa pun altceva. cum fac, ca nu imi apare acolo sa modific?

    RăspundețiȘtergere
  21. Eduard codul este acolo, cauta mai atent.

    Iulia, inlocuieste poza din cod (cea scrisa cu albastru) cu poza ta.

    RăspundețiȘtergere
  22. buna eu la fel ca Eduard nu gasesc codul body,am cautat chiar si atent dar nu aste ce as putea face ?

    RăspundețiȘtergere
  23. Trimite-mi o copie a sablonului. Adresa de email e in pagina Contact.

    RăspundețiȘtergere
  24. buna, am trimis o copie a sablonului si iti aduc aminte despre ce era vorba ,nu gasesc in sablon codul body,multumesc !!!

    RăspundețiȘtergere
  25. Imi pare rau dar nu am primit mailul de la tine. Trimite altul cu fisierul XML al sablonului.

    RăspundețiȘtergere
  26. am facut cum scrie acolo dar in loc sa apara sus apare in josul pagini
    ce sa fac sa remediez?

    RăspundețiȘtergere
  27. imi apare in partea de jos a site-ului, asa ca la-m scos...:((

    RăspundețiȘtergere
  28. mmie imi apare foaia asta jos in clotul din dreapta, dar nu stiu de ce... si am incercat de mai multe ori... :-??

    RăspundețiȘtergere
  29. si mie imi apare efectul jos coltul din dreapta... :-?? Ce tare este asta :-t :)))

    RăspundețiȘtergere
  30. cred ca ti-am sticat efectul... mereu ma joc la el...:)) b-(

    RăspundețiȘtergere
  31. te rog sa ma ajuti si pe mine cu acest efect... imi apare in colt, jos... :-?? si... esti sigur ca este < body > pt ca eu am gasit ?

    RăspundețiȘtergere
  32. am gasit cum se face... (sa nu mai apara jos ci sus) asta se intampla doar la sabloanele noi... deci al 2lea cod nu-l copiati unde spune Daniel ci (sper sa mai stiu ;)) )il copiati imediat dupa < /head > (adugati primul cod inainte < /head> iar al2lea dupa... mie imi merge! succes :D

    RăspundețiȘtergere
  33. La inceput a iesit bine, dar nu-mi placea poza ca nu se vedea tot "BUY" si am schimbat poza, mi-a aparut un alt efect... x( mereu mi se intampla asta pe blog, una fac si alta iese ~x( :(( dar acum il las asa , maine ma mai uit sa vad ceii fac ( este 00:15) ;))

    RăspundețiȘtergere
  34. intrati sa vedeti http://officialdemetrialovato.blogspot.com/

    RăspundețiȘtergere
  35. ba da... a iesit bn... acum mi-am dat seama de ce nu arata ca cel de pe site...in fine...

    RăspundețiȘtergere
  36. demi bv
    a mers
    uite www.racoreste-te.blogspot.com

    RăspundețiȘtergere
  37. na fain pagina se vede intoarsa sus in colt dar nu se misca nimic e blocata ce sa fac????

    RăspundețiȘtergere
  38. salutare ,mey sa stii ca a mers faza cu coltzul ,dar in sanga paginii imi tot apare un cod ,ceva de genu : " expr:class='"loading" + data:blog.mobileClass'> " si nu siu de unde e , se vede uratzel !

    RăspundețiȘtergere
  39. Daca as avea adresa blogului tau as putea sa-mi dau si eu seama despre ce este vorba!

    RăspundețiȘtergere
  40. Salut, am incercat sa instalez si eu coltul de pagina dar nu functioneaza, nu are efectul care trebuie :) am incercat sa il instalez pe un forum. Uita-te si tu sa vezi care e prob te rog si anunta-ma. linkul e http://www.webopedija.com

    RăspundețiȘtergere
  41. Salut, Daniel
    Am incercat coltul de pagina asa cum este la tine si merge perfect. Am reusit sa schimb si link-ul catre blogul meu, dar cum fac sa pun o poza, sau anunturi, etc.
    Nu am reusit. Am facut un blog de testari ca sa incerc acolo. Este adicris.blogspot.com. Daca este nevoie trimit si sablonul.
    Mersi mult!

    RăspundețiȘtergere
  42. Eliza, citeste tot articolul si iti vei da seama.

    RăspundețiȘtergere
  43. neatza , Daniele!
    am facut si eu efectul asta dar imi apare la subsol desi am facut de doua ori pasii
    ce gresesc?
    http://gabyd2.blogspot.com/

    RăspundețiȘtergere
  44. gaby_d, se pare ca ai rezolvat pt eu il vad sus.

    RăspundețiȘtergere
  45. da, am citit la comentarii "sfatul" lui demi lovato si a mers.
    multumesc tare mult.
    Duminica frumoasa!

    RăspundețiȘtergere
  46. sigur ala e < body> ?! caci nu apare cand dau copy lafel ca si la ceilalti si daca scriu < /body> il baga jos, deci e o problema, cred ca ai gresit fara sa vrei

    RăspundețiȘtergere
  47. Nu este o greseala. Codul <body> se gaseste in orice sablon. In sabloanele vechi de la blogger aparea exact asa.
    Acum, in sabloanele create cu designerul de sabloane, codul arata asa:
    <body expr:class='"loading" + data:blog.mobileClass'>

    Deci, cei care au sablonul creat cu designerul, introduceti al doilea grup de coduri dupa acest cod.

    RăspundețiȘtergere
  48. Ok, dar am adaugat si imi apare peste banner dar nu este imaginea pe care o doresc, imaginea pe care eu o doresc este dupa banner si nu se vede ! am sa pun take a look www.Royal-Holdem.blogspot.com daca ai timp normal :D

    RăspundețiȘtergere
  49. Primul cod se pune inainte de </head>
    Tu il ai pus dupa. Corecteaza.

    RăspundețiȘtergere
  50. Man nu stiu ce se intampla, am facut si cum ai spus tu, daca poti intra pe mess, o secunda, caci am salvat bucatica aia in notepad sa iti arat ca nu merge:-?? id-ul meu este kings_Byowgyy

    RăspundețiȘtergere
  51. Nu pot intra pe mess.
    Trimite-mi o copie a sablonului pe mail.

    RăspundețiȘtergere
  52. gata, am trimis e-mail-ul :D multumesc frumos :D

    RăspundețiȘtergere
  53. Daniel mie imi apara cu ceva spatiu in dreapta uite : :((
    http://img823.imageshack.us/img823/6607/capturexzz.png

    RăspundețiȘtergere
  54. Cum fac asta cu codu de la emag ?

    RăspundețiȘtergere
  55. Acest comentariu a fost eliminat de autor.

    RăspundețiȘtergere
  56. Mi-am reat blogul cu informatiile din acest blog, toate mi-au reusit, mai putin aceasta cu coltul. Daca ma poate ajuta cineva asta-i id-ul meu on.air4@yahoo.com iar acesta este blogul meu http://onair4d.blogspot.com/ lasa-ti o parere despre blog. Sunt la inceput si doresc sa aflu ce mai pot rectifica sau modifica. Multumesc!!

    RăspundețiȘtergere
  57. Multumesc ,informatiile D-voastra sant foarte utile si eficiente.totul iese perfect.Sarumana.

    RăspundețiȘtergere
  58. Salut,am instalat si eu coltul de pagina dar am fost nevoit sa-l sterg deoarece am observat ca datorita lui sliderul meu devenise alb,iar slideuri nimic,ma poti ajuta ? Te rog frumos :3
    Template:Blogul meu

    RăspundețiȘtergere
  59. Salut! Am urmat pasii, am reusit sa pun coltul de pagina dar as vrea sa pun acolo google translate. mi-ar fi placut mai mult sa pot pune ceva de genul versiune in limba engleza. ma poti ajuta te rog? Multumesc!

    RăspundețiȘtergere
  60. La mine merge dar partial nu stiu cum sa spun .Se vede coltul de pagina intors dar cand trec cursorul prin dreptul lui nu se vede decat o parte din efect pentru a cealalta parte este acoperita de sablon.
    http://functionare-automobil.blogspot.com

    RăspundețiȘtergere