Scripts utiles et necessaires pour blogger blogspot
Lorsqu’on créent un blog sur la plateforme gratuite blogger , il ne faut pas s’attendre a des miracles .
pour celà , je vous propose quelques scripts à intégrer à votre code HTML pour mettre à niveau votre blog afin qu’il soit compétitif , niveau SEO et trafic
Voici quelques java scripts utiles et faciles à y intégrer ainsi que quelques autres fonctionnalités intéressante :
1 – Script pour forcer vos utilisateurs à désactiver AD-BLOCKER
Si vous affichez des bannieres publicitaires sur votre blog vous allez avoir besoin de ce script
Ajoutez un Gadjet Javascript et collez ce script dedans :
[<style>
#h237 {
background-color: #fcfcfc;
opacity: .99;
display: table;
position: fixed!important;
position: absolute;
z-index: 9999!important;
width: 100%;
height: 100%;
top: 0;
top: expression((t=document.documentElement.scrollTop?document.documentElement.scrollTop: document.body.scrollTop)+ »px »);
bottom: 0;
right: 0;
left: 0;
padding: 2% 0
}
#h237 p {
font-family: ‘Open Sans’, sans-serif;
font-size: 20px;
font-weight: normal;
color: #7a7a7a;
line-height: 30px;
text-decoration: none;
text-align: center;
display: table-cell;
vertical-align: middle;
margin: 0 auto
}
#h237 p a {
background: #979797;
display: block;
font-family: ‘Open Sans’, sans-serif;
font-weight: 700;
font-size: 14px;
color: #fff!important;
line-height: initial;
text-align: center;
text-transform: uppercase;
letter-spacing: .5px;
width: 100px;
padding: 10px;
border-radius: 3px;
margin: 30px auto;
clear: both;
transition: all .3s ease-out
}
#h237 p a:hover {
background: #ff4e00;
color: #fff
}
#h237~ * {
display: none
}
</style>
<div id= »h237″>
<span>Mohon Aktifkan Javascript!<a href= »http://www.enable-javascript.com/ »>Enable JavaScript</a></span>
</div>
<script>
/*<![CDATA[*/
window.document.getElementById(« h237 »).parentNode.removeChild(window
.document.getElementById(« h237 »));
(function(b, a) {
function e(f) {
f && h237.nextFunction()
}
var c = b.document,
d = [« i », « s », « u »];
e.prototype = {
rand: function(f) {
return Math.floor(Math.random() * f)
},
getElementBy: function(g, f) {
return g ? c.getElementById(g) : c.getElementsByTagName(f)
},
getStyle: function(g) {
var f = c.defaultView;
return f && f.getComputedStyle ? f.getComputedStyle(g, null) : g.currentStyle
},
deferExecution: function(f) {
setTimeout(f, 250)
},
insert: function(i, h) {
var n = c.createElement(« span »),
o = c.body,
p = o.childNodes.length,
l = o.style,
m = 0,
j = 0;
if (« h237 » == h) {
n.setAttribute(« id », h);
l.margin = l.padding = 0;
l.height = « 100% »;
for (p = this.rand(p); m < p; m++) {
1 == o.childNodes[m].nodeType && (j = Math.max(j, parseFloat(this.getStyle(o.childNodes[m]).zIndex) || 0))
}
j && (n.style.zIndex = j + 1);
p++
}
n.innerHTML = i;
o.insertBefore(n, o.childNodes[p – 1])
},
displayMessage: function(g) {
var f = this;
g = « abisuq ».charAt(f.rand(5));
f.insert(‘<p>VEILLEZ DESACTIVER AD-BLOCK SVP MERCI<br/><br/><img border= »0″ src= »https://lh3.googleusercontent.com/-L0N72E8E9NQ/Vzrq-aAsrLI/AAAAAAAAENQ/4t2LPjMDYGQIejFrOFVIqJYUpzCDeI5uACCo/I/Disable-Adblock.png » /><br/><br/>CE SITE A BESOIN D’AFFICHER DES PUBS<br/>SVP DESACTIVEZ AD-BLOCK AFIN DE ET ا<a href= »JavaScript:window.location.reload() »>ACTUALISEZ LA PAGE</a></p>
‘, « h237 »);
c.addEventListener && f.deferExecution(function() {
f.getElementBy(« h2a37 »).addEventListener(« DOMNodeRemoved », function() {
f.displayMessage()
}, !1)
})
},
i: function() {
for (var h = « DivTopAd,ad-zone-1,ad_190x90,ads-sticky,iqadtile5,leftframeAD,tobsideAd,ad,ads,adsense ».split(« , »),
f = h.length, j = « », k = this, l = 0, i = « abisuq ».charAt(k.rand(5)); l < f; l++) {
k.getElementBy(h[l]) || (j += « < » + i + ‘ id= »‘ + h[l] + ‘ »></’ + i + « > »)
}
k.insert(j);
k.deferExecution(function() {
for (l = 0; l < f; l++) {
if (null == k.getElementBy(h[l]).offsetParent || « none » == k.getStyle(k.getElementBy(h[l])).display) {
return k.displayMessage(« # » + h[l] + « ( » + l + « ) »)
}
}
k.nextFunction()
})
},
s: function() {
var i = {
« pagead2.googlesyndic »: « google_ad_client »,
« js.adscale.de/getads »: « adscale_slot_id »,
« get.mirando.de/miran »: « adPlaceId »
},
h = this,
n = h.getElementBy(0, « script »),
o = n.length – 1,
p, l, m, j;
c.write = null;
for (c.writeln = null; 0 <= o; –o) {
if (p = n[o].src.substr(7, 20), i[p] !== a) {
m = c.createElement(« script »);
m.type = « text/javascript »;
m.src = n[o].src;
l = i[p];
b[l] = a;
m.onload = m.onreadystatechange = function() {
j = this;
b[l] !== a || j.readyState && « loaded » !== j.readyState && « complete » !== j.readyState || (b[l] = m.onload = m.onreadystatechange = null, n[0].parentNode.removeChild(m))
};
n[0].parentNode.insertBefore(m, n[0]);
h.deferExecution(function() {
if (b[l] === a) {
return h.displayMessage(m.src)
}
h.nextFunction()
});
return
}
}
h.nextFunction()
},
u: function() {
var g = « ad&adv_keywords=,-page-peel/,/adchain.,/adfootright.,/adsxml/ad,/adyard300
.,/impopup/ad,/loadadsparam.,/meme_ad.,_adshare. ».split(« , »),
f = this,
h = f.getElementBy(0, « img »),
i, j;
h[0] !== a && h[0].src !== a && (i = new Image, i.onload = function() {
j = this;
j.onload = null;
j.onerror = function() {
d = null;
f.displayMessage(j.src)
};
j.src = h[0].src + « # » + g.join(« »)
}, i.src = h[0].src);
f.deferExecution(function() {
f.nextFunction()
})
},
nextFunction: function() {
var f = d[0];
f !== a && (d.shift(), this[f]())
}
};
b.h237 = h237 = new e;
c.addEventListener ? b.addEventListener(« load », e, !1) : b.attachEvent(« onload », e)
})(window); /*]]>*/
</script>]
4-Script pour inserrer un site web dans une page de votre blog
Par exemple si vous etes dans la Photo vous pourriez y proposer dans votre site l’interface de PHOTOSHOP en ligne pour vos visiteurs…etc
mettez l’adresse du du site en question comme photoqhop à la place en charactèeres gras
et collez ce script dans une page ( Rédaction HTML) et collez le seul :
[<iframe height= »600″ src= »Nom du site » rel= »nofollow » width= »100% »></iframe>]
2-Ajouter RECHERCHE VOCALE à blogger :
Collez le script dans un nouveau gadjet javascript en veillant à inserer l’adresse de ton site et la langue de tes articles ex :(fr-fr) pour la france …
tu trouvera en gras les emplacements
[ <!– CSS Styles –>
<style> .speech {border: 1px solid #DDD; width: 100%; padding: 0; margin: 0} .speech input {border: 0; width: 80%; display: inline-block; height: 30px;} .speech img {float: right; width: 40px }</style>
<!– Search Form –><form id= »arabes1″ method= »get » action= »TON SITE/search »> <div class= »speech »> <input type= »text » name= »q » id= »transcript » placeholder= »Speak » /> <img onclick= »startDictation() » src= »//i.imgur.com/cHidSVu.gif » /> </div></form><!– HTML5 Speech Recognition API –><script> function startDictation() { if (window.hasOwnProperty(‘webkitSpeechRecognition’)) { var recognition = new webkitSpeechRecognition(); recognition.continuous = false; recognition.interimResults = false; recognition.lang = « eng-US« ; recognition.start(); recognition.onresult = function(e) { document.getElementById(‘transcript’).value = e.results[0][0].transcript; recognition.stop(); document.getElementById(‘arabes1’).submit(); }; recognition.onerror = function(e) { recognition.stop(); } } }</script>]
3- Script pour traduire ton site dans toutes les langues :
Toujours ajouter un gadjet javascript et collez ce script dedans , vous aurez un translate sur place et ceci va optimiser votre SEO et vouys attirer de nouveaux lecteurs d’autres langues
Remplacez fr par la langue de votre site si ce n’est pas le francais
[<style type= »text/css »>
#translator-wrapper {
display:block;
width:90%;
max-width:300px;
border:none;
background-color:#fff;
color:#444;
overflow:hidden;
position:relative;
height:40px;
line-height:40px;
border:1px solid #e0e0e0;
}
#translator-wrapper select {
border:none;
background:transparent;
font-family:’Verdana’,Arial,Sans-Serif;
font-size:15px;
width:100%;
color:#444;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
-webkit-appearance:none;
cursor:text;
padding:5px 85px;
}
#translator-wrapper a,
#translator-wrapper a:hover {
display:block;
background-color:#4791d2;
border:none;
color:#fff;
margin:0 0;
text-decoration:none;
position:absolute;
top:0;
right:0;
bottom:0;
cursor:pointer;
width:14%;
transition:all 0.3s ease;
}
#translator-wrapper a:before {
content: » »;
display:block;
width:0;
height:0;
border:6px solid transparent;
border-left-color:white;
position:absolute;
top:50%;
left:45%;
margin-top:-5px;
}
#translator-wrapper a:hover {opacity:0.9;}
#translator-wrapper a:active {opacity:0.9;}
#translator-wrapper select:focus,
#translator-wrapper a:focus,
#translator-wrapper select:active,
#translator-wrapper a:active {
border:none;
outline:none;
cursor:pointer;
}
option {
background:#444;
color:#e0e0e0;
}
</style>
<div id= »translator-wrapper »>
<select id= »translate-language »>
<option value= »en » selected= »selected »>English</option>
<option value= »id »>Indonesian</option>
<option value= »af »>Afrikaans</option>
<option value= »sq »>Albanian</option>
<option value= »ar »>Arabic</option>
<option value= »hy »>Armenian</option>
<option value= »az »>Azerbaijani</option>
<option value= »eu »>Basque</option>
<option value= »be »>Belarusian</option>
<option value= »bn »>Bengali</option>
<option value= »bg »>Bulgarian</option>
<option value= »ca »>Catalan</option>
<option value= »zh-CN »>Chinese</option>
<option value= »hr »>Croatian</option>
<option value= »cs »>Czech</option>
<option value= »da »>Danish</option>
<option value= »nl »>Dutch</option>
<option value= »en »>English</option>
<option value= »eo »>Esperanto</option>
<option value= »et »>Estonian</option>
<option value= »tl »>Filipino</option>
<option value= »fi »>Finnish</option>
<option value= »fr »>French</option>
<option value= »gl »>Galician</option>
<option value= »ka »>Georgian</option>
<option value= »de »>German</option>
<option value= »el »>Greek</option>
<option value= »gu »>Gujarati</option>
<option value= »ht »>Haitian Creole</option>
<option value= »iw »>Hebrew</option>
<option value= »hi »>Hindi</option>
<option value= »hu »>Hungarian</option>
<option value= »is »>Icelandic</option>
<option value= »id »>Indonesian</option>
<option value= »ga »>Irish</option>
<option value= »it »>Italian</option>
<option value= »ja »>Japanese</option>
<option value= »kn »>Kannada</option>
<option value= »ko »>Korean</option>
<option value= »la »>Latin</option>
<option value= »lv »>Latvian</option>
<option value= »lt »>Lithuanian</option>
<option value= »mk »>Macedonian</option>
<option value= »ms »>Malay</option>
<option value= »mt »>Maltese</option>
<option value= »no »>Norwegian</option>
<option value= »fa »>Persian</option>
<option value= »pl »>Polish</option>
<option value= »pt »>Portuguese</option>
<option value= »ro »>Romanian</option>
<option value= »ru »>Russian</option>
<option value= »sr »>Serbian</option>
<option value= »sk »>Slovak</option>
<option value= »sl »>Slovenian</option>
<option value= »es »>Spanish</option>
<option value= »sw »>Swahili</option>
<option value= »sv »>Swedish</option>
<option value= »ta »>Tamil</option>
<option value= »te »>Telugu</option>
<option value= »th »>Thai</option>
<option value= »tr »>Turkish</option>
<option value= »uk »>Ukrainian</option>
<option value= »ur »>Urdu</option>
<option value= »vi »>Vietnamese</option>
<option value= »cy »>Welsh</option>
<option value= »yi »>Yiddish</option>
</select><a id= »translate-me » href= »# » title= »Translate »></a>
</div>
<script type= »text/javascript »>
(function() {
var mylang = « fr« , // Your website language anchor = document.getElementById(‘translate-me’);
anchor.onclick = function() {
window.open(‘http://translate.google.com/translate?u=’ + encodeURIComponent(location.href) + ‘&langpair=’ + mylang + ‘%7C’ + document.getElementById(‘translate-language’).value + ‘&hl=en’);
return false;
};
})();
</script>]
4-Ajouter des annonces Google Adsense au milieux d’un article web
Allez sur le code HTML de votre site web et chercher avec CTRL+F ce bout de code <data:post.body/> , vous allez en trouver 3 ou 4 , choisissez le deusieme , si non le troisiemme et remplacez le par le code suivant :
[<div expr:id='"adsmiddle1" + data:post.id'></div><b:ifcond='data:blog.pageType == "item"'><b:ifcond='data:blog.pageType != "static_page"'><div style="clear:both; margin:10px 0"><!-- Ajouter le code adsense ici --></div></b:if></b:if><div expr:id='"adsmiddle2" + data:post.id'><data:post.body/></div><script type="text/javascript">varobj0=document.getElementById("adsmiddle1<data:post.id/>");varobj1=document.getElementById("adsmiddle2<data:post.id/>");vars=obj1.innerHTML;varr=s.search(/\x3C!-- adsense --\x3E/igm);if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}</script>]
Ensuite inserrez votre code Adsense juste apres <!– Ajouter le code adsense ici –>
Et si vous rencontrez un probleme XML et vos changement ne veulent pas s’enregistrer , vous allez devoir convertir votre code d’annonce Adsense dans ce convertisseur avant de le coller aprés <!– Ajouter le code adsense ici –>
5-INSTALLER LA PUBLICITÉ ADSENSE AU MILIEUX OU BIEN A N’IMPORTE QUEL ENDROIT QUE VOUS VOULEZ DANS VOTRE ARTICLE DE BLOG SUR BLOGGER BLOGSPOT :
Avant toute chose vous devez enregistrer votre Template en cas ou vous faites une erreur (faite une sauvegarde de votre thème de blog)
Commencez par Chercher ce morceau de code <data:post.body/> dans l’html de votre blog : CTRL+F puis copier ce code et appuyez sur entrer
Choisissez le deuxième si non vous allez devoir refaire toute l’opération l’operation avec le troisième morceau de code dans votre html de thème Blogger
Remplacez le avec le code html suivant :
[<div expr:id=' »adsmiddle1″ + data:post.id’></div><b:if cond=’data:blog.pageType == « item »‘><b:if cond=’data:blog.pageType != "static_page"’><div style= »clear:both; margin:10px 0″><!– Add here the code of your ad –></div></b:if></b:if><div expr:id=' »adsmiddle2″ + data:post.id’><data:post.body/></div><script type= »text/javascript »>var obj0=document.getElementById(« adsmiddle1<data:post.id/> »);var obj1=document.getElementById(« adsmiddle2<data:post.id/> »);var s=obj1.innerHTML;var r=s.search(/\x3C!– adsense –\x3E/igm);if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}</script>]
Allez sur adsense et ramenez le code de votre annonce responsive en suite sur ce site et
Convertissez le (mettez le juste dans le rectangle et appuyez sur convertir
Copiez le
Collez le juste aprés <!– Add here the code of your ad –> qui apparait dans le code que vous avez rajouté la première fois (regardez en haut)
Vous allez maintenant remarquer que votre publicité s’affiche mais juste aprés votre premier titre dans l’article !!
Mais ce n’est pas ce que vous voulez n’est ce pas !! d’accord on va régler ça
Vous allez devoir ajouter ce bout de code dans l’endroit exacte où vous voulez que votre annonce apparaisse !!!
Pour cela , vous allez mettre votre article dans le mode HTML et pas Rédiger !! et ensuite coller ce petit code <!– adsense –> exactement à l’endroit ou voulez que votre annonce s’affiche !! mais vous devez toujours le coller derrière une balise <br /> comme dans l’image et c’est tout !!
Vous ne pouvez afficher avec cette méthode qu’une seule annonce par article et il faut mettre le petit code <!– adsense –> dans tout les articles de façon manuelle mais le premier grand code que vous avez installé au début il va être opérationnel pour tout les articles de votre blog
Voici le résultat :
Vous pouvez installer de cette manière n’importe quelle annonce dans vos articles , je ne sais pas est ce que on peut afficher plus d’une annonce dans le même article , j’ai essayé juste une fois et ça n’a pas marché et je n’ai pas cherché à comprendre
dites le moi dans un commentaire si vous avez réussi à installer deux ou plusieurs annonces adsense dans le même article
Merci
Bonne chance
Conclusion
Blogger a de beaux jours devant lui , mais il a besoin d’un coup de pousse
j’espère que cet article vous a plu
laissez moi un commentaire si vous avez besoin de conseils
SAMY
