mercredi 29 août 2012

Comment ajouter un Bouton Twitter sur Blogger

Dans cet article je vais vous expliquer comment ajouter un boutons Retweet ci-dessus sur tous vos articles.Je vous propose deux tailles de ces boutons. Puis je vous explique comment ajouter le bouton :
et voici les étapes ci-dessous pour faire ce travail:




1. Aller sur votre Tableau de bord --> Modifier le code HTML
2.Cliquez sur "Modèles Développer widget"
3.Chercher le bout de code ci dessus :


<div class='post-header-line-1'/>


4. Et copiez le code ci-dessous et collez-le juste après la ligne ci-dessus.


Pour un grand Bouton:
Topsy Big Retweet Counter Buttons For Blogger

<div style='padding: 4px; float: right;'>
<script src='http://button.topsy.com/widget/retweet-big?nick=TWITTER-USERNAME&amp;url=' type='text/javascript'/>
</div>



Pour un petit bouton :

Topsy Small Retweet Counter Buttons For Blogger

<div style='padding: 4px; float: right;'>
<script src='http://button.topsy.com/widget/retweet-small?nick=TWITTER-USERNAME&amp;url=' type='text/javascript'/>
</div>



Important : Remplacer TWITTER-USERNAME avec votre pseudo Twitter (qui est votre pseudo de connection).

5. Enregistrer votre modèle.

merci pour votre visite

comment ajouter un bouton " j'aime" de facebook à un blog - blogger

Comme nous le savons tous facebook est l'une des plus grande société de médias sociaux dans le monde.si votre blog a une page fanil vous aidera beaucoup dans l'augmentation du trafic sur votre blog.  ici  nous vous présentons tous les types de facebook like buttons. vertical, horizontal et sans décompte .Vous pouvez ajouter ce bouton juste en dessous de l'article  et au-dessus de l'article suivez les étapes de cet article ....

Remarque - Ce bouton augmente les fans de votre article et il le partage auusi.


comment ajouter un bouton " j'aime" de facebook à un blog - blogger?



  1. Allez au tableau de gestion de votre blog > Model > Modifier le code HTML
  2. Dabord téléchargez votre model actuel .
  3. Cochez Développer des modèles de gadgets
  4. ctrl+F pour trouver  le code suivant


<data:post.body/>

pour le bouton " Jaime "  just au desous du titre de l'article 
ajoutez le code avant de  <data:post.body/>

mais si vous voulez le bouton " Jaime "juste en dessous de votre ajoutez le code ci-dessous juste au-dessous de <data:post.body/>


Les 3 types des boutons facebook.


Vous pouvez ajouter les 3 codes  :
  1. Vertical
  2. Horizontal
  3. normal

1. Bouton + conteur Vertical


<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=box_count&amp;show_faces=false&amp;width=55&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=62&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:62px;'/> </b:if>

2.

Bouton + conteur horizontal.


<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/> </b:if>

3. Bouton normal sans conteur:


<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px;'/> </b:if>


Ajouter un menu déroulant à mon blog -blogger

nous partageons un menu conçu par DynamicDrive et bloggerized mybloggertricks.c'est un menu à plusieurs niveaux dans le menu déroulant afin qu'il vous aidera à organiser vos ot catégories et des liens importants, aussi il permettra à vos lecteurs de naviguer facilement à travers la structure de votre blog.The HTML de ce menu est si facile que vous devez utiliser seulement balises <ul> et <li>, mais vous devez ajouter un Identifiant ul différent pour une nouvelle baisse vers le bas, qui est le petit point négatif de ce menu.Just suivre les étapes suivantes attentivement, vous pourrez facilement ajouter ce menu à votre blog.Now permet de voir comment l'ajouter à blogger blog, d'abord prendre une démo du menu.

comment ajouter un menu à plusieurs niveaux à blogger blog ?


  1. Allez à la mise en page de votre blogger
  2. Cliquez sur Ajouter un Gadget (au dessous header)
  3. Selectionnez HTML/JavaScript
  4. collez le code suivant dedans,


<script src='http://code.helperblogger.com/dd-level-menu.js'
type='text/javascript'></script>
<style>
/* ######### Drop Down Menu Bu HelperBlogger.com ######### */    
/* ######### Matt Black Strip Main Menu Bar CSS ######### */
.ddsubmenustyle, .ddsubmenustyle div {
        /*topmost and sub DIVs, respectively*/
    font: normal 13px Verdana;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    list-style-type: none;
    background: white;
    border: 1px solid black;
    border-bottom-width: 0;
    visibility: hidden;
    z-index: 100;
}

.ddsubmenustyle ul {
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    list-style-type: none;
    border: 0px none;
}

.ddsubmenustyle li a {
    display: block;
    width: 170px;
        /*width of menu (not including side paddings)*/
    color: black;
    background-color: lightyellow;
    text-decoration: none;
    padding: 4px 5px;
    border-bottom: 1px solid black;
}

