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...

Nuove tecnologie per le porte di casa e domotica: come cambia la sicurezza delle abitazioni

Negli ultimi anni la tecnologia ha trasformato profondamente il modo in cui viviamo le nostre case. Uno degli ambiti che ha visto i maggiori sviluppi è quello della sicurezza domestica , in particolare per quanto riguarda le porte d’ingresso e i sistemi di accesso intelligenti. Grazie alla diffusione della domotica e delle serrature smart , oggi è possibile controllare e proteggere la propria abitazione in modo molto più efficace rispetto al passato. Le porte di casa non sono più solo una barriera fisica contro le intrusioni, ma diventano veri e propri dispositivi tecnologici integrati con smartphone, sensori e sistemi di automazione. Le porte di casa diventano intelligenti Le nuove porte di sicurezza sono progettate per offrire un livello di protezione molto più elevato rispetto alle porte tradizionali. Oltre alla robustezza dei materiali, oggi vengono integrate tecnologie digitali che migliorano il controllo degli accessi e la gestione della casa . Tra le innovazioni più diffuse...

Client Voip Mac, Linux, Windows

SJphone è un softphone client VoIP che consente di parlare con qualsiasi altro softphone in esecuzione su un PC / PDA, ogni stand-alone IP-Phone, o tramite Internet Telephony Service Provider (ITSP) con qualsiasi rete tradizionale telefonica o un telefono cellulare. Supporta SIP ed è pienamente interoperabili con la maggior parte dei principali fornitori di VOIP e ITSP. free download Client Voip Mac, Linux, Windows

Ora con whatsapp si può parlare

Whatsapp una delle applicazioni di istant messaging più scaricate al mondo introduce i messaggi vocali. Oggi la startup di whatsapp ha lanciato alcuni cambiamenti fra cui il più importante quello di poter inviare messaggi vocali, la durata è a scelta degli utenti, in questo modo viene facilitato l'uso da parte di quella fasci di utenti che per svariati motivi o non riescono ad usare bene la tastiera degl smartphone o non sa per niente scrivere.

Contattare un operatore telefonico 3. Ecco come fare

Da qualche tempo tutti i possessori di un contratto telefonico 3 ita riscontrano molti problemi nel mettersi in contatto con l’assistenza tecnica , in particolare risulta molto complicato parlare con un operatore . I percorsi da seguire, digitando i tasti sul proprio telefono, non sono molto chiari e confondo facilmente l’utente, che non riesce quasi mai a raggiungere lo scopo di parlare con un operatore in assistenza diretta. Per semplificare il lavoro è sufficiente seguire questi pratici consigli, che vi guideranno direttamente alla voce del primo operatore telefonico disponibile, che vi garantirà l’assistenza di cui avete bisogno. Per parlare con un operatore 3 dovete chiamare il numero dell’assistenza, digitando sul telefonino il numero 133 , che vi metterà in contatto con il servizio clienti. Dopo aver ascoltato la voce registrata che elenca tutti i servizi disponibili digitate sulla tastiera il numero 4 , nel menu successivo, dopo aver atteso che la voce registrata abbia e...

Invoicex software di fatturazione Windows-Mac-Linux

Invoicex è un software di fatturazione programmato dalla TNX. Invoicex è un software chiaro e di facile utilizzo, ed è anche gratis nella versione Base (Open Source), senza limiti per quanto riguarda l'installazione per le versioni Professional, Professional Plus ed Enterprise.Questo programma vanta un'estrema completezza e funzionalità per la gestione di piccole e medie imprese, liberi professionisti e per tutti quelli che hanno bisogno di amministrare un magazzino, ed emettere fatture.Consigliato e adatto a chi ha un regime di contabilità semplificata e si rivolge ad un commercialista per i propri bilanci finali.Inoltre la sua natura Open Source offre innumerevoli possibilità di personalizzazione, ed è programmato in Java, una tecnologia che lo delinea un programma stabile e multipiattaforma. Perchè scegliere Invoicex? Possiede funzioni avanzate ed in continuo sviluppo per la gestione aziendale. E' utilizzabile su sistemi Windows, Linux e OS X. E' un programma ...

Samsung Galaxy SIV, alcune novità sul display

Samsung Galaxy SIV, ecco tutte le caratteristiche del nuovo display. Ormai è confermata la presenza della nuova tecnologia S Pen del Galaxy Note che permette di usare il dito come una penna senza toccare il display. Presente anche una nuova tecnologia display AMOLED chiamato “ green PHOLED ” che aumentera l'efficenza del 25%, la risoluzione sarà Full HD da 1920x1080 pixel. Guardando il  video “teaser” lanciato dalla samsung per il nuovo galaxy SIV , possiamo capire qualche anticipazione sulla spettacolarità e sulle performance del nuovo display quando dalla scatola esce una luce e il bimbi dice che questa è la tecnologia più all'avanguardia dopo la TV a colori, staremo a vedere all'uscita del nuovo samsung galaxy SIV .

Google svelà alcune password peggiori scelte dai suoi utenti

A volte pensiamo di aver scelto la password giusta per il nostro account o la nostra email, invece non è cosi, google ci dimostra come sia facile risalire alle solite password come la data di nascita del nostro figlio, il nome del nostro cane, o la nostra data di nascita. Dopo un attenta analisi di duemila utenti google decide di svelare come sono state scelte alcune password, al primo posto troviamo il nome del nostro cane domestico, al secondo posto le date di nascita nostre o dei nostri figli o parenti e al terzo posto i nomi a noi più comuni, come nomi di famigliari attori e figli, o addirittura il nome del proprio sport preferito.

Installazione e configurazione per la Blogger Tag Cloud / Etichette Cloud

Ecco il tanto atteso post su come trasformare le nostre etichette in tag could, in base al numero di posts presenti con quella etichetta il tag diventa più grande e di colore diverso. Questo codice funziona con gli ormai noti modelli di template blogger che usano xml e non i primi template che usano solo xhtml. Procediamo, come al solito facciamo un backup, e andiamo in modifica,layout,html, lasciamo i widget cosi come sono cioè non espansi: Ora il codice è disponibile in 3 parti. Una sezione riguardante il foglio di stile css, una sezione per la configurazione, e poi l'effettiva widget. 1- Nella sezione css riguardante lo stile aggiungiamo il seguente codice, in pratica prima di questo tag ]] > / b:skin> /* Label Cloud Styles ----------------------------------------------- */ #labelCloud {text-align:center;font-family:arial,sans-serif;} #labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border...