Je vous avais présenté sur ce billet, une présentation différente du script qui circule sur le net. Pour réaliser ce gadget, j'ai évidement exploité les scripts, assimilé JSON et ajouté du javascript et DOM essentiellement qui rendent un "effet" Ajax. Mais je vais passer rapidement sur ces points un peu technique ;)
Comment ça fonctionne ?
Sans rentrer dans les détails, le gadget cherche dans vos flux RSS (transformés en JSON), les derniers billets et les derniers commentaires. Il charge dynamiquement les donnés dans des balises DIV.
- ShowLPCMenu: les liens ♥ » Billets » Commentaires
- ShowLPCTitre: affiche l'opération en cours et le status
- ShowLPCContenu: affiche le résultat
- ShowLPCauteur: tout comme ♥, un lien pour remercier votre humble serviteur :D
Ce sont sur ces identifiants qu'il faudra travailler pour avoir un style sympa. Je vous ai mis un exemple de code CSS que vous pouvez changer of course :) Le gadget envoi les infos sous forme d'une liste ul-li. Voici une illustration pour voir le tout d'un coups d'oeil (fait sous paint xD).
Assez de blabla, passons à la pratique !
Avant de commencer...
/!\ Faites une sauvegarde de votre template !
- Connectez-vous via le draft.blogger.com.
- Tableau de bord > Mise en page > Modifier le code HTML
le code CSS à insérer
Cherchez (CTRL-F)
]]></b:skin>
Juste avant, insérez le code ci'dessous:
/*++++++ LastPostsComments by ACKOREA ++++++++*/ #ShowLPCauteur {font-size:0.7em;float:right;} #ShowLPCauteur a {text-decoration:none;padding:2px;} #ShowLPCauteur a:hover {background-color:#DAEBF3;color:#000000;padding:2px;} #ShowLPCMenu {margin:5px 0 10px 5px;} #ShowLPCMenu a{border: 1px dashed #999;padding:1px 5px;} #ShowLPCMenu a:hover{border: 1px solid #999;background-color:#EFFAFF;} #ShowLPCTitre {display:none;line-height:16px;margin:5px;padding:5px;background-color:#DAEBF3;font-size:1.1em} #ShowLPCTitre img {border:none;float:right;width:16px;height:16px;} #ShowLPCContenu {display:none;} #ShowLPCContenu ul li {display:block; background:url(http://i34.tinypic.com/bj5mzc.gif) no-repeat; padding-left:30px; padding-bottom:4px; border-bottom:1px dotted #dadada;}
Le gadget aLPC
le Formulaire est détaillé mais si vous avez un doute, demandez ;)
Notez que si le champs est vide, la valeur par défaut sera prise en compte.
Actuellement, il n'est pas possible d'afficher plus de 25 derniers billets ou commentaires, ça sera l'object d'une update si cela s'avère être nécessaire.
/!\ Ce gadget va créer un widget "HTML/Javascript" /!\
(possibilité donc de modifier à l'intérieur etc...)
Lorsque vous aurez installé aLPC, vous serez automatiquement redirigé vers votre tableau de bord > Mise en page > Éléments de la page. Ainsi, vous pourrez glisser/déposer le widget pour le placer où bon vous semble.
Gadget aLPC
Titre du widget:
L'adresse du blog:
N'oubliez pas "http://" et "/" à la fin de l'adresse !
L'adresse de l'image "chargement":
Taille: 16px par 16px | Image par défaut:
Le message du "chargement":
Message par défaut: "Chargement ..." (pour faire patienter, à côté de l'image)
L'adresse de l'image "fermer":
Taille: 16px par 16px | Image par défaut:
Le message de "fermer":
Message par défaut: "Fermer" (dans le cas où l'image est introuvable)
Les X dernier billets:
Pas plus de 25 !
Les X dernier commentaires:
Pas plus de 25 !
Le nombre de caractères dans un commentaire:
Affiche par défaut les 100 premiers caractères de chaque commentaire
Le délai en seconde avant le 1er chargement automatique:
Après 10 secondes, les commentaires apparaitront :)
Pourquoi un délai ?
Ceci automatise la première chargement. Après X secondes, votre blog est totalement affiché dans le navigateur. Mettez X+2 secondes (par exemple) ainsi 2 secondes après, les derniers commentaires seront chargés sans à avoir cliqué !
Si vous utilisez ce gadget, veuillez laisser un des deux liens vers mon blog (♥ ou Widget by acKorea) et un petit commentaire afin de visiter votre blog :). Si ça ne fonctionne pas, si vous ne l'aimez pas, vous avez des critiques, des suggestions, des feedbacks, besoins d'aides, idées d'améliorations etc... Ça se passe ici !
bLoG: ackorea.blogspot.com bY R^, Béa & tOiN0U