Iklan

Widget Popular Posts The Marquee Effect

Widget Popular Posts The Marquee Effect

After my previous tutorial explores add widget popular posts on the blog, this time I returned update with different modifications on the widget popular blogger posts. Namely widget popular posts with marquee effect, runs upwards. To create a popular posts with marquee effect, I suggest you back up the template in advance in order to avoid mistakes in adding code to the template.

Well stages of manufacture as follows:

1. Login to your account >> At the entrance on the Dashboard >> layout >> Add gadget
2. Go to the Templete >> Edit HTML
3. Checklist on the widget templates Expan

4. Find the code <div class = 'widget-content popular posts'> and save the marquee code below after the code


Go Widget

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


5. Next look for the code </ b: loop> and add the code </ marquee> under the code </ b: loop>

So overall the code be as follows:

Go Widget

<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>
    <b:include name='quickedit'/></div>
    </div>
    </b:includable>
    </b:widget>

   
6. Save the template and see the results on your blog!

Thus tutorial makes the popular posts with marquee effect this time. Hope it is useful! Congratulations to create!

If you liked the article on this blog, please subscribe for free via email, so you will get an article submission every article published in Go Widget

Next
Prev Post
Previous
Next Post
Buka Komentar