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

Discussion dans 'Gmail, Google Talk, Blogger et Orkut' créé par pvenise, 27 Septembre 2007.

  1. pvenise
    pvenise Nouveau WRInaute
    Inscrit:
    27 Septembre 2007
    Messages:
    4
    J'aime reçus:
    0
    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='https://www.google.com/2005/gml/b' xmlns:data='https://www.google.com/2005/gml/data' xmlns:expr='https://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>
     
  2. Marie-Aude
    Marie-Aude WRInaute accro
    Inscrit:
    5 Juin 2006
    Messages:
    16 952
    J'aime reçus:
    275
    Passe sur WordPress qui te fait cela en standard
     
  3. Marie-Aude
    Marie-Aude WRInaute accro
    Inscrit:
    5 Juin 2006
    Messages:
    16 952
    J'aime reçus:
    275
    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)
     
  4. The_B
    The_B WRInaute discret
    Inscrit:
    12 Octobre 2004
    Messages:
    87
    J'aime reçus:
    0
    +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.
     
  5. pvenise
    pvenise Nouveau WRInaute
    Inscrit:
    27 Septembre 2007
    Messages:
    4
    J'aime reçus:
    0
    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)
     
Chargement...
Similar Threads - Blogger créer blog Forum Date
Comment appendre à créer des templates blogger Développement d'un site Web ou d'une appli mobile 10 Juillet 2013
Blogger creer un template. Gmail, Google Talk, Blogger et Orkut 25 Juin 2009
aide pour" Blogger":créer des catégories Demandes d'avis et de conseils sur vos sites 11 Mai 2006
Search Console Conseils SEO pour un site sur Blogger Demandes d'avis et de conseils sur vos sites 26 Août 2022
Comment ajouter une URL en japonais dans Blogger ? Gmail, Google Talk, Blogger et Orkut 28 Novembre 2021
Blocage par Google et Blogger Référencement Google 30 Mai 2021
Redirection www chez Blogger et nom de domaine OVH Netlinking, backlinks, liens et redirections 9 Avril 2020
Je n'arrive pas à trouver la balise h1 sur mon Blogger. Problèmes de référencement spécifiques à vos sites 5 Février 2020
Sitemap Blogger https dans la Search Console Problèmes de référencement spécifiques à vos sites 25 Juillet 2017
Migration de mon blog Blogger vers https Problèmes de référencement spécifiques à vos sites 25 Juillet 2017
Nom de domaine 1and1 pour Blogger qui ne fonctionne pas Gmail, Google Talk, Blogger et Orkut 6 Juin 2017
Comment optimiser mes images sur mon blog sous blogger ? Rédaction web et référencement 6 Mai 2016
Importer Blogger sur Wordpress. Développement d'un site Web ou d'une appli mobile 9 Juillet 2015
comment améliorer la vitesse d'un blog (blogger) Référencement Google 26 Avril 2015
poster des articles chez blogger ou social site Débuter en référencement 11 Décembre 2014
Blogger et Adsense, comment ça fonctionne? Gmail, Google Talk, Blogger et Orkut 29 Novembre 2014
Comment désavouer un Blogspot Blogger? Référencement Google 11 Septembre 2014
Problème redirection vers nom de domaine blogger Noms de domaine et référencement 3 Septembre 2014
Que des .com indexes chez blogger Débuter en référencement 19 Avril 2014
Améliorer le référencement et la monétisation sur Blogger ? Gmail, Google Talk, Blogger et Orkut 26 Janvier 2014