4 Outils blogging Script HTML que vous devez installer sur votre blog Blogger / Blogspot
L'ajout d'un script outils blogging en ligne que nous devons installer sur notre site de blog Blogspot est un moyen efficace et plus important pour les débutants dans le domaine de blog surtout en particulier les asbloggueurs sur Blogger / Blogspot.
Comment installer les 4 outils Script sur Blogger / Blogspot
Avant d'installer ce script blogging ci-dessous sur la page de votre blog Blogspot, assurez-vous d'avoir déjà installé Ajax jQuery sur votre site web, afin que les outils script nécessitent correctement fonctionner dans notre modèle de Blogger.
Ou si vous ne l'avez pas installer, veillez le copier le code script ci-dessous, puis le coller sous la balise < head > ou dans le modèle de votre blog Blogger Blogspot ou juste après cette balise ouverture <head> de votre modèle de blog selon votre modèle.
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Outils de Script d'encodage HTML en ligne
<div dir="ltr" style="text-align: left;" trbidi="on"> <div id="html-parse"> <style scoped="" type="text/css"> .night-mode #html-parse .button-group{float:none;background:#444852;}.night-mode #html-parse textarea{background-color:#202442;box-shadow:inset 0 3px #202442;color:white;}.night-mode #html-parse{background:#2d3158;}#outer-wrapper{margin:0 auto;text-align:left;float:none;background-position:center!important;}#post-wrapper{width:100%;max-width:100%;margin:0 auto;text-align:left;float:none;background-position:center!important;}.post-body,.post{background-position:center!important;}.post-body p{margin:0;}#blog1,#artikel,.blog-posts{background-position:center!important;}#comments,#sidebar-wrapper,#menu-wrap{display:none;margin-top:0;margin:0;}#main-wrapper{padding:0;width:100%;border:0;}#html-parse{background:#ecf0f1;position:relative;display:block;clear:both;border-radius:5px;padding:20px;}#html-parse textarea{width:100%;height:240px;margin:0 auto;display:block;background-color:#fff;padding:20px;font-family:Monospace;font-size:13px;border:0;border-radius:5px 5px 0 0;resize:none;box-shadow:inset 0 3px #cdd1d2;}textarea:focus{background-color:#fff;color:#303030;}#html-parse .box{margin:10px auto 30px;color:#fff;font-size:90%;}#html-parse .box p{margin:0 0 2px;}#html-parse button{cursor:pointer;}#html-parse .col{width:48%;margin:0 auto 30px;}#html-parse .left{float:left;margin-left:1%;}#html-parse .right{float:right;margin-right:1%;}#html-parse .button-group {float: none;background: #4d6a79;text-align: center;margin: 0 0 28px 10px;border-radius: 30px 30px;}#html-parse button,#html-parse button[disabled]:active{background:rgba(255,255,255,.3);text-align:center;color:#fff;display:inline-block;padding:8px 16px;font-size:13px;font-weight:400;line-height:1.471;border-radius:99em;margin:0 5px;border:0;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1);transition:all .3s;}#html-parse button:hover,#html-parse button:active{background:rgba(255,255,255,.5);color:#fff;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12);}#html-parse button[disabled],#html-parse button[disabled]:active{background:rgba(255,255,255,.5);color:#fff;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12);}#html-parse .opt1,#html-parse .opt2,#html-parse .opt3,#html-parse .opt4,#html-parse .opt5{display:inline-block;margin:0 3px 0 10px;vertical-align:middle;border:none;outline:none;}#html-parse br{display:none;}.option-input{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none;position:relative;right:0;bottom:0;left:0;height:16px;width:16px;transition:all 0.15s ease-out 0s;background:rgba(255,255,255,.3);border:0;color:#fff;cursor:pointer;display:inline-block;margin-right:0.5rem;outline:none;position:relative;border-radius:99em;}.option-input:hover{background:rgba(255,255,255,.3);}.option-input:checked{background:rgba(0,0,0,.2);animation:rubberBand 1s;}.option-input:checked::before{height:16px;width:16px;position:absolute;content:'\f00c';font-family:fontawesome;display:inline-block;font-size:12.66667px;text-align:center;line-height:16px;}.option-input:checked::after{-webkit-animation:click-wave 0.65s;-moz-animation:click-wave 0.65s;animation:click-wave 0.65s;background:#40e0d0;content:'';display:block;position:relative;z-index:100;}.option-input.radio{border-radius:50%;}.option-input.radio::after{border-radius:50%;} </style> <br /> <form method="post" name="pageform" onsubmit="return doencrypt(this);"> <span class="clear"></span><br /> <textarea cols="30" id="areatxt" name="code" placeholder="Paste your HTML, JS, CSS, PHP, C+ code here..." rows="20"></textarea> <br /> <div class="button-group"> <div class="box"></div> <button class="ripplelink" id="button-on" onclick="doencrypt(pageform);">Convert HTML</button> <button class="ripplelink" id="button-on" type="reset">Clear Field</button> <br /> <button class="ripplelink" id="txtarea" onclick="copyToClipboard();">Copy All</button> </div> <textarea cols="30" id="txtarea" name="ecode" readonly="yes" rows="20"></textarea> <div class="clear"> </div> </form> <script type="text/javascript"> function doencrypt(e){return""==e.code.value?(alert("Gaboleh kosong goblok!"),!1):(enctext=encrypt(e.code.value),codetocopy="<script type='text/javascript'>",codetocopy+="\n",codetocopy+="document.write(unescape('"+enctext+"'));\n",codetocopy+="",codetocopy+="<\/script>",e.ecode.value=codetocopy,!1)}function encrypt(e){var t,o="";for(t=0;t<e.length;t++)o+="%"+hexfromdec(e.charCodeAt(t));return o}function hexfromdec(e){return hex1=Math.round(e/16-.5),hex2=e-16*hex1,""+getletter(hex1)+getletter(hex2)}function getletter(e){return e<10?e:10==e?"A":11==e?"B":12==e?"C":13==e?"D":14==e?"E":15==e?"F":void 0}function code_check(){var e=document.getElementById("txtarea");e.value.indexOf("Paste your code here...")>0&&(e.value="")}function copyToClipboard(){$("#txtarea").select(),document.execCommand("copy")} </script><br /> </div> </div>
Outils de Script de Compteurs de Mots-clés en ligne
<div id="border">
<textarea id="text" placeholder=""></textarea>
</div>
<div class="button-group">
<br />
<div id="result">
<br />
Caractères: <span id="wordCount">0</span>
<br />Caractères Totales (traités inclus): <span id="totalChars">0</span>
<br />
Characters (traités exclus ): <span id="charCount">0</span>
<br />
Characters (exclusive de toutes les spaces): <span id="charCountNoSpace">0</span>
</div>
</div>
<style scoped="" type="text/css">
.breadcrumbs{display:none;}.night-mode .button-group{background:#444852;}.night-mode textarea{box-shadow:inset 0 0 0 1px rgb(32,36,66);background-color:rgb(32,36,66);}.night-mode #border{background:#2d3158;border:1px solid rgb(32,36,66);}#border{background:rgb(236,240,241);position:relative;display:block;clear:both;border-radius:5px;padding:20px;border:1px solid rgb(236,240,241);}#result{margin:10px auto 30px;color:rgb(255,255,255);}#count{background:rgba(255,255,255,0.2);text-align:center;color:#fefefe;display:inline-block;padding:6px 12px;font-size:14px;font-weight:400;line-height:1.471;border-radius:4px;margin:0 5px;border:0;transition:all .1s;}textarea{width:100%;height:240px;margin:0 auto;display:block;background-color:#fff;padding:20px;font:normal 13px 'Courier New',Monospace;border:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05);border-radius:5px 5px 0 0;resize:none;}#count:hover,#cssminifier button:active{background:#fff;color:#2980b9;}.button-group{background:#4d6a79;text-align:center;padding:20px;margin:0;border-radius:0 0 5px 5px;float:none;}.button-group span{vertical-align:2px;line-height:1;color:#fff;}.button-group br{display:none;}
</style>
<script>
counter=function(){var t=$("#text").val();if(0==t.length)return $("#wordCount").html(0),$("#totalChars").html(0),$("#charCount").html(0),void $("#charCountNoSpace").html(0);var e=/\s+/gi,n=t.trim().replace(e," ").split(" ").length,o=t.length,r=t.trim().length,c=t.replace(e,"").length;$("#wordCount").html(n),$("#totalChars").html(o),$("#charCount").html(r),$("#charCountNoSpace").html(c)},$(document).ready(function(){$("#count").click(counter),$("#text").change(counter),$("#text").keydown(counter),$("#text").keypress(counter),$("#text").keyup(counter),$("#text").blur(counter),$("#text").focus(counter)});
</script>
Outils Script pour Mnificateur CSS
<div dir="ltr" style="text-align: left;" trbidi="on"> <div id="cssminifier"> <style scoped="" type="text/css">.night-mode #cssminifier .button-group{float:none;background:#444852;} .night-mode #cssminifier textarea{background-color:#202442;box-shadow:inset 0 3px #202442;color: white;} .night-mode #cssminifier{background:#2d3158;} #outer-wrapper {margin:0 auto;text-align:left;float:none;background-position:center!important;} #post-wrapper {width:100%;max-width:100%;margin:0 auto;text-align:left;float:none;background-position:center!important;} .post-body,.post{background-position:center!important;} .post-body p{margin:0} #blog1,#artikel,.blog-posts{background-position:center!important;} #comments,#sidebar-wrapper,#menu-wrap {display:none;margin-top:0;margin:0;} #main-wrapper{padding:0;width:100%;border:0} #cssminifier{background:#ecf0f1;position:relative;display:block;clear:both;border-radius:5px;padding:20px} #cssminifier textarea{width:100%;height:240px;margin:0 auto;display:block;background-color:#fff;padding:20px;font-family:Monospace;font-size:13px;border:0;border-radius:5px 5px 0 0;resize:none;box-shadow:inset 0 3px #cdd1d2} textarea:focus{background-color:#fff;color:#303030} #cssminifier .box{margin:10px auto 30px;color:#fff;font-size:90%} #cssminifier .box p{margin:0 0 2px} #cssminifier button{cursor:pointer;} #cssminifier .col{width:48%;margin:0 auto 30px} #cssminifier .left{float:left;margin-left:1%} #cssminifier .right{float:right;margin-right:1%} #cssminifier .button-group{float:none;background:#4d6a79;text-align:center;padding:20px 20px 40px 20px;margin:0;border-radius:0 0 5px 5px} #cssminifier button,#cssminifier button[disabled]:active{background:rgba(255,255,255,.3);text-align:center;color:#fff;display:inline-block;padding:8px 16px;font-size:13px;font-weight:400;line-height:1.471;border-radius:99em;margin:0 5px;border:0;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1);transition:all .3s} #cssminifier button:hover,#cssminifier button:active{background:rgba(255,255,255,.5);color:#fff;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)} #cssminifier button[disabled],#cssminifier button[disabled]:active{background:rgba(255,255,255,.5);color:#fff;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)} #cssminifier .opt1,#cssminifier .opt2,#cssminifier .opt3,#cssminifier .opt4,#cssminifier .opt5{display:inline-block;margin:0 3px 0 10px;vertical-align:middle;border:none;outline:none} #cssminifier br{display:none} .option-input{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none;position:relative;right:0;bottom:0;left:0;height:16px;width:16px;transition:all 0.15s ease-out 0s;background:rgba(255,255,255,.3);border:0;color:#fff;cursor:pointer;display:inline-block;margin-right:0.5rem;outline:none;position:relative;border-radius:99em} .option-input:hover{background:rgba(255,255,255,.3)} .option-input:checked{background:rgba(0,0,0,.2);animation:rubberBand 1s} .option-input:checked::before{height:16px;width:16px;position:absolute;content:'\f00c';font-family:fontawesome;display:inline-block;font-size:12.66667px;text-align:center;line-height:16px} .option-input:checked::after{-webkit-animation:click-wave 0.65s;-moz-animation:click-wave 0.65s;animation:click-wave 0.65s;background:#40e0d0;content:'';display:block;position:relative;z-index:100} .option-input.radio{border-radius:50%} .option-input.radio::after{border-radius:50%} </style> <br /> <span class="clear"></span><br /> <textarea autofocus="" id="cssField" placeholder="Paste your CSS code here..."></textarea> <br /> <div class="button-group"> <div class="box"> <input class="option-input checkbox opt1" id="stripAllComment" type="checkbox" /> <br /> <label> Strip all comments</label><br /> <input class="option-input checkbox opt2" id="superCompact" type="checkbox" /> <br /> <label> Super compact</label><br /> <input class="option-input checkbox opt3" id="betterIndentation" type="checkbox" /> <br /> <label> Keep indentation</label><br /> <input checked="" class="option-input checkbox opt4" id="keepLastComma" type="checkbox" /> <br /> <label> Remove the last semicolon</label> </div> <button class="ripplelink" onclick="compressCSS("cssField");">Compress CSS</button><br /> <button class="ripplelink" onclick="clearField("cssField");">Clear Field</button> <br /> <button class="ripplelink" onclick="selectAll("cssField");">Select All</button> </div> <div class="clear"> </div> <script type="text/javascript">function get(e){return document.getElementById(e)}function highlightCode(e){if(hc.checked){var a=e.innerHTML;a=a.replace(/\{([\s\S]+?)\}/g,function(e){return e.replace(/\'(.*?)\'/g,"<span class='st'>'$1'</span>").replace(/\"(.*?)\"/g,"<span class='st'>\"$1\"</span>").replace(/(\{|\n|;)?(.[^\{]*?):(.[^\{]*?)(;|\})/g,"$1<span class='pr'>$2</span>:<span class='vl'>$3</span>$4").replace(/<span class='pr'>\{/g,"{<span class='pr'>")}),a=a.replace(/<(.*?)('|")(.*?)('|")>/g,function(e){return e.replace(/'(.*?)'/g,"<span class='vl'>'$1'</span>").replace(/"(.*?)"/g,"<span class='vl'>\"$1\"</span>")}),a=a.replace(/\{([\s\S]+?)\}/g,function(e){return e.replace(/([\(\)\{\}\[\]\:\;\,]+)/g,"<span class='pn'>$1</span>").replace(/\!important/gi,"<span class='im'>!important</span>")}),a=a.replace(/\/\*([\w\W]+?)\*\//gm,"<span class='cm'>/*$1*/</span>"),e.innerHTML="<code>"+a+"</code>",hr.style.display="block",rt.style.display="block"}else hr.style.display="none",rt.style.display="none"}function compressCSS(e){var a=get(e),c=/@(media|-w|-m|-o|keyframes|page)(.*?)\{([\s\S]+?)?\}\}/gi,n=a.value,t=n.length;n=sa.checked||sc.checked?n.replace(/\/\*[\w\W]*?\*\//gm,""):n.replace(/(\n+)?(\/\*[\w\W]*?\*\/)(\n+)?/gm,"\n$2\n"),n=n.replace(/([\n\r\t\s ]+)?([\,\:\;\{\}]+?)([\n\r\t\s ]+)?/g,"$2"),n=sc.checked?n:n.replace(/\}(?!\})/g,"}\n"),n=bi.checked?n.replace(c,function(e){return e.replace(/\n+/g,"\n ")}):n.replace(c,function(e){return e.replace(/\n+/g,"")}),n=bi.checked&&!sc.checked?n.replace(/\}\}/g,"}\n}"):n,n=bi.checked&&!sc.checked?n.replace(/@(media|-w|-m|-o|keyframes)(.*?)\{/g,"@$1$2{\n "):n,n=cm.checked?n.replace(/;\}/g,"}"):n.replace(/\}/g,";}").replace(/;+\}/g,";}").replace(/\};\}/g,"}}"),n=n.replace(/\:0(px|em|pt)/gi,":0"),n=n.replace(/ 0(px|em|pt)/gi," 0"),n=n.replace(/\s+\!important/gi,"!important"),n=n.replace(/(^\n+|\n+$)/,""),a.value=n,hr.innerHTML="/* "+(t-n.length)+" of "+t+" unused characters has been removed. */\n"+n.replace(/</g,"<").replace(/>/g,">"),highlightCode(hr)}function clearField(e){var a=get(e);a.value="",a.focus()}function selectAll(e){get(e).focus(),get(e).select()}var hc=get("highlightCode"),sa=get("stripAllComment"),sc=get("superCompact"),cm=get("keepLastComma"),bi=get("betterIndentation"),bs=get("breakSelector"),tt=get("toTab"),to=get("tabOpt").getElementsByTagName("input"),sb=get("spaceBetween"),ip=get("inlineSingleProp"),rs=get("removeLastSemicolon"),il=get("inlineLayout"),si=get("singleBreak"),hr=get("highlightedResult"),rt=document.getElementsByTagName("h2")[1]; </script><br /> </div> </div
Outils Script d'analyse HTML en ligne
<div dir="ltr" style="text-align: left;" trbidi="on"> <div id="html-parse"> <style scoped="" type="text/css"> .night-mode #html-parse .button-group{float:none;background:#444852;}.night-mode #html-parse textarea{background-color:#202442;box-shadow:inset 0 3px #202442;color:white;}.night-mode #html-parse{background:#2d3158;}#outer-wrapper{margin:0 auto;text-align:left;float:none;background-position:center!important;}#post-wrapper{width:100%;max-width:100%;margin:0 auto;text-align:left;float:none;background-position:center!important;}.post-body,.post{background-position:center!important;}.post-body p{margin:0;}#blog1,#artikel,.blog-posts{background-position:center!important;}#comments,#sidebar-wrapper,#menu-wrap{display:none;margin-top:0;margin:0;}#main-wrapper{padding:0;width:100%;border:0;}#html-parse{background:#ecf0f1;position:relative;display:block;clear:both;border-radius:5px;padding:20px;}#html-parse textarea{width:100%;height:240px;margin:0 auto;display:block;background-color:#fff;padding:20px;font-family:Monospace;font-size:13px;border:0;border-radius:5px 5px 0 0;resize:none;box-shadow:inset 0 3px #cdd1d2;}textarea:focus{background-color:#fff;color:#303030;}#html-parse .box{margin:10px auto 30px;color:#fff;font-size:90%;}#html-parse .box p{margin:0 0 2px;}#html-parse button{cursor:pointer;}#html-parse .col{width:48%;margin:0 auto 30px;}#html-parse .left{float:left;margin-left:1%;}#html-parse .right{float:right;margin-right:1%;}#html-parse .button-group{float:none;background:#4d6a79;text-align:center;padding:20px 20px 40px 20px;margin:0;border-radius:0 0 5px 5px;}#html-parse button,#html-parse button[disabled]:active{background:rgba(255,255,255,.3);text-align:center;color:#fff;display:inline-block;padding:8px 16px;font-size:13px;font-weight:400;line-height:1.471;border-radius:99em;margin:0 5px;border:0;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1);transition:all .3s;}#html-parse button:hover,#html-parse button:active{background:rgba(255,255,255,.5);color:#fff;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12);}#html-parse button[disabled],#html-parse button[disabled]:active{background:rgba(255,255,255,.5);color:#fff;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12);}#html-parse .opt1,#html-parse .opt2,#html-parse .opt3,#html-parse .opt4,#html-parse .opt5{display:inline-block;margin:0 3px 0 10px;vertical-align:middle;border:none;outline:none;}#html-parse br{display:none;}.option-input{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none;position:relative;right:0;bottom:0;left:0;height:16px;width:16px;transition:all 0.15s ease-out 0s;background:rgba(255,255,255,.3);border:0;color:#fff;cursor:pointer;display:inline-block;margin-right:0.5rem;outline:none;position:relative;border-radius:99em;}.option-input:hover{background:rgba(255,255,255,.3);}.option-input:checked{background:rgba(0,0,0,.2);animation:rubberBand 1s;}.option-input:checked::before{height:16px;width:16px;position:absolute;content:'\f00c';font-family:fontawesome;display:inline-block;font-size:12.66667px;text-align:center;line-height:16px;}.option-input:checked::after{-webkit-animation:click-wave 0.65s;-moz-animation:click-wave 0.65s;animation:click-wave 0.65s;background:#40e0d0;content:'';display:block;position:relative;z-index:100;}.option-input.radio{border-radius:50%;}.option-input.radio::after{border-radius:50%;} </style> <br /> <span class="clear"></span><br /> <textarea autofocus="" id="codes" placeholder="Paste your HTML code here..."></textarea> <br /> <div class="button-group"> <div class="box"> <input checked="" class="option-input checkbox opt1" id="opt1" type="checkbox" /> <br /> <label> Convert [&]</label><br /> <input checked="" class="option-input checkbox opt2" id="opt2" type="checkbox" /> <br /> <label> Convert [<]</label><br /> <input checked="" class="option-input checkbox opt3" id="opt3" type="checkbox" /> <br /> <label> Convert [>]</label><br /> <input checked="" class="option-input checkbox opt4" id="opt4" type="checkbox" /> <br /> <label> Convert ["]</label> <input checked="" class="option-input checkbox opt5" id="opt5" type="checkbox" /> <br /> <label> Convert [']</label> </div> <button class="ripplelink" onclick="cdConvert();">Convert HTML</button><br /> <button class="ripplelink" onclick="clearField("codes");">Clear Field</button> <br /> <button class="ripplelink" onclick="selectAll("codes");">Select All</button> </div> <div class="clear"> </div> <script type="text/javascript"> function get(e){return document.getElementById(e)}function cdConvert(e){var t=document.getElementById("codes"),c=t.value,g=document.getElementById("opt1"),n=document.getElementById("opt2"),l=document.getElementById("opt3"),o=document.getElementById("opt4"),a=document.getElementById("opt5");c=c.replace(/\t/g," "),g.checked&&(c=c.replace(/&/g,"&")),n.checked&&(c=c.replace(/</g,"<")),l.checked&&(c=c.replace(/>/g,">")),o.checked&&(c=c.replace(/"/g,""")),a.checked&&(c=c.replace(/'/g,"'")),t.value=c}function clearField(e){var t=get(e);t.value="",t.focus()}function selectAll(e){get(e).focus(),get(e).select()}var hc=get("highlightCode"),sa=get("stripAllComment"),sc=get("superCompact"),cm=get("keepLastComma"),bi=get("betterIndentation"),bs=get("breakSelector"),tt=get("toTab"),to=get("tabOpt").getElementsByTagName("input"),sb=get("spaceBetween"),ip=get("inlineSingleProp"),rs=get("removeLastSemicolon"),il=get("inlineLayout"),si=get("singleBreak"),hr=get("highlightedResult"),rt=document.getElementsByTagName("h2")[1]; </script><br /> </div> </div>