Blogger : Comment créer un blog avec des onglets "actif

Consultez la formation au REFERENCEMENT naturel Google de WebRankInfo / Ranking Metrics

pvenise
Nouveau WRInaute
Nouveau WRInaute
 
Messages: 14
Inscription: 27 Sep 2007

Blogger : Comment créer un blog avec des onglets "actif

Message le Jeu Sep 27, 2007 22:23

Bonjour à toutes et à tous,

J'ai un soucis que je n'arrive à résoudre malgré toute mes recherches sur les moteurs et ici. je suis pourtant sur que cela est faisable. Voici donc mon probleme.

J'ai crée un blog il y a 1 semaine sur blogger dont voici l'adresse :


http://association-acem.blogspot.com/

Comme vous pouvez le constater, j'ai réussi tant bien que mal a créer des onglets a travers le code HTML.

Par contre je suis maintenant incapable de créer des pages internes afin qu'il y ait un lien entre les onglets et ses pages internes ( je dis bien interne et pas lien sur l'extérieur ). En gros, j'aimerai qu'en cliquant sur "action en cours, le lecteur tombe sur une page action en cours.

En vous donnant le code source de mon blog, qui accepterai de m'aider en m'y incorporant ( en rouge pour que j'apprenne ), le code manquant. Cela serait vraiment cool car c'est pour une association et j'aimerai bien leur faire un truc sympatique. Merci par avance aux éventuels contributeurs.

Philippe

PS : A votre service pour des compléments de précisions.
:)
__________________________________________________________


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
/* --- * Blogger Template Style---- * Name: Desert----- *Designer: J.aghili ----- * URL: www.finalsense.com ------ * Date: 2007 August ----- */
/* Variable definitions
====================

<Variable name="textcolor" description="Text Color"
type="color" default="#555" value="#555555">

<Variable name="PageBgColor" description="Page Background Color"
type="color" default="#bca572" value="#bca572">

<Variable name="pagetitlecolor" description="Page Header Color"
type="color" default="#ffc" value="#ffffcc">

<Variable name="datecolor" description="Date Header Color"
type="color" default="#fff" value="#ffffff">

<Variable name="titlecolor" description="Post Title Color"
type="color" default="#bca572" value="#bca572">

<Variable name="titlehovercolor" description="Post Title Hover Color"
type="color" default="#ffc" value="#ffffff">

<Variable name="footercolor" description="Post Footer Color"
type="color" default="#877256" value="#877256">

<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#65828e" value="#65828e">

<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#877256" value="#877256">

<Variable name="sidebarlink" description="Sidebar Link Color"
type="color" default="#65828e" value="#65828e">

<Variable name="sidebarhover" description="Sidebar Hover Color"
type="color" default="#fff" value="#ffffff">

<Variable name="linkcolor" description="Link Color"
type="color" default="#65828e" value="#65828e">

<Variable name="linkhover" description="Link Hover Color"
type="color" default="#f63" value="#ff6633">

<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#65828e" value="#65828e">

<Variable name="descriptioncolor" description="Description Color"
type="color" default="#fff" value="#ffffff">

<Variable name="Commentscolor" description="Comments Text Color"
type="color" default="#555" value="#555555">

<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 83% Verdana, sans-serif" value="normal normal 83% Verdana, sans-serif">

<Variable name="pagetitlefont" description="Page Header Font"
type="font" default="normal normal 330% 'Georgia','Times New Roman'" value="normal normal 330% 'Georgia','Times New Roman'">

<Variable name="titlefont" description="Post Title Font"
type="font" default="normal bold 100% 'Georgia','Times New Roman'" value="normal bold 100% 'Georgia','Times New Roman'">

<Variable name="sidebarheaderfont" description="Sidebar Title Font"
type="font" default="normal bold 100% 'Georgia','Times New Roman'" value="normal bold 100% 'Georgia','Times New Roman'">

<Variable name="sidebarfont" description="Sidebar Text Font"
type="font" default="normal normal 90% 'Verdana','Arial'" value="normal normal 90% 'arial','tahoma'">

<Variable name="descriptionfont" description="Description Font"
type="font" default="normal normal 90% 'Verdana','Arial'" value="normal normal 90% 'Verdana','Arial'">
*/
/* ---( page defaults )--- */

