• Importer un diapo d'Overblog

    Une astuce pour importer les diaporamas d'Overblog et les insérer dans un article,
    une page, de votre blog Eklablog.
    Avec un petit code facile à comprendre et à modifier.(html et CSS)
    A noter, que la fonction 'voir le diapo en plein écran' sera invalidée
    (cause taille de l'iframe)
    Le principe, est d'utiliser une iframe pour copier la page hébergeant le diapo OB,
    et un bout de code CSS, pour redimensionner l'iframe afin de garder
    uniquement le diapo, et se débarrasser du thème OB et des liens divers. 

    Importer un diapo d'Overblog

    Le code html et css :

    <html>
    <head>

    <STYLE type="text/css">

     
    #outdiv {
    height: 595px;
    overflow: hidden;
    position: relative;
    width: 648px;
    }

    #iniframe {
    height: 1200px;
    left: -165px;
    position: absolute;
    top: -70px;
    width: 1280px;
    }

     
    </STYLE>

     
    </head>

     
    <body>

     
    <div id="outdiv">
    <iframe src="URL Diapo Overblog" scrolling="no" width="1280px" height="1200px" id="iniframe">
    </iframe>
    </div>

     
    </body>        

    </html>                                                    

    Nul besoin de copier ce code, car vous allez le télécharger ici, et le placer sur le bureau de votre ordi.
    Dézipper (ouvrir) ce fichier 'Diapo-OB.zip' et obtenez un fichier 'Diapo-OB.html' sur votre bureau.
    Vous placez ce fichier (Diapo-OB.html) parmis vos fichiers Ekla (via 'Gérer les fichiers') sur votre blog.
    Editez ce fichier et placez l'URL du diaporama Overblog à l'emplacement prévu (comme dans le code ci-dessus, en rouge) et valider en enregistrant.
    L'URL de ce fichier 'Diapo-OB.html' est mainteneant du type:

     
    http://data0.eklablog.com/votre blog/perso/diapo-ob.html

    Exemple, pour mon blog, on obtient:

     http://data0.eklablog.com/papyrocktest/perso/diapo-ob.html


    IL suffit maintenant de créer une iframe avec cette adresse (URL) et de la placer dans votre article en mode édition html :

    <iframe src="http://data0.eklablog.com/votre blog/perso/diapo-ob.html" frameborder="no" scrolling="no" width="100%" height="620"></iframe>

    Voilà pour la partie la plus ardue ...! 
    Pour importer d'autres diapos d'OB, il vous suffira juste de modifier l'URL dans le fichier 'Diapo-ob.html' (l'URL diaporama Overblog).

    Testé avec un diaporama OB d'un blog prenium.... 

     Ci-dessous le résultat, en démo .....( passez la souris sur la fenêtre du diaporama )

     

     

    « Défilement titre onglet navigateurMenu interactif - CSS3/jQuery »

  • Commentaires

    25
    Lundi 26 Août 2013 à 17:22

    @SylvieS >

    Si tu as mis un exemple d'importation diaporama sur ton blog je veux bien essayer de voir avec ton mot de passe ..(sans garantie, car je crois que OB a ajouté une redirection automatique sur les diapos depuis la rédaction de mon article ...!)

    24
    Dimanche 25 Août 2013 à 14:32

    Mike,

    Je peux te donner le mot de passe par MP. Merci de prendre le temps de m'aider

    :)

    23
    Dimanche 25 Août 2013 à 10:38

    @SylvieS > Salut !

    Ton blog est protégé, donc je ne peux pas analyser ton code source .... !!!

     

    22
    Dimanche 11 Août 2013 à 02:24

    Bonjour Mike,

    Je viens d'importer mon blog depuis OB vers Eklablog. Jusqu'à là aucun problème.
    EN revanche je pense avoir suivi ton tuto à la lettre pour le transfert d'albums photos mais sans résultat.
    D'ailleurs quand je place ton fichier dans mes fichiers Ekla et que je modifie l'url du diapo, le lien fonctionne toujours vers ton diaporama.
    Ensuite je créé un nouvel article, mode html, je glisse l'Iframe et rien ne fonctionne.
    Je ne suis pas une pro de la programmation html ou CSS, je débute  vraiement j'ai dû à mon avis zappé une manip à un moment.
    Pourrais-tu m'éclaircir s'il te plait ?
    T'en remerciant par avance,

    Sylvie

    21
    Mercredi 31 Juillet 2013 à 09:12

    oui, les liens restent ceux d'OB car les images sont toujours hébergées chez eux.
    Cette astuce n'est valable que si le compte OB est toujours valide.
    Une iframe n'est autre qu'une importation d'une page web sur un site tiers...
    Si la page n'existe plus, l'iframe non plus (erreur 404).....

    20
    pdecap Profil de pdecap
    Mardi 30 Juillet 2013 à 23:50

    derrnière question : http://pdecapviaferrata.eklablog.com/

    Sur mon blog eklablog, en fait quand je clique sur une image et que je veux en copier l'URl, l'URL pointe toujours sur overblog. Donc que se passera-t-il quand mon blog overblog aura été migré d'office sur la plateforme kiwi ? L'URL sera-t-elle toujours valable ?

    Si oui cela veut dire que je ne devrai jamais supprimer mon blog overblog ?

    Si non, cela veut dire que j'aurai une erreur 404 à place des photos ???

    Merci pour votre aide

    19
    Mardi 30 Juillet 2013 à 15:56

    @pdecap >
    Surement un p'tit bug ..!!!! pas de panique !
    Clique sur le lien-ci-dessous, puis retire ton article (test import album) via " Contenu > gérer les rubriques ":
    http://pdecapviaferrata.eklablog.com/contact

    18
    pdecap Profil de pdecap
    Mardi 30 Juillet 2013 à 15:00

    Help ! J'ai exécuté votre tuto :

    http://papyrocktest.eklablog.com/importer-un-diapo-d-overblog-a59105003 

    mais maintenant, quand je veux aller sur mon nouveau blog http://pdecapviaferrata.eklablog.com; je suis automatiquement redirigée sur mon ancien blog : http://viaferratadecap.over-blog.com/ ! Je ne peux plus modifier l'article ou j'ai mis le iframe !!!!

    17
    Dimanche 3 Février 2013 à 18:22

    Ok, petit détail encore. La largeur de la page de ton blog est de 800px, pas assez large
    car le diaporama est tronqué...
    Je te conseille de mettre 900px, et le diapo sera entier.
    Alors, il faut aller dans:
    Apparence > Modifier le thème > Format du blog > Page > Largeur de la page
    > 900 > px (ou 90 > %=90%)
    Et peut-être adapter l'image du fond (avec une image de 1000px par 800 px)

    16
    Dimanche 3 Février 2013 à 15:40

    Merci c'est bon j'y suis arrivée...

     

    J'ai ajouté ton lien dans mes contacts car j'ai des amis d'OB qui vont migrer. Donc si ils ont besoin ils pourront voir ton blog.

     

    Bon dimanche à toi,

    15
    Samedi 2 Février 2013 à 20:35

    Salut!

    Avec ce code, on ne peut pas redimensionner le diaporama.
    Il reste tel quel, comme sur OB....c'est à dire : 600x570px (de mémoire)
    Donc il faut le placer dans un article, ou sur une page simple, et pas
    dans un module simple, et faire un lien vers l'emplacement du diapo.
    Comme le diapo ci-dessus...!

                                                  !  !

    14
    Eva-Joe
    Samedi 2 Février 2013 à 18:27

    Je l'ai bien installé mais ça me donne qu'une partie mais je n'en connais pas la raison...Rire , peux tu venir voir s'il te plait 

     

    http://lesmotsebousculent.eklablog.com/

     

    Merci d'avance

    13
    Lundi 28 Janvier 2013 à 17:32

    Pour créer une page simple:
    Contenu > Nouvelle page > titre (nom de la page) > Ok
    Pour ouvrir cette page, ou pour retrouver cette page:
    Contenu > Gérer les rubriques > Pages simples > choisir page(nom de la page) > clic > 
    à droite : un oeil (pour voir), un crayon (pour éditer), une croix (pour supprimer)

    12
    Lundi 28 Janvier 2013 à 17:14

    Merci il n'y a que celui-là, les autres je les referais car je les avais supprimé pensant que je n'y arriverais pas.

    Par contre puis-je encore t'ennuyer , possible qu'en cherchant bien je trouverais mais je n'ai pas trop le temps . Comment créer une page? 

    11
    Lundi 28 Janvier 2013 à 14:23

    Eva-Joe,

    Je n'ai trouvé qu'un seul diaporama sur ton blog (la réalité de mes rêves)
    Si il y en a d'autres, me fournir les liens (adresses des pages).
    Voici le code à placer dans un article, ou page simple:

    <!---------- Diapo : La réalité de mes rêves ---------->

    <p>La r&eacute;alit&eacute; de mes r&ecirc;ves</p>

    <p><iframe src="http://ekladata.com/cAnZo1yljAnxdXhmb7JwDoeAm8E/suede-2010-001.html" frameborder="no" scrolling="no" width="100%" height="620"></iframe></p>

     

    10
    Lundi 28 Janvier 2013 à 10:05

    Bonjour,

     

    Tout d'abord merci, c'est super, voici le nom de mon blog :       rencontre-avec-ma-poesie.fr

     

    Je trouve ton blog génial, tu dois être vraiment doué , sourire. Merci de m'aider.

    Bien amicalement

     

    EvaJoe

    9
    Lundi 28 Janvier 2013 à 00:44

    Hello ! Eva-joe

    Si tu veux, copie l'adresse de ton blog OB ici, et je te créerai le code pour ton diapo ...!

    8
    Dimanche 27 Janvier 2013 à 14:52

    Bonjour,

    J'ai lu avec beaucoup d'attention vos explications, j'ai donc téléchargé le fichier, je l'ai ouvert et mis sur mon bureau, il se nomme ainsi : diapo-ob, mais n'a pas html, est-ce une mauvaise manip de ma part, où cela ne changera rien pour la récupération de mes diaporamas, voir fichiers photos.

    Pour la suite je tatonne car il faut que je comprenne le fonctionnement d'eklablog étant nouvelle de cette nuit, rire!!

     

    Merci 

    Amicalement

     

    Eva-Joe

    7
    lulette Profil de lulette
    Mercredi 14 Novembre 2012 à 23:11

    OB interdit les aspirateurs de site, mais bon, ça n'en a pas empêché certains ... :)

    6
    Mercredi 14 Novembre 2012 à 22:51

    Bon, donc mon tuto marchera pour ce genre de diapo...mais pour les albums, je pense qu'en aspirant le site on doit pouvoir récupérer les photos.Je vais jeter un oeil....
    Merci, et sweet dreams !!! 

    5
    lulette Profil de lulette
    Mercredi 14 Novembre 2012 à 22:38

    Aucune (bon, ça fait belle lurette que je n'ai plus d'albums chez eux, j'ai dû aller voir le blog de mon daddy sur OB (qu'il a transféré chez EB), non premium)). Voilà, c'est le diaporama OB.

    Dans la future plateforme, il n'y aura plus de gestion de fichiers ; le jour où tu rajoutes des images dans un article, OB créera automatiquement un diaporama de ces images, mais tu ne pourras pas ajouter des images à un répertoire pour enrichir un album (enfin si, mais comme ce répertoire sera un article listé au milieu des autres, faudra se souvenir de son emplacement), bon, ce sont les dernières "évolutions" connues, ça pourrait changer vu que ça chicane sec sur le forum OB.

    4
    Mercredi 14 Novembre 2012 à 22:24

    Ok, je me suis basé sur ce blog ici, et peux-tu me dire quelle différence avec ton blog OB ?

    3
    lulette Profil de lulette
    Mercredi 14 Novembre 2012 à 22:05

    Non, non, n'importe quel bloggeur peut installer des diaporamas s'il le souhaite, en trouvant la bonne combine, un site qui le lui génère ... (après, je n'ai jamais été premium, alors je ne connais pas les options payantes), mais le problème de certains venus chez EB (premium ou non), c'est de récupérer les albums photos ; si tu veux, c'est comme Flickr, mais hébergé et géré par OB. Donc, inutilisable hors OB (alors que le code d'insertion généré par Flickr, je pense, est valable sur n'importe quel site).

    Un vrai casse-tête, quoi ... sur lequel tu as eu envie de te pencher, bravo!

    Et merci encore pour ton aide concernant l'élasticité du blog répertoire, tu m'as vraiment enlevé une épine du pied! :)

    2
    Mercredi 14 Novembre 2012 à 21:21

    Ah ??? Je pensais que tous les blogs OB, possédaient l'option 'Diaporama' !!! diapo bas de gamme, sans liens, ni fond sonore, mais bon ..!
    C'est donc uniquement dispo en version Prenium ???
    Pour le fond blanc du bloc commentaire, tu peux changer avec la palette ci-dessus (dernière icone)

     

    1
    lulette Profil de lulette
    Mercredi 14 Novembre 2012 à 19:33

    Formidable, Mike! Ce sera valable après migration des blogs OB, car c'est seulement à cet instant que les albums seront transformés en diapos. (ouh la la pas facile d'écrire en blanc sur blanc avec un clavier pourri qui saute des lettres et en double d'autres!)

    A suivre, et merci!



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


Version standard

Poursuivre l'affichage en version standard (ordinateur),

cliquer ci-dessous

Clic ici

(Puis fermer cette fenêtre, en haut à droite)