Cacher Le Gadget D'Attribution De Blogger

Le gadget attribution qui affiche le message "Fourni par Blogger" est celui qui me contrarie le plus, de tous les gadgets fournis par Blogger, et ceci pour deux raisons : 

1) Blogger nous empêche de l'effacer 

2) Ce gadget attribution rappel aux visiteurs qu'ils ne sont que sur un blog. 

Même si Blogger nous empêche de supprimer ce gadget (Fourni par Blogger), il existe des moyens pour le cacher afin qu'il n'apparaisse pas sur votre blog.

Pour vous j'ai 2 moyens : 

 1. Ajouter l'attribut " mobile='only'".

Pour cela, il suffit de retrouver le gadget attribution dans votre modèle et de lui ajouter un attribut afin qu'il soit plus affiché que sur la version mobile de votre blog.

<b:widget id='Attribution1' locked='true'  title='' type='Attribution'/>

En ajoutant l'attribut mobile='only', vous aurez le gadget attribution paramétré pour n'afficher le message "Fourni par Blogger" que sur la version mobile. Le résultat sera le suivant  :

<b:widget id='Attribution1' locked='true' mobile='only' title='' type='Attribution'/>

 2.Remplacer la valeur de l'attribut [ locked='true' ] par  [ locked='false' ].

C'est simple.

En revenant sur la ligne :

<b:widget id='Attribution1' locked='true'  title='' type='Attribution'/>

vous changeriez [  locked='true' ] par  [ locked='false' ].

❂ Mais avec cette deuxième astuce, il y a des chances que le widget d'attribution revienne.   

En savoir plus

Ajouter Un Compteur De Commentaire DISQUS

Dans l'un de mes précédent article je vous avez montré comment mettre le module de commentaire DISQUS. Et bien cette fois je vais vous monter comment mettre le compteur de commentaire DISQUS sur votre Blog.
Pour cela et comme d'habitude, suivez les étapes très bien : 

1.  À partir de votre " Tableau de bord Blogger ", allez à " Modèle ", puis " Modifier le code HTML " .
2.  Cliquez sur " Développer des modèles de gadgets ".
3.  En appuyant sur " Ctrl + F ", recherchez cette ligne de code dans votre modèle.                

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

4.  Ensuite Copiez / Collez tout ça ci-dessous juste après la première ligne trouvée.                      

<!-- Disqus Comment Count Start-->

<a class='dsq-comment-count comment-link commentslink' expr:href='data:post.url + &quot;#disqus_thread&quot;'/>

<!--Disqus Comment Count End-->



5.  Enregistrez votre modèle et c'est tout! Maintenant vous devriez avoir le nombre de commentaires affichés juste en dessous du titre du poste, juste à côté de la date. J'espère que vous trouverez ce bon pourboire et astuce utile.

En savoir plus

Ajouter le module de commentaire '' DISQUS ''

Aujourd'hui, je vais vous montrer un module de commentaire que vous pourriez mettre sur votre Blog. 
Ce module créé par DISQUS.COM est superbe, même moi je l'utilise, et c'est pour cela que je le conseil pour vous .
Pour l'intégrer sur votre Blog suivez les étapes suivante : 
 1. Allez au site web DISQUS.COM, cliquez sur le bouton Get this on your site, ensuite remplissez le formulaire d'inscription : 

  

2. Vous arrivez à la deuxième étape, le chois de la plateforme, vous allez choisir Blogger. 
    Mais vous pouvez aussi choisir (Tumblr - Wordpress - TypePad .... etc.) 
    Si votre Blog et fourni par un autre site web, c'est pas grave, vous pouvez cliquez sur Universal Code. 

    3. Pour cette troisième étape vous n’aurez plus qu'à cliquer sur Add [le nom de votre site] to my blogger site.
    4. Si vous voulez importer des commentaire de votre Blog, cliquez sur Tools > Import.
    5. Ensuite allez au tableau de bord en cliquant sur Continue to the moderation 
dashboard.

Remarque : 

 1)    De votre Tableau de bord vous pouvez réinstaller votre module de commentaire au cas où vous auriez des problème.  
         a. Allez sur Settings.
         b. Ensuite Install.

En savoir plus

Changer le style de "La Barre de Défilement" de votre Blog

Cette fois je vais vous montrer comment changer le style de "la barre de défilement" de votre Blog. 
Pour cela suivez les étapes :
 1. Allez sur Tableau de bord ➢ Modèle ➢ Modifier le code HTML ➢ Continuer.

 2. Cherchez  ]]></b:skin>  en cliquant sur Ctrl + F.

 3. Copiez puis Collez le code ci-dessous, avant   ]]></b:skin>. 

::-webkit-scrollbar {
background: #fff;
width: 15px;
}

::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
-webkit-border-radius: 30px;
background-image: -webkit-linear-gradient(top, rgb(6, 110, 206) 10%, rgb(23, 125, 220) 51%);
}

::-webkit-scrollbar-track { 
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 30px;
}

4. Pour qu'il soit correspondant au thème et à la couleur de votre Blog, modifiez les valeurs des attributs CSS en rouge. (background, width, -webkit-box-shadow, -webkit-border-raduis, background-image) 

En savoir plus

Ajouter le bouton "En savoir plus" sur votre Blog

Voici un widget que vous pouvez ajouter à votre site Blogger que j'ai trouvé. Il s'agit d'une mise à jour qui a été créé par Lasantha Bandara , et cela créera automatiquement un résumé après avec vignette.
Voici les étapes :
1. Accédez à Blogger Tableau de bord > Modèle > Modifier le code HTML .
2. Cliquez sur Développer modèles de gadgets .
3. Rechercher </ head> tag.
4. Ajouter ce code avant </ head> tag:

