-
Par Mike GMZ le 14 Novembre 2012 à 17:06Une 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.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 )
25 commentaires