rss feed blog search engine
 
Search rss blog search engine
 
Templates Friends  
Released:  3/28/2008 8:07:17 PM
RSS Link:  http://template.where-seek.com/?feed=rss2
Last View 5/17/2008 4:46:43 AM
Last Refresh 5/17/2008 2:52:31 AM
Page Views 458
Comments:  Read user comments (0)
Save It Add to Technorati Add to Del.icio.us Add to Furl Add to Yahoo My Web 2.0 Add to My MSN Add to Google Add to My Yahoo! Templates Friends



Description:



Web Templates Resource and tutorial, WordPress,Joomla,Flash,CSS


Contents:

Le maschere di livello

Layer Mask

Ciao a tutti, sapete usare le maschere di livello ?? Se si potete anche lasciare perdere il post :-) , altrimenti vi illustreró come creare semplici cornici utilizzando appunto le mitiche maschere di livello.

Allora per prima cosa aprite un immagine a cui volete aggiungere la cornice, dopodiché create un nuovo livello facendo copia-incolla dell’immagine appena aperta.

- Seleziona tutto (CTRL+A), COPIA(CTRL+C), INCOLLA(CTRL+V)

A questo punto se avete i livelli visualizzati vedrete che avete un layer1 e il layer di sfondo (se non vedete la finestra di layer, cliccate F7). Ora cliccate sul layer di sfondo e cancellate il contenuto.

- Seleziona tutto (CTRL+A), CANCELLA (DEL)

Ecco ora possiamo finalmente cliccare sul nostro layer 1 e aggiungere la maschera cliccando sul terzo bottone in basso della finestra dei livelli.

Ora avete una maschera di livello, e se provate a colorare di nero la maschera selezionando il pennello ed il colore nero, vedrete che la parte colorata in nero non verrá piú visualizzata, oppure riempite tutto di nero e colorate di bianco la parte che volete visualizzare :-) .

Ed ecco il risultato.

L’uso delle maschere é molto diffuso nel mondo Photoshop, si usano appunto per creare cornici, per omettere parti delle foto, per colorare solo certe parti( come per esempio la sostituzione del colore dei capelli),ecc..

Dopo questo breve post vi saluto , buon divertimento




Creare un Plugin per WordPress

WordPress PlugIn tutorial

Ciao a tutti, WordPress si sta diffondendo sempre di piú tra le piattaforme piú utilizzate per il blogging, quindi perché non imparare a scrivere un bel Plugin con un bel tutorial e facilitare la vita a tutti i blogger.

Voila, iniziamo con la struttura principale di un Plugin WordPress.

  • Descrizione del Plugin (obbligatorio)
  • Aggiunta delle funzioni sotto forma di filtri o azioni
  • Aggiunta di opzioni e di un menu di amministrazione (non obbligatorio)

Ecco queste sono le parti che di solito potete trovare se osservate il codice di un Plugin.

Cosa sono i filtri o le azioni ?

In generale i filtri sono funzioni che modificano i contenuti di WordPress conservati nel database, come per esempio il testo dei pos.

Le Azioni invece sono funzioni che specificano contenuti/eventi aggiuntivi che possono essere causati dagli eventi interni di WordPress, come la creazione del header,footer, aggiunta di commenti,ecc..

Vedremo ora i principali modi di uso dei filtri e azioni e le funzioni principali per la scrittura di un Plugin WP.

Aggiungere un contenuto/funzione al header:

add_action(’wp-head’, ‘function_name’);

Aggiungere un contenuto/funzione al footer:

add_action(’wp-footer’, ‘function_name’);

Aggiungere un contenuto/funzione al menu di amministrazione:

add_action(’admin_menu’, ‘function_name’);

Questa funzione di solito si usa per creare il menu delle opzioni e settaggi del Plugin

Aggiungere un filtro al contenuto dei post
add_filter(”the_content”, “function_name”, 1); //1 priority

Comunemente questo tipo di uso del filtro é adoperato per sostiture parole speciali all’interno dei post, come parole offensive, parole chiave sotto forma di commento <!–FUNC–> con del codice,ecc.

Aggiungere una variabile alla lista delle opzioni:

add_option(’var_name’, ”);

In questo modo é possibile salvare dei valori da poi ripescare con:

$var=get_option(’var_name’);

Ed aggiornare con:

update_option(’var_name’, $new_val);