* html .ddsubmenustyle li {
        /*IE6 CSS hack*/
    display: inline-block;
    width: 170px;
        /*width of menu (include side paddings of LI A*/
}

.ddsubmenustyle li a:hover {
    background-color: black;
    color: white;
}

.downarrowpointer {
        /*CSS for "down" arrow image added to top menu items*/
    padding-left: 4px;
    border: 0;
}

.rightarrowpointer {
        /*CSS for "right" arrow image added to drop down menu items*/
    position: absolute;
    padding-top: 3px;
    left: 100px;
    border: 0;
}

.ddiframeshim {
    position: absolute;
    z-index: 500;
    background: transparent;
    border-width: 0;
    width: 0;
    height: 0;
    display: block;
}
    /* ######### Black Strip Main Menu Bar CSS ######### */
.mattblackmenu ul {
    margin: 0;
    padding: 0;
    font: bold 12px Verdana;
    list-style-type: none;
    border-bottom: 1px solid gray;
    background: #414141;
    overflow: hidden;
    width: 100%;
}

.mattblackmenu li {
    display: inline;
    margin: 0;
}

.mattblackmenu li a {
    float: left;
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 6px 8px;
        /*padding inside each tab*/
    border-right: 1px solid white;
        /*right divider between tabs*/
    color: white;
    background: #414141;
}

.mattblackmenu li a:visited {
    color: white;
}

.mattblackmenu li a:hover {
    background: black;
        /*background of tabs for hover state */
}

.mattblackmenu a.selected {
    background: black;
        /*background of tab with "selected" class assigned to its LI */
}
</style>
<div id="ddtopmenubar" class="mattblackmenu">
    <ul>
        <li>
            <a href="#">LINK1</a>
        </li>
        <li>
            <a href="#" rel="ddsubmenu1">LINK2</a>
        </li>
        <li>
            <a href="#" rel="ddsubmenu2">LINK3</a>
        </li>
        <li>
            <a href="#">Link4</a>
        </li>
        <li>
            <a href="#" rel="ddsubmenu3">LINK5</a>
        </li>
    </ul>
</div>
<script type="text/javascript">
    ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>
<ul class='ddsubmenustyle' id='ddsubmenu1'>
    <li>
        <a href='#'>LINK2 ITEM 1</a>
    </li>
    <li>
        <a href='#'>LINK2 ITEM 2</a>
        <ul>
            <li>
                <a href='#'>LINK2 ITEM 2.1</a>
            </li>
            <li>
                <a href='#'>LINK2 ITEM 2.2</a>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK2 ITEM 3</a>
        <ul>
            <li>
                <a href='#'>LINK2 ITEM 3.1</a>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK2 ITEM 4</a>
    </li>
</ul>
<ul class='ddsubmenustyle' id='ddsubmenu2'>
    <li>
        <a href='#'>LINK3 ITEM 1</a>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 2</a>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 3</a>
        <ul>
            <li>
                <a href='#'>LINK3 ITEM 3.1</a>
            </li>
            <li>
                <a href='#'>LINK3 ITEM 3.2</a>
            </li>
            <li>
                <a href='#'>LINK3 ITEM 3.3</a>
            </li>
            <li>
                <a href='#'>LINK3 ITEM 3.4</a>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 4</a>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 5</a>
        <ul>
            <li>
                <a href='#'>LINK3 ITEM 5.1</a>
            </li>
            <li>
                <a href='#'>LINK3 ITEM 5.2</a>
                <ul>
                    <li>
                        <a href='#'>LINK3 ITEM 5.2 1</a>
                    </li>
                    <li>
                        <a href='#'>LINK3 ITEM 5.2 2</a>
                    </li>
                    <li>
                        <a href='#'>LINK3 ITEM 5.2 3</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 6</a>
    </li>
</ul>
<ul class='ddsubmenustyle' id='ddsubmenu3'>
    <li>
        <a href='#'>LINK5 ITEM 1</a>
    </li>
    <li>
        <a href='#'>LINK5 ITEM 2</a>
    </li>
    <li>
        <a href='#'>LINK5 ITEM 3</a>
    </li>
    <li>
        <a href='#'>LINK5 ITEM 4</a>
    </li>
    <li>
        <a href='#'>LINK5 ITEM 5</a>
    </li>
</ul>


Comment le pesrsonnaliser?

  • Voici les règles normales ul et li sont appliquées
  • Pour changer le fond il suffit de changer  background: #414141;
  • Remplacez # par votre lien 
  • Pour créer un menu déroulant à l'intérieur d'un simple lien dans le menu principal y ajouter un attribut rel comme rel="ddsubmenu1 changemez le nombre dans le menu déroulant  en conséquence..


Tutorial Blogger - comment ajouter des auteurs

Vous avez un blog sur (blogger) et vous voulez ajouter des auteurs qui vous aident à agrandir votre blog.
sachez que c'est possible sur blogger .
je vou présente cette vidéo qui montre comment ajouter un ou plusieurs auteurs à blogger;


 

Blogger news

Blogroll

Fourni par Blogger.