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

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://lovekarawang.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>
  • 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 cara memasnag widget Slider Otomatis Recent Post ini bermanfaat..

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

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)
 
vcbcvb © 2013. All Rights Reserved. Powered by Blogger Shared by Mafsyah
Top