Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

04.12.2009

Dynamisez vos notes avec vos archives et LinkWithin

Kielut l'a vu dans d'autres blogs, elle l'a voulu dans le sien. Au bas de chaque note de blog, le widget LinkWithin affiche les liens vers des notes "similaires", selon le contenu, le titre ou les tags. La note explicative d'origine a été publiée sur Upsetdiary, et nous l'avons fait évoluer ensemble pour cette version avec vidéo.


LinkWithin affiche une image en vignette et le titre de chaque note en relation avec la note en cours. Le titre s'affiche seul quand la note en lien ne contient aucune image.

Il suffit de cliquer sur une vignette ou un titre pour lire la note proposée. Ainsi, LinkWithin recycle vos archives et met vos notes en avant.

upsetlinkwithin.gif

puce.gif

Préparez le code à intégrer dans vos pages

Gee Mee recommande de copier les lignes ci-dessous, et de les coller dans un éditeur en mode texte pour préparer le code que vous intégrerez.

<!-- link within /head-->
<script>
var linkwithin_site_id = xxx;
</script><script>linkwithin_text='Your custom text:'</script>
<!-- /link within /head-->

<!-- linkwithin /postbottom-->
<div id="pre linkwithin" style="padding: 0px 0px;">
<div class="linkwithin_div"></div>
<script src="http://www.linkwithin.com/widget.js"></script>
</div>
<!-- /linkwithin /postbottom-->

 

puce.gif

Obtenir le code html partiel pour intégrer le widget LinkWithin

  1. Cliquez ici pour afficher le site LinkWithin - Related Posts with Thumbnails
  2. Remplissez le formulaire. Sélectionnez les valeurs indiquées ci-dessous.
  3. Cochez l'option My blog has light text on a dark background si le texte de votre blog s'affiche sur fond foncé.
Email:
Blog Link:
Platform:
Width:

My blog has light text on a dark background

Get Widget!
Free. No ads. No signups. More traffic.
  1. Cliquez sur le bouton Get Widget! L'écran Install Widget on Other Platforms affiche le code html qui sert à intégrer le widget dans votre blog.

<script>
var linkwithin_site_id = 9537;
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts with Thumbnails" style="border: 0" /></a>

Copiez et collez ce code après celui que vous avez récupéré au début de cette note

Si LinkWithin s'installe automatiquement pour les services de blogging les plus connus, il est nécessaire de personnaliser la présentation d'un blog hautETfort pour que le widget s'affiche correctement.

puce.gif

Finalisez le code à intégrer

  • sb-marker-cont.gifLa valeur var linkwithin_site_id est l'identifiant unique pour votre blog.
    Remplacez donc les "xxx" par l'identifiant que vous venez d'obtenir chez LinkWithin
  • sb-marker-cont.gifLe code <script>linkwithin_text='Your custom text:'</script> est facultatif. Il sert à remplacer la phrase "Vous aimerez peut-être :" qui présente les notes en relation avec la note en cours.
    Au besoin, copiez-collez ce code et remplacez la valeur Your custom text: par votre texte personnalisé (Autres notes au hasard : par exemple)

Nous aurions par exemple les portions de code suivantes

<!-- link within /head-->
<script>
var linkwithin_site_id = 9537;
</script><script>linkwithin_text='Autres notes au hasard :'</script>
<!-- /link within /head-->

<!-- linkwithin /postbottom-->
<div id="pre linkwithin" style="padding: 0px 0px;">
<div class="linkwithin_div"></div>
<script src="http://www.linkwithin.com/widget.js"></script>
</div>
<!-- /linkwithin /postbottom-->

puce.gif

Comment intégrer le wigdet Linkwithin dans un blog hautEtfort?

  1. Cliquez sur l'onglet PRESENTATION de l'Editeur de blog hautETfort.
  2. Cliquez sur Configuration avancée
  3. Cliquez sur Je veux aller dans le design avancé
  4. Face au Modèle de la page lien permanent, cliquez sur Modifier le template
  5. Dans la source html du modèle, localisez la balise </head>
  6. Positionnez vous juste avant, et collez la première portion de code
    comprise entre <!-- link within /head--> et <!-- /link within /head-->
  7. Dans la source html du modèle, localisez la balise <div=class postbottom>
  8. Positionnez vous juste avant, et collez la seconde portion de code
    comprise entre <!-- link within postbottom--> et <!-- /link within postbottom-->
  9. Cliquez sur le bouton Enregistrer les modifications
  10. Fermez la fenêtre Modifier le modèle de la page lien permanent

La ligne <div id="pre linkwithin" style="padding: 0px 0px;"> permet d'ajuster l'alignement du bloc dans lequel s'afficheront les notes repérées par LinkWithin.

N'oubliez pas de vous armer d'un minimum de patience, l'indexation peut prendre un "certain temps". Quand cela sera effectif, vous aurez sans doute la surprise de voir "remonter" des notes oubliées... ou que vous préféreriez oublier.


Vous pourrez compléter la lecture de cette note avec :
Personnaliser l'affichage des notes relatives avec LinkWithin

 

Commentaires

Merci beaucoup, ça marche très bien mais j'aimerais aussi que cela s'affiche au bas des notes qui sont en page d'accueil. C'est possible ?

Écrit par : Octobre | 13.12.2009

