Widget Popular Posts Dengan Efek Marquee -Assalamu Alaikum WR.WB Hallo sahabat TrikMITOS-blog seputar informasi, islami,kesehatan, kecantikan Tips dan Trik android kord gitar dll, Pada Artikel yang anda baca kali ini dengan judul Widget Popular Posts Dengan Efek Marquee, saya telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya, yang mungkin bermanfaat buat anda. mudah-mudahan isi postingan Artikel Blogger Tutorials, Artikel Blogger Widgets, Artikel Popular Posts, yang saya tulis ini dapat anda pahami, karna mungkin dari beberapa pengunjung bahasa atau tulisan saya ini agak sulit di mengerti...hehehe benarkah??!!!. baiklah, tanpa panjang lebar dan bertele-tele lagi selamat membaca, jangan lupa baca juga artikel lainnya, karena masih banyak artkel yang menarik lainnya yang menurut saya pribadi sangat bermanfaat

Judul : Widget Popular Posts Dengan Efek Marquee
link : Widget Popular Posts Dengan Efek Marquee
Gambar dibawah ini

Widget Popular Posts Dengan Efek Marquee

Setelah sebelumnya saya mengetengahkan tutorial menambahkan widget popular posts pada blog, kali ini saya kembali update dengan modifikasi berbeda pada widget popular posts blogger. Yaitu widget popular posts dengan efek marquee, berjalan keatas.

Untuk jelasnya bagaimana efek marquee pada popular posts silahkan klik button live demo berikut.

View Demo 

Untuk membuat popular posts dengan efek marquee ini, saya sarankan untuk anda memback up template terlebih dahulu guna menghindari kesalahan dalam penambahan kode pada template.

Baiklah tahapan pembuatannya sebagai berikut:

1. Login ke akun anda>> Pada dasbor masuk pada bagian tata letak>> Tambah gadget dan pilih popular posts seperti gambar berikut

Jika anda sudah menambahkan widget ini maka lewati langkah no 1

2. Masuk ke bagian template>> Edit HTML

3. Ceklist pada bagian Expan widget templates

4. Cari kode <div class=�widget-content popular-posts�> dan simpan kode marquee dibawah ini setelah kode tersebut

<marquee align='left' direction='up' height='140' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3' width='100%'>

5. Selanjutnya cari kode </b:loop> dan tambahkan kode </marquee> dibawah kode </b:loop>

Sehingga secara keseluruhan kodenya menjadi seperti dibawah 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'>

<marquee align='left' direction='up' height='140' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3' 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>

</ul>

<b:include name='quickedit'/></div>

</div>

</b:includable>

</b:widget>

6. Simpan template dan lihat hasilnya pada blog anda!

View Demo 

Demikian tutorial membuat popular posts dengan efek marquee kali ini. Semoga bermanfaat!

Jika ingin mencoba efek lain pada widget popular posts silahkan klik link titel posts berikut:

• Widget Popular Posts Dengan Efek Border Dan Background Color
• Widget Popular Posts Dengan Efek Spinning dan Zooming
• Widget Popular Posts Dengan Efek Animasi Spy

Selamat berkreasi!

Demikianlah Artikel Widget Popular Posts Dengan Efek Marquee

Sekianlah artikel Widget Popular Posts Dengan Efek Marquee kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya jangan lupa tinggalkan komentar anda dan share yang banyak....heheheh.

Anda sekarang membaca artikel Widget Popular Posts Dengan Efek Marquee dengan alamat link https://trikmitos.blogspot.com/2012/11/widget-popular-posts-dengan-efek-marquee.html