After publishing an article on 5 Five Easy Steps to AddAdvanced Horizontal Random Post to Blogger Gadget it came in to my
consideration that bloggers might also like to place random post on their
sidebar instead of footer.
Now making your blog look professional and a little bit
advanced this is definitely one of the stuffs you need. In just 5 steps as
listed below you will be able to give your blog a new look, increase in page
views, engagement of readers and lot more. Visiting and Navigating your blog
will be much easier for visitors and also its SEO friendly so yes its what your
product needs.
Step 1
Log on to your Blogger Account and select your desired blog.
Step 2.Go to ‘layout’ in your blogger drop down list
Step 3.
Now clink on ‘Add a Gadget’’ where you want it.
Preferably your sidebar because its vertical and will make your blog look more
professional
Step 4.
Scroll to ‘HTML-JAVASCRIPT’, clink on the + beside it to add
it, Now Copy the Code below and paste it inside the text box. And also leave
the Title empty that’s if you don’t want to add any title to it
Code:
<style>#random-posts img { border-radius: 10px; float: left; margin-right: 5px; width: 75px; height: 75px; background-color: #F5F5F5; padding: 3px; transition: all 0.2s linear 0s;}
#random-posts img:hover { opacity: 0.6;}
ul#random-posts { list-style-type: none; padding: 0px;}
#random-posts a { font-size: 12px; text-transform: uppercase; padding: 0px auto 5px;}
#random-posts a:hover { text-decoration: none;}
.random-summary { font-size: 11px; background: none; padding: 5px; margin-right: 8px;}
#random-posts li { margin-bottom: 10px; border-bottom: 1px solid #EEEEEE; padding: 4px;}</style><ul id='random-posts'><script type='text/javaScript'>var 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(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 i = 0; i < randomposts_number; 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><script type='text/javaScript'> function random_posts(json) { for (var i = 0; i < randomposts_number; 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) { var randomposts_snippet = randompostsnippet } else { randompostsnippet = randompostsnippet.substring(0, randomposts_chars); var whitespace = randompostsnippet.lastIndexOf(" "); randomposts_snippet = randompostsnippet.substring(0, whitespace) + "…"; }; for (var j = 0; j < entry.link.length; j++) { if ('thr$total' in entry) { var randomposts_commentsnum = entry.thr$total.$t + ' ' + randomposts_comments } else { randomposts_commentsnum = randomposts_commentsd }; if (entry.link[j].rel == 'alternate') { var randompostsurl = entry.link[j].href; var randomposts_date = entry.published.$t; if ('media$thumbnail' in entry) { var randompoststhumb = entry.media$thumbnail.url } else { randompoststhumb = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAq2vPoUaKhF9MtBm0ZnVGZXb65R8p_NWIfwMhBmz6OyU7wEkWLxOOn7bcIXFdBXxXahjMziqe1n-ui-iQP67nhnIoaYDZw4jRxz59iWPUFhnOT8hIj3bmEgW8zGGzD8OU5cTjOxqUuGM/s1600/no_thumb.png" } } }; document.write('<li>'); document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" src="' + randompoststhumb + '"/></a>'); document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>'); if (randomposts_details == 'yes') { 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 i = 0; i < randomposts_number; i++) { document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + randomposts_current[i] + '&max-results=1&callback=random_posts\"><\/script>')};</script></ul>
Click on the save and yes you are done.
Customization
1. Replace 75px with your desired value to change the size of the thumbnails in pixels
2.
Change 110 to show your desired length of
description text, and add 0 to remove description
3.
Change yes to no to remove date and comment in
description
4.
Change 5 with your desired number of post you
want to show
5.
To modify or change the font size for post
titles and summary change 11px value and 12px value respectively.
6.
Change random posts..!!! with your desired title
Save and you are doneHave any Problems??? share your thoughts in our comment box
0 comments:
Post a Comment