Astuces Blogger

NOTE

Salut! Si vous voyez des changements sur mon blog aujourd'hui et les jours a venir ne soyez pas surpris car j'essais des choses dans le HTML Modifier. Desolée pour ce message mais faut que je rappelle a ceux qui visite que parfois mon blog d'astuce effectuera des changements couleurs ou de fond ou autres a cause des tests que je fais ne paspanniquer et soyez patient envers moi lors de votre visite ici. Merci. Bon je retourne a mon HTML. Bonne fin journée

Icone GIF ou PNG en coter du commentaire

-Modele 1-

*1 icone Gif PNG avec le theme Smple Dark*

Ceci est plus compliquer donc faite une sauvegarde au cas ou.

Allez dans Theme/Personaliser/ HTML Modifier. Vous devez trouver ce code sur tout ce qui est en vert

<b:includable id='comment_count_picker' var='post'>

<data:post.commentLabelFull/>

================

Ajoutez ceci :

-Modele 2-

Pour en avoir 2 ( 1chaque coter) sa prend le theme de base Awesome inc celui avec du vert en bordure. C'est celui ou jai trouver pour mettre le code icone . C'est mon blog test que jai trouver ca pour les 2.

vous mettez le code comme au meme endroit comme sur la capture. UNe fois terminer cliquer sur confirmer le changement.

=============NOTE=============

Je le redis attention pour pas faire gaffe car je peux pas toujours reparer vos erreurs faut vous soyez prudent et faite des sauvegsrde voila.

Bon je vais me coucher il est 1h35 am . J'aurais voulue trouver un habillage de bouton deco pour le commentaire mais pas encore trouver ca va venir un jour en tous cas jespere.

Images coins arrondis

Forme arrondi au passage de la souris

Code HTML MODIFIER/ juste avant ceci </b:template-skin>

======Recatangle/ Ovale ==========

.post-body img {

box-shadow: 0px 0px 12px #000; /* Ombre */

border-radius: 50%; /* Bordure arrondie */

border:0;

padding:0;

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

}

.post-body img:hover {

box-shadow: 0; /* Suppr. l'ombre (valeur 0) */

border-radius: 0; /* Sppr. l'arrondi de la bordure (valeur 0) */

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

cursor:pointer;

}

===== Image rectangle / forme Style de noyau =======

.post-body img {

background:#5e6de4; /* Couleur d'arrière-plan autour de l'image */

padding:3px; /* Espace entre la bordure et l'image */

-moz-transition: tous les 1;

-webkit-transition: tous les 1;

-o-transition: tous les 1;

}

.post-body img:hover {

box-shadow: 0px 0px 12px #000; /* Ombre */

border-radius: 0% 50%; /* Bordure arrondie */

-moz-transition: tous les 1;

-webkit-transition: tous les 1;

-o-transition: tous les 1;

cursor:pointer;

}

====== Style de noyau a rectangle == ====

.post-body img {

background:#FFF; /* Couleur d'arrière-plan autour de l'image * /

padding:15px; /* L'espace entre la bordure et l'image */

border-radius: 50% 0; /* Bordure arrondie */

box-shadow: 0px 0px 15px #000; /* Ombre */

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

}

.post-body img:hover {

border-radius:0; /* Suppr. l'arrondi de la bordure (valeur 0) */

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

cursor:pointer;

}

============== Cylindre ==================

.post-body img {

border-radius: 45% / 20%; /* Bordure arrondie */

box-shadow: 0px 0px 12px #000; /* Ombre */

padding:0;

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

}

.post-body img:hover {

border-radius: 0; /* Suppr. l'arrondi de la bordure (valeur 0) */

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

cursor:pointer;

}

======== Ovale/ rectangle =============

.post-body img {

box-shadow: 0px 0px 12px #000; /* Ombre */

border-radius: 50%; /* Bordure arrondie */

border:0;

padding:0;

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

}

.post-body img:hover {

box-shadow: 0; /* Suppr. l'ombre (valeur 0) */

border-radius: 0; /* Suppr. l'arrondi de la bordure (valeur 0) */

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

cursor:pointer;

}

=====NOTE========

Les effets s'applique sur les images de vos articles.

Pour les formes reste a tester ceux la: Thumbnail, Star, pentagon, octagon, heart, diamond , egg, pacman, talkbubble , tv

