créer et améliorer un blog: un code css mise en page dans un gadget Placer un code css de mise en page dans un gadget HTML/JavaScript On peut directement ajouter un code CSS de mise en page dans le template (modèle) du blog. Quand c'est possible, il est plus intéressant de mettre le même code dans un gadget HTML/JavaScript, en y ajoutant, avant et après, : <style type="text/css">.....</style>. On peut ainsi éviter de modifier le template du blog : - les corrections seront plus faciles par la suite ; - elles ne disparaîtront lors d'un changement de template ; - elles ne disparaîtront pas non plus lors d'une mise à jour du template. On peut enfin ajouter des instructions différentes les unes à la suite des autres dans le même gadget HTML/JavaScript, en n'ajoutant qu'une seule fois <style type="text/css">..... Exemple de gadget HTML/JavaScript : La première ligne supprime la barre de navigation Blogger en haut de l'écran. La deuxième ligne supprime le lien "Atom" en bas de l'écran. La quatrième ligne supprime la phrase "Fourni par Blogger" en bas d'écran.
créer et améliorer un blog: mise en page gadgets Mise en page d'un gadget Chaque gadget peut faire l'objet d'une mise en page particulière (par défaut ce sont les instructions relatives à l'élément principal dont il dépend qui s'appliquent). Cela concerne tous les attributs de mise en page : police de caractères, couleur des caractères, couleur de fond, marges, espaces, ... 1) Il faut d'abord connaître le nom du gadget : "HTML1", HTLM2", "Text1", ... Si ce n'est pas le cas, afficher le gadget comme pour le modifier : le nom apparaît à la fin de l'adresse (http;//...) en haut de la fenêtre. 2) Dans le modèle (template) du blog, insérer le nom du gadget précédé de "#" et suivi des instructions voulues. Ce code se place à proximité du paragraphe concernant l'élément auquel le gadget est attaché : messages ("main" ou ".post"), barre(s) latérale(s) ("sidebar ..."), bas d'écran ("footer ..."), ... Exemples : 3) On peut changer la mise en page de tous les gadgets avec l'instruction .widget {...}.
créer et améliorer un blog: ajouter gadget html/javascript texte image Ajouter un gadget à un blog HTML/JavaScript - Texte - Image - Champ de recherche Gadget HTML/JavaScript : suivre la procédure suivante : 1) Se connecter à un site qui diffuse des gadgets. 2) Choisir un gadget. 3) Copier le code. 4) Dans le "Tableau de bord" de Blogger, cliquer à côté du nom du blog concerné sur : "Mise en page" ; "Ajouter un gadget" ; remarque : si ce lien n'existe plus, consulter : restaurer le lien "Ajouter un gadget". "HTML/JavaScript", 5) Coller le code. 6) Enregistrer. 7) Déplacer éventuellement le gadget à un autre endroit, en le faisant glisser avec la souris. On peut aussi ajouter un "gadget texte" que l'on complètera soi-même par un texte, des liens et/ou des images. Suivre la procédure suivante : 1) Cliquer sur : "Texte", 2) Écrire un texte ou insérer des liens ou des images. Un lien doit avoir été créé, par exemple dans un message (qu'on peut laisser au brouillon ou supprimer par la suite) de Blogger. exemple : exemple: 3) Enregistrer. "Image", "Champ de recherche",
créer et améliorer un blog: coins arrondis Coins arrondis Il est très facile d'ajouter des coins arrondis à un élément d'un blog. Pour arrondir les coins d'une image, cliquer ici. La méthode qui suit fonctionne avec tous les navigateurs sauf Internet explorer. Il suffit d'introduire les codes suivants dans la mise en page d'un élément : -moz-border-radius: 20px 20px 20px 20px;-webkit-border-top-left-radius: 20px;-webkit-border-top-right-radius: 20px;-webkit-border-bottom-left-radius: 20px;-webkit-border-bottom-right-radius: 20px;-goog-ms-border-radius: 20px 20px 20px 20px;border:1px solid #bbbbbb; Exemples : les cadres arrondis à fond rouge dans la colonne de gauche. 1) Le code ajouté dans un gadget "HTML/JavaScript" est le suivant : Comment ajouter un gadget HTML/JavaScript 2) Il suffit ensuite, d'entourer le code du gadget par les balises : et Pour ajouter des coins arrondis qui fonctionnent avec tous les navigateurs dont Internet explorer, il faut placer une image au format .gif à chaque coin. Exemple: test test test
Blogger Widget - Carousel Slide using with Popular post Widget This is very interesting widget which tag with popular post, it is very simple to install, follow below steps to install widget easily Login in to Blogger Dashboard and go to Design – Page Element Then Click “Add Gadget” and select “Popular Posts”(If you already have this gadget skip this step, but drag it to correct position if not )After that select Gadget “Add Gadget” again and select “HTML/Javascript”Copy all below content of Java Script Code and paste it to "HTML/Javascript" GadgetSee below Gadget placement for easy guide Here below Java Script Code créer et améliorer un blog: encadrer un gadget Encadrer un gadget 1) Pour mettre un cadre autour d'un gadget, il faut d'abord connaître le nom du gadget : "HTML1", HTLM2","TEXT1", ... Si ce n'est pas le cas, il suffit d'afficher le gadget comme pour le modifier : le nom apparaît à la fin de l'adresse ( en haut de l'écran. 2) Après : ou #sidebar {.....} insérer par exemple : Modifier "#Text1" en fonction du nom du gadget concerné. - "border" ajoute une ligne autour du gadget ; - "1px" (pixel) est l'épaisseur de la ligne ;- "solid" précise qu'il s'agit d'une ligne pleine ;- "#bbbbbb" est la couleur grise de la ligne ; - "padding" est l'épaisseur de la marge intérieure entre le gadget et la ligne. On peut aussi prévoir des COINS ARRONDIS au cadre d'un gadget : cliquer ici.
Regrouper Les Articles Blogger Par Catégorie ~ The Blogueur Nous allons voir dans ce tutoriel comment regrouper les articles de votre blog Blogger dans des catégories. Cela permettra de rendre votre blog plus professionnel, mais surtout, il sera plus facile à explorer. Comment créer des catégories dans Blogger Blogspot 1. C'est dans ce champ que vous devez renseigner le libellé de la catégorie. 2. Note: il est possible d'affecter plusieurs catégorie pour un seul article. 3. Cliquez sur le libellé (dans la liste des libellés) que vous souhaitez supprimer. 5. <a href=" Par défaut, les libellés Blogger affiche 20 articles par page. X: le nombre d'articles à afficher. Voila c'est tout pour ce tutoriel, espérant qu'il répond à vos attentes. Blogger widget : Popular Post with Carousel Slider | Blogger Templates and Tricks by Abu Farhan January 23rd, 2012 Bismillah, Alhamdulillah After long time I’m not post for new script. Now I post about Popular Post Widget for blogger, because this widget is the best from Blogger (in my opinion). SEO friendly (not javascript)Easy to custumizedCan make for Feature PostDynamic result based on real statistic Because of those features I made many widget to show popular post in many way. You can see demo from below link Demo This script very easy to install, you only have to put the script to the new Gadget Login to Blogger Dashboard and navigate to Design – Page ElementsClick “Add Gadget” and Choose “Popular Posts”(If you already have this gadget skip this step)After you have Popular Post Gadget “Add Gadget” again and select “HTML/Javascript”Put all script bellow to the “Content” of HTML/Javascript GadgetIf you have already jQuery in your Template please delete from my scriptDone- your popular post now with animation
Adding non-static page tabs to pages/PageList gadget Update Sep. 2011: Blogger now has the ability to add web links to pages gadget, as such the original hack is no longer necessary. With the new Blogger UI (user interface), you can add any web links (external links, label URLs, individual post links etc.) to the pages gadget. Here’s how: Switch to the new interface by clicking the “Try the updated Blogger interface” link at the top of the screen (you can always return to old interface at any time). Go to Dashboard and click the grey dropdown menu next to the blog you want to add the link to. Below is the original tutorial (for reference) An easy way to add navigation tabs in Blogger is using a Pages gadget. Does that mean you should forget about adding tabs linking pages other than static pages? Use the hack below to add tabs that link to any URLs. Here’s how: Go to Dashboard > Design > Edit HTML.