#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}
body { margin: 0px; padding: 0px; text-align: left; font:$bodyfont; color:$textcolor; background: $PageBgColor }
blockquote { margin: 0 0 0 30px; padding: 0px 0 0 20px; font-size: 88%; line-height: 1.5em; }
blockquote p { margin-top: 0; }
abbr, acronym { cursor: help; font-style: normal; }
code { color: #f63; }
hr { display: none; }
img { border: none; }

/* unordered list style */
ul { list-style: none; margin-left: 7px; padding: 0; }
li { list-style: none; padding-left: 8px; margin-bottom: 3px; }

/* links */
a:link { color: $linkcolor; text-decoration: none; }
a:visited { color: $visitedlinkcolor; text-decoration: none; }
a:hover { color: $linkhover; text-decoration: none; }
a:active { color: $visitedlinkcolor; text-decoration: none; }

/* ---( layout structure )---*/
#outer-wrapper { width: 1000px; margin: 0px auto 0; text-align: justify; font: normal normal 100% Verdana, sans-serif; }
#content-wrapper { margin-left: 0px; /* to avoid the border image */ width: 100%; }
#main { float: left; width: 650px; margin: 0px; padding-left:45px; 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 */ }
#sidebar { float: right; width: 250px; padding-right: 18px; font: $sidebarfont; color: $sidebartextcolor; line-height: 1.4em; 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 */ }
#center {background: url('http://lh6.google.com/jvdmds/RteAFFV20CI/AAAAAAAAAjc/8vAPtdmJTsE/desert-2.jpg') repeat-y top left;}

/* ---( header and site name )--- */
#header-wrapper { margin: 0; padding: 0px}
#header { height:319px; width:1000px; color: $pagetitlecolor; background: url('http://img264.imageshack.us/img264/7325/desertacemombresoleilpg7.jpg') no-repeat top left; }
#header h1 { width: 380px; font: $pagetitlefont; padding: 150px 20px 5px 570px; filter: glow(color=#000000,Strength=5); text-align: right; }
#header h1 a { text-decoration: none; color: $pagetitlecolor; }
#header h1 a:hover { color: $descriptioncolor;}
#header .description { margin:-10px 20px 20px 600px; text-align: right; padding-right:20px; width:350px; font: $descriptionfont; color: $descriptioncolor; }
#top-nav {
position:absolute;
top:286px;
height:32px;
margin:0;
padding:31px;
text-align:left;
}
#top-nav a {
background:#232021;
margin:0;
padding:4px 10px;
text-decoration:none;
color:#FFFFFF;
}
#top-nav a:hover {
background:#595757;
color:#CCC;
text-decoration:none;
}
#top-nav ul {
margin:0;
padding:;
list-style:none;
}
#top-nav li {
margin:0;
padding:0;
display:inline;
}
/* ---( main column )--- */
h2.date-header { margin: 0; padding-left: 10px; font-size: 70%; color: $datecolor;}
.post h3 { margin: 0; font: $titlefont; color: $titlecolor; border-bottom: 1px solid #bca572; border-top: 1px solid #bca572;}
.post { margin-left:0; margin-right:0; margin-top:0; margin-bottom:1em; padding-left:10px; padding-right:0; padding-top:0; padding-bottom:1em }
.post h3 a {color: $titlecolor; text-decoration: none;}
.post h3 a:hover { color: $titlehovercolor; text-decoration: none; }
.post-footer { margin: 0; padding: 0px; text-align: right; font-size: 88%; color:$footercolor;}
.post img { padding: 6px; border-top: 1px solid #ddd; border-left: 1px solid #cccccc; border-bottom: 1px solid #c0c0c0; border-right: 1px solid #c0c0c0; }
.feed-links { clear: both; line-height: 2.5em; color:$footercolor;}
.blog-feeds { text-align: right; color:$footercolor; border-top: 1px solid #bca572;}
#blog-pager-newer-link { float: right; }
#blog-pager-older-link { float: left; }
#blog-pager { text-align: center; }

/* comment styles */
#comments { padding-top: 10px; font-size: 85%; line-height: 1.5em; color: $Commentscolor;}
#comments h4 { margin: 20px 0 15px 0; padding: 8px 0 0 40px; font-family: "Lucida Grande", "Trebuchet MS"; font-size: 105%; color: $Commentscolor; height: 29px !important; /* for most browsers */ height /**/:37px; /* for IE5/Win */ }
#comments ul { margin-left: 0; }
#comments li { background: none; padding-left: 0; }
.comment-body { padding: 0 10px 0 25px; }
.comment-body p { margin-bottom: 0; }
.comment-author { margin: 4px 0 0 0; padding: 0 10px 0 60px; color: #999; }
.comment-footer { border-bottom: 1px solid #ddd; padding-bottom: 1em;}
.deleted-comment { font-style:italic; color:gray; }

/* ---( sidebar )--- */
.sidebar h2 { margin: 0 0 0 0; padding: 10px 0 0 0px; font: $sidebarheaderfont; color: $sidebarcolor; height: 32px; height: 32px !important; /* for most browsers */ height /**/:57px; /* for IE5/Win */ }
.sidebar .widget { margin: 0; padding: 0 0 10px 10px; }
.sidebar a {color: $sidebarlink; text-decoration: none;}
.sidebar a:hover {color: $sidebarhover; }
.sidebar li { background: 0 5px; }
.profile-textblock { clear: both; margin-left: 0;}
.profile-img { float: right; margin: 0 5px 5px 0; border: 1px solid #ddd; padding: 4px;}

/* ---( footer )--- */
.clear { /* to fix IE6 padding-top issue */ clear: both; }
#footer-wrapper {margin: 0px; padding:0 0 0 0; font-size: 70%; clear: both; }
#footer {margin: 0; width: 1000px; height:94px; background: url('http://lh4.google.com/jvdmds/Rtd-nlV20BI/AAAAAAAAAi8/1MpGZVVQziM/desert-3.jpg') no-repeat top left; text-align:center; color: #555555; }
#footer-wrapper a { color: #555555; text-decoration: none; line-height:94px;}
#footer-wrapper a:hover{ color: #ffc; text-decoration: none;}

/** Page structure tweaks for layout editor wireframe */
body#layout #outer-wrapper,
body#layout #main,
body#layout #sidebar { padding-top: 0; margin-top: 0;}
body#layout #outer-wrapper,body#layout #content-wrapper { width: 770px;}
body#layout #sidebar { margin-right: 0; margin-bottom: 1em; }
body#layout #header,body#layout #footer,
body#layout #main { padding: 0; }
body#layout #content-wrapper { margin: 0px; }
#navbar-iframe { height:0px; visibility:hidden; display:none }



]]></b:skin>
</head>

<body>
<div id='outer-wrapper'><div id='wrap2'>

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
<div id='center'>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='LA CHAINE DE L&quot;ESPOIR POUR LE MAGHREB (en-tête)' type='Header'/>
</b:section>

<div id='top-nav'>
<ul>
<!-- add or modify your links below using the examples, replace the # with your actual link -->
<li><a href='/'>ACCUEIL</a></li>
<li><a href='#'>ACTION EN COURS</a></li>
<li><a href='#'>SUIVI DE NOS ACTIONS</a></li>
<li><a href='#'>NOUS AIDER</a></li>
<li><a href='#'>HISTORIQUE</a></li>
<li><a href='#'>COORDONNEES</a></li>
</ul>
</div><!-- end navigation links -->



<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Messages blog' type='Blog'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='LA FONDATRICE DE L ACEM' type='Profile'/>
</b:section>
</div>

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>

</div> <!-- end content-wrapper -->

<div class='footer section' id='footer'><div id='footer-wrapper'>
Design by: <a href='http://www.finalsense.com/services/blog_templates/' shape='rect' title='Blogger Templates'>FinalSense</a>
and Réalisation by : <a> Philippe Vidoni</a>
</div>
</div>
</div> <!--end center-->
</div></div> <!-- end outer-wrapper -->
</body>
</html>


Marie-Aude
Modérateur
Modérateur
 
Messages: 11870
Inscription: 5 Juin 2006

Message le Jeu Sep 27, 2007 23:50

Passe sur WordPress qui te fait cela en standard


Marie-Aude
Modérateur
Modérateur
 
Messages: 11870
Inscription: 5 Juin 2006

Message le Jeu Sep 27, 2007 23:55

Ensuite je ne vois pas ton problème ? Tu fais des posts correspondant à "nous aider", "historique" etc.. et tu mets le lien vers ces posts (permalien) dans ton code

De la même façon pour "actions en cours" tu fais une catégorie 'actions en cours" et tu fais le lien vers la page de la catégorie.

Pour le suivi des actions, cela dépend de ce que tu veux montrer, mais c'est la même logique.
Et pour accueil, tu mets l'url de ton blog

(que tu utilises l'écriture http://www.aasociation-acem.../Monpost/ /monpost ou ../monpost, en clair des liens absolus avec l'url complète, des liens absolus par rapport à la racine, ou des liesn relatifs ne change strictement rien)


The_B
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 252
Inscription: 12 Oct 2004

Message le Ven Sep 28, 2007 8:19

Marie-Aude a écrit:Passe sur WordPress qui te fait cela en standard


+1

Wordpress.com est aussi un hebergeur de blog gratuit avec une grande communauté. Bien sur, Wordpress ne permet pas d'insérer du javascript dans ses pages (sauf a utiliser Wordpress sur son propre serveur).

Toutefois, c'est la possibilité de créer ces onglets qui m'a fait basculer sur wordpress.

pvenise
Nouveau WRInaute
Nouveau WRInaute
 
Messages: 14
Inscription: 27 Sep 2007

Message le Ven Sep 28, 2007 11:44

Bonjour et merci à ceux qui m'on déjà répondu. En fait, j'ai l'impression qu'effectivement, je suis en rain de vouloir me casse la tete pour rien. Comme c'est un site qui va rester relativement statique. la solution de faire 6 messages et de mettre les liens sur les onglets me semblent rapport qualité/prix efficace. je modifierai simplement le contenu des posts au fur et a mesure.
Wordpress donne a priori la possibilité mais cela me semble lourd par rapport au temps que j'ai et ce que je veux en faire.

merci encore de vos eclaircissements et peut etre a bientôt sur mon blog

8)


Si vous avez aimé cette discussion, partagez-la sur vos réseaux sociaux préférés :

Formation recommandée sur ce thème :

Formation REFERENCEMENT naturel Google : apprenez une méthode efficace pour optimiser à fond le référencement naturel dans Google de façon durable... Formation animée par Olivier Duffez et Fabien Facériès, experts en référencement naturel.

Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.

Lectures recommandées sur ce thème :

Consultez la description détaillée des produits ou services de Google suivants : Google Page Creator, Blogger, Google Measure Map

  • Liste de mots-clés
    Cet outil vous permet de créer à partir de quelques mots-clés une liste d'expressions constituées des mots pris dans tous les ordres possibles. Il sert aux analyses de positionnement et achats de mots-clés.


Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités