Tempatnya Download Aplikasi full Apk, Mod, Pro, Premium untuk semua Sahabat Android.

Wednesday, September 27, 2017

Tutorial Membuat Popular Post Bergerak (Marquee Alternate)

Screenshot Popular Posts
Tutorial:

PS: PASTIKAN ANDA BACKUP DAHULU TEMPLATE BLOG ANDA UNTUK LANGKAH KESELAMATAN . Lihat sini >> 

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(http://3.bp.blogspot.com/-qSQBjX5Q5fw/UL6cpce5pwI/AAAAAAAAA0A/PfYlKv8vBeA/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 ibarat referensi 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 bila ok Klik Save Template



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

Sumber https://faiz-tutorial.blogspot.co.id/

Share on Facebook
Share on Twitter
Share on Google+

Related : Tutorial Membuat Popular Post Bergerak (Marquee Alternate)