Horizontal Animation Of Popular Posts With Control

Hey buddy, missed with our tutorials? Ok, now we will discuss about beautifying the popular post widgets from the original bloggers. You'll want to display the widget is more lively and interesting. So let's make it popular as an animated slideshow post. Equipped with forward and back controls. Interesting is not it?

Popular posts (with another name: Most Viewed) Animation

---

History

Visitors worldwide have always tended to enter the two main parts of our posts. The first is the recent posts and the second is the post popular. Both have a very important role (see our previous article). Beautify the recent post widget and popular post is one of the power to make the visitor's interest grew. For the purpose of why we made ​​the original post popular bloggers become more lively and interesting. That animated slideshow. We've met a few blogs that offer a new form of popular post-blogger widget. Such as simple spy, grid, and others. However, we want users to have the ability to control the popular post widget.

And we are very grateful to Remy Sharp (@ rem on Twitter), for writing the tutorial about Infinite Automatic Carousel.

Unfortunately, the tutorials are given by him can not be applied easily in blogger. When we re-examine the entire script from him, there is a code that causes the popular post widgets with other widgets overlap. And still there are a number of other code that we fix. However, Remy's good work, you give us an idea.

---

To the point

Just let us begin this tutorial, the first step you should do is make the widget popular posts. Click the Design tab -> Page Elements -> Add a Gadget. Then select popular posts. Change Show popular post with image thumbnails. You can choose how many popular posts that you want to show. Then save.

After that open the Design tab -> Edit HTML, look for type = 'PopularPosts', in fact here we will look for widgets from popular posts. Widgets from popular posts have type PopularPosts. Precisely you at least look for code like this <b:widget id='uniq_id' locked='false' title='your_title_widget' type='PopularPosts'>.

After that, the bottom of that code, you will find <b:includable id='main'>. At least popular posts widget code like the following

<b:includable id='main'> ... ... something ... ... ... </ b: includable>

replace that code with the following code

<b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='infiniteCarousel' style='background-color:white; -webkit-border-radius:10px; -moz-border-radius:10px; -o-border-radius:10px'> <div class='wrapper'> <ul> <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' expr:title='data:post.title'/> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'/></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' expr:title='data:post.title' 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' expr:title='data:post.title'/></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'/> </div> </div> </b:includable>

Continue your work by entering the following css code before ]]></b: skin> (Hint: if you are using windows, you can find it by using Ctrl +F).

<!--popular posts--> .infiniteCarousel { width: 700px; position: relative; } .infiniteCarousel .wrapper { width: 550x; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */ overflow: auto; height: 84px; margin: 0 38px; position: relative; top: 0; } .infiniteCarousel ul a img { border: 5px solid blue; padding: 0px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; } .infiniteCarousel .wrapper ul { width: 840px; /* single item * n */ list-style-image:none; list-style-position:outside; list-style-type:none; margin:0; padding:0; position: absolute; top: 0; } .infiniteCarousel ul li { display:block; float:left; height: 85px; padding: 0px; width: 100px; } .infiniteCarousel ul li img { -webkit-transition: border-color 400ms; } .infiniteCarousel ul:hover li img { border-color: green; } .infiniteCarousel ul:hover li:hover img { border-color: #333; } .infiniteCarousel ul li a img { display:block; } .infiniteCarousel .arrow { display: block; height: 37px; width: 37px; text-indent: -999px; position: absolute; top: 45px; cursor: pointer; outline: 0; } .infiniteCarousel .forward { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoUfuTzfbIgQ4DGSMnYXxuDAF4yOYRLkUblziPEhfhOuNKDDo9yyEnXn5pqMLVgkudmvEg1If8YY3aIV3jp8lJhDUz_7teWF5Uels08MQARokvQfMTM5ncYF1soC_HHtJkwdt7gzpTFRE/s36-c/scroll2.jpg) no-repeat 0 0; right: 0; } .infiniteCarousel .back { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrRp0jTbACCYDi_0OWc7bujoHF1NH3guvAf9QFZ9Cnrzlo77EngE-YJqjzB4FoSq-eP5BDYF3sPpHIFtqJbquPCsjOWIr2aFyFSF-ifhlF-BAUjHW6AW1Kc6JF8lqaPV8RbGLUBy_-6tU/s36-c/scroll.jpg) no-repeat 0 0; left: 0; } .infiniteCarousel .forward:hover { background-position: 0 1px; } .infiniteCarousel .back:hover { background-position: 0 1px; } <!--popular posts-->  

Next, place the following code above the code </head>

<!--for popular post--> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/> <script charset='utf-8' type='text/javascript'><!--//--><![CDATA[//><!-- (function () { $.fn.infiniteCarousel = function () { function repeat(str, n) { return new Array( n + 1 ).join(str); } return this.each(function () { // magic! var $wrapper = $('> div', this).css('overflow', 'hidden'), $slider = $wrapper.find('> ul').width(9999), $items = $slider.find('> li'), $single = $items.filter(':first') singleWidth = $single.outerWidth(), visible = Math.ceil($wrapper.innerWidth() / singleWidth), currentPage = 1, pages = Math.ceil($items.length / visible); /* TASKS */ // 1. pad the pages with empty element if required if ($items.length % visible != 0) { // pad $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible))); $items = $slider.find('> li'); } // 2. create the carousel padding on left and right (cloned) $items.filter(':first').before($items.slice(-visible).clone().addClass('cloned')); $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned')); $items = $slider.find('> li'); // 3. reset scroll $wrapper.scrollLeft(singleWidth * visible); // 4. paging function function gotoPage(page) { var dir = page < currentPage ? -1 : 1, n = Math.abs(currentPage - page), left = singleWidth * dir * visible * n; $wrapper.filter(':not(:animated)').animate({ scrollLeft : '+=' + left }, 500, function () { // if page == last page - then reset position if (page > pages) { $wrapper.scrollLeft(singleWidth * visible); page = 1; } else if (page == 0) { page = pages; $wrapper.scrollLeft(singleWidth * visible * pages); } currentPage = page; }); } // 5. insert the back and forward link $wrapper.after('<a href="#" class="arrow back"><</a><a href="#" class="arrow forward">></a>'); // 6. bind the back and forward links $('a.back', this).click(function () { gotoPage(currentPage - 1); return false; }); $('a.forward', this).click(function () { gotoPage(currentPage + 1); return false; }); $(this).bind('goto', function (event, page) { gotoPage(page); }); // THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL $(this).bind('next', function () { gotoPage(currentPage + 1); }); }); }; })(jQuery); $(document).ready(function () { // THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL var autoscrolling = true; $('.infiniteCarousel').infiniteCarousel().mouseover(function () { autoscrolling = false; }).mouseout(function () { autoscrolling = true; }); setInterval(function () { if (autoscrolling) { $('.infiniteCarousel').trigger('next'); } }, 4000); }); //--><!]]></script> <!--for popular post-->  

Done, you've managed to solve it.

---

How to implement it on your blog?

Basically, the distance between the forward and back buttons are automatic. Depending on the width of section. The example I give to you is for main bar section. Another story with a sidebar. For that, you need a little guidance from us.

To adjust the width of the slideshow, then change the value of the width that is in the .infiniteCarousel. To avoid overlap between the images with the button of the forward or back, then change the width value is in the .infiniteCarousel .wrapper. To set the distance between the images, change the width which is within .infiniteCarousel ul li. Arrange all the values ​​that we suggest, to fit your needs.