Membuat Slider Random Post Otomatis Responsive

Kali ini akan membagikan Cara Membuat Slider Random Post Otomatis Responsive. Dengan Widget ini, tampilan blog menjadi lebih keren pastinya.

Slider Random Post ini akan menampilkan artikel acak yang pernah diposting sebelumnya di blog sobat. Jadi, selain menghemat ruang, widget ini menjadikan tampilan menjadi lebih elegant tentunya. Selain itu, widget ini juga responsive jika dibuka melalui mobile, tablet, ataupun yang lainnya sehingga tidak merusak tampilan blog sobat.

Baca juga : Cara Membuat Sitemap Buka Tutup

Berikut Cara Membuat Slider Random Post Otomatis Responsive :

1. Masuk ke akun blogger sobat
2. Masuk ke menu tab Template > Edit HTML
3. Kemudian cari kode </head>
4. Letakkan kode berikut ini tepat di atasnya :

<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> 

5. Selanjutnya cari kode </body> dan takkan kode berikut ini tepat di atasnya :

<b:if cond='data:blog.url == data:blog.homepageUrl'>   <script type='text/javascript'> //<![CDATA[ // Feed configuration var homePage = 'https://www.santaibareng.net', //ganti link dengan link blog sobat  maxResults = 5, //Ganti angka 5 lima untuk mengatur jumlah artikel yang akan ditampilkan  summaryLength = 45, //   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> 

Note :

Ganti https://www.santaibareng.net dengan alamat blog sobat masing-masing.

6. Selanjutnya memasang kode pemanggilnya.
Cari kode <body> atau <body, letakkan kode berikut tepat dibawahnya.

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

Note :
Kode ini bisa diletakkan langsung di widget HTML (Tata Letak)
Bisa juga diletakkan dimanapun yang sobat inginkan melalui settingan Template Blog.

7. Simpan template dan lihat hasilnya.

Baca juga : Anti Copy Paste Kecuali Bagian Tertentu di Postingan Blog

Gimana sobat ? Mudah kan.

OK, sekian dulu. Selamat mencoba semoga berhasil dan bermanfaat.
Terima kasih.

Share this post