dNoteBook - Modèle Blogger 2 colonnes

Je viens d'ajouter le modèle dNoteBook (2 colonnes) à la collection des modèles Wordpress que j'ai personnellement adapté pour Blogger.

Démonstration en ligne | Télécharger

Comme vous pouvez le constater à partir de ce screenshot, dNotebook fera revenir votre blog dans sa première définition, celle d'un journal personnel, tout en y ajoutant un ton de modernisme (bas de page 3 colonnes, Pub 125x125).

Voici quelques instructions pour parfaitement réussir l'installation de ce modèle.

1. Comment faire pour installer?


Extraire le modèle Blogger du fichier dnotebook.zip

Après vous être connecté, allez sur > Modifier le code HTML> Parcourir > Choisissez le fichier - dNoteBook-blogger-template.xml > Transférer > Enregistrer le modèle


2. Date

Après vous être connecté, allez sur Paramètres > Mise en forme> Modifier Blog Posts> changer le format de date et heure par quelque chose comme : mardi, janvier 12, 2010. Rappelez-vous, changez le format de date et heure, pas les autres formats (Format des en-têtes de date et Format de date de l'index des archives à ne pas changer).

3. Menu 

Après vous être connecté, allez sur sur > Modifier le code HTML et trouvez ces lignes de code :
<ul id='dropmenu'>
<li><a href='' title='Home'>Home</a></li>
<li><a href='' title='About'>About</a></li>
<li><a href='' title='Original'>Original</a></li>
<li><a href='' title='Contact'>Contact</a></li>
            <li> </li></ul>

Mettez les urls et les nom des liens aux  indiqués pour cela.

4. Description du blog

Trouvez le code suivant :


<title><data:blog.pageTitle/> | Here goes my blog description</title>

Changez "Here goes my blog description" par la description de votre blog.

5. Logo

Trouvez ce code

<div class='logo'><a expr:href='data:blog.homepageUrl'><img alt='' border='0' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAgIMlXMX-EPYRVo4aVzmlJKP_qcEw9k8ZKiNVidRM68BJrxnJwwu8Lg0UScMb1y7BNmkpnQCVKhpWSL1YCckvcxLL3RTHC0IUKC5_NOtHxb9uvfI9hN0r8sR0I_OBtbfN9Q5EPiXp19Ph/s1600/logo2.png' title='Home' width='300'/>
</a>

Remplacez l'url du logo en place par celui de votre logo. Notez qu'il existe un modèle jpg et un modèle psd du logo dans le fichierr zip. Vous pouvez les utiliser pour adapter le logo de votre blog.

6. Twitter et flux 

Trouvez ce code :


<span style='margin-left:110px;'><a href='http://www.twitter.com/rodval4ever' target='_blank'><img alt='Follow me on Twitter' border='0' height='80' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-GEI989W4jdaynRA9qR9vvAy3FQU1cW8FDyQzRGSRZEdeC__yFNwmE-P1kgiHATzH81GgCIcoCq-PFC6GO0n52CoCypX_5Q_iHwRpsxyI7C1W9tkzlx_IxZ1Jxq-Xp0LyKS8wyoHpDnwe/s1600/twitter.png' title='Follow me on Twitter' width='80'/>
</a> <a href='http://feeds.feedburner.com/BloggerMastering'><img alt=' FEED' border='0' height='80' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdJK2-oCiZFoMFAIHu6WjxpFXu9YCkr6yXLk6gCNFW-kiCGdGaBPL6wjNcwlPhqe45PVvn5DoBMkGnLmXN2mJ7jkVkKZhWLV0Wu4JaILs66Lc1Cr8McDRZYUJ7xXI7Ur4Twuyl7761mX89/s1600/rss.png' title=' FEED' width='80'/>
</a></span>

Remplacez les deux urls en gras. Le premier par votre url Twitter et le deuxième par celui du flux rss de votre blog.

Il existe aussi une image pour le formulaire de recherche, sauf qu'elle bug sur Google Chrome. Toutefois, si vous désirez l'ajouter, il suffit de mettre le code suivant juste avant </div><!-- End logo -->

 <span style='margin-left: 120px;'><img alt='search' border='0' height='80' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSUWxkgQ7sFxYc_1hMv7ulr8Hofb1LWmOXpbXG7tgAXnJod9DWeZmRYkFcqrNjuUg2XT-srmSHAw-TgHG-9U0Uu0E8NgP-VYKfUrnDE2PL_PQ0VQEnOYkDdWVSju-4j6pfRFMng1SUtI3T/s1600/sicon.png' title='search' width='80'/></span>



7. Bas de page à 3 colonnes
 
Le code du bas de page à 3 colonnes que vous devez modifier est celui-ci :


<div id='footer-box1'>
<h2>Column 1</h2><hr/>
<ul>
<li><a href=''>Link text</a></li>
<li><a href=''>Link text</a></li>
<li><a href=''>Link text</a></li>
<li><a href=''>Link text</a></li>

</ul>
</div>


<div id='footer-box2'>
<h2>Column2</h2><hr/>
<ul>
<li><a href=''>Link text</a></li>
<li><a href=''>Link text</a></li>
<li><a href=''>Link text</a></li>
<li><a href=''>Link text</a></li>  
</ul>
</div>


<div id='footer-box3'>
<h2>Column 3</h2><hr/>
<ul>

<li><a href=''>Link text</a></li>
<li><a href=''>Link text</a></li>
<li><a href=''>Link text</a></li>
<li><a href=''>Link text</a></li>               
</ul>
</div>


Alors, qui est preneur ?