cara membuat widget post blogger slider otomatis

 


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://belajarblog-basistik.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://belajarblog-basistik.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
Tags

Tampilkan selengkapnya

Top Post Ad

Below Post Ad