<script type='text/javascript'>
summary_noimg = 250;
summary_img = 200;
img_thumb_height = 150;
img_thumb_width = 150; 
</script>
<script type='text/javascript'>
//<![CDATA[

function removeHtmlTag(strx,chop){ 
 if(strx.indexOf("<")!=-1)
 {
 var s = strx.split("<"); 
 for(var i=0;i<s.length;i++){ 
 if(s[i].indexOf(">")!=-1){ 
 s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); 
 } 
 } 
 strx =  s.join(""); 
 }
 chop = (chop < strx.length-1) ? chop : strx.length-2; 
 while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
 strx = strx.substring(0,chop-1); 
 return strx+'...'; 
}

function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;
 if(img.length>=1) {    
 imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
 summ = summary_img;
 }

 var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
 div.innerHTML = summary;
}

//]]>
</script>

Remarque: Vous pouvez modifier les valeurs ci-dessous avec vos préférences:
summary_noimg : number of characters shown when there's no image.
summary_img : number of characters shown when there's an image.
img_thumb_height : height of post thumbnails.
img_thumb_width : width of post thumbnails.

5. Recherche ça <data:post.body/>

6. Ensuite remplace le avec ça:

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div style='float:right;margin-right:10px;margin-top:5px;'>
<a expr:href='data:post.url'>Read More</a>
</div>
</b:if>
</b:if>

7. Enregistrer le modèle

Remarque: Effectuez toujours une sauvegarde avant de faire toutes les personnalisations de votre modèle.

En savoir plus

Ajouter Social-Sharing Gadget en bas de chaque article

Voici des icones de partage de Sharethis que vous pouriez ajouter sur votre Blog .

  -  Ils seront automatiquement mis en bas de chaque Article sur votre Blog.

Suivez les étapes pour les mettre sut votre Blog. 

1. Allez sur Tableau de bord ➢ Mise en page.
2. Cliquez sur Ajouter un gadget.
3. Choisisez HTML/JavaScript, puis Copiez / Collez le code ci-dessous.



<span id="st_finder"></span><script type="text/javascript" src="http://w.sharethis.com/widget/stblogger2.js"></script><script type="text/javascript">var switchTo5x=true;stBlogger2.init("http://w.sharethis.com/button/buttons.js", {"facebook":["large","Facebook",""],"twitter":["large","Tweet",""],"googleplus":["large","Google +",""],"linkedin":["large","LinkedIn",""],"blogger":["large","Blogger",""],"wordpress":["large","WordPress",""],"tumblr":["large","Tumblr",""],"pinterest":["large","Pinterest",""]} , "ef0adfd8-b13d-44c3-87f9-93fe5d7caa2c");var f = document.getElementById("st_finder");var c = f.parentNode.parentNode.childNodes;for (i=0;i<c.length;i++) { try { c[i].style.display = "none"; } catch (err) {}}</script>    




4. Et pour finir, enregistrer le gadget.

Maintenant, vous avez finis, allez voir votre Blog.

En savoir plus

Comment ajouter le bouton "Haut de page" de Tumblr

Cette fois, nous allons vous montrer un autre Gadget qui va vous apprendre comment ajouter un bouton "Haut de page" qui est similaire à la conception de bouton Tumblr.

• De votre Blogger Tableau de bord, allez sur la page Modèle.

• Cliquez sur le Modifier le code HTML et puis appuyez sur le bouton Continuer .

• Utiliser Ctrl + F ,  et cherchez le <head> tag.

• Copiez / collez cette ligne de code ci-dessus ou avant celui-ci.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

• Utiliser Ctrl + F une deuxième fois, et rechercher ]]></b:skin> ensuite copiez / collez le code CSS suivant devant lui.

#scroll-top {
 background-color: #777777;
 border-radius: 24px;
 box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8) inset;
 color: #FFFFFF;
 cursor: pointer;
 display: block;
 font-family: Verdana;
 font-size: 2em;
 font-weight: bold;
 line-height: 2em;
 text-align: center;
 text-decoration: none;
 position:fixed;
 width: 48px; 
 height: 48px;
 bottom:30px; 
 right:20px;
 opacity:0.85;
 transition:opacity 0.25s ease 0s;
}

#scroll-top:hover{
 opacity: 1;
 color: #FFFFFF;
}

Pour que le bouton soit bien intégré et correspondant à votre theme et couleur du blog, n'oubliez pas de modifier les valeurs des attributs CSS suivantes: Background-color , color , font-family , font-size et line-height . Les trois derniers attributs déterminent l'apparition du symbole caret (^). Vous pouvez également régler border-radius au cas où vous souhaitez modifier la courbure des coins arrondis de la place.

• Enfin, pour ajouter la fonctionnalité de la touche, on ajoute le code JavaScript suivant dans le code HTML. Utiliser Ctrl + F encore une fois, chercher la balise </body> tag et collez le code suivant.

<script type='text/javascript'>
$(function() {
 $.fn.scrolltoTop = function() {
 var scrollLink = $(this), 
 win = $(window);
 scrollLink.hide();
 if (win.scrollTop() != '0'){
 scrollLink.fadeIn('slow')
 }
 win.scroll(function() {
 if (win.scrollTop() == '0'){
 scrollLink.fadeOut('slow')
 } 
 else{
 scrollLink.fadeIn('slow')
 }
 });
 scrollLink.click(function() {
 $('html, body').animate({
 scrollTop: 0
 }, 'slow')
 })
 }   
});
$(function() {
 $('#scroll-top').scrolltoTop();
});
</script>
<a id='scroll-top' href='#' title='Scroll to top'>^</a>     

• Enregistrez votre modèle et prévisualiser votre blog pour voir si le bouton ressemble en fonction de votre satisfaction.

Félicitations! Vous avez terminé.

En savoir plus