Blogger Responsive Random Post Slider

Hello friends! Today i will be unveiling a really cool blogspot widget that lets you display all the post on your blog in  a random way. It helps increase user clicks and page views. It shows only in the homepage and will be hidden on  postpages.
Blogger Responsive Random Post Slider
The Blogger Responsive Random Post Slider display dymatically and shows perfectly around all screen sizes from mobile devices to laptops and even bigger screens. It doesn’t reduce the speed of your blog because it is really fast loading and beautiful.
Check out the demo here

How To Add Blogger Responsive Random Post Slider

Lets get started with installing the random post slider into our blogspot blog. The codes and process is quite simple for pro bloggers but for new bies sake, i will keep it really easy and well explained.

Step 1

Visit ‘blogger.com and locate the ‘Template’ section.In the template section, clink on ‘Edit HTML’.
Using CTRL + F search for </head>

Once you find  the </head> tag, copy and paste the below codes, right above it.

Step 2

Using CTRL + F search for </body>

<b:if cond=’data:blog.url == data:blog.homepageUrl’>
<style type=’text/css’>
.layout-content{position:relative;overflow:hidden;padding:0 20px;margin:0 auto}
#random-post-container{width:100%;position:relative;max-width:901px;background:#222;padding:2px;max-height:381px;height:100%;border-radius:3px;overflow:hidden;margin:8px auto}
#featured .feat-column1{float:left;width:66%;height:379px;box-sizing:border-box}
.bungkus-related{padding:0;margin:0;position:relative}
ul.bungkus-related .content{float:left;width:60%;height:100%;box-sizing:border-box;overflow:hidden;position:relative}
ul.bungkus-related li.content:after{content:no-close-quote;position:absolute;left:0;bottom:0;width:100%;height:150px;background:url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAACXCAYAAADUKjHXAAAABHNCSVQICAgIfAhkiAAAAC1JREFUKJFjYIACRibyCSbyuGgsYiXwixErSzuCeXAopiJBejiTHquUJCTSCAApNwIpR17mugAAAABJRU5ErkJggg==) repeat-x;opacity:.5;background-size:100% 100%;overflow:hidden}
ul.bungkus-related .random-grup{float:right;width:40%;height:100%;background:#222;padding:12px;box-sizing:border-box;position:relative;overflow-y:hidden;max-height:381px}
ul.bungkus-related .random-grup:hover{overflow-y:auto}
ul.bungkus-related .content{float:left;width:60%;max-height:381px;box-sizing:border-box;overflow:hidden;position:relative;height:100%}
ul.bungkus-related .content .gambar img{width:100%;height:381px}
ul.bungkus-related .content .tulisan{position:absolute;left:0;bottom:0;width:100%;padding:15px;z-index:2;box-sizing:border-box;font-size:20px;color:white;line-height:1.4em}
ul.bungkus-related .content .tulisan a{color:white;font-weight:700;opacity:0.9}
ul.bungkus-related .content .tulisan .random-desk{font-size:15px}
ul.bungkus-related .content .post-tag{position:absolute;top:15px;left:15px;background-color:#299680;color:#fff;font-weight:400;z-index:2;height:22px;line-height:22px;padding:0 8px;font-size:12px}
ul.bungkus-related .content .post-tag a{color:white}
ul.bungkus-related .content .post-tag a:nth-child(n+2),ul.bungkus-related .random-grup .content .post-tag{display:none}
ul.bungkus-related .random-grup .content{display:block;width:100%;float:right;margin:0 0 12px;padding:0 0 12px;border-bottom:1px solid #333;height:auto;position:relative}
ul.bungkus-related .random-grup li.content:after{content:none}
ul.bungkus-related .random-grup .content .gambar{width:30%;height:70px;position:absolute;overflow:hidden;left:0;top:-9px;bottom:0;margin:auto;border:3px solid rgba(255,255,255,0.79);border-radius:3px}
ul.bungkus-related .random-grup .content .gambar img{width:100%;height:100%;display:table-cell;vertical-align:middle;overflow:hidden}
ul.bungkus-related .random-grup .content .tulisan{display:table-cell;padding-right:5px;position:relative;float:right;margin:0;padding-top:0;font-size:14px;width:69%}
ul.bungkus-related .random-grup .content .random-desk{font-size:10px}
@media screen and (max-width:500px){#random-post-container{overflow:auto}ul.bungkus-related .content{width:100%;float:none}ul.bungkus-related .content .gambar img{height:100%}ul.bungkus-related .random-grup{width:100%;float:none;overflow:hidden!important}}
</style>
</b:if>

When you find the </body> tag, copy and paste the above codes, right above it and clink on save to save the changes.

<b:if cond=’data:blog.url == data:blog.homepageUrl’>
  <script type=’text/javascript’>
//<![CDATA[
// Feed configuration
var homePage = ‘https://mastamvan.blogspot.com’, //ganti link mastamvan dengan link blog kalian
 maxResults = 5, //Ganti angka 5 lima untuk mengatur jumlah artikel yang akan ditampilkan
 summaryLength = 45, // udah segini aja cukup
 noImageUrl = ‘data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAIAAADajyQQAAAAA3NCSVQICAjb4U/gAAAAbUlEQVRoge3PAQ0AIRDAsOeNn3VUEDLSKtjWzHwv+m8HnGKsxliNsRpjNcZqjNUYqzFWY6zGWI2xGmM1xmqM1RirMVZjrMZYjbEaYzXGaozVGKsxVmOsxliNsRpjNcZqjNUYqzFWY6zGWI2xmg0/igINB8FclAAAAABJRU5ErkJggg==’,
 containerId = ‘random-post-container’;
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?”:e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!”.replace(/^/,String)){while(c–)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return’\w+’};c=1};while(c–)if(k[c])p=p.replace(new RegExp(‘\b’+e(c)+’\b’,’g’),k[c]);return p}(‘8 O(t,e){w k.P(k.6()*(e-t+1))+t}8 Q(t){7 e,a,s=t.f;18(0===s)w!1;j(;–s;)e=k.P(k.6()*(s+1)),a=t[s],t[s]=t[e],t[e]=a;w t}8 R(t){7 e=O(1,t.x.19$1a.$t-y);z.A&&z.A.S&&A.S(“1b 1c B x T 1d “+e+” 1e “+(e+y)),C(D+”/U/V/p?E=W-q-F&1f=1g&T-1h=”+e+”&G-H=”+y+”&X=Y”)}8 Y(t){j(7 e,a,s,n=I.1i(1j),r=Q(t.x.1k),l=”<J 2=’1l-1m’>”,o=0,i=r.f;i>o;o++){a=”p”q r[o]?r[o].p.$t.Z(/<.*?>/g,””).1n(0,1o)+”&1p;”:””,s=”10$11″q r[o]?r[o].10$11.1q.Z(/\/s[0-9]+(-c)?/,”/1r”):1s;j(7 d=0,m=r[o].K.f;m>d;d++)e=”1t”==r[o].K[d].12?r[o].K[d].L:”#”;l+=”<M 2=’1u’>”,l+='<b 2=”1v” ><1w 2=”6-1x” 13=”‘+s+'” 3=”‘+r[o].3.$t+'” E=”‘+r[o].3.$t+'” 1y=”14″ 1z=”14″></b>’,l+='<b 2=”1A”><a 3=”‘+r[o].3.$t+'” 2=”6-3″ L=”‘+e+'”>’+r[o].3.$t+”</a><1B>”,l+='<v 2=”6-1C”>’+a+”</v></b>”,z.1D=8(){j(7 t=$(“#6-B-1E J M”),e=1;e<t.f;e+=4)h=e+1,t.1F(e,e+4).1G(“<b 1H=’15″+h+”‘ 2=’6-15′></b>”)},l+=”<16 2=’B-17’>”;j(7 c=r[o].1I,u=[],h=0,g=c.f;g>h;++h)u.1J(‘<a 3=”‘+c[h].N+'” L=”‘+D+”/1K/1L/”+1M(c[h].N)+’?G-H=5″ 12=”17″>’+c[h].N+”</a>”);l+=u.1N(” “),l+=”</16>”,l+='<v 2=”1O”></v></M>’}n.1P=l+”</J>”}8 C(t){7 e=I.1Q(“F”);e.13=t,I.1R(“1S”)[0].1T(e)}C(D+”/U/V/p?E=W-q-F&G-H=0&X=R”);’,62,118,’||class|title|||random|var|function|||div||||length||||for|Math|||||summary|in|||||span|return|feed|maxResults|window|console|post|add_script|homePage|alt|script|max|results|document|ul|link|href|li|term|getRandomInt|floor|shuffleArray|createRandomPostsStartIndex|log|start|feeds|posts|json|callback|randomPosts|replace|media|thumbnail|rel|src|72|grup|small|tag|if|openSearch|totalResults|Get|the|from|until|orderby|updated|index|getElementById|containerId|entry|bungkus|related|substring|summaryLength|hellip|url|s600|noImageUrl|alternate|content|gambar|img|thub|width|height|tulisan|br|desk|onload|container|slice|wrapAll|id|category|push|search|label|encodeURIComponent|join|clear|innerHTML|createElement|getElementsByTagName|head|appendChild’.split(‘|’),0,{}))
//]]>
</script>
</b:if>

Step 3

Now is to add the final code, which will help us determine where the widget is to be shown.

<b:if cond=’data:blog.url == data:blog.homepageUrl’>
<div class=’layout-content’>
<div id=’random-post-container’>Memuat</div>
</div>
</b:if>

Go to ‘Layout tab’ and paste the above code into a HTML/JavaScript box right below the header.
Random Post Slider
Mobile Look

Final Words

This widget is made responsive, fast and mobile friendly and hopesfully it should act as the perfect slider for your blogspot blog. Once again it is Prince John Okosun the writer of Blogger Responsive Random Post Slider

Related Articles

  • namecheap hosting review NameCheap Hosting Review: Plans, Pricing, Pros, Cons, Features – All you need to know
  • How To Set The Number Of Post Shown On Label Pages
  • Advanced Recent Post Widget For Blogger With Thumbnails
  • How To Completely Remove Blogger Navbar And Attribution Widget
  • Transfer Your Domain Name From DomainKing To Garanntor In 5mins
  • customize blogger mobile template How To Easily Customize Blogger Custom Mobile Template
  • 4 Comments - Post Yours! How to? ▼

    1. Anonymous says:

      Just a suggestion, if you use picture from other blog please cite the source. I saw those pictures are taken from Indonesian blogger.

    2. The pictures are properties of Obhiaba Blog, the Indonesian words you see, are posts from a test blog.

      Thanks for caring!!

    3. Hello to all, how is everything, I think every one is
      getting more from this web site, and your views are nice in favor of new users.

    4. Hello there, You’ve done an incredible job. I will definitely digg it and
      personally suggest to my friends. I’m sure they’ll be benefited from this site.

    Leave a Reply

    0 Shares
    Share
    +1
    Tweet
    Pin
    Share
    Stumble