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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfPvwKNLpVbGr8d5P2Jm-SBU3iww_WOQ4H3W80DVf9mjuDN4DIJtwPelkHkBMojIyK9KELSIod_etFiYMKTK4vW6d4noEePchihnDMVy9T1HOzcF0CcAxYfyz4hGOlFmtAJQe9lWqc1wwT/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
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop()
.animate({
width: '50px',
height: '50px'
}, 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHZhcaKPj123dXGoA8O_8nJQmfJiTsOQWRBYbwk8XJLemWaondGgJ70a1E6lIEawvOPi2sXq4xGiD_pkg_WRAB2O94WJLNZ46pSNU_Ur0N_1EbIfk0LQBKOhb2uT_QrnrxYLBbAgJDCvfY/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
![](https://www.pinterest.com/pin/create/button/?url=https://bloggerajutor.robloguri.info/2010/03/efect-colt-de-pagina-intors-pentru.html&media=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFFFt1uz5PHc4R__7sH7rZjccH-t3pVIVfWIaTyWEZQ7ZkKIHZPbU70jLfCiwbAS69MuvRJ91sKpTRHVoKFgcjn1h2A6yAg8gApPGg-2eV5uI8dEiu274nfy5ZQ6isaFgrnuXP8tOjhoE/s200/colt+intors.png&description=Efect "Colt de pagina intors" pentru Blogger){kind=link}
64 Comentarii
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..
RăspundețiȘtergeresalutari all si multumim ca postezi lucruri asa interesante !
uff... cam nasol... dacă pun poză apare doar poza sus şi nu se mai vede aşa fain ca un plic...
RăspundețiȘtergerenu şti cum putem să personalizăm acesta ? să scriem sus cum vrem ? şi să fie tot ceva de genu ca o foaie...
Cristi poza pe care trebuie sa o modifici este cea scrisa cu albastru.
RăspundețiȘtergereDa clic pe acest link sa vezi cum arata http://www.wallheaven.com/subscribe.png
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ȘtergereDaniel, sa stii ca acum apare... nu stiu ce s-a intamplat...
RăspundețiȘtergereoricum a iesit super...
In sfarsit!Bine ca ai postat!Cred ca e bun tutorialul,inca nu am incercat:D.
RăspundețiȘtergereBuna 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ȘtergereNu 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ȘtergereMariya5, 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.
RăspundețiȘtergereIn al doilea rand blogul tau este afisat printr-un iframe si e posibil ca tocmai asta sa impiedice functionarea corecta a scriptului.
Da,scuza-ma dar lam dat jos:D.Mersi oricum
RăspundețiȘtergereAs 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ȘtergereAm pus din noua efectul si apare tot asa,am sa-l las ca sa vezi.
RăspundețiȘtergereMariya5 codul este adaugat bine.
RăspundețiȘtergereCe 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.
si eu am aceiasi problema ca sii marya5.oare o fii din cauza sablonului creeat cu artisteer?~X(:((
RăspundețiȘtergereEste foarte posibil, dar cum spuneam si mai sus, nu bag mana in foc.
RăspundețiȘtergereDaca 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
Ok,o sa-ti trimit eu ;)
RăspundețiȘtergeredeci?ce-ati rezolvat?ce nu merge?:(
RăspundețiȘtergereDaniel,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ȘtergereSalut 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Ștergerecand dai sa caut codul body nu imi apare nimic de ce?
RăspundețiȘtergerevreau sa modific coltul si sa pun altceva. cum fac, ca nu imi apare acolo sa modific?
RăspundețiȘtergereEduard codul este acolo, cauta mai atent.
RăspundețiȘtergereIulia, inlocuieste poza din cod (cea scrisa cu albastru) cu poza ta.
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ȘtergereTrimite-mi o copie a sablonului. Adresa de email e in pagina Contact.
RăspundețiȘtergerebuna, am trimis o copie a sablonului si iti aduc aminte despre ce era vorba ,nu gasesc in sablon codul body,multumesc !!!
RăspundețiȘtergereImi pare rau dar nu am primit mailul de la tine. Trimite altul cu fisierul XML al sablonului.
RăspundețiȘtergeream facut cum scrie acolo dar in loc sa apara sus apare in josul pagini
RăspundețiȘtergerece sa fac sa remediez?
imi apare in partea de jos a site-ului, asa ca la-m scos...:((
RăspundețiȘtergeremmie imi apare foaia asta jos in clotul din dreapta, dar nu stiu de ce... si am incercat de mai multe ori... :-??
RăspundețiȘtergeresi mie imi apare efectul jos coltul din dreapta... :-?? Ce tare este asta :-t :)))
RăspundețiȘtergerecred ca ti-am sticat efectul... mereu ma joc la el...:)) b-(
RăspundețiȘtergerete 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Ștergeream 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ȘtergereLa 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Ștergereintrati sa vedeti http://officialdemetrialovato.blogspot.com/
RăspundețiȘtergereba da... a iesit bn... acum mi-am dat seama de ce nu arata ca cel de pe site...in fine...
RăspundețiȘtergeredemi bv
RăspundețiȘtergerea mers
uite www.racoreste-te.blogspot.com
prea tare
RăspundețiȘtergerena fain pagina se vede intoarsa sus in colt dar nu se misca nimic e blocata ce sa fac????
RăspundețiȘtergeresalutare ,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ȘtergereDaca as avea adresa blogului tau as putea sa-mi dau si eu seama despre ce este vorba!
RăspundețiȘtergereSalut, 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ȘtergereSalut, Daniel
RăspundețiȘtergereAm 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!
Eliza, citeste tot articolul si iti vei da seama.
RăspundețiȘtergereneatza , Daniele!
RăspundețiȘtergeream facut si eu efectul asta dar imi apare la subsol desi am facut de doua ori pasii
ce gresesc?
http://gabyd2.blogspot.com/
gaby_d, se pare ca ai rezolvat pt eu il vad sus.
RăspundețiȘtergereda, am citit la comentarii "sfatul" lui demi lovato si a mers.
RăspundețiȘtergeremultumesc tare mult.
Duminica frumoasa!
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ȘtergereNu este o greseala. Codul <body> se gaseste in orice sablon. In sabloanele vechi de la blogger aparea exact asa.
RăspundețiȘtergereAcum, 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.
Iti multumesc frumos Daniel !
RăspundețiȘtergereOk, 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ȘtergerePrimul cod se pune inainte de </head>
RăspundețiȘtergereTu il ai pus dupa. Corecteaza.
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ȘtergereNu pot intra pe mess.
RăspundețiȘtergereTrimite-mi o copie a sablonului pe mail.
gata, am trimis e-mail-ul :D multumesc frumos :D
RăspundețiȘtergereDaniel mie imi apara cu ceva spatiu in dreapta uite : :((
RăspundețiȘtergerehttp://img823.imageshack.us/img823/6607/capturexzz.png
multumesc de informatie :)
RăspundețiȘtergereCum fac asta cu codu de la emag ?
RăspundețiȘtergereAcest comentariu a fost eliminat de autor.
RăspundețiȘtergereMi-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ȘtergereMultumesc ,informatiile D-voastra sant foarte utile si eficiente.totul iese perfect.Sarumana.
RăspundețiȘtergereSalut,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
RăspundețiȘtergereTemplate:Blogul meu
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ȘtergereLa 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.
RăspundețiȘtergerehttp://functionare-automobil.blogspot.com