Infine ecco come aggiungere la pagina di opzioni del plugin alla lista di amministrazione plugin, quello che vedete quando cliccate su setting.

add_options_page(__(’Plugin Options’), __(’Plugin name’), 5, basename(__FILE__), ‘function_name’);

I primi due parametri sono il nome del menu e del Plugin, mentre l’ultimo é il nome della funzione che dovra richiamare quando cliccate sull’elemento.

Eccoci arrivati alla fine del tutorial, ma per aiutare ancora un po’ vi lascio due codici di due Plugin molto commentati, se avete qualsiasi domanda non esitate :-) .

Syntax Highlighter

Anti-pirla :-p

ciao a tutti e buona giornata




Plugin WordPress per il progetto altapopolarità

Ciao a tutti, é nato da poco il progetto altapopolarità, un progetto che mira allo scambio di link tra “blog amici” per avere una maggiore visibilità nel mondo di internet.

Da qualche giorno mi é stato chiesto di fare uno script per automatizzare la lista di link dei blog da inserire nelle proprie pagine.

Siccome per ora ci sono stati problemi con linguaggi non server-side come javascript e incompatibilità varie ho deciso di realizzare un plugin per wordpress che faccia tutto il lavoro da solo.

So che molti blogger non hanno WordPress, ma almeno nell’attesa della realizzazione dello script compatibile con tutte le versioni di IE/Firefox/Safari & Co , volevo accontentare una fascia di utenti :-D

Quindi ecco a voi il PlugIn




Effetto peel

Peel away effectCiao a tutti, oggi recupero un po’ di post che non ho avuto tempo di scrivere,heeh.

Sulla rete trovate molti esempi di effetto peel, ovvero quella specie di bordino che oscilla in qualche angolo dello schermo e che quando avvicinate il cursore si “sfoglia” mostrandovi una pubblicitá o un annuncio.

Cercando in rete si trovano molti esempi e script ma pochi funzionano bene. Oggi vi propungo uno script peel effect come quello che trovate nella pagina principale in alto a destra.

Lo script in questione lo potete usare per qualsiasi tipo di sito/blog, ma io vi illustreró l’installazione per WordPress.

Bene iniziamo scaricanto il necessario, fatto questo estraete la cartella in wp-content/plugins .
Il prossimo passo da fare é editare il file esel.js in modo da avere tutte le variabili che “puntano” all’indirizzo giusto. Quindi per fare ció sostituite mywebsite con il vostro indirizzo web, e link con il collegamento che volete avere quando cliccate sull’oggetto peel.

var esel = new Object();
esel.ad_url = escape('link');
esel.small_path = 'mywebsite/wp-content/plugins/peel/esel_s.swf';

esel.small_image = escape('mywebsite/wp-content/plugins/peel/image/beispiel_s.swf');

esel.big_path = 'mywebsite/wp-content/plugins/peel/esel_b.swf';

esel.big_image = escape('mywebsite/wp-content/plugins/peel/image/tempg.gif');

quindi infine diventá cosí :

var esel = new Object();

esel.ad_url = escape('http://www.template.where-seek.com/?page_id=17');
esel.small_path = 'http://www.template.where-seek.com/wp-content/plugins/peel/esel_s.swf';

esel.small_image = escape('http://www.template.where-seek.com/wp-content/plugins/peel/image/beispiel_s.swf');

esel.big_path = 'http://www.template.where-seek.com/wp-content/plugins/peel/esel_b.swf';

esel.big_image = escape('http://www.template.where-seek.com/wp-content/plugins/peel/image/tempg.gif');

Ecco una volta fatto questo vi basta solo andare a modificare il vostro footer, quindi in WordPress andate su Design - Theme Editor - footer.
Andate in fondo e proprio prima del tab inserite :

Ovviamente mywebsite deve essere il vostro indirizzo, :-)

Infine come ultimo passaggio dovete modificare le immagini tempg.gif e templatebig.png a vostro piacimento nella cartella mywebsite/wp-content/plugins/peel/image/.

Il gioco é fatto, ora dovreste aver fatto tutto ed avere la vostra paginetta sfogliabile.

Buona giornata e alla prossima :-D




Header e immagini che cambiano in base all’orario (php)

Image change php
Probabilmente avete giá visto siti o blog dove il logo o l’immagine principale cambia in base all’orario, io ho usato lo script che descriveró nella sito web www.where-seek.com, infatti durante il giorno il logo principale é la lenta sul mondo con la luce del sole, mentre nelle ore serali il logo si tramuta in lente sulla luna nel celo stellato, :-) come si fa ???

