Blogger aggiungere due colonne widget sotto i post

Questa mattina sono diventata una principessa ♥
E con questa premessa, è’ bello poter sorridere ancora di qualcosa.. passo al tutorial..
Ebbene in questo periodo sono alla ricerca di un template blogger stile magazine per un mio nuovo progetto, ma non trovo niente che mi soddisfi appieno, così lo sto creando passo dopo passo e oggi ho aggiunto alla zona dei post due colonne widget.
Ho trovato il codice in più blog, perciò non capisco chi è il vero autore. Posterò il link del tutorial che mi è sembrato meglio realizzato e più chiaro e anche in ordine di tempo il più vecchio. Sperando di aver attribuito giustamente. Mha!
Link fonte: Bloggerbuster => thanks Amanda.
e il tutorial di Blogger Tutorial 🙂 grazie anche a loro! Qui ho capito il meccanismo..
Incrociando i due tut ho creato una zona sottoi  post, con due aree widget allineate e al di sotto un’ulteriore area widget ampia. Molto forte. A me piace un sacco..

Nota bene: la disposizione dei widget verrà visualizzata solo in Home page con le impostazioni di un solo post (dalla bacheca Blogger menu a sinistra > IMPOSTAZIONI > POST e COMMENTI > nella prima riga impostate  su “Mostra più post possibili > scrivete 1 in numero. Salvate.

Step 1 – Loggatevi a Blogger.
Step 2 – Salvate il vostro template dal menu a sinistra > MODELLO > in alto a destra cliccate su BACKUP RIPRISTINO e cliccate su SALVA MODELLO.
Step 3 – Da questa pagina cliccate su MODIFICA HTML > PROCEDI >
Cercate questo pezzettino di codice => </b:skin>

e subito prima aggiungete questo codice:

#magazine-left { width: 45%; float: left; margin-right:5px; }
#magazine-right { width: 45%; float: right; }

#magazine {
width: 100%;
float: right;
padding-left: 10px;
word-wrap: break-word;
overflow: hidden;
}

su magazine-left=> ho aggiunto un margin-right:5px; perché altrimenti il widget si spostava sotto l’altro, perciò impostate o meno questo margine a seconda della larghezza dell’area post, potrebbe non servire oppure essere variato il valore.

Step 4 – Rimanete in questo box di Modifica html e cercate questo pezzo di codice => blog1

Controllate il codice che ho inserito nel box e aggiungete solo il codice rosa tra </b:section> e </div>

<div id=’main-wrapper’>
<b:section class=’main’ id=’main’ showaddelement=’yes’>
<b:widget id=’Blog1′ locked=’true’ title=’Post sul blog’ type=’Blog’/>
</b:section> <b:if cond=’data:blog.url == data:blog.homepageUrl’> <b:section class=’sidebar’ id=’magazine-left’ showaddelement=’yes’>
<b:widget id=’Text51′ locked=’false’ title=’Test Title 1′ type=’Text’/> </b:section> <b:section class=’sidebar’ id=’magazine-right’ showaddelement=’yes’>
<b:widget id=’Text52′ locked=’false’ title=’Test Title 2′ type=’Text’/> </b:section> <b:section class=’sidebar’ id=’magazine’ showaddelement=’yes’> <b:widget id=’Text53′ locked=’false’ title=’Test Title 3′ type=’Text’/>
</b:section>
<div style=’clear: both;’/>
</b:if>
</div> 

 

 

Step 6 –Aprite una nuova pagina su DISPOSIZIONE – LAYOUT e controllate se al di sotto dell’area post si sono create due aree widget incolonnate e un’area widget unica sotto. Se la risposta è affermativa SALVATE il vostro template, altrimenti controllate di aver seguito tutti i passaggi per benino.

Demo dimostrativa.

Il codice a pezzetti=== >

<b:section class=’main’ id=’main’ showaddelement=’yes’> <b:widget id=’Blog1′ locked=’true’ title=’Post sul blog’ type=’Blog’/> </b:section> <b:if cond=’data:blog.url == data:blog.homepageUrl’>
<b:section class=’sidebar’ id=’magazine-left‘ showaddelement=’yes’>
<b:widget id=’Text51′ locked=’false’ title=’Test Title 1′ type=’Text’/>
</b:section>
<b:section class=’sidebar’ id=’magazine-right‘ showaddelement=’yes’>
<b:widget id=’Text52′ locked=’false’ title=’Test Title 2′ type=’Text’/>
</b:section>
<b:section class=’sidebar’ id=’magazine‘ showaddelement=’yes’>
<b:widget id=’Text53′ locked=’false’ title=’Test Title 2′ type=’Text’/>
</b:section>
<div style=’clear: both;’/>
</b:if>
</div>

Come vedete dal codice il meccanismo è abbastanza intuitivo ad ogni area widget aggiunta corrisponde rispettivamente il codice grafico di “magazine-left”, “magazine-right” e “magazine”, che vengono richiamati con l’html per essere materializzati nel template.

CONCLUSIONE: ricordatevi che queste colonne widget verranno visualizzate solo in home page, quando cliccherete sul post non ci saranno più! Impostate correttamente un post in home page e seguite gli step.

Nel caso abbiate un template che in home page presenta le anteprime dei post con un estratto questo tutorial non funzionerà! Ok!?!

A presto,

by BLOGGHIDEE <= clicca mi piace,♥ grazie

 

 

Spread the love

Discussion

  1. AutoItalian
  2. AutoItalian
  3. admin

Leave a Reply

This blog is kept spam free by WP-SpamFree.