Tutorial Membuat Popular Post Bergerak (Marquee Alternate)

Screenshot Popular Posts

Tutorial:

PS: PASTIKAN ANDA BACKUP DAHULU TEMPLATE BLOG ANDA UNTUK LANGKAH KESELAMATAN . Lihat sini >> http://faiz-tutorial.blogspot.com/2013/02/tutorial-backuprestore-template.html

1. Login ke akaun blogger anda.

2. Klik butang "More Options" dan klik " Layout  ".

3. Pada halaman Layout, klik " Add a Gadget " .

4. Klik pada widget Popular Posts

5. Pada Configure Popular Posts, anda setting popular post dan Save.

6. Selanjutnya , Klik pada " Template " .

7.  Klik " Edit HTML "

8. Klik pada ruang edit html dan tekan CTRL+F untuk paparkan ruang search

9. Cari(Ctrl+F) kod dibawah:

 ]]></b:skin>

10. Copy (CTRL+C) dan Paste (CTRL+V) kod dibawah sebelum kod  ]]></b:skin>

/* -------- POPuLAR POST CUSTOM CSS START----------- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnQVYMIe4FUc_OoqK3h5Nlc6blaG4cARZIFFk4rfae3ZOyPdc96ccXIVsSoooPAjVWaROE_l1a0AedYr7HkvdQAmfVhjxv9Kv8vZNNTlNTQa0C6CGkqXZtzzQ_JXtDoTlV-q6GJclpO2Y/s1600/check1.gif) no-repeat scroll 8px 7px;
list-style-type: none;
margin:5px 14px 5px 14px;
padding:5px 5px 5px 25px !important;
border: 1.5px solid #dddddd;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
font-family:Tahoma,Arial,verdana;
font-size:12px;
}
.popular-posts ul li:hover {
background:C4FAD2;
border:0.5px solid #0B3B17;
font-family:Tahoma,Arial,verdana;
font-size:12px;
}
.popular-posts ul li a:hover {
text-decoration:none;
}
/* -------- POPuLAR POST CUSTOM CSS END----------- */

11. Cari(Ctrl+F) kod dibawah:

<div class='widget-content popular-posts'>

12. Copy(Ctrl+C) kod dibawah dan Paste(Ctrl+V) dibawah kod " <div class='widget-content popular-posts'> " :

<marquee align="left" behavior="alternate" direction="up" height="500" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="100%">

13. Cari(Ctrl+F) kod dibawah:

</b:loop>

14. Copy(Ctrl+C) kod dibawah dan Paste(Ctrl+V) dibawah kod "</b:loop> </ul>" :

</marquee>

15. Pastikan code anda akan jadi seperti contoh dibawah:

  <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'>
<marquee align="left" behavior="alternate" direction="up" height="500" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="100%">
    <ul>
      <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>
    </ul>
</marquee>
    <b:include name='quickedit'/>
  </div>
</b:includable>
  </b:widget>

16. Preview dan jika ok Klik Save Template

TUTORIAL STEP BY STEP .  HARAP NEWBIE PUN BOLEH FAHAM. SELAMAT MENCUBA :)