5202

ein Blog über technische Fragen zu Blogger

Pong Myri

von

Dieser tolle Post von Myriam Kreatif soll der Ping sein ... von mir jetzt ein Pong dazu!

Zur Erinnerung: Myri hat zwischen 2. und 3. Post mit jQuery ein HTML-Element eingefügt - in Blogger geht das auch mit konditionalen Tags, ohne Javascript!

Das grüne Alert in der Demo wird zwischen 2. und 3. Post angezeigt - no Javascript!

Wie funktioniert das?

In Blogger könnt ihr jeder Schleife[loop] einen zusätzliche Index[i] geben. Posts im Blog-Widget Blog1 werden etwa in der <b:includable id='main' var='top'> über eine Schleife ausgelesen. Gebt dieser Schleife ein zusätzliches Attribut 'Index'.

 <b:loop index='i' values='data:posts' var='post'>

Mit diesem Index bestimmt ihr die Stelle eines spezifischen Posts innerhalb der Schleife. Die Position eines bestimmten Post ist dabei <data:i />. Mit einem if/else Statement sprecht ihr beliebige Posts an - hier Beispielsweise den zweiten Post:

<b:if cond='data:i == 1'>
<!-- HTML Element im zweiten Post -->
</b:if>

Das war's dann schon - fertig! Die ganze Schleife von der Demo schaut so aus:

<b:loop index='i' values='data:posts' var='post'>
    <b:if cond='data:post.isDateStart'>
        <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
            &lt;/div&gt;&lt;/div&gt;
        </b:if>
    </b:if>
    <b:if cond='data:post.isDateStart'>
        &lt;div class=&quot;date-outer&quot;&gt;
    </b:if>
    <b:if cond='data:post.dateHeader'>
        <h2 class='date-header'>
            <span>
                <data:post.dateHeader/>
            </span>
        </h2>
    </b:if>
    <b:if cond='data:post.isDateStart'>
        &lt;div class=&quot;date-posts&quot;&gt;
    </b:if>
    <div class='post-outer'>
        <b:include data='post' name='post' />
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
            <b:include data='post' name='comment_picker' />
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
            <b:include data='post' name='comment_picker' />
        </b:if>
    </div>
    <b:if cond='data:post.includeAd'>
        <b:if cond='data:post.isFirstPost'>
            <data:defaultAdEnd/>
            <b:else/>
            <data:adEnd/>
        </b:if>
        <div class='inline-ad'>
            <data:adCode/>
        </div>
        <data:adStart/>
    </b:if>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
        <b:if cond='data:i == 1'>
            <div class='alert'>Ein HTML-Element, das nur zwischen zweiten und dritten Post angezeigt wird!</div>
        </b:if>
    </b:if>
</b:loop>

Mit dieser Technik könnt ihr beliebige HTML-Elemente in einem spezifischen Post anzeigen oder verbergen - ohne eine Zeile Javascript!

Heads up!

Für alle technischen Fragen zu Blogger haben wir eine tolle G+ Community .