Passa ai contenuti principali

Aggiungere sidebar in blogger.

A tutti voi ecco un altro trucchetto per modificare il nostro blogg, con piattaforma blogspot.
Come prima cosa quando siete su modifica modello html, scaricate e salvate una copia del template non si sa mai vada storto qualcosa.

A tutti voi ecco un altro trucchetto per modificare il nostro blogg, con piattaforma blogspot.
Come prima cosa quando siete su modifica modello html, scaricate e salvate una copia del template non si sa mai vada storto qualcosa.
Ora scrollate fin giu nel codice, fermatevi quando trovate il codice:

Non vi spaventate se non trovate i tag >b:widget id="HTML2" come i miei non sono importanti, l'importanete è che selezionate dall apertura del tag >div id="sidebar-wrap"> fino alla sua chiusura.ok!
Bene ora copiate e incollate tutto il codice un po più sopra esattamente:

Qui fermatevi e alla fine di questo codice, INCOLLATE.
Se volete la side bar a sinistra, perchè il codice che vedte qui sopra si riferisce all'header del vostro blog, quindi incollando il codice subito dopo la sidebar viene caricata a sinistra, se invece volete la side bar a destra, un po piu giu al codice trovate questo div

>div id='main-wrap1'> >div id='main-wrap2'>
>b:section class='main' id='main' showaddelement='no'>
>b:widget id='Blog1' locked='true' title='Post sul blog' type='Blog'/>
>
>/b:section>
>/div> >/div>

andate subito alla fine di questo div e incollate il codice .


SECONDO PASSO
Copiate questo codice

>div id='left-sidebar-wrapper'>
>div id='sidebarbottom-wrap1'> >div id='sidebarbottom-wrap2'>
>b:section class='sidebar' id='left-sidebar' preferred='yes'>

e incollatelo nel codice appena incollato su, precisamente al posto di queste righe:

come avrete notato, il codice appena incollateo ha i tag di apertura al contrario sono in rosso.. mettetteli a posto. <. Ora andate nel codice quasi all' inizio sopra, esattamente qui:
#sidebar-wrap {
width:240px;
float:right;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Fermatevi, e alla fine di questo codice, copiate e incollate questo:

#left-sidebar-wrapper {
width: 240px;
float: left;
word-wrap: break-word;
overflow: hidden;
}

Ora tornate nel codice qui:

>div id='left-sidebar-wrapper'>
>div id='sidebarbottom-wrap1'> >div id='sidebarbottom-wrap2'>
>b:section class='sidebar' id='left-sidebar' preferred='yes'>

e cancellate tutti i tag contenenti i widget
>b:widget id='HTML30' locked='false' title='LINK AMICI' type='HTML'/>
Non è detto che siano tutti HTML30 voi cancellate lo stesso, ma lasciate solo uno con HTML nel caso non lo avete copiate e incollate il codice sopra. Questo vi aiutera a capire nella visualizzazione in modalita elementi pagina. RICORDO DI CAMBIARE I TAG DI APERTURA DA >a<. ULTIMO PASSO Tornate un po su nel codice nella parte css e cercate:
#outer-wrapper {
background:...;
width:...;
margin:...;
text-align:...;
font:...;
}

e nalla riga width:...; aumentate di 220px il valore (es: width:700px; diventa width:920px;).
Ora salvate il modello. E visualizate in elementi pagina, dovreste vedere l'elemento HTML che abbiamo lasciato nel codice widget provate a scriverci qualcosa salvate e date un occhiata al blog. FUNZIONA? nel caso non dovesse funzionare aprite il modello salvato all'inizio con un semplice editor testo copiate e incollate tutto nel codice del template del vostro blog. Se volete una mano non esitate a postare.
Alla prox

