• Cum instalez un pop-up window pe blog, site

    Categorie - Tutoriale 26.10.2009 - 18:33

    Un alt tutorial “how to”, să învăţăm să facem lucruri simple fără să apelăm la pluginuri consumatoare de resurse.

    Implementarea unui script de pop-up window pe blogul tău se face în trei paşi deosebit de simpli.

    Pasul 1:

    Codul de mai jos este un cod javascript care se copiază cu copy/paste în head-ul siteului între tagurile <head> şi </head> indiferent că avem un site simplu în HTML sau platforma WordPress.
    În cazul WordPress codul trebuie copiat în fila header.php din folderul temei, prin editare în wp-admin/Appearance/Editor, sau editarea separat cu notepad şi upload (owerwritte) pe server pentru cei mai experientaţi care folosesc curent un program FTP Uploader.
    Deci copy/paste pe un rând gol imediat deasupra </head>


    <script language='javascript'>
    function popUp(URL) {
    day = new Date();
    id = day.getTime();
    eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0, scrollbars=0, location=0, statusbar=0, menubar=0, resizable=0, width=430, height=530, left=300, top=50');");
    }

    </script>

    Se pot edita/modifica următorii parametrii:
    • width=430 (lăţime fereastră pop-up)
    • height=530 (înălţime fereastra pop-up)
    • left=300 (poziţia faţă de margine stânga ecran în pixeli unde să apară)
    • top=50 (poziţia faţă de margine sus ecran în pixeli unde să apară)

    Pasul 2:

    Pop-up window-ul respectiv trebuie să se deschida atunci când dau click pe un link text sau poză cu link. Indiferent de unde, din post, din sidebar, etc.
    În loc de un link normal link-ul text (în caz de text) trebuie scris în felul următor:
    <a href="javascript:popUp('http://www.site.ro/folder/document.html')">Click aici</a>

    Se configurează:
    • nume document.html (poate fi şi .php), DOCUMENTUL DIN CARE ESTE CONSTITUIT POP-UP-UL propriu-zis
    • folder, numele folderului unde se află documentul
    • Dacă am nevoie de o simplă poză care să se deschidă în pop-up, nu mai am nevoie de nici un document, în loc de document.html scriu direct numepoza.jpg , dar trebuie corelată dimensiunea pop-up-ului (la pasul 1) cu dimensiunea în pixeli a pozei. (să nu fie fereastra mai mică decât poza).

    Pasul 3:

    Crearea documentul .html sau .php din care este constituit pop-up-ul.
    Dau un exemplu simplu mai jos, se poate edita cu notepad şi se salvează cu numele document.html sau document.php

    • În cazul salvării acestuia ca document.html documentul nu se mai poate deschide ulterior cu notepad pentru o eventuală modificare ulterioară, doar cu un program editor html. Odată creat documentul, se urcă pe server la locul dorit.

    Mai jos, exemplu de document pentru pop-up, se schimbă conţinutul în funcţie de necesităţi: (normal asta necesită abilităţi de webdeveloper dar dacă aveti nevoie de ceva simplu nu cred că nu vă daţi seama ce trebuie schimbat)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>Titlu Pop-Up Window care apare sus in Title bar</title>
    </head>
    <body>
    <h2>Acesta este un Pop-Up Window</h2>
    <br><br>
    <h3>Text</h3>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    <br>Pellentesque facilisis iaculis molestie.
    <br>Nullam non justo quis leo accumsan rutrum a non nisl.
    <br><br>
    <h3>Imagine</h3>
    <a href="http://www.blogwidget.ro/" target="_blank" title="Un widget cool pentru blogul tau!"><img src="http://www.blogwidget.ro/wp-banners/bwr125_new.png" border="0" alt="Un widget cool pentru blogul tau!"></a>
    </body>
    </html>

    Test:

    Click aici, testează Pop-Up Window

    Etichete: , , , ,

    Postat de: Andrian  

    Twitter FaceBook YM

    Lenjerie.ro - 11% comision

  • Poate o să-ţi placă şi:

    Loading...

  • 14 comentarii

    WP_Modern_Notepad

    • alexandru a spus la: 26 10 2009 ora 18:47

      foarte bun tutorialul chiar vroiam sa pun aja ceva pe siteul meu si aku am gasit si solutia cum se face


    • Alex a spus la: 27 10 2009 ora 18:57

      Foarte util.ms


    • Andrei Ionuţ a spus la: 27 10 2009 ora 18:58

      Foarte folositor, mersi!


    • makaveli8music a spus la: 15 11 2009 ora 13:43

      am constatat ca pe blogspot nu merge… nu sti exista vreo metoda sa fac pop-up pe blogspot?


    • Andrian a spus la: 15 11 2009 ora 14:09

      @makaveli8music – Incearca acum, trebuie sa mearga si pe blogspot, uite aici un exemplu http://linescript.blogspot.com/2009/11/postare-de-test.html


    • makaveli8music a spus la: 16 11 2009 ora 14:10

      am inteles, cu text merge ca am probat , dar eu vreau sa pun pop-up la o imagine si din imaginea aia sa intre in alt site. tot am incercat si nu mi-a iesit


    • makaveli8music a spus la: 16 11 2009 ora 14:30

      gata am rezolvat :D


    • Ani a spus la: 06 01 2010 ora 20:02

      Poate sa-mi spuna cineva daca pot posta pps-uri pe blogspot.com ?


    • Andrian a spus la: 06 01 2010 ora 20:55

      @Ani – Da, de pe slideshare.net cu cod de embed, exact ca un videoclip.


    • Ani a spus la: 07 01 2010 ora 12:48

      Multumesc mult de tot. Ma bucura ideea de a putea posta pps-uri pe blog. Ramane sa mai aflu ce inseamna “cod embed”. Sunt destul de novice in materie dar insist si rezolv in final cumva…


    • Andrian a spus la: 07 01 2010 ora 13:10

      @Ani – Codul de embed e practic cateva randuri de text care se copiaza copy/paste in post unde vrei sa-ti apara. Exact ca in cazul video sau audio de pe youtube sau trilulilu.


    • Ani a spus la: 07 01 2010 ora 13:31

      Am copiat pps-urile in “slideshare.net “. Efectele din pps-uri au disparut. Apare doar ca imagini succesive fara efecte fara sonor.
      Sonor, s-a putut adauga ulterior. Sa ma multumesc oare cu ce am obtinut sau nu am procedat corect.?
      Ma scuzati daca insist…multumesc daca-mi veti mai raspunde.


    • ij30 a spus la: 18 02 2010 ora 00:06

      salut. de cand caut ceva despre popup-uri pe blogger! o sa incerc maine sa vad daca ma descurc. am cateva intrebari:

      1. care ar fi codul ca popup-ul sa se deschida automat la incarcarea postarii respective?

      2. presupun ca facand mai multe documente .html si schimband calea de apel a acestora se poate ca fiecare postare sa aiba popup-ul ei specific, corect? daca da cum se imbina asta cu deschiderea automata?

      3. ai incercat ceva de genul “advanced dhtml popup 2.43″? merg integrate in blogger popup-urile create cu acest program sau ma chinui degeaba?


    • Andrian a spus la: 18 02 2010 ora 01:56

      - la wordpress se poate cu onload event pe single.php, la blogspot nu stiu
      - n-am incercat advanced dhtml popup 2.43

    Scrie un comentariu!

    AMA Fashion - 12% comision, 6 luni

My webspace

Adds

Best Posts

Categorii

Comentarii recente

Blogroll

Arhivă