La nouvelle plate-forme Overblog : utiliser, créer, publier...
12 Décembre 2012
Sans programmation Javascript, juste quelques lignes à positionner sur votre thème au niveau de votre page index pour afficher vos 12 derniers billets sous forme de polaroïd. Ce fragment de code affichera l'image de couverture de votre billet et le titre de celui-ci. En cliquant sur la photographie, le détail du billet s'affichera. Simple à mettre en oeuvre sur n'importe quel thème.
Pour vos questions utilisez l'onglet orange "Vos questions" à droite de votre écran.
Ci dessous le code à insérer :
Le fragement de code à inserer entre {%if isIndex%}...{%endif%}
<link rel="stylesheet" href="http://www.photonautes-associes.fr/ob/assets/polaroid-ob.css">
<ul class="polaroids" >
{%list.BlogPosts(12)%}
<li>
<a href="{{Post.PermaLink}}" title="{{Post.Title}}">
<img src={{Post.Cover|resize(190,210)|crop}}" alt="{{Post.Title}}" />
</a>
</li>
{%endlist%}
</ul>
Ci dessous en action avec de fausses images...
/http%3A%2F%2Fplacehold.it%2F500x500%26text%3DPhoto%20article%201)
/http%3A%2F%2Fplacehold.it%2F500x500%26text%3DPhoto%20article%202)
/http%3A%2F%2Fplacehold.it%2F500x500%26text%3DPhoto%20article%203)
/http%3A%2F%2Fplacehold.it%2F500x500%26text%3DPhoto%20article%204)
/http%3A%2F%2Fplacehold.it%2F500x500%26text%3DPhoto%20article%205)
/http%3A%2F%2Fplacehold.it%2F500x500%26text%3DPhoto%20article%206)
/http%3A%2F%2Fplacehold.it%2F500x500%26text%3DPhoto%20article%207)
/http%3A%2F%2Fplacehold.it%2F500x500%26text%3DPhoto%20article%208)
/http%3A%2F%2Fplacehold.it%2F500x500%26text%3DPhoto%20article%209)
/http%3A%2F%2Fplacehold.it%2F500x500%26text%3DPhoto%20article%2010)
/http%3A%2F%2Fplacehold.it%2F500x500%26text%3DPhoto%20article%2011)
/http%3A%2F%2Fplacehold.it%2F500x500%26text%3DPhoto%20article%2012)
/image%2F0098646%2F201302%2Fob_0d73b3f1f45598c30c8ac541ebf5f0f3_08-02-2013-10-55-37.png)
/image%2F0098646%2F201302%2Fob_202c0fead4798a72f6a243cf44f8652a_07-02-2013-07-23-12.png)
/image%2F0098646%2F201302%2Fob_d14c2b80900978ee047ef2477613de52_05-02-2013-10-11-50.png)
/image%2F0098646%2F201302%2Fob_24de31ac348ef4b1d6837d6076cbee8e_03-02-2013-06-51-38.png)