Commenti

  1. ciao..ti ho aggiunto al mio blog con piacere..se hai qualke consiglio per la grafica del mio blog l'accetto volentieri..io ne capisco poco di html :(

    www.mark-be.blogspot.com

    RispondiElimina
  2. scusami,vorei aggingere la sidebar ma non è molto chiaro il post..al punot 1 e al termine del punto 2..puoi darmi una mano

    RispondiElimina
  3. si certo ma dove nn ti è chiaro? basta copiare il codice che devi trovare all inizio sidebar-wrapper, tutto dall apertura alla chiusura, e te lo duplici subito sottoheader wrapper,e poi lo stesso con lo stile relativo al div sidebar-wrapper te lo duplichi e cambi il relativo nome con questo div id='left-sidebar-wrapper'..mi sembra chiaro..se hai difficolta ci sentiamo . incollami il codice che nn ti è chiaro ma ricorda di togliere il tag di apertura nei post..saluti

    RispondiElimina
  4. mi spiace ma non è molto chiara come guida

    RispondiElimina
  5. e lo so mi dispiace ma se nn sai fare col codice tutto ti risulta difficile, io dò consigli e idee poi sta a voi a personalizzarli per il vostro blog, anche perche il codice cambia da template a template quindi, non ci posso fare niente..ciao

    RispondiElimina
  6. Scusa se approfitto di te, chissà se puoi aiutarmi, nel senso che quello che mi puoi dire sarà alla mia portata;)
    In un blog a cui mi sto dedicando da pochissimo vorrei fare quest apiccola modifica: infatti non vorrei cambiare template perchè mi sta bene quasi tutto delle caratteristiche del mio, tranne che vorrei evidenziare i titoli della colonnina a destra (dove metto foto,animazioni ecc.) con un colore tipo albicocca (stile quello standard di Word 2003 che uso).

    Io uso blogspot/blogger, Thisaway Blue mi pare il template, uno di quelli a scelta.
    In un altro template che però non mi piace questa opzione c'è...non è che sapreste guardare il codice per me e indicarmi se l'aggiunta/modifica è cosa da poco o stravolge tutta la base?
    Al limite se mi dite almeno come si chiamano i titoli della colonnina a destra...slidebar?Boh!
    Proverò a pasticciare col codice facendo le prove ma prima è meglio che raccolga qualche informazione base o proprio lasci perdere...dimmi qualcosa tu ti prego traducendo terra-terra...!
    Ciao e grazie
    Alessia
    Al limite ti mando il codice, ma non vorrei strafare e intasare..

    RispondiElimina
  7. ciao dalla mia breve ricerca, fatta in due minuti dovrebbe essere questa pate di codice riguardante il codice css:
    #sidebartop h2 {
    line-height:1.5em;
    color:$topSidebarHeaderColor;
    border-bottom: 1px dotted $topSidebarHeaderColor;
    margin-bottom: 0.5em;
    font: $headerFont;
    }
    ma a quanto pare il colore si cambia dalle impostazioni che trovi in modifica layout caratteri e colori..prova a vedere e dimmi..comunque la colonna si chiama sidebar..nel caso prova ad andare ad intuito nel codice ma se nn sei esperta devi stare attenta potresti perdere tutto..quindi prima di fare modifiche scaricati una copia del template..ciaoo

    RispondiElimina
  8. ciao, mi potresti dire come faccio ad aggiungere una casella di ricerca come la tua (nel senso che cerca nei post del blog e non sul web come la ricerca di google)? grazie mille. davide

    RispondiElimina
  9. certo vanilla ecco il link..http://elektrojoke.blogspot.com/2007/10/inserire-ricerca-nel-proprio-blog-o.html
    mi farebbe piacere se cliccasi su segui in alto sulla colonna destra..grazie mille..

    RispondiElimina

Posta un commento

Post popolari in questo blog

Serrature a Doppia Mappa vs. Serrature a Cilindro Europeo: Qual è la Differenza e Qual è la Migliore Scelta?

  Quando si tratta di sicurezza domestica, le serrature svolgono un ruolo fondamentale. Due tipi comuni di serrature utilizzate sono le serrature a doppia mappa e le serrature a cilindro europeo. Ma qual è la differenza tra queste due opzioni e quale dovresti scegliere per proteggere al meglio la tua casa? Serrature a Doppia Mappa Le serrature a doppia mappa sono uno dei tipi più tradizionali di serrature utilizzate nelle porte di molte case. Queste serrature richiedono due chiavi differenti per essere aperte. Hanno due insiemi di alette interne, che devono essere allineate con precisione dalle chiavi per consentire l'apertura. Vantaggi delle Serrature a Doppia Mappa : Sicurezza : Le serrature a doppia mappa sono note per la loro resistenza agli attacchi, come l'effrazione. Affidabilità : Sono robuste e durature, richiedendo una manutenzione minima nel corso del tempo. Svantaggi delle Serrature a Doppia Mappa : Chiavi Agganciate : Il principale svantaggio è che le chiavi posson...

Nokia annuncia nessun 5" pollici per il 2013, ma via ad un 4,7" pollici

Non si riesce a capire il perchè, ma la nokia sembra non voler lanciare nel 2013 nessun 5 pollici come i suoi rivali, samsung, LG, ma annuncia l'uscita di un dispositivo da 4,7" pollici. Nel mondo android sappiamo bene che è facile trovare dispositivi smartphone che arrivano anche a 6" pollici , per non parlare dei tablet con sistema operativo android, mentre per il mondo windows phone sembra sia diverso, infatti sono pochissimi e costosissimi i tablet con sistema operativo android, mentre per i cellulari windows phone si trova su alcuni modelli nokia che arrivano massimo a 4,3" pollici. Ma per gli amanti dei grossi schermi non esistate Nokia sta preparando uno smartphone da ben 4,7" pollici, che a mio parere e di molti utenti risulta essere la dimensione migliore.

