28172 sujets

CSS et mise en forme, CSS3

Tumblr et son code.

Bonjour à toutes et tous.
Depuis hier, je me suis mis la tête dans Tumblr.
Un système bien fichu et qui offre un accès au code bien sympa ...
Enfin ... Bien sympa pour ceux qui connaissent tout ça.
Rien à faire, j'ai fouillé, lu des tutos, gambergé, et j'ai commencé à comprendre et à retoucher mon thème. En outre, il me reste bien des aspects mystérieux.
Alors je me tourne vers vous afin de peut être obtenir quelques réponses et surtout mieux comprendre et apprendre ! Smiley smile

Mon bout d’essai se trouve ici : http://octokom.tumblr.com/
Le code se trouve en bas du post.

J'ai donc un petit lots de questions.
(En espérant ne pas passer pour un lourd :-| )

- Il se trouve que je n'arrive pas à jouer sur la largeur de ma page.
Non pas que ce soit trop étroit, mais élargir un peu tout ça pourrait me permettre de faire respirer un peu plus ma page.

- Je pense que le Css me permettrait de jouer sur la transparence de ma page.
Blanc c'est bien, mais avec une toute légère transparence ça pourrait bien rendre.
Dans ce cas il me semble qu'il y a une composition avec des "Backgrounds".

- Je n'arrive pas à jouer sur la marge du haut. J'ai conçut un logo/bannière mais l'espace entre le haut de la page et ce dernier est énorme. Impossible de trouver quelle ligne de code me permet de jouer avec ça. (Je suis en pleine lecture sur les paddings, peut être que ça a un rapport.)

-Les petits cercles proposent normalement un mot à l'intérieur, correspondant à un type de post. (Comme on peut le voir sur l'exemple : http://safe.tumblr.com/theme/preview/2807 )
Mon soucis, c'est que les mots liés à ces thèmes de post sont en Anglais. J'ai bien trouvé dans le code une piste : 

<a href="{Permalink}" class="post_type"></a>
        <a href="{Permalink}" class="label type">
          {block [langue]hoto}{lang [langue]hoto}{/block [langue]hoto}
          {block [langue]hotoset}{lang [langue]hotos}{/block [langue]hotoset}
          {block:Video}{lang:Video}{/block:Video}
          {block:Link}{lang:Link}{/block:Link}
          {block:Audio}{lang:Audio}{/block:Audio}
          {block:Chat}{lang:Chat}{/block:Chat}
          {block:Text}{lang:Text}{/block:Text}
          {block:Quote}{lang:Quote}{/block:Quote}
        </a>

Lorsque je change l'un des termes {Lang:Link} en {Lang:Liens}, plus rien ne s'affiche dans la bulle bleue. C'est d'ailleurs pour cette raison qu'en attendant, j'ai modifié tous les termes pour que rien ne s'affiche en attendant.

Voila donc pour l'instant mes questions sur ce blog infernal qui à l'air tout simple en apparence mais qui me donne tant de fil à retordre et de choses à apprendre. Smiley smile
Par avance je vous remercie, et j'espère ne pas être trop embêtant avec ma dose de questions. °_O,