Gadget pour voir les Commentaires dans la colonne

(exemple)

Si vous aimez avoir les commentaires dans votre colonne il est posible de faire.

Le code d'origine hier lorsque je l'ai trouver etait en anglais le bouton et vue que nos blogs sont en francais j'ai decider de mettre ca aussi en francais. Si vous preferez quil soit en anglais pas souci juste a remplacer le afficher tout (Show all) et cacher tout (Hide all) dans le code voila.

....

Dans votre tableau de bord > Mise en page, ajouter un Gadget en HTML Javascript et coller ce code:

</style>

var tgl=false;var title_arr=new Array();var arr=0;var err="[err]";var icon_expand="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGa6tovmk2B_cYh4QaQP7wZRMX2Qrf3dAz7WSpbAiHsguj9_-Fl7zsdnZHSkBETyiTvryHyP1HWNjZpJlsIq2RHGZBm7oXILyGi3b24Gh3M0z6DcpVn_EabGyb5pLB4XPR7djfQdsfMaEg/s1600/icon-plus.png";var icon_collapse="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTqhsizLc6fqVNYz9LoZZ_wdHsnyv_TbnST7GTq3VTFX_HQj8hCrwTbXK-TbCj-0n1CC0PpKa9ziHp4eZLX-HIooxXhqum653Z738M7AglyxzwJ4E6Faa_hyphenhyphenbyX2KhZeS3ryvFU7XbRdxB/s1600/icon-minus+copy.png";var maxcomments=20;function real_posttitle(postid){for(var i=0;i<title_arr.length;i++){if(title_arr[i][0]==postid)return title_arr[i][1];}

return err;}

function showrecentposts(json){var numposts=999999;for(i=0;i<numposts;i++){var entry=json.feed.entry[i];var postid;var title;if(i==json.feed.entry.length)break;for(var k=0;k<200;k++){if(entry.link[k].rel=='self'){postid=entry.link[k].href;postid=postid.substr(postid.lastIndexOf("/")+1,100);}

if(entry.link[k].rel=='alternate'){title=entry.link[k].title;break;}}

title_arr[arr]=postid+"°"+title;title_arr[arr]=title_arr[arr].split("°");++arr;}}

function unfold_all(el){try{for(var i=0;i<maxcomments;i++){document.getElementById("com_id"+i).style.display="block";document.getElementById("click_id"+i).src=icon_collapse;}}catch(e){;}

el.value='Afficher tout';}

function fold_all(el){try{for(var i=0;i<maxcomments;i++){document.getElementById("com_id"+i).style.display="none";document.getElementById("click_id"+i).src=icon_expand;}}catch(e){;}

el.value='Cacher tout';}

function showrecentcomments(json){var numcomments=999999;var postid;var i=0;for(i=0;i<numcomments;i++){var entry=json.feed.entry[i];var alturl;var anonymous=false;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='self'){postid=entry.link[k].href.split("/");postid=postid[5];}

if(entry.link[k].rel=='alternate'){alturl=entry.link[k].href;break;}}

var postlink=alturl.split("#");postlink=postlink[0];var linktext=postlink.split("/");linktext=linktext[5];linktext=linktext.split(".html");linktext=linktext[0];var profilelink="";try{profilelink=entry.author[0].uri.$t;}catch(e)

{anonymous=true;};var posttitle=real_posttitle(postid);if(posttitle==err){posttitle=linktext.replace(/-/g," ");}

var commentdate=entry.published.$t;var cdyear=commentdate.substring(0,4);var cdmonth=commentdate.substring(5,7);var cdday=commentdate.substring(8,10);var ctime=commentdate.substr(11,5);var monthnames=new Array();monthnames[1]="january";monthnames[2]="february";monthnames[3]="march";monthnames[4]="april";monthnames[5]="may";monthnames[6]="june";monthnames[7]="july";monthnames[8]="august";monthnames[9]="september";monthnames[10]="october";monthnames[11]="november";monthnames[12]="december";if("content"in entry){var comment=entry.content.$t;}

else

