• Tweets pe blog, tutorial

    Categorie - Tutoriale 21.11.2009 8 comentarii

    Cum afişez tweets, twitter pe blog

     
    Pentru a afişa pe blog ultimele tweet-uri ale contului tău de twitter voi prezenta mai jos procedura de instalare/configurare a script-ului necesar, este un script, practic nu este plugin de wordpress cu toate că se numeşte
    Tweetable – A jQuery plugin.
    Nu vă sfătuiesc să citiţi sfaturile de instalare de la pagina autorului deoarece tot scriptul a fost conceput şi explicat pentru a fi introdus în pagină separat pe un document .html. Wordpress-ul nici măcar nu îl vede ca plugin. Se instalează manual urmând paşii de mai jos.

    1. Se descarcă zip-ul care conţine întreg scriptul, se dezarhivează.
    2. Fila index.php se deschide cu notepad şi se modifică ({username: ‘andrianz’, cu user-namele dvs de twitter. Se mai poate modifica numărul de tweet-uri afişate, limit:10 Se salvează şi se închide.
    3. ÎNTREG FOLDERUL tweetable cu toate filele incluse se urcă pe server în root sau public_html.
    4. Pentru a afişa pe blog/site se copiază linia de mai jos în locul unde doriţi să apară, header, footer, sidebar, post, etc:

    <iframe src='http://www.blogultau.ro/tweetable/' width=510 height=230 scrolling='no' frameborder='0'></iframe>

    • În linia de cod de mai sus, deasemenea se configurează:
    - www.blogultau.ro cu adresa blogului tău (posibil subfolder);
    - width=510 , lăţime casetă în pixeli;
    - height=230 , înălţime casetă în pixeli;
    - scrolling=’no’ sau scrolling=’yes’ , scrollbar vertical casetă, da sau nu.

    • Scripul este full custom, utilizatorii mai pretenţioşi cu oarece cunoştinţe de HTML, CSS, mai pot schimba câte ceva în fila style.css din folder tweetable:
    - font, culoare, culoare linkuri, distanţa dintre tweet-uri, etc.
    - dacă se şterge linia background-color: #FFFFFF; din body, fereastra devine transparentă.

    • La unele site-uri am vazut acest script implementat sus în header, o bară de 1 cm înălţime, lată cât ecranul care arată doar ultimul tweet, totul pe o singură linie text, cu sau fără poză/icon. Se poate configura orice combinaţie de stil.

    Etichete: , , , , ,

  • Cum fac redirect automat dacă schimb domeniu, adresă, url blog

    Categorie - Tutoriale 31.10.2009 10 comentarii

    Motivele pentru care la un moment dat cineva este nevoit să schimbe adresă, domeniu blog/site pot fi multiple (we know things changes) cum spune şi google, iar în această situaţie se impune redirectarea traficului de la vechea spre noua adresă, absolut necesar măcar pentru o perioadă de timp până cei care vă vizitau blogul vor lua notă de schimbare, modifică linkuri, Favorites, Bookmarks, etc.

    În cazul blogurilor cel mai adesea am văzut situaţia în care bloggerul care se mută scrie un ultim post şi-l lasă deasupra.
     

    Blogul meu s-a mutat la http:// , click aici.

     
    Cu puţin rafinament, Redirectarea se poate face automat, extrem de simplu:
    Cu siguranţă a-ţi accesat măcar o dată un site “expirat” unde a-ţi fost întâmpinat cu mesajul:
     

    Site-ul cutare s-a mutat la http://
    ve-ţi fi redirectat automat în 5 secunde.

     
    Redirectul în 5 secunde (sau câte doriţi) se face adăugând în HEAD la vechiul blog/site o singură linie de cod:

    <meta content='5;url=http://adresa-noua.ro/' http-equiv='refresh'/>

    La orice site în HTML (sau PHP) se copiază linia manual cu un editor HTML în fila index, în HEAD, adică pe un rând gol deasupra </head>

    La WordPress se editează fila header.php din Wp-admin/Appearance/Editor
    Se copiază linia manual, copy/paste pe un rând gol deasupra </head>
    Dupa care se apasă Update file
    Sau se editează fila în pc după care se urcă pe server modificată, (overwrite).

    La Blogger.com (blogspot) modificarea se face în panoul de control Aspect/Editaţi HTML/Editaţi Şablon
    Se copiază linia manual, copy/paste pe un rând gol deasupra </head>
    După care se apasă SALVAŢI ŞABLON

    Etichete: , , ,

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

    Categorie - Tutoriale 26.10.2009 14 comentarii

    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: , , , ,

  • Cum fac left click – SELECT ALL într-o casetă text?

    Categorie - Tutoriale 17.10.2009 5 comentarii

    Acest mic tutorial ar putea fi considerat un update tutorialului precedent Cum fac banner pentru blog, tutorial pentru că este util în cazul în care există un text de preluat dintr-un TextArea (casetă text) cu copy/paste.

    Aceast feature HTML ca să-i zic aşa îmbunătăţeşte “User experience” pe un site web şi scuteşte utilizatorul să “tragă” cu mouse-ul de la prima literă până la ultima peste textul care se doreşte copiat.

    Poate fi utilizat în toate cazurile unde avem de-a face cu un
    <textarea></textarea>

    Trebuie făcută o modificare extrem de simplă:
    În loc de:
    <textarea>Textul din caseta</textarea>
    Adăugăm:
    onfocus="select();"
    Să avem în final:
    <textarea onfocus="select();">Textul din caseta</textarea>
    (cu un space după textarea neapărat)
    Asta este tot.

    Funcţionează şi in IE6 şi Firefox.

    Exemplu, click mai jos pentru a testa,
     

     

    Etichete: , , , ,

  • Cum pun Windows Mediaplayer pe blog, tutorial

    Categorie - Tutoriale 24.07.2009 7 comentarii

    Ştiu că 99% din bloggeri/webmasteri preferă să urce fila pe youtube sau trilulilu şi să-i facă embed de acolo fără să-şi mai bată capul.

    Acest mic script este util în cazul în care aveţi o filă audio hostată la dvs pe server sau în altă parte şi NU mai doriţi să instalaţi plugin wordpress audio player.

    Un alt atu al folosirii Windows Mediaplayer embed este că nu mai depinzi de un third part server.

    Pentru a afişa pe blog sau într-un post mediaplayerul de mai jos care să redea una sau mai multe piese, în primul rând copiază codul de mai jos copy/paste în post sau unde doreşti să apară. Cod testat în Mozilla şi IE6.

    <object id="player" width="320" height="64" classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" align="middle">
    <param name="URL" value="    http://www.blogultau.ro/mediaplayer/playlist.wpl">
    <param name="DefaultFrame" value="mainFrame">
    <param name="AutoStart" value="False">
    <param name="loop" value="1">
    <param name="showstatusbar" value="True">

    <embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" src="http://www.blogultau.ro/mediaplayer/playlist.wpl" align="middle" autostart="0" showstatusbar="1" loop="1" height="64" width="320"></embed>
    </object>

    Codul de mediaplayer practic este împărţit în două, jumătatea de sus pentru IE şi a doua jumătate pentru Mozilla. Toate setările practic se repetă. Aceasta e procedura standard. Autostart-ul este dezactivat, e destul de enervant să deschizi un blog şi să urle boxele. Se poate ajusta lăţimea casetei (width=”320″) în pixeli.

    Trebuie modificat doar ce am scris cu roşu, respctiv url playlist.
    Codul de mediaplayer propriuzis linkează către un playlist, iar în playlist se configurează numele şi path-ul melodiei.
    Exemplu concret folosit în codul de mai sus: În root (public_html) la blogul meu creez un folder “mediaplayer”, în care urc fila playlist.wpl.

    Cum fac/configurez playlist-ul:

    Deschid un notepad, îl salvez cu denumirea playlist.wpl, în care scriu codul de mai jos. Ulterior pot să îl deschid dacă vreau să îl modific tot cu notepad, Dreapta Click/Open With – Select: Notepad.
    (.wpl este formatul tipic de playlist Windows Mediaplayer 6, 7, 9, 10, 11, dar merg şi alte formate, .m3u de exemplu)

    <?wpl version="1.0"?>
    <smil>
    <head>
    <meta name="Generator" content="Microsoft Windows Media Player -- 9.0.0.3250"/>
    <author/>
    <title>track</title>
    </head>
    <body>
    <seq>
    <media src="    nume_fila.mp3"/>
    </seq>
    </body>
    </smil>

    • În playlist trebuie modificat doar numele filei şi extensia de filă.
    • Dacă fila mp3 o urc în acelaşi folder cu playlist-ul, respectiv folderul “mediaplayer”, nu mai e necesar să scriu în ghilimele full path cu http… în faţă.
    • Dacă doresc să adaug mai multe melodii în playlist se pot adăuga câte una pe rând, mai multe rânduri în jos, rândul care începe cu:
    <media src="...
    Le adaug în ordinea în care doresc să fie redate de player.
    • Player-ul acceptă comenzi PREV/NEXT (în caz că sunt mai multe).
    • Player-ul afişază în status bar numele de MP3 al piesei, NU numele de filă, filename. MP3 name se poate edita cu un tag editor.

    Mai jos exemplu funcţional, o singură piesă, Elvis Presley – It’s Now Or Never

     

     

    Etichete: , , , , , , ,

  • Birds on my site

    Categorie - Webdesign 12.05.2009 Nici un comentariu

    Butonul de Tweet This in post

    De astăzi am păsărici pe blog.
    Păsărici la propriu, nu la figurat.
    În fiecare articol, un fel de yahoo recommend în varianta twitter.
    Vreau să văd ce va rezulta în statistici din treaba asta cu twitter-ul, scriptul era foarte lăudat de unde l-am luat. Posibilitatea asta de o posibilă creştere a numărului de unici depinde bineînteles de cât de twitter-işti sunt vizitatorii mei… După mintea mea e ceva mai util şi la obiect decât banalul “Follow me” pus la dreapta în sidebar. Poate vizitatorul n-are chef să te urmărească cu toate tâmpeniile cu tot.
     

    Butonul de Tweet This in post

     

    Etichete: , , , ,

  • Script “Fotografia zilei” în sidebar

    Categorie - Webdesign 11.05.2009 Nici un comentariu

    De fapt este cam mult spus un script. Este doar function date în php şi constă dintr-o singură linie de cod pentru a afişa în sidebar de exemplu “fotografia zilei” care se va schimba automat la ora 0,00.
    Exemplu concret instalat ceva mai la dreapta în sidebar, la mine doar in homepage.
    Întotdeauna mi-a placut widget-ul ăsta pentru că de câte ori îmi deschid pagina prima dată într-o noua zi descopăr ceva nou, o mică surpriză, ca şi cum n-ar fi ceva postat de mine!

    Cum procedez:

    Step 1
    Se crează un folder denumit “imagini” în care se pun 31 de imagini alese după bunul plac, toate la aceeaşi dimensiune încât să v-i se potrivească în sidebar şi toate format .jpg. Imaginile se denumesc 01, 02, 03,………31, pentru că 31 e numarul maxim de zile dintr-o lună.
    În data de 01 a lunii va fi afişată imaginea 01.jpg, în data de 02 imaginea 02.jpg, ş.a.m.d.
    Folderul cu imagini se uploadează pe server în root sau public_html.
    (sau nu neapărat acolo, dar atunci trebuie modificat codul de mai jos)

    Step 2
    În fila sidebar.php din folderul temei se introduce următoarea linie de cod, acolo unde doriţi să vă apară, după care se urcă fila modificată, overwrite la locul ei pe server:

    <img src="./imagini/<?=date("d")?>.jpg">

    Tips:
    1. Codul se poate integra într-un cod de casetă de sidebar.

    2. Pentru ca imaginea să apară cu border şi titlu, în sidebar.php se scrie aşa:

    <img src="./imagini/<?=date("d")?>.jpg" id="dailypic">
    <div id="dailytext">Fotografia zilei</div>

    dar în acest caz mai trebuie adăugat la sfârşit în fila style.php din folderul temei:

    #dailypic {
    border: 2px solid #808080;
    }

    #dailytext {
    margin-top: 2px;
    font-family: verdana;
    font-weight: bold;
    font-size: 10px;
    color: #0080FF;
    }

    Bineînteles că font, border, color se pot modifica în funcţie de designul dorit.

    Etichete: , , , ,



My webspace

Adds

Best Posts

Categorii

Comentarii recente

Blogroll

Arhivă