In the post below this article explains how to create random articles On Blog. There are several ways to make this element, or also popular as a random post. This random post features are automatically selected by the blog itself, can be placed next to post content, in sidebar on the left, right or somewhere.This automatic random article itself is a way to show the other topics of the previous article. This function could be added value of Search Engine optimization, so a link of article detected again. Similarly for visitors, there is the transformation of topics that may be made interested to read.
Add Random Articles In Blogger
However, the following article is just a random that show only title, while the styling like the font, color and other can be slightly modified for those who have some experience to edit the template. Random article is quite fast in terms of loading, so it will not interfere with the pagespeed.To create this Random Article on Blog only takes a few minutes. This feature can be modified as needed. Here are the following instruction described below. Don't forget to Back-up template first before Edit HTML Template.
Add the following code before
]]></b:skin> or before </style> in the CSS style section.The CSS Random Posts
.random-posts-tag {
background: #7793FF;
width: 100%;
height: auto;
padding: 5px 0 5px 10px;
font: 17px Arial;
font-weight: bold;
color: #fff;
text-transform: uppercase;
}
.random-posts {
border: none;
margin-left: 0px;
margin-bottom: 10px;
width: auto;
}
.random-posts ul {
list-style: square;
margin: 0 0 10px 0;
padding: 10px 10px 10px 15px;
}
.random-posts li {
margin: 0;
border-bottom: 1px dotted #DBDBDB;
padding: 7px 0 7px 0;
line-height: 1.4em;
}
.random-posts a {
text-decoration: none;
font: 13px arial;
text-align: left;
color: #1111AF;
}
.random-posts a:hover {
color: #00A3FF;
}Blue color is the position of a random article from the left, can be adjusted for propper position, example: change 'margin-left:0px' as necessary or appropriate value so looks better.
Red is a font's type.
Green is font's color when hover.
Another CSS style can be modified as desired.
Add the following code before
</head> or in the head section.The JavaScript
<script type="text/javascript">//<![CDATA[
var randarray = new Array();var l=0;var flag;
var numofpost=7;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
//]]></script>Pink is the color of the number articles you want to display
Add the following code in sidebar section, usually somewhere after
<div class='sidebar-wrapper'> or <div id='right-sidebar'> or similar.But if you confuse, just add the code using Add Gadget (If using Blogger: Dashboard - Layout - Add Gadget - Select HTML/JavaScript - Add in the content box (Note: Keep Title Box Blank - Don't Fill Anything) - Save).
HTML
<div class='random-posts-tag' >Random Posts</div>
<div class='random-posts' >
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=9999&callback=randomposts" type="text/javascript"></script>
</div>You can change Blue Color with the name as you want.
Save The Template and see the results.