if("summary"in entry){var comment=entry.summary.$t;}else var comment="";if(i<maxcomments){if(tgl){tgl=false;var cl="row-a";}else{tgl=true;var cl="row-b";}

document.write('<div class="'+cl+' row-div"><img id="click_id'+i);document.write('" style="cursor:pointer;" onclick="unfold(this);"');document.write('src="'+icon_expand+'" /> ');document.write('On '+cdday+' '+monthnames[parseInt(cdmonth,10)]+' '+cdyear);document.write(', at '+ctime+', ');if(anonymous==false){document.write('<a href="'+profilelink+'">'+entry.author[0].name.$t+'</a> ');}else{document.write(entry.author[0].name.$t+' ');}

document.write('commented on <a href="'+alturl+'">'+posttitle+'</a>');document.write('</div>');document.write('<div class="comments1" id="com_id'+i+'" style="display:none;">'+comment+'<\/div>');}}

document.getElementById("numcom").innerHTML=i;}

</script><script type="text/javascript" src="URL DU BLOGGER/feeds/posts/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentposts"></script><script type="text/javascript" src="URL DU BLOGGER/feeds/comments/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentcomments">

</script></div>

============NOTE===============

Pour changer la couleur du texte du sujet sont sont dans le personaliser >avancer dans texte ..

Centrer une image dans les Gadgets

Je remets cette astuce car je le retrouve pas dans mes articles sa doit etre quand j'avais tous le css grouper et par la suite j'ai preferer faire les astuces separer pour faciliter a retrouver les astuces individuellement .

Theme> Personaliser, clique sur la petite fleche et sur Avancé > Ajout fichier CSS

==========CSS===========

.widget {

text-align: center;

}

Theme de base AWESOME enlever les barres sur la banniere et en dessous

Ce tuto s'adresse uniquement a ceux qui ont le theme de base AWESOME INC

Faite une sauvegarde avant bien important au cas ou.

Pour supprimer la barre onglet vous allez dans Theme>Personaliser> Avancer> Arriere plan des onglets tu mets les 2 en trasnparence et tu clique sur la disquette en bas pour confirmer le changement.

Ensuite, pour enlever la grande barre transparente shadow

Vous allez dans le HTML Modifier et vous enlever tous le code TABS

comme ceci

et vous cliquer sur la disquette pour confirmer le changement. Et voila.

Lorsque vous le supprimer ne reviendra plu meme si vous changer de theme et que vous revenez sur ce theme. DOnc soyez sur de ce que vous voulez. Vous allez voir quand meme le TABS dans le html mais il sera un code fantome comme ont peu dire ca.

Si vous avez encore une Large barre noir vous devez supprimer

tous ce ci:

Voici un apercu du resultat

C'est ce que j'ai trouver dans le html modifier.

Arriere plan dans votre article

ECRIRE VOTRE MESSAGE ICI

Ce code est basic mais peut etre utile pour vous

Code HTML :

Cliquez sur le crayon dans votre article

Affichage HTML et vous entrez ce code

<div style="text-align: center;">ECRIRE VOTRE MESSAGE ICI </div></div><p></p>

Et vous cliquez sur Vue Nouveau Message

et reste qu'allez voir le resultat une fois publier

NOTE:

Vous pouvez ajouter des bordures si vous souhaiter.

Couleur fond d'article

Changer la couleur individuelle de vos articles en html

CODE:

une fois le code mis tu reviens ici et tu clique sur

et tu ajoute ton texte et images pour ton article voila.

inserer des emojis dans les commentaires

+++++++++++

Je vous explique comment inserer les emojis pour que vos visiteurs les utlises facilement dans les commentaires.

Selectionner tous les emojis et faites un copier (CTRL +C)