$ora=date("G");
$ora = $ora + 6;
if ( $ora > 6 and $ora < 20  )
{
echo "

Il codice é molto semplice, nella prima riga acquisisco l’ora locale del server che ospita il nostro Blog/Sito dopodiché aggiungo il fuso orario,nel mio caso il server é statunitense, e infine semplicemente controllo se l’orario é tra le 6 e le 20, se é cosí carico il primo header, altrimenti carico il header notturno.

Semplice !! :-) , con la stessa tecnica potete cambiare anche immagini o altro semlicemente inserendo il codice html/php dopo l’istruzione if e else.

Spero di essere stato d’aiuto , alla prossima , ciauuuz




Come si creano i tab espandibili ?

Expandable Tabs CSS

Iniziamo con li creare il codice HTML per una semplice lista

<div id="menu">
<ul>
<li><a href="">Mini</a></li>
<li><a href="">Medium</a></li>
<li><a href="">MegaMaxiSuperIperBIG</a></li>
<li><a href="">Mini</a></li>
<li><a href="">Little</a></li>
</ul>
</div>

Otterremo un risultato piú o meno simile a questo.

Ora aggiungiamo un po’ di CSS.

#menu ul {float:left;list-style-type:none;margin:0px;padding:0px;width:800px;}

#menu ul li {float:left;}

#menu ul li a {float:left;}

Come vedete per poter visualizzare la lista in orizzontale bisogna impostare gli elementi in modalità float:left.
Invece list-style-type:none rimuove i classici puntini dell’elenchi puntati, mentre width:800px non permetterá che la lista sia minore o maggiore di 800px.
Non preoccupatevi degli altri parametri perché li vedremo piú avanti.

Ora aggiungiamo le nostre belle immagini per rendere i Tab piú attrattivi, :-D.

#menu ul {float:left;list-style-type:none;margin:0px;padding:0px;width:800px;}

#menu ul li {float:left;background:url('start.gif') no-repeat;}

#menu ul li a {float:left;background:url('end.gif') no-repeat;background-position: 100% 0%;}

Voilá ed il risultato é questo.

Ovviamente non ci soddisfa tanto, quindi aggiungiamo un po’ di spazio quá e lá e cambiamo il colore del testo.

#menu ul {float:left;list-style-type:none;margin:0px;padding:0px;width:800px;}

#menu ul li {float:left;background:url('start.gif') no-repeat;margin-right:10px;}

#menu ul li a {float:left;background:url('end.gif') no-repeat;background-position: 100% 0%;padding-left:10px;padding-right:10px;font:12px Arial;text-decoration:none;font-weight:bold;color:#FFFFFF;line-height:30px;}

#menu ul li a:hover {text-decoration:underline;}

Ed ecco il risultato finale.

Se volete la versione originale del tutorial in lingua inglese ecco il link:

xhtmlvalid.




Come mai le attrici sono sempre cosí belle?

Oramai é noto che nel mondo dello spettacolo l’aspetto é sempre stato al centro dell’attenzione e che fin dall’inizio si é sempre ricorso a vari trucchi per far apparire la star sempre piú bella. Oggi vi propongo un semplice tutorial su come rendere perfetta la pelle di una persona. Usiamo anche noi Photoshop come i Pro e facciamoci belli :-p.

Prima peró di iniziare con il tutorial vi propongo un sito, http://www.iwanexstudio.com

Questo sito promuove un servizio professionale di fotoritocco, andate a vedere su portfolio, troverete personaggi come; beyonce knowles con le maniglie dell’amore casualmente rimosse, i fianchi ristretti di penelope cruz, una pancia da ventenne per cameron diaz oppure eva longoria versione amateur e versione ritoccata, hehe, da vedere.

Inifine eccovi il vero é proprio tutorial http://tutorialpulse.com/49/superb-skin-airbrush-technique/




Create temi WordPress: Parte 3/3, la pagina principale

Buon giorno a tutti, finalmente ho un po’ di tempo per continuare questo tutorial, oggi parleremo della prima pagina di WordPress, quindi vedremo la realizzazione dei file:

  • index.php
  • header.php
  • sidebar.php
  • footer.php
  • style.css (0vviamente questo verrá aggiornato ogni volta)

