Membuat Slider Random Post Responsive

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
12 komentar
  1. Terimakasih Banyak Gan.. Ini Yang Saya Cari2 Selama Ini.. :-d

    ReplyDelete
    Replies
    1. Wkwkwk iya gan, sama-sama, silahkan d coba. moga lancar :)

      Delete
  2. Kenapa saya selalu mengunjungi blog ini? karena artikel diblog ini selalu di ulas dengan singkat dan langsung to the point, yang pastinya tutorial nya selalu work :)

    ReplyDelete
    Replies
    1. Wkwkwk terima kasih gan, suka mengunjungi blog ane :)

      Allhamdulilah gan kalo work :)

      Delete
  3. pak, saya mau tanya, punya saya kenapa tak tampil ya slide yang kecil 4 tersebut sebelah kanan, ada solusinya pak. trmakash

    ReplyDelete
    Replies
    1. Bisa saya liat blog yang di pasang widget ininya?

      Delete
  4. Min mau nanya.. Cara atur ukuran panjang dan lebarnya gimana ya ??

    ReplyDelete
    Replies
    1. Cari kode CSS ini, ↓

      #random-post-container

      Agan tinggal rubah bagian max-width sama max-heightnya.

      Delete
  5. Keren...
    Mantap... Terima kasih...
    Sangat bermanfaat...

    ReplyDelete
  6. Kalo gak ada kode <body taruh mana

    ReplyDelete