Sebelumnya saya pernah memberikan petunjuk, bagaimana membuat , post terkait berjalan dari kiri ke kanan disini
Kali ini saya akan memberikan petunjuk bagaimana caranya membuat animasi entri popular bergerak atau berjalan dari atas ke bawah, seperti yang nampak pada bagian kiri posting blog ini...
gimana anda merasa tertarik untuk mencobanya?
Oke, kita langsung saja pada cara dan petunjuk berikut :
- Login ke dashboard blogger anda, pilih Rancangan > Edit HTML, centang Expand widget template
- Cari seperti di bawah ini :
<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'>
- Kemudian, perhatikan kode di bawah ini : ini merupakan hasil akhir setelah di buat, perhatikan ada bagian yang di tambahkan berwarna biru pada kode html yang ada
<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='250' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (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 == "false"'>
<!-- (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>
KETERANGAN :
- Warna biru, merupakan kode yang harus disisipkan seperi yang tertera pada contoh hasil diatas
- Di bagian marque, pada kode warna biru diatas dapat anda rubah kecepatannya yaitu dengan merubah angka scrollamount dimana jika anda memilih 1 : berarti lambat. 2 : berarti cepat dan seterusnya akan semakin cepat.
- Anda juga dapat merubah ukuran tampilan lebar dan tingginya pada height dan weidht sesuai dengan selera anda masing - masing...
Demikian petunjuk saya kali ini.