Allora visto che vorrei andare dritto al punto vi consiglio di scaricare il Template d’esempio(il template é ottimizzato per Firefox), visto che a questo punto non voglio dilungarmi sulla creazione di un Template per una pagina semplice (XHMTL,CSS), se volete invece imparare questo fate un salto nella sezione Tutorial - CSS :-) .

Voilá, se aprite il file del Template potete vedere che abbiamo giá le immagini, il file CSS, ed il file index.html, cosa facciamo a questo punto ? La miglior tecnica per imparare é smontare un pezzo alla volta di un Template classico WordPress e sostituirlo con le nostre cose, quindi partiamo copiando la cartella wp-content/theme/classic e la rinominiamo test !!!

Ora copiate dentro la cartella test le cartelle images del Template d’esempio e il file style.css (vi chiederá di sovrascrivere, yesss).

Fatto questo siamo pronti per iniziare la nostra opera, ricordate che gli atri file dentro all’archivio del Template d’esempio sono la soluzione del tutorial, quindi i codici php giá modificati.

Come abbiamo discusso nell’articolo precedente per realizzare un Template WordPress bisogna creare fondamentalmente 4-5 componenti, se aprite la pagina index.html potete vedere un Template per sito contenente proprio i componenti che ci servono per il nostroBlog, header,content,sidebar,ecc…

Guardate il sorgente html, come vedete, é stato suddiviso per sezione, così da facilitare la suddivisione del codice in diversi file, si potrebbe anche usare solo un file index.php, ma poi sarebbe scomodo se poi dovremmo riutilizzare il codice per creare altre pagine. Quindi per realizzare i nostri moduli non dobbiamo fare altro che introdurre le parti di codice php che ci caricano i post, i menu e le varie informazioni nel index.html e poi separarlo nei diversi “file modulo”. Siccome peró esistono giá i file del Template Classic, faremo il contrario, ovvero modificheremo il codice del Template Classic(rinominato da noi prima test) con il nostro codice.

Il header (header.php):

Aprite il file header.php, come potete vedere contiene la prima parte del codice XHTML/PHP della pagina, quindi include i file degli stili CSS, le meta tag e altre info. Quello che noi andremo a modificare sta dopo il tag <body>.

Infatti quello che nel file originale inizia con il <div id=”rap“> noi lo sostituiremo con li nostro div container e inseriremo il nostro codice:

<div id=”container“>
<div class=”header“>
<div class=”headering“>

<h1><a href=”<?php bloginfo(’url‘); ?>/“><?php bloginfo(’name‘); ?></a></h1>

<p><?php bloginfo(’description‘); ?></p>
</div>
</div>

<div class=”content_up“></div>

<div class=”content“>

Come vedete é un copia incolla della parte header del file index.html con l’aggiunta di 3 funzioni php:

<?php bloginfo(’url‘); ?> : questa funzione restituisce il link alla nostra home page del Blog.

<?php bloginfo(’name‘); ?> : questa invece il titolo(nome) del nostro Blog.

<?php bloginfo(’description‘); ?> quest’ultima la descrizione che abbiamo inserito nel campo description del Blog.

Fatto questo, il nostro primo file é finito, abbiamo fatto in fretta o no ??? :-)

Il contenuto (parte di index.php) :

Per questa parte dobbiamo aprire il file index.php, come vedete la prima parte di questo file non fa altro che caricare il codice header.php con la chiamata <?php get_header(); ?>. é come se prendessimo il codice di header e facciamo copia-incolla.

Dopo di questo possiamo vedere parecchio codice php, vediamo a cosa bisogna fare. In generale per non farsi troppi problemi é piú facile lasciare la parte che carica i post cosí com’é, e se vogliamo modificare l’aspetto dei post possiamo creare gli stili, post,storytitle,storycontent,feedback. Fatto questo aggiungete la parte di codice del nostro nuovo Template per completare la sezione contenuto, ovvero:

</div>
<div class=”content_left“></div>
<div class=”content_down“></div>

Questo perché abbiamo “aperto” il <div id=”content“> dentro il file header.php ed ora dobbiamo chiuderlo con le dovute divisioni.

Ecco, a questo punto inseriamo noi un codice php, in quanto nell’esempio classic non c’é, il codice <?php get_sidebar(); ?> che carica il file sidebar.php

In fine per completare il nostro index.php dovremmo inserire


Home  


 


Link to us




RSS Feed of new blogs                                                   Home        Feed Map        Submit Feed      Link to Us       Contact