Menciptakan Tampilan Yang Berbeda Hanya Pada Posting Pertama

Published by Concept Phone Selasa, 31 Juli 2018

Ini ialah teladan tampilan pembangun deret posting yang masih normal (loop posting):

<!-- posts --> <div class='blog-posts hfeed'>   <b:include data='top' name='status-message'/>   <data:defaultAdStart/>   <b:loop 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:loop>   <b:if cond='data:numPosts != 0'>     &lt;/div&gt;&lt;/div&gt;   </b:if>   <data:adEnd/> </div>

Dan ini ialah loop posting yang sudah dimodifikasi:

<!-- posts --> <div class='blog-posts hfeed'>   <b:include data='top' name='status-message'/>   <data:defaultAdStart/>   <b:loop 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:if cond='data:post.isFirstPost'>       <div class='first-post'><b:include data='post' name='post'/></div>     <b:else/>       <b:include data='post' name='post'/>     </b:if>    <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:loop>   <b:if cond='data:numPosts != 0'>     &lt;/div&gt;&lt;/div&gt;   </b:if>   <data:adEnd/> </div>

Kode di atas akan secara otomatis mencakup posting pertama dengan elemen <div class='first-post'>, sehingga kita dapat melaksanakan sesuatu dengan kelas itu untuk mengubah tampilannya:

.first-post {border:10px solid red} .first-post .post {font-size:150%}

Kuncinya ada pada kondisional <b:if cond='data:post.isFirstPost'>

Sumber https://www.dte.web.id/