Voila le code : 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="fr">
<head>



  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>{Title}{block:SearchPage} ({lang:Search results for SearchQuery}){/block:SearchPage}{block [langue]ostSummary} ({PostSummary}){/block [langue]ostSummary}</title>
  <meta name="description" content="{block:IndexPage}{block:Description}{MetaDescription}{/block:Description}{/block:IndexPage}{block [langue]ermalinkPage}{PostSummary}{/block [langue]ermalinkPage}" />
  <meta name="author" content="Peter Vidani">

  <meta name="if:Show note count" content="1">
  <meta name="if:Show notes on permalink pages" content="1">
  
  <meta name="image:Background" content="http://static.tumblr.com/thpaaos/YbJkqnqr6/bg.jpg" />

  <meta name="color:Title" content="#454545">
  <meta name="color:Links" content="#238db1">
  <meta name="color:LinksBackground" content="#e5f8ff">
  <meta name="color:LinkPost" content="#6db123">
  <meta name="color:LinkPostBackground" content="#f1fae7">
  <meta name="color [langue]hotoAndVideoBorders" content="#e1e1da">
  <meta name="color [langue]ostTypeCircle" content="#2aabd5">
  <meta name="color [langue]ostTypeText" content="#fff">
  <meta name="color:NoteCountCircle" content="#e73939">
  <meta name="color:NoteCountText" content="#fff">
  <meta name="color:NotesLink" content="#f95d5d">
  <meta name="color:NotesLinkBackground" content="#fff2f2">
  <meta name="color:CommentsCount" content="#fbff86">
  <meta name="color:CommentsText" content="#2e2d2a">
  <meta name="color:TagText" content="#fff">
  <meta name="color:TagBackground" content="#e3e3e3">
  <meta name="color:TagTextHover" content="#fff">
  <meta name="color:TagBackgroundHover" content="#b69ec8">
  
  <meta name="text:Google Analytics ID" content="" />
  <meta name="text:Disqus Shortname" content="" />
  
  <meta name="image:Header" content="0">

  <link rel="shortcut icon" href="{Favicon}" />
  <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  <link rel="stylesheet" href="http://static.tumblr.com/thpaaos/DIcklyl4z/reset.css" type="text/css">
  <style type="text/css">
  body {
    height: 100%;
    color: #454545;
    font-size: 12px;
    line-height: 18px;
    font-family: 'Verdana', Helvetica, Arial, sans-serif;
    background: url({image:Background});
    -webkit-text-stroke: 1px transparent;
  }

  a {
    color: {color:Links};
    text-decoration: none;
  }

  *:active,*:focus { outline: 0px; }
  a img { border-width: 0px; }

  p {
    margin: 0 0 14px 0;
  }
  
  em { font-style: italic; }
  strong { font-weight: bold; }

  blockquote {
    border-left: 4px solid #EFEFEF;
    margin: 0 0 14px 0;
    padding: 0 0 0 15px;
  }

  #container {
    width: 500px;
    height: 100%;
    background: url(http://static.tumblr.com/thpaaos/kT3kqnqrm/container-bg.png) repeat-y;
    margin: auto;
    padding: 50px 45px;
    position: relative;
  }

    #container .header {
      overflow: hidden;
    }

      #container .header h1 {
        font-size: 72px;
        letter-spacing: -1px;
        font-family: Cufon;
        float: left;
      }

        #container .header a h1 {
          color: {color:Title};
          text-decoration: none;
        }

      #container .header td.description {
        width: 00px;
        width: 00px;
        font-size: 10px;
        line-height: 14px;
        text-align: right;
        margin: 33px 0 0 0;
        float: center; 
      }

    #container .separate {
      width: 570px;
      height: 5px;
      background: #EFEFEF;
      margin: 50px 0 50px -35px;
    }

    #container ul.posts {

    }

      #container li.post {
        min-height: 57px;
        list-style-type: none;
        margin: 0 0 80px 0;
        position: relative;
      }

        #container li.post a.post_type {
          width: 57px;
          height: 57px;
          background: {color [langue]ostTypeCircle};
          border-radius: 28px;
            -moz-border-radius: 28px;
            -webkit-border-radius: 28px;
          filter:alpha(opacity=54);
            -moz-opacity:0.54;
            -khtml-opacity: 0.54;
            opacity: 0.54;
          display: block;
          position: absolute;
          left: -79px;
          top: 0px;
        }

        #container li.post a.note_count,
        #container a.heart {
          width: 57px;
          height: 57px;
          background: {color:NoteCountCircle};
          border-radius: 28px;
            -moz-border-radius: 28px;
            -webkit-border-radius: 28px;
          filter:alpha(opacity=54);
            -moz-opacity:0.54;
            -khtml-opacity: 0.54;
            opacity: 0.54;
          display: block;
          position: absolute;
          left: -79px;
          top: 47px;
        }
        
          #container .heart {
            top: 0px !important;
          }
          
            #container a.heart_icon {
              width: 17px;
              height: 15px;
              background: url(http://static.tumblr.com/thpaaos/k6Eks51ol/heart.png) no-repeat;
              position: absolute;
              top: 21px;
              left: -59px;
              display: block;
            }

        #container li.post a.comments {
          width: 103px;
          color: {color:CommentsText};
          font-size: 12px;
          font-weight: bold;
          text-transform: uppercase;
          line-height: 0px;
          background: {color:CommentsCount};
          border-top-right-radius: 6px;
          border-bottom-left-radius: 6px;
          -webkit-border-bottom-right-radius: 6px;
          -webkit-border-top-right-radius: 6px;
          -moz-border-radius-bottomright: 6px;
          -moz-border-radius-topright: 6px;
          filter:alpha(opacity=54);
            -moz-opacity:0.54;
            -khtml-opacity: 0.54;
            opacity: 0.54;
          padding: 12px 7px 8px 35px;
          display: block;
          position: absolute;
          top: 0px;
          right: -167px;
        }

        li.post .label {
          width: 57px;
          font-size: 07px;
          font-weight: bold;
          line-height: 0px;
          text-align: center;
          text-transform: uppercase;
          text-decoration: none;
          position: absolute;
          display: block;
          position: absolute;
          left: -79px;
          display: block;
        }

          li.post a.label {
            text-decoration: none;
          }

          li.post a.label.type {
            color: {color [langue]ostTypeText};
            top: 27px;
          }

          li.post a.label.noteNumber {
            color: {color:NoteCountText};
            top: 70px;
            font-size: 18px;
          }

            li.post a.label.noteNumber span {
              font-size: 10px;
              display: block;
              margin: 15px 0 0 0;
            }

          li.post .label.notes {
            color: {color:NoteCountText};
            font-size: 10px;
            top: 85px;
          }

        #container li.post img {
          max-width: 100%;
        }

        #container li.post .caption {

        }

          #container li.post .caption a {
            padding: 1px;
          }

            #container li.post .caption a:hover,
            #container .header .description a:hover,
            .footer .credit a:hover,
            ul#likes a:hover {
              background: {color:LinksBackground};
            }

          #container li.post .caption ol,
          #container li.post .caption ul {
            margin: 0 0 14px 20px;
          }

        #container li.post a.title {
          font-size: 24px;
          line-height: 26px;
          margin: 0 0 14px 0;
          display: block;
        }
        
          #container li.post a.title:hover {
            text-decoration: underline;
          }

          #container li.post a.title.link {
            color: {color:LinkPost};
            text-decoration: underline;
            padding: 0 45px 0 0;
            position: relative;
          }

            #container li.post a.title.link:hover span {
              background: {color:LinkPostBackground};
            }

            #container li.post a.title.link .arrow {
              width: 32px;
              height: 22px;
              background: url(http://static.tumblr.com/thpaaos/4aWkqnqso/sprite-link.png) 0px 0px;
              position: absolute;
              right: 0px;
              top: 3px;
            }

              #container li.post a.title.link:active .arrow {
                background-position: -32px 0px;
              }

        table.chat {
          width: 100%;
          margin: 0 0 3px 0;
          border-collapse: collapse;
        }

          h2 + table.chat {
            margin: 0 0 14px 0 !important;
          }

           table.chat tr td {
             padding: 3px 10px;
           }

             table.chat tr td.name {
              font-weight: bold;
              text-align: right;
              vertical-align: top;
            }

             table.chat tr td.line1 {
              background: #F2F2F2;
             }

        #container li.post .media {
          width: 500px;
          border: 8px solid {color [langue]hotoAndVideoBorders};
          margin: 0 0 14px -10px;
          padding: 2px;
        }
        
        

        #container li.post .quote {
          font-size: 24px;
          line-height: 26px;
          margin: 0 0 14px 0;
        }

        #container li.post .audio {
          background: #fff;
          margin: 0 0 14px 0;
          padding: 1px;
          overflow: hidden;
        }

          #container li.post .audio .player {
            width: 207px;
            height: 27px;
            border: 1px solid #f2f2f2;
            margin: 0 10px 0 0;
            padding: 1px;
            float: left;
          }

          #container li.post .audio span.count {
            height: 22px;
            color: #fff;
            font-size: 10px;
            font-weight: bold;
            background: url(http://octokom.free.fr/Tumblr/bulle.png) top left;
            padding: 4px 0 6px 12px;
            position: relative;
          }

            #container li.post .audio span.count .right {
              width: 10px;
              height: 22px;
              background: url(http://octokom.free.fr/Tumblr/bulle.png) top right;
              position: absolute;
              right: -10px;
              top: 0px;
            }

        #container li.post a.download {
          width: 25px;
          height: 22px;
          background: url(http://static.tumblr.com/thpaaos/GqXkqnqth/sprite-download.png) top left;
          margin: 0 10px 0 0;
          display: block;
          float: left;
        }

          #container li.post a.download:active {
            background-position: -25px 0;
          }

          #container li.post a.download.image {
            position: absolute;
            top: 25px;
            left: 15px;
            display: none;
          }

            #container li.post:hover a.download.image {
              display: block;
            }

        li.post .tags {

        }

          li.post .tags a.tag {
            color: {color:TagText};
            font-size: 12px;
            font-weight: bold;
            text-transform: uppercase;
            background: {color:TagBackground};
            border-radius: 3px;
              -moz-border-radius: 3px;
              -webkit-border-radius: 3px;
            padding: 1px 5px;
          }

            li.post .tags .tag:hover {
              color: {color:TagTextHover};
              background: {color:TagBackgroundHover};
            }

    .footer {
      overflow: hidden;
    }

      .pagination {
        width: 148px;
        height: 67px;
        background: url(http://static.tumblr.com/thpaaos/xNskqnqtx/sprite-pagination.png) top left;
        float: right;
        overflow: hidden;
      }

        a.button {
          width: 67px;
          height: 67px;
          background: url(http://static.tumblr.com/thpaaos/xNskqnqtx/sprite-pagination.png);
          display: block;
        }

          a.button.left {
            background-position: 0px -67px;
            float: left;
          }
            a.button.left:active { background-position: -0px -134px; }

          a.button.right {
            background-position: -81px -67px;
            float: right;
          }
            a.button.right:active { background-position: -81px -134px; }

      .footer .credit {
        height: 50px;
        font-size: 11px;
        line-height: 17px;
        border-radius: 10px;
          -moz-border-radius: 10px;
          -webkit-border-radius: 10px;
        border: 3px solid #efefef;
        float: left;
        padding: 7px 17px;
      }
      
  {block:IndexPage}
  ul#likes {
    width: 500px;
    list-style-type: none;
    overflow: hidden;
  }

  li.like_post {
    width: 150px;
    font-size: 11px;
    padding: 0 25px 0 0;
    list-style-type: none;
    float: left;
  }
        
    li.like_post img {
      max-width: 140px;
      background: #fff;
      border: 4px solid {color [langue]hotoAndVideoBorders};
      margin: 0 0 14px 0;
      padding: 1px;
    }
    
    li.like_post .like_link a {
      color: {color:LinkPost};
      text-decoration: underline;
      font-size: 14px;
    }
    
      li.like_post .like_link a:hover {
        background: {color:LinkPostBackground} !important;
      }
      
    li.like_post .like_title {
      font-size: 14px;
    }
      
    li.like_post  blockquote {
      border-left: 2px solid #EFEFEF;
      margin: 0 0 14px 0;
      padding: 0 0 0 7px;
    }
    
    .post_info_bottom {
      background: #F2F2F2;
      border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
      padding: 0 6px;
      display: block !important;
    }
    
      #post_info_bottom a:hover {
        background: transparent !important;
        text-decoration: underline;
      }
    
    li.like_post ul,
    li.like_post ol {
      margin: 0 0 0 15px;
    }
    
  a.arrow.back,
  a.arrow.forward {
    display: none !important;
  }
  {/block:IndexPage}

  a.install {
    width: 96px;
    height: 20px;
    background: url(http://static.tumblr.com/thpaaos/dHHkt0jor/install_theme.png);
    display: block;
    position: absolute;
    top: 26px;
    right: 3px;
  }

  {block:IfShowNotesOnPermalinkPages}
  {block [langue]ermalinkPage}
  {block [langue]ostNotes}li.post { border-bottom: 2px dashed #efefef; margin: 0 0 52px 0 !important; padding: 0 0 40px 0;}{/block [langue]ostNotes}

  ol.notes { margin: 0px; font-size: 13px; list-style-type: none; }
    ol.notes a { color: {color:NotesLink}; }
      ol.notes a:hover { background-color: {color:NotesLinkBackground}; }
    ol.notes img.avatar { display: none; }
    ol.notes blockquote { margin: 0; }
  {/block [langue]ermalinkPage}
  {/block:IfShowNotesOnPermalinkPages}


  {CustomCSS}
  </style>
  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
  {block:IndexPage}<script src="http://static.tumblr.com/thpaaos/78Jks5gyt/carousel.js" type="text/javascript"></script>{/block:IndexPage}
  <script src="http://static.tumblr.com/q9z1v7k/dgEkijh8r/cufon-yui.js" type="text/javascript"></script>
  <script src="http://static.tumblr.com/thpaaos/JAukqnqi4/cufon_500.font.js" type="text/javascript"></script>
  <script type="text/javascript">
    {block:English}Cufon.replace('.cufon');{/block:English}
  </script>
</head>
<body>
  <a href="http://www.tumblr.com/theme/2807" class="install"></a>

  <div id="container">
    <div class="header">
      <table width="500">
        <tr valign="baseline">
          {block:IfHeaderImage}<td width="250"><a href="/"><img src="{image:Header}" style="max-width: 100%"/></a></td>{/block:IfHeaderImage}
          {block:IfNotHeaderImage}<td width="250"><a href="/"><h1 class="cufon">{Title}</h1></a></td>{/block:IfNotHeaderImage}
          {block:Description}<td width="250" class="description">{Description}</td>{/block:Description}
        </tr>
      </table>
      
      
      <div style="margin-top: 00px">
          {block:HasPages}{block [langue]ages}<a href="{URL}">{Label}</a>&nbsp;&nbsp;{/block [langue]ages}{/block:HasPages}
          {block:AskEnabled}<a href="/ask">{AskLabel}</a>&nbsp;&nbsp;{/block:AskEnabled}
          {block:SubmissionsEnabled}<a href="/submit">{SubmitLabel}</a>{/block:SubmissionsEnabled}
      </div>
      
    </div>

    <div class="separate"></div>

    <ul class="posts">
      {block [langue]osts}
      <li class="post"{block:NoteCount} style="min-height: 104px"{/block:NoteCount}>
        {block:Date}
        {block:IfDisqusShortname}<a href="{Permalink}#disqus_thread" class="comments">{lang:Comments}</a>{/block:IfDisqusShortname}
        
        
        <script type="text/javascript">var disqus_url = "{Permalink}"; var disqus_title ="{block [langue]ostTitle}{PostTitle}{/block [langue]ostTitle}";</script>{block [langue]ermalink}<div id="disqus_thread"></div>
<script type="text/javascript">
  /**
    * var disqus_identifier; [Optional but recommended: Define a unique identifier (e.g. post id or slug) for this thread] 
    */
  (function() {
   var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
   dsq.src = 'http://lapause.disqus.com/embed.js';
   (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })();
</script>


<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript=lapause">Commentaires gérés par Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">Gestion des commentaires : <span class="logo-disqus">Disqus</span></a>
{/block [langue]ermalink}<script type="text/javascript">
var disqus_shortname = 'lapause';
(function () {
  var s = document.createElement('script'); s.async = true;
  s.src = 'http://lapause.disqus.com/count.js';
  (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>

        <a href="{Permalink}" class="post_type"></a>
        <a href="{Permalink}" class="label type">
          {block [langue]hoto}{lang:Mobile1}{/block [langue]hoto}
          {block [langue]hotoset}{lang [langue]hotos1}{/block [langue]hotoset}
          {block:Video}{lang:Video1}{/block:Video}
          {block:Link}{lang:Link1}{/block:Link}
          {block:Audio}{lang:Audio1}{/block:Audio}
          {block:Chat}{lang:Chat1}{/block:Chat}
          {block:Text}{lang:Text1}{/block:Text}
          {block:Quote}{lang:Quote1}{/block:Quote}
        </a>
        {/block:Date}
        {block:IfShowNoteCount}{block:NoteCount}<a href="{Permalink}" class="note_count"></a>
        <a href="{Permalink}" class="label noteNumber">{NoteCount}<br /></a>
        <a href="{Permalink}" class="label notes" style="text-transform:lowercase;">{lang:Notes}</a>{/block:NoteCount}{/block:IfShowNoteCount}
        {block [langue]hoto}
        {LinkOpenTag}<img src="{PhotoURL-500}" class="media" alt="{PhotoAlt}" />{LinkCloseTag}
        {block:HighRes}<a href="{PhotoURL-HighRes}" class="download image" target="_blank"></a>{/block:HighRes}
        {block:Caption}
        <div class="caption">
          <p>{Caption}</p>
        </div>
        {block:Caption}
        {/block [langue]hoto}

        {block [langue]hotoset}
        {Photoset-500}
        {block:Caption}
        <div class="caption">
          <p>{Caption}</p>
        </div>
        {block:Caption}
        {/block [langue]hotoset}

        {block:Video}
        <div class="media">{Video-500}</div>
        {block:Caption}
        <div class="caption">
          <p>{Caption}</p>
        </div>
        {block:Caption}
        {/block:Video}

        {block:Audio}
        <div class="audio">
          <div class="player">{AudioPlayerGrey}</div>
          <div style="margin: 4px 0 0 0;">
            <span class="count">{PlayCountWithLabel}<div class="right"></div></span>
            {block:ExternalAudio} <a href="{ExternalAudioURL}" class="download"></a>{/block:ExternalAudio}
          </div>
        </div>
        {block:Caption}
        <div class="caption">
          <p>{Caption}</p>
        </div>
        {block:Caption}
        {/block:Audio}

        {block:Link}
        <a href="{URL}" class="title link" target="{Target}"><span>{Name}</span><div class="arrow"></div></a>
        {block:Description}
        <div class="caption">
          <p>{Description}</p>
        </div>
        {block:Description}
        {/block:Link}

        {block:Text}
        {block:Title}<a href="{Permalink}" class="title"><span>{Title}</span><div class="arrow"></div></a>{/block:Title}
        <div class="caption">
          <p>
              {Body}
              {block:More}
                  <a href="{Permalink}" class="big_ass_button">{lang:Read more}</a>
              {/block:More}
          </p>
        </div>
        {/block:Text}

        {block:Quote}
        <div class="quote">"{Quote}"</div>
        {block:Source}
        <div class="caption">
          <p>{Source}</p>
        </div>
        {/block:Source}
        {/block:Quote}

        {block:Chat}
        {block:Title}<a href="{Permalink}" class="title"><span>{Title}</span><div class="arrow"></div></a>{/block:Title}
        <table class="chat" cellspacing="0">
          {block:Lines}
          <tr>
            {block:Label}<td class="name line{UserNumber}">{Label}</td>{block:Label}<td class="words line{UserNumber}">{Line}</td>
          </tr>
          {/block:Lines}
        </table>
        {/block:Chat}

        {block:HasTags}
        <div class="tags">
          {block:Tags}<a href="{TagURL}" class="tag">#{Tag}</a>&nbsp;{/block:Tags}
        </div>
        {/block:HasTags}
      </li>

      {block [langue]ermalinkPage}
      {block:IfShowNotesOnPermalinkPages}{PostNotes}{/block:IfShowNotesOnPermalinkPages}
      {/block [langue]ermalinkPage}

      {block [langue]ermalink}
      {block:IfDisqusShortname}
      <div class="notecontainer" style="margin: 40px 0 0 0; padding: 0;">
        <div id="disqus_thread"></div>
        <script type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/embed.js"></script>
        <noscript><a href="http://{text:Disqus Shortname}.disqus.com/?url=ref">{lang:View the discussion thread}</a></noscript>
      </div>
      <div style="text-align: right; margin-top: 5px">
        {lang:Blog comments powered by Disqus 2}
      </div>
      {/block:IfDisqusShortname}
      {/block [langue]ermalink}

      {/block [langue]osts}
    </ul>

    <div class="separate"></div>

    <div class="footer">
      <div class="pagination">
        {block [langue]agination}
        {block [langue]reviousPage}<a href="{PreviousPage}" class="button left"></a>{/block [langue]reviousPage}
        {block:NextPage}<a href="{NextPage}" class="button right"></a>{/block:NextPage}
        {/block [langue]agination}
        {block [langue]ermalinkPagination}
        {block:NextPost}<a href="{NextPost}" class="button left"></a>{/block:NextPost}
        {block [langue]reviousPost}<a href="{PreviousPost}" class="button right"></a>{/block [langue]reviousPost}
        {/block [langue]ermalinkPagination}
      </div>

      <div class="credit">
        Micro-Blog <a href="">Tumblr</a><br/>
        Par <a href="octokom.free.fr/joomla">Mr.Gérald</a><br/>
        Theme : <a href="http://www.tumblr.com/theme/2807">Customisé</a><br/>
      </div>
    </div>
    
    {block:IndexPage}
    {block:Likes}
    <div class="separate"></div>

    <div class="infiniteCarousel" style="position: relative">
      <div class="wrapper">
        <a href="http://www.tumblr.com/liked/by/{Name}" class="heart"></a><a href="http://www.tumblr.com/liked/by/{Name}" class="heart_icon"></a>
        {Likes limit="9" width="150"}
      </div>
    </div>
    {/block:Likes}
    {/block:IndexPage}
  </div>
  
  {block:IfGoogleAnalyticsID}
  <script type="text/javascript">var gaJsHost=(("https:"==document.location.protocol)?"https://ssl.":"http://www.");document.write(unescape("%3Cscript src='"+gaJsHost+"google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script><script type="text/javascript">try{var pageTracker=_gat._getTracker("{text:Google Analytics ID}");pageTracker._trackPageview()}catch(err){}</script>
  {block:IfGoogleAnalyticsID}

  {block:IfDisqusShortname}
  <script type="text/javascript">
  //<![CDATA[
  (function() {
    var links = document.getElementsByTagName('a');
    var query = '?';
    for(var i = 0; i < links.length; i++) {
      if(links[i].href.indexOf('#disqus_thread') >= 0) {
        query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
      }
    }
    document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
    })();
    //]]>
    </script>
  {/block:IfDisqusShortname}
</body>
</html>

[/i][/i]
Sujet clos
Aller à