Monday, February 12, 2018

Cara Menciptakan Entri Terkenal Bergerak

Cara Membuat Entri Populer Bergerak ke atas atau kebawah secara otomatis.

 Cara Membuat Entri Populer Bergerak ke atas atau kebawah secara otomatis Cara Membuat Entri Populer Bergerak
Ikuti langkah-langkah dibawah ini.
  1. Login ke blog, dari halaman dasbor pilih pengaturan Template.
  2. Klik Edit HTML, kemudian cari kode  <div class='widget-content popular-posts'>
  3. Selanjutnya Copy aba-aba berikut dan tempatkan di Sebelahnya.
  4. <marquee direction='down' height='200' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='100' width='auto'>
  5. Langkah selanjutnya, masukan aba-aba </marquee> di final rangkaian kode. Jadinya menyerupai ini.
  6. </ul>
        <b:include name='quickedit'/></marquee>
      </div>
    </b:includable>
      </b:widget>
  7. Susunan Kode lengkapnya.
  8. <b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'>
        <b:includable id='main'>
      <b:if cond='data:title'><h2><data:title/></h2></b:if>
      <div class='widget-content popular-posts'><marquee direction='down' height='200' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='100' width='auto'>
        <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>
        <!--b:include name='quickedit'/--></marquee>
      </div>
    </b:includable>
      </b:widget>
  9. Save Template Selesai.
Keterangan kode:
  • marquee direction='down' arah gerakan, dapat diganti dengan up, left, atau right.
  • height='200' tinggi dan width='auto' untuk mengatur tinggi lebar widget entri pupoler yang akan ditampilkan.
  • scrollamount='2' scrolldelay='100' Waktu gerakan.
  • Silakan ganti sesuai dengan yang kalian ingnkan.
Silakan baca juga artikel wacana cara menciptakan artikel berjalan di blog. Lanjutan kombinasi dari entri terkenal bergerak ini. Contohnya dapat dilihat DISINI, diblog aku satunya.
    Semoga Bermanfaat.
      Share:

      0 comments:

      Post a Comment