Beranda / BLOGGER

Membuat Slider Random Post Responsive

Posting Komentar

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 tentang 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, seperti 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, bisa liat di blog demo berikut..




Demo Slider Random Post Responsive Blogger





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


cara membuat slider otomatis di blog Responsive



  • harus sudah login ke blogger.com



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


  • Kalo sudah ketemu, masukan css dibawah ini tepat 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, sekarang kalian cari kode </body>



  • Setelah ketemu masukan script dibawah ini tepat diatasnya.


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


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





  • Langkah terakhir kita tinggal pasang kode pemanggilnya..



  • kalian bisa pasang langsung di edit HTML / pasang di tataletak agar tampilannya bisa disesuaikan



  • Tapi pada tutorial kali ini sebagai contoh kita pasang dibawah kode <body>



  • Silahkan cari kode <body>, kalo ga ada coba carinya seperti ini <body



  • Jika sudah ketemu, masukan html dibawah ini tepat dibawah kode 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 sekarang cara pemasangannya sudah selesai, tinggal di cek dan lihat hasilnya..



  • Okeh, mudah kan, cukup sampai di sini n Selesai




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




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




Anda mungkin menyukai postingan ini

Tidak ada komentar untuk "Membuat Slider Random Post Responsive"

Posting Komentar