Jun 22, 2012

Cara-cara nk buat Popular Post bergerak



Salam semua. Tutorial kali ini ialah bagaimana nak jadikan post popular kita bergerak. Sila ikut step di bawah.



1. Add gadget Popular post dulu dalam Design>PageElements>Add Gadget>Popular post


2. Pergi ke Design>Edit HTML>Expand Widget Templates dan cari kod berikut:


<b:widget id='PopularPosts1'
kemudian paste code dibawah yg berwarna merah sahaja ditempat yg spatutnye.

    <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
 <b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
 <ul>
<marquee align='left' direction='up' height='140' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3' width='100%'>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
   </marquee> </ul>
    <b:include name='quickedit'/></div>
  </div>
<small><a href="http://ayienano.blogspot.com/2011/07/cara-cara-nk-buat-popular-post-bergerak.html" target="_blank">get this widget here</a></small>
</b:includable>
</b:widget>


Note : Tambahkan kod yang berwarna merah berikut dan boleh ubah kelajuan pada scrollamount='3'. Anda juga boleh ubah size di code height='140' Oh ya jangan lupa preview terlebih dahulu sebelum anda 'save' template tersebut...okay.


Saya dah buat, anda bila lagi....selamat mencuba...

No comments:

Post a Comment

LinkWithin

Related Posts Plugin for WordPress, Blogger...