Membuat Slider Random Post Responsive

Tutorial Cara Memasang Slider Random Post Di Homepage Blogger Responsive

Cara Membuat Slider Random Post Di blogger Responsive Dan Keren Seo Friendly. Slider recene post ini otomatis akan menampilkan beberapa artikel di blog kalian secara acak. Mungkin sudah banyak yang share wacana artikel Cara Membuat Resposive Recent Post Slider Di Blogger ini, tapi tampilannya yang berbeda.

Pada tutorial di blog mas tamvan ini, kita akan memasang slider dengan tampilan yang terbaru, menyerupai dari template yang di share oleh Arlina Design, hanya tampilannya yang mirip, isinya berbeda :3

Bagi kalian yang ingin melihat tampilan dari slider random post ini, dapat liat di blog demo berikut..

Demo Slider Random Post Responsive Blogger

Nah kini kita lanjut ke tutorial cara pemasangan slired post ini di blog..

cara menciptakan slider otomatis di blog Responsive

• harus sudah login ke blogger.com

• kalo sudah login masuk ke tab Template, Edit HTML
, kemudian cari instruksi </head>

• Kalo sudah ketemu, masukan css dibawah ini sempurna diatasnya

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

• Lanjut, kini kalian cari instruksi </body>

• Setelah ketemu masukan script dibawah ini sempurna diatasnya.

 <b:if cond='data:blog.url == data:blog.homepageUrl'>   <script type='text/javascript'> //<![CDATA[ // Feed configuration var homePage = 'https://tutorialcarapintar.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> 

ganti Link Ini https://tutorialcarapintar.blogspot.com/ dengan link blog kalian.

• Langkah terakhir kita tinggal pasang instruksi pemanggilnya..

• kalian dapat pasang pribadi di edit HTML / pasang di tataletak biar tampilannya dapat disesuaikan

• Tapi pada tutorial kali ini sebagai teladan kita pasang dibawah instruksi <body>

• Silahkan cari instruksi <body>, kalo ga ada coba carinya menyerupai ini <body

• Jika sudah ketemu, masukan html dibawah ini sempurna dibawah instruksi tadi...

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

• Nah kini cara pemasangannya sudah selesai, tinggal di cek dan lihat hasilnya..

• Okeh, gampang kan, cukup hingga di sini n Selesai

Cukup sekian dan terima kasih, semoga artikel wacana Tutorial cara memasnag widget Slider Otomatis Recent Post ini bermanfaat..

Apabila ada yang tidak dimengerti, silahkan tanya admin, insya allah dapat d bantu :0