Vendredi 22 janvier 2010 5 22 /01 /2010 11:30

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 Kielut l'a fait évoluer avec Gee Mee 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.



La mise en forme du module des notes similaires de LinkWithin est abordée ici :
Personnalisez l'affichage des notes similaires avec LinkWithin
Par Kielut & Gee Mee - Publié dans : Haut et fort - Ecrire un commentaire - Voir les 4 commentaires
Retour à l'accueil



Je le fais pour vous !


Passer en mode avancé, installer un menu, migrer votre blog, créer un blog wordpress, besoin d'une bannière, relooker votre blog... Vous avez besoin d'aide ?
Je le fais pour vous ! Contactez moi, j'établierai un devis ! Pour un premier contact, clic ici.
@ tout de suite !

Coup de pouce pour

Very Nice Blog logo de participation

Comboost qui met à disposition des bloggeurs ses supers diaporamas !


 

Je sais aussi cuisiner...

Visitez mon autre blog !


Achetez mon livre !

Boutonlivre01

Installez le logo!

Parce que peut être vous avez trouvé votre bonheur sur blogtuto et que vous avez envie de le faire savoir, un petit lien ou une petite image sur votre blog, ça me fait drôlement plaisir quand je passe chez vous et que je reconnais mes codes... Alors pensez-y !

bouton_blogtuto

 




Bookmark and Share
http://www.wikio.fr
J'invite aussi les bloggeurs Haut et fort à ajouter le logo de Gee Mee, contributeur actif pour leur plateforme !

Personnalisez votre blog avec Gee Mee

Recherche

Comptons !

Compteur de visiteurs en lignes Nethique.info Il y a  9  personne(s) sur ce blog

Syndication

  • Flux RSS des articles
 
Contact - C.G.U. - Rémunération en droits d'auteur - Signaler un abus - Articles les plus commentés