Random post widget helps a lot to increase your page impression. If you have larger posts, it is not easy task visitors to find all posts, so this widget is very helpful and also reduce your bounce rate. In this article, I am introducing you how to add a random post widget with image thumbnails on your blog.
Also Read:
How To Create
Adding Random Post Widget
- Login to your blogger account and go to the layout of the blog
- Click on new gadget and select HTML/JavaScript.
- After adding gadget paste the following code
<> style
#random-posts{ img
-radius: 10px; border
: left; float
-right: 5px; margin
: 75px; width
: 75px; height
-color: #F5F5F5; background
: 3px; padding
: all 0.2s linear 0s; transition
}
#random-posts img hover { :
: 0.6; opacity
}
ul#random-posts {
-style-type: none; list
: 0px; padding
}
#random-posts a {
-size: 12px; font
-transform: uppercase; text
: 0px auto 5px; padding
}
#random-posts ahover { :
-decoration: none; text
}
. -summary { random
-size: 11px; font
: none; background
: 5px; padding
-right: 8px; margin
}
#random-posts{ li
-bottom: 10px; margin
-bottom: 1px solid #EEEEEE; border
: 4px; padding
}
</> style
<id='random-posts'> ul
<type='text/ script '> javaScript
randomposts_number = 5; var
randomposts_chars = 110; var
randomposts_details = 'yes'; var
randomposts_comments = 'Comments'; var
randomposts_commentsd = 'Comments Disabled'; var
randomposts_current = []; var
total_randomposts = 0; var
randomposts_current = new Array var randomposts_number); (
function randomposts json) { (
total_randomposts =json feed . openSearch$totalResults . $t .
}
document . write '<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>'); (
function getvalue ) { (
( for var = 0; i < randomposts_number; i++) { i
var found = false;
var rndValue = get_random( );
for (var j = 0; j < randomposts_current. length; j++) {
if (randomposts_current[ j] ==rndValue ) {
found = true;
break
}
};
if (found) {
i --
}else {
randomposts_current[ i ] =rndValue
}
}
};
function get_random( ) {
var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1));
return ranNum
};
</script >
<type='text/ script '> javaScript
function random_posts( json) {
( for var = 0; i < randomposts_number; i++) { i
var entry =json . feed. entry[ i ];
var randompoststitle = entry. title. $t;
if ('content' in entry) {
var randompostsnippet = entry. content. $t
}else {
if ('summary' in entry) {
var randompostsnippet = entry. summary. $t
}else {
var randompostsnippet = "";
}
};
randompostsnippet =randompostsnippet . replace( /<[^>] *>/g, "");
( if randompostsnippet length < randomposts_chars) { .
randomposts_snippet = var randompostsnippet
}{ else
= randompostsnippet randompostsnippet substring . 0, randomposts_chars); (
whitespace = var randompostsnippet . lastIndexOf " "); (
randomposts_snippet =randompostsnippet substring . 0, whitespace) + "…"; (
};
( for j = 0; j < entry var link . length; j++) { .
('thr$total' in entry) { if
var randomposts_commentsnum = entry.thr$total.$t + ' ' + randomposts_comments
}{ else
randomposts_commentsnum = randomposts_commentsd
}; if (entrylink . j] [ . == 'alternate') { rel
var = entry randompostsurl link . j] [ . ; href
randomposts_date = entry var published . $t; .
('media$thumbnail' in entry) { if
var = entry randompoststhumb media$thumbnail . url .
}{ else
= "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbA2uS-UhzAN9PR7zHLI62hXXRwJf1uvdFVPymtLxdPxix04198gs_6XzxTJhl78w8TZWhtiumCSfNTGclzUrO_udKOZYpL9FOVhjIg64V7aNW6mGCT6d5kntEuLGbjve8hJ1tH5-7ncM/s1600/no_thumb.png" randompoststhumb
}
}
};
document write . '< ( >'); li
document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" src="' + randompoststhumb + '"/></a>');
document . write '< ( href="' + div><a + '" rel=" randompostsurl ">' + nofollow + '</a></ randompoststitle >'); div
(randomposts_details == 'yes') { if
document.write('<span><div class="random-info">' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum) + '</div></span>'
};
document.write('<br/><div class="random-summary">' + randomposts_snippet + '</div><div style="clear:both"></div></li>')
}
};
getvalue ); (
( for var = 0; i < randomposts_number; i++) { i
document . write '<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + randomposts_current ( [ ] + '&max-results=1&callback=random_posts\"><\/script>') i
};
</> script
</> ul
Random Post option
Change the Red Values if you want to modify
- Thumbnail dimension; Change the thumbnails of Pixels in post replace the 75x value.
- Summery length, Modify the summery length to change this 110 value.
- Font
Size for posts and
summary , Yu can modify the 11px value and the title 12px value.
Now save the widget and view your blog, it randomly change your blog posts.
Comments
Post a Comment