Créer une barre News Ticker pour votre Blogger

Un mélange de code html, CSS, et PHP ressemble à une chose difficile à réaliser. La planification du code et l'organisation peuvent refléter une Multi-tache difficile à imaginer. Tous nous avons des idées qui se propagent dans notre pensée et qu'on aiment qu'ils soient réaliser dans les Templates dans nos sites.

Le monde de la création de site est un domaine ouvert pour la créativité, il n'y a pas de méthode magiques pour écrire un code, bien sur il y a une forme dites universel pour l'organisation de votre code. Ou écrire votre code HTML?, ou écrire votre code CSS, ou PHP?

N'oubliez pas qu'il y a encore plusieurs possibilités qui se présentent selon la complexité de votre code, selon le mode d'intervention de votre hébergeur ainsi le type de votre support.


Aujourd'hui je vais vous présenter une un code qui vous permettra d'afficher une barre News Ticker qui vous permettra en oeuvre une barre déroulante de titre qui se présentent dans la page d’accueil de votre blog.

Pour commencer je vais vous présenter le code, puis je vais vous expliquer comment vous pouvez y changer les différents paramètres:




<tr><td><div style="position:relative;overflow:hidden;width:600px;height:20px;" onmouseover="copyspeed=pausespeed" onmouseout="copyspeed=memoryspeed"><div id="memoryscroller"
style="position: absolute;right:40px; top: 0px;"><nobr><script type="text/javascript"
async="" src="https://apis.google.com/js/plusone.js" gapi_processed="true"></script><script type="text/javascript">
var nMaxPosts =8;
        var nWidth = 100;
        var nScrollDelay = 0;
        var sDirection = "left";
        var sOpenLinkLocation = "N";
        var sBulletChar = "✿"
</script>
<script type="text/javascript">
function RecentPostsScrollerv2(json) {
var sHeadLines;
var sPostURL;
var objPost;
var sMoqueeHTMLStart;
var sMoqueeHTMLEnd;
var sPoweredBy;
var sHeadlineTerminator;
var sPostLinkLocation;

try {

sMoqueeHTMLStart = "\<MARQUEE behavior=\"scroll\" onmouseover=\"this.stop();\" onmouseout=\"this.start();\" ";

if (nWidth) {
sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"" + nWidth + "%\"";
} else {
sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"100%\"";
}
if (nScrollDelay) {
sMoqueeHTMLStart = sMoqueeHTMLStart + " scrolldelay = \"" + nScrollDelay + "\"";
}
if (sDirection) {
sMoqueeHTMLStart = sMoqueeHTMLStart + " direction = \"" + sDirection + "\"\>";

if (sDirection == "left" || sDirection == "right") {
sHeadlineTerminator = "&nbsp;&nbsp;";
} else {
sHeadlineTerminator = "\<br/\>";
}
}
if (sOpenLinkLocation == "N") {
sPostLinkLocation = " target= \"_blank\" ";
} else {
sPostLinkLocation = " ";
}
sMoqueeHTMLEnd = "\</MARQUEE\>"

sHeadLines = "";

for (var nFeedCounter = 0; nFeedCounter < nMaxPosts; nFeedCounter++) {
var objPost = json.feed.entry[nFeedCounter];

if (nFeedCounter == json.feed.entry.length) break;

for (var nCounter = 0; nCounter < objPost.link.length; nCounter++) {
if (objPost.link[nCounter].rel == 'alternate') {
sPostURL = objPost.link[nCounter].href;
break;
}
}
sHeadLines = sHeadLines + "\<b\>" + sBulletChar + "\</b\> \<a " + sPostLinkLocation + " href=\"" + sPostURL + "\">" + objPost.title.$t + "\</a\>" + sHeadlineTerminator;
}

if (sDirection == "left") {
sHeadLines = sHeadLines + "&nbsp;&nbsp;" + sPoweredBy;
} else if (sDirection == "right") {
sHeadLines = sPoweredBy + "&nbsp;&nbsp;" + sHeadLines;
} else if (sDirection == "up") {
sHeadLines = sHeadLines + "\<br/\>" + sHeadLines;
}
document.write(sMoqueeHTMLStart + sHeadLines + sMoqueeHTMLEnd)
} catch (exception) {
alert(exception);
}
}</script>
<script src="http://www.toubibpc.info//feeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2&amp;max-results=7"
 type="text/javascript"></script></nobr></div></div></td></tr>

Il y aura certaines modifications dans la forme du bloc et dans les jeux de couleurs, si vous avez besoin de changer un paramètre envoyez moi un mail et je le ferai pour vous. Mon adresse mail est: chett.khalid@gmail.com 
Le résultat sera de cette façon:

Ou mettre votre code?

Bien-sur vous vous demandez tous, voila nous avons un code bien construit. Mais ou le mettre? Blogger nous permet de construire des barres de navigation partout ou nous voulons donc vous pouvez tout simplement ajouter des barres en suivant les étapes suivantes:

Dans le menu à gauche cliquez sur Mise en page

Cliquez sur Ajouter Gadget dans la barre transversale 

HTML/JavaScript vous permet d’intégrer du code et l'afficher

1= C'est là ou vous devez mettre le titre
2=Le code sera écrit dans cette zone
3=N'oubliez pas d'enregistrer 

Si vous avez besoin de plus d'assistance je sera à votre disposition, soi avec la rubrique contact ou via des commentaires en bas de nos articles ou dans les murs des pages dans les réseaux sociaux,  vous pouvez aussi m'envoyer des mails dans l'adresse suivantes: chett.khalid@gmail.com