Creating Random Post Widget Without Thumbnail Under Posts
Updated on June 22, 2016
In this tutorial, I share a widget again that random post below the post. Actually, this widget can be placed on the sidebar of the blog, but to attract the reader to see more ideal navigation random post I put this under the posts.
Author:Namina Kiky
Random post is a widget that displays a link blog posts selected randomly, without being limited to a particular label. Where articles are lucky, then the link from the article to be shown and seen the article is not monotonous at the same content label. This widget is suitable mounted on a blog that has a variety of content in it, or more commonly called blogs gado-bado.
The use of random posts widget is one way to make visitors want to read the content of existing posts on the blog. Thus pageviews blog will increase every day. Therefore, random post widget is often called one widget highly seo friendly.
Copy the code below and place it under the code<data:post.body/>
Thus tutorial this time, may help.
Random post is a widget that displays a link blog posts selected randomly, without being limited to a particular label. Where articles are lucky, then the link from the article to be shown and seen the article is not monotonous at the same content label. This widget is suitable mounted on a blog that has a variety of content in it, or more commonly called blogs gado-bado.
There are several types of random post widgets scattered on the Google search engine, 2 random post types that are often used by bloggers is random post that has a thumbnail and who do not have or do not display the thumbnail images. In this tutorial I will share random post script without using images or thumbnails. The reason is, because the script is lighter, because no images in it, so it is suitable to be placed below the post.
For those who are interested in installing the widget random post below blog posts, see the following tutorial.
Creating Random Post Widget Without Thumbnail Under Posts
Copy the code below and place it under the code<data:post.body/>
<div class='random-url'>
<h4>Random Post:</h4>
<ul id='random-posts'/>
<script>
//<![CDATA[
var homePage = "http://www.iumari.com/",
numPosts = 5;
function randomPosts(a){if(document.getElementById("random-posts")){var e=shuffleArray(a.feed.entry),title,link,img,content="",ct=document.getElementById("random-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<div class="random-posts"><li><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></li></div>'}ct.innerHTML=content}}function shuffleArray(arr){var i=arr.length,j,temp;if(i===0)return false;while(--i){j=Math.floor(Math.random()*(i+1));temp=arr[i];arr[i]=arr[j];arr[j]=temp}return arr}var random_post=document.createElement('script');random_post.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results=999&callback=randomPosts';document.getElementsByTagName('head')[0].appendChild(random_post);}
</script></div>Change http://www.iumari.com/ with the name of your blog.To adjust the widget display random post, you can edit the css below.
Figures on the codenumPosts = 5;is the number of links that will be displayed in this widget later, adjust to the needs of your blog.
/* Random Post */
.random-url{margin:10px 20px 25px;padding:0}
.random-url h4{color:#333;text-transform:capitalize;font-family:'Roboto', Arial, Sans-Serif;font-size:140%;font-weight:400;position:relative;padding:0 10px 10px;margin:0}
.random-posts a{color:#4285f4}
.random-posts a:hover{text-decoration:underline !important}Thus tutorial this time, may help.