Répondre à ce commentaire

Bonjour Octobre. Je me demandais comment le script allait faire pour analyser chaque note et faire des propositions. La réponse est simple, il s'arrête à la première, comme vous pouvez le voir sur ma page d'accueil. L'installation se fait selon la même procédure que pour le modèle de page "lien permanent". Vous nous montrerez ?

Écrit par : Gee Mee | 13.12.2009

J'ai donc modifié le modèle de ma page d'accueil de la même manière que celle employée pour le modèle lien permanent et ça marche (enfin, pas quand Linkwithin est en rade comme actuellement). Je ne comprends pas très bien pourquoi cela ne veut s'afficher que pour la première note mais tant pis. Merci beaucoup pour le truc et surtout pour votre blog, que j'ai découvert par hasard. Je vais me permettre de commenter d'autres notes, histoire de participer à l'échange de trucs et astuces.

Écrit par : Octobre | 15.12.2009

Répondre à ce commentaire

Octobre, je vous remercie à l'avance de votre participation active. Je suis trop peu informé des applications qui sont faites des billets de ce blog ;-)

Écrit par : Gee Mee | 15.12.2009

Bonjour
Merci pour ce blog et ce travail de synthèse qui aide grandement!
Petite question concernant ce widget que j'ai installé: y a-t-il un moyen de le centrer car ce n'est pas très esthétique sinon? J'ai bien essayé la balise text-align... mais ça ne fonctionne pas. Auriez-vous une suggestion?

Merci d'avance!

Écrit par : Angelie | 09.01.2010

Répondre à ce commentaire

Bonjour Angelie, je vous remercie pour votre commentaire.
Quant à la personnalisation de LinkWithin, les moyens d'intervenir sont limités. Toutefois, il est raisonnable d'envisager un "centrage", une encadrement, un arrière-plan, avec la même méthode que pour la personnalisation du lecteur de vidéo. Compte tenu de la personnalisation réussie de votre blog, dont le fond mérite aussi le détour, cette intervention est à votre portée ;-)
Je regarderai plus précisément comment faire.
Bien à vous.

Écrit par : Gee Mee | 10.01.2010

Comment peut on créer un agenda calendrier sur hautetfort afin de lister une série d'évenements s par ordre chronologique

Écrit par : Pierre | 02.04.2010

Répondre à ce commentaire

Pourriez-vous préciser Pierre, s'il vous plaît ? Vous souhaitez quelque chose comme "dernières notes" avec les évènements futurs ?

Écrit par : Gee Mee | 02.04.2010

En fait, j'ai trouvé avec l'agenda google, mais malheureusement, je n'arrive pas à le dimensionner pour être inclus dans ma colone

Écrit par : Pierre | 27.04.2010

Répondre à ce commentaire

Puisque vous aviez déjà posté à la fin de la note « Mon blog est en travaux » sur le même sujet, j'y ai répondu là-bas.
Cliquez sur mon pseudo ci-dessous pour y accéder.

Écrit par : Gee Mee | 28.04.2010

Merci Gee Mee pour ce mode d'emploi. J'espère ne m'etre pas trop mal démmerdée ;)
(et bonjour à tout le monde)

Écrit par : Fiso | 30.01.2011

Répondre à ce commentaire

Comme un chef ! Tu auras noté que tu dois refaire la même chose sur la page d'accueil, si tu veux que cela y soit aussi visible.
Et merci pour les compliments, mais c'est Kielut qu'a commencé ;-)

Écrit par : Gee Mee | 01.02.2011

Widget installé sur mon blog !!! Merci !!!

Écrit par : Naima (et ses bons plans) | 15.07.2011

Répondre à ce commentaire

Bonjour Gee Mee
Tout d'abord merci beaucoup pour vos tuto et vos conseils, votre blog m'a bien aidé à améliorer le mien ( je n'y connais rien de rien en informatique et grâce à vous, je me suis lancée à modifier la configuration avancée) . Je viens de mettre en place ce widget et cela ne fonctionne que si on clique sur "lien permanent" en pied de note. Y aurait-il un moyen de le faire apparaître automatiquement en "dur". Je ne suis pas sûre de l'utilité de la chose s'il faut cliquer sur lien permanent...
Merci d'avance de votre aide!

Écrit par : Iz | 24.10.2011

Répondre à ce commentaire

Je vous remercie d'avoir lu, et d'avoir osé vous lancer.

Je vous félicite et vous invite à répéter ce que vous avez fait sur le modèle de la page d'accueil.

Bonne continuation.

Écrit par : Gee Mee | 24.10.2011

ah oui, grand merci, je l'avais fait une fois pour le lien hellocoton et j'avais oublié qu'il fallait le reprendre en page d'accueil. Après avoir bidouillé et obtenu des horreurs ( je me suis rendue compte que sauter une ligne avait son importance!) , j'y suis enfin parvenue! par contre c'est bien dommage que ça ne fonctionne que sur la note la plus récente...

Écrit par : Iz | 26.10.2011

Répondre à ce commentaire

c'est en cherchant qu'on avance, figurez-vous que je jouerais bien les apprenties sorcières avec tous ces codes maintenant!

Écrit par : Iz | 26.10.2011

Répondre à ce commentaire

Les commentaires sont fermés.