Nokia investe in ricerche tecnologiche per le nuove fotocamere degli smartphone

Una società famosa, Pelican imaging per le nuove tecnologie applicate su lenti, ha studiato un sistema che riesce ad usare delle lenti che usano spazi ridottissimi, che hanno la stessa qualità di lenti molto più grandi a livello di dimensioni. Il funzionamento che permette a queste lenti di lavorare in spazi ridotti è lo stesso funzionamento dei telescopi, usare più lenti sovrapposte per avere risultati migliori per la cattura delle immagini. La nokia ha deciso di investire in questa società, chissà cosa avranno in mente di sfornare quelli della nokia.

Risparmiare sulla bolletta telefonica: migliori offerte telefono adsl

Risparmiare sulla bolletta telefonica è per molti una necessità, visto che c’è chi decide di rinunciare al telefono perché lo ritiene perfettamente inutile. Su questa scelta risultano spesso decisive le app di messaggistica istantanea e le promozioni per le chiamate dai cellulari. L’importante è che ci sia internet. Con il post odierno vedremo come risparmiare sulla bolletta telefonica. Ti segnalerò a tal proposito le migliori offerte telefono adsl più un elenco di siti web utili per tenerti sempre aggiornato sulle nuove promozioni. Premessa: per spendere di meno sulla bolletta, è stato dimostrato che è preferibile cambiare. Il problema è che però spesso questo non accade, visto che le famiglie italiane sono piuttosto refrattarie al cambiamento. Internet Senza Limiti e Tutto sono le due principali offerte telefono adsl di Telecom Italia. Se Internet Senza Limiti è la proposta ideale per chi usa il telefono una tantum (visto che si paga lo scatto alla risposta di 16,13 centesimi di ...

Programmi Windows per newsletter

Se sei un blogger o un webmaster o se gestisci un sito di e-commerce, la newsletter diventa fondamentale per comunicare le novità ai tuoi interlocutori, siano questi semplici lettori o acquirenti potenziali. Vorresti crearne una o gestirne una in maniera semplice ed immediata? No problem. Con il post odierno ti segnalo alcuni programmi Windows per newsletter. SmartSerialMail Free : apriamo l’elenco di programmi Windows per newsletter, con questo software freeware che si rivolge anche ai non addetti ai lavori, visto che l’editor HTML interno ti permette di creare e-mail personalizzate. Se ne possono inviare ogni giorno 400 su 200 indirizzi di posta elettronica. Tra i più completi a livello di numero di template. MaxBulk Mailer : altro valido software per chi desidera creare, gestire ed inviare newsletter professionali. L’utente può scegliere il formato testo tradizionale o quello in HTML. Essendo un programma avanzato, ma semplice in termini di utilizzo, MaxBulk Mailer supporta appi...

Carica la sua foto su facebook ma nella scollatura si nota qualcosa di strano

E' successo ad una ragazza che caricando la sua foto su facebook non si è accorta di cosa si vedeva nella scollatura date un pò un occhiata.

L’OPEN SOURCE

Come già sappiamo l’open source indica la gamma di software dove gli autori favoriscono il libero studio e le modifiche da parte di altri programmatori. Questo è realizzato mediante le “licenze d’uso”. La collaborazione di più persone permette modifiche molte avanzate del prodotto,per raggiungere un prodotto finale molto più complesso e in grado di soddisfare ogni esigenza. Infatti l’open source consente a ogni programmatore o esperto d’informatica di avere a disposizione un programma e poterlo modificare in base ai propri gusti e esigenze,adattandolo così alle proprie necessità . Bisogna però fare una puntualizzazione , i programma open source sono differenti dai programmi freeware,perché questi ultimi anche se è possibile usufruirne in modalità gratuita rimangono di proprietà dell’azienda o della persona che li ha creati e quindi possono essere modificati solo da questi ultimi. L’open source non è un metodo per aggirare al costo e l’acquisto dei programmi,ma è una scelta al...

Archivio del nostro bloger in calendario

Eccomi con un altro carinissimo tutorial per il nostro blog con piattaforma blogger. La cosa straordinaria di questo script è che mostra gli ultimi posts inseriti sotto il nostro calendario, e tramite un menu a tendina è posibile scegliere il mese e visualizzare i posts. 1 passo come sempre scaricare e salvare una copia del templete. 2 espandi widget. 3 trovate la parte di codice con itasti mela+f, qui sotto: 4 Copia il seguente codice, quindi evidenziare l'archivio gadget come illustrato e sostituirlo con un copia e incolla. <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <div id='ArchiveList'> <div expr:id='data:widget.instanceId + "_ArchiveList"'> <b:if cond='data:style == "HIERARCH...