Formato data in stile calendario Wordpress

Formato data in stile calendario Wordpress

| BLOG, Blog Tutorial, BLOGGER, BLOGSPOT, hack, javascript | 0 commenti »

Worpress Template

Capita spesso di vedere nei template Wordpress, stili belli e particolari, ricchissimi di funzionalità e dalla grafica accattivante.

E 'abbastanza comune vedere lo stile del formato data, accanto ai post nei Temi WordPress, in stile calendario, ma per la piattaforma Blogger non è cosi facile per aggiungerlo.

Ma chi ha detto che è impossibile?
In questo tutorial vi mostrerò come crearlo per la piattaforma Blogger.
Credetemi, è più facile farlo che dirlo.
Per prima cosa facciamo il backup del nostro template, cosi in caso di errori possiamo ripristinarlo.
Vediamo come...
Entra nelle impostazioni di Blogger, andando in:
Impostazioni > Lingua e formattazione - Formato intestazione data e cambia il formato della data in giorno/mese/anno, ad esempio: 06 Novembre 2012 - come si può vedere nel mio esempio qui sotto::

impostazioni - lingua e formattazione - formato intestazione data

e alla fine salva tutto.
Ora vai su:
Modello › Modifica HTML, attiva > "Espandi i modelli widget" e cerca (CTRL + F) la seguente riga:

<h2 class='date-header'> <span> <data:post.dateHeader/> </ span> </ h2>

e la sostituite con:

<div id='Date'> <script> changeDate ('<data:post.dateHeader/>'); </ script> </ div> <b:else/> <div id = ' Data '> changeDate <script> (''); </ script> </ div>

Ora aggiungere il codice riportato di seguito appena sopra </ head> (CTRL + F per trovarlo)

<script type='text/javascript'> 
	/ / <[CDATA [! 
	var DateCalendar; 
	changeDate funzione (d) { 
	if (d == "") { 
	d = DateCalendar; 
	} 
	var da = d.split ('') ; 
	giorno = "<strong class='date_day'>" + da [0] + "</strong>"; 
	. month = "<strong class='date_month'>" + da [1] fetta (0,3) + "</strong>", 
	year = "<strong class='date_year'>" + da [2] + "</strong>"; 
	document.write (mese + giorno + anno); 
	DateCalendar = d; 
	} 
	/ /]]> 
	</script> 
	<b:if cond='data:blog.pageType != "static_page"'> 
	<style type='text/css'> 
	/ * Calendario Data 
	------- ---------------------------------------- * / 
	# Data { 
	background: url trasparente ( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixIt1D_DPgJXZubK5R7JQylN1wPXW3RvP-9d9ggFCSRB3Rk5F5n_EcfRvW_vcvj-7tC5ow19Lth4-WfOB208PQPguXZb2x_C2H4HtHFF-Kbe8LXfOmanUVdH94gyrbheYHB54F-BTfEunJ/s1600/calendar07.png ) no-repeat; 
	display: block; 
	width: 60px; 
	height: 60px; 
	float: left; 
	margin: 15px 2px 0 -108 px; 
	padding: 0 0 8px 0px; 
	bordo: 0; 
	text-transform: uppercase; 
	} 
	. date_month { 
	display: block; 
	font-size: 15px; 
	font-weight: bold; 
	margin-top:-1px; 
	text-align: center; 
	color: # ffffff;  colore / * del mese * /
	} 
	. date_day { 
	display: block; 
	font-size: 28px; 
	font-weight: bold; 
	margin-top:-8px; 
	text-align: center; 
	color: # 282828;  / colore Giorno * A * /
	} 
	date_year {. 
	display: block; 
	font-size: 10px; 
	margin-top:-8px; 
	text-align: center; 
	color: # 282828;  colore / Anno * A * /
	} 
	</style> 
	</b: if>

Alla fine fate l'Anteprima e se tutto è ok, fate clic su Salva.

Abbonati gratis a questo blog

0 commenti

Posta un commento

Iscriviti a: Commenti sul post (Atom)