😀😁😂😃😄😅😆😇😈😉😊😋😌😍😎😏😐😑😒😓😔😕😖😗😘😙😛😚😜😝😞😟😠😡😢😣😤😥😦😧😨😩😪😫😬😶😵😴😳😲😱😰😯😮😭😷😸😹😺😻😼😽😾😿🙀🙅🙆🙇🙈🙉🙊🙋🙌🙍🙎🙏☝☺✊✋✌❤👀👂👃👄👎👍👌👋👊👉👈👇👆👅👏👐👤👥👦👧👨👩👪👫👵👴👳👲👱👰👯👮👭👬👶👷👸👹👺👻👼👽👾👿💑💏💋💇💆💅💃💂💁💀💓💔💕💖💗💘💙💚💛💜💨💧💦💥💤💣💢💟💞💝💩💪💫💬💭☕🌰🌱🌲🌳🌴🌵🌷🌸🌹🍃🍂🍁🍀🌿🌾🌽🌼🌻🌺🍄🍅🍆🍇🍈🍉🍊🍋🍌🍍🍗🍖🍕🍔🍓🍒🍑🍐🍏🍎🍚🍛🍜🍝🍞🍟🍠🍡🍫🍪🍩🍨🍧🍦🍥🍤🍣🍢🍬🍭🍮🍯🍰🍱🍲🍳🍴🍵🐁🐀🎂🍼🍻🍺🍹🍸🍷🍶🐂🐃🐄🐅🐆🐇🐈🐉🐊🐋🐌🐍🐎🐏🐐🐑🐒🐓🐔🐕🐖🐗🐘🐙🐚🐛🐜🐝🐞🐟🐠🐡🐢🐣🐤🐥🐦🐧🐨🐩🐪🐫🐬🐭🐮🐯🐰🐱🐲🐳🐴🐵🐶🐷🐸🐹🐺🐻🐼🐽🐾⌚⌛⏰⏳☎⚓✂✉✏🎀🎁👑👒👓👔👕👖👗👘👙👚👛👜👝👞👟👠👡👢👣💄💉💊💌💍💎💐💠💡💣💮💰💱💲💳💴💵💶💷💸💹💺💻💼💽💾💿📀📁📂📃📄📅📆📇📈📉📊📋📌📍📎📏📐📑📒📓📔📕📖📗📘📙📚📛📜📝📞📟📠📡📢📣📤📥📦📧📨📩📪📫📬📭📮📯📰📱📲📳📴📵📶📷📹📺📻📼🔋🔌🔍🔎🔏🔐🔑🔒🔔🔔🔕🔖🔗🔦🔧🔨🔩🔪🔫🔬🔭🔭🔮🕐🕑🕚🕙🎃🎄🎅🎆🎇🎈🎉🎊🎋🎌🎍🎎🎏🎐🎑🎒🎓🎠🎡🎢🎣🎤🎥🎦🎧🎨🎩🎪🎫🎬🎭🎮🎯🎰🎱🎲🎳🎴🎵🎶🎷🎸🎹🎺🎻🎼🎽🎾🎿🏀🏁🏂🏃🏄🏆🏇🏈🏉🏊💒♨♻♿⚠⚡⛏⛐⛑⛒⛓⛔⛕⛖⛗⛘⛙⛚⛛⛜⛟⛞⛠⛡⛨⛩⛪⛫⛬⛮⛯⛰⛱⛲⛳⛴⛵⛶⛷⛸⛹⛺⛻⛼⛽⛾⛿✈🏠🏡🏢🏤🏥🏦🏧🏨🏩🏪🏫🏬🏭🏮🏯🏰💈🗻🗼🗼🗽🗾🗿🚀🚁🚂🚃🚄🚅🚆🚇🚈🚉🚊🚋🚌🚍🚎🚏🚐🚑🚒🚓🚔🚕🚖🚗🚘🚚🚙🚛🚜🚝🚞🚟🚠🚡🚢🚣🚤🚥🚦🚧🚨🚩🚪🚫🚬🚭🚮🚯🚰🚱🚲🚳🚴🚵🚶🚷🚸🚹🚺🚻🚼🚽🚾🚿🛀🛁🛂🛃🛄🛅☀☁☃☂☃☄★☆☇☈☉☊☋☌☍☔♈♉♊♋♌♍♎♏♐♑♒♓⛄⛅⛆⛇⛈⛎✨🌀🌁🌂🌃🌄🌅🌆🌇🌈🌉🌊🌋🌌🌍🌎🌏🌐🌑🌒🌓🌔🌕🌖🌗🌘🌙🌚🌛🌜🌝🌞🌟🌠🔥☑✅✒✔✖❌❎❓❔❕❗➕➖➗➰〰💯🔀🔁🔂🔃🔄🔅🔆🔇🔈🔉🔊🔋🔌🔍🔎🔏🔐🔑🔒🔓🔔🔕🔖🔗🔘🔙🔚🔛🔜🔝🔞🔟🔠🔡🔢🔣🔤🔱

Et allez Dans tableau de bord > Parametre et inserer les emojis dans section Commentaires/Message du Formulaire de commentaire et Coller (CTRL+V)

Vos visteurs pourront utiliser en faisant un copier/coller l'emoji et le deposer dans sont commentaire aussi simplement.

comments