Cara Menciptakan Post Slider Otomatis Blogger Responsif Terbaru
Cara Membuat Post Slider Otomatis Blogger Responsif Terbaru. Saya tidak mengetahui siapa yang menciptakan blog responsif blogger baru-baru ini posting slider ini (penghargaan sebesar-nilai untuk penulis widget ini), namun yang aku tahu yang mempopulerkan widget ini dimulai oleh Arlina dari semua posting di Google memakai JS dari Arlina.
Namun sayang JS dari Arlina sudah tidak sanggup hanya memakai slider-nya tidak berjalan.
Untuk itu Anda sanggup menjalankannya dan mengatur beberapa fungsi untuk responsif-nya dan biar menjadi sumbangan HTTPS dan menampilkan tombol brerikutnya. Di layar dengan lebar bayangan dari 640px, slider hanya menampilkan satu item biar alhasil tidak terlalu menumpuk.
Nah bagi yang ingin dipakai untuk langkah-langkah di bawah ini.
Silakan simpan aba-aba CSS di bawah ini di atas kode </ head>. Ini memakai tag conditional biar widget hanya tampil di halaman homepage.
<b:if cond='data:blog.url == data:blog.homepageUrl'> <style> /*<![CDATA[*/ #slides li:nth-child(3),#slides li:nth-child(5){left:75%;width:25%;height:50%} #featuredpost{margin:15px auto;width:100%;position: relative;} #slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #slides li,#slides ul{padding:0;margin:0;list-style:none;position:relative} #slides ul{height:350px} #slides li{width:50%;height:100%;position:absolute;display:none} #slides li:nth-child(1),#slides li:nth-child(2),#slides li:nth-child(3),#slides li:nth-child(4),#slides li:nth-child(5){display:block} #slides li:nth-child(1){left:0;top:0} #slides li:nth-child(2){left:50%;width:25%;height:50%} #slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%} #slides li:nth-child(5){top:50%} #slides li:nth-child(1) h4{overflow:hidden;font-size:20px;bottom:0;color:#fafafa;width:100%;padding:10px 10px 10px 90px;text-align:left;background:rgba(0,0,0,.3);height:90px;text-shadow:2px 2px 0 rgba(0,0,0,.2);line-height:1.1;left:0} #slides li:nth-child(1) .label_text{font-size:30px;display:block;bottom:10px;left:10px;padding:0;box-shadow:5px 3px 0 rgba(0,0,0,.2)} #slides li:nth-child(1) span.dd{display:block;font-size:30px;padding:12px 15px;background:#E53B2C;margin:0} #slides li:nth-child(1) span.dm{display:block;font-size:14px;background:#333;color:#fff;padding:5px 21px;text-transform:uppercase;margin:0} #slides li:nth-child(1) span.autname,#slides li:nth-child(1) span.dy{display:none} #slides a,#slides img{display:block;width:100%} #slides a{height:100%;overflow:hidden} #slides img{height:100%;border:0;padding:0;background-color:#333;-moz-transform:scale(1) rotate(0);-webkit-transform:scale(1) rotate(0);-ms-transform:scale(1) rotate(0);transform:scale(1) rotate(0);transition:all .6s linear} #slides li:nth-child(1) .overlayx,#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none} #slides li a:hover img{-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all .3s linear} #slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x} #slides .label_text,#slides h4{z-index:3;left:10px;position:absolute;} #slides h4{bottom:40px;margin:0 10px 0 0;font-size:13px;padding:5px 10px;color:#f9f9f9;line-height:1.1;font-weight:400;background:rgba(41,41,41,.7);text-align:left} #slides .label_text{font-size:12px;color:#fff;bottom:10px;background:#E53B2C;background:rgba(229,59,44,.8);padding:3px 6px} #slides .overlayx,#slides li{transition:all .4s ease-in-out} #slides li:hover .overlayx{opacity:.1} #featuredpost.loadingxx{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOmw7BdCk3k1xHJr7RAy6bb5hBRl55G8R_5VQHqSJqKqIvT1S2ToUs9f3y4LYE_RJRa8cek65rJVTQDCElpO_HlxOLwgfdkD7NCc67EsPWICReKyXiOb3AmA9pfdiMHpVpAcnOLVLYwBs/s1600/loadingbox.gif) no-repeat 50% 50%;} #buttons{opacity:0;transition:all .4s ease-in-out} #featuredpost:hover #buttons{opacity:.7} #nextx,#prevx{position:absolute;top:0;bottom:0;width:60px} #prevx{left:0;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4_1PdEAjA1CfjiDcaBedc0ojQjWo-GpjE5q9eyhs1uLQnWSAptXeBxM5Fn2LqCLlMal8ULL3w8X9HTBKpyo_qmN375_TnKQCLdeROGNlU950Co_gWfGeUPdWgo9G5p0l4zEOzcTNN9RE/s1600/code-less-than.png") center no-repeat;background-size:50px 50px} #nextx{right:50%;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk8bQjOZYgdisn5TeGFuQecphP0sb-_Dum9rxKoJBxHsmbc5-J6XOTuICyqfrdv9y2NWcgtV1XKL8POHjaa8Ocu2WTTsKweAt9okP5jBuFR6pSVR6srsxQBB4q63IZiAUP1mh2a8oeHgU/s1600/code-greater-than.png") center no-repeat;background-size:50px 50px} @media only screen and (max-width:1024px){#slides ul{height:320px} } @media only screen and (max-width:800px){#slides li:nth-child(1) h4{font-size:18px;} } @media only screen and (max-width:640px){#slides ul{overflow:hidden} #slides li:nth-child(1){width:100%;height:100%} #slides li:nth-child(2),#slides li:nth-child(3),#slides li:nth-child(4),#slides li:nth-child(5){top:0;left:100%;height:100%} #nextx{right:0;} } @media only screen and (max-width:480px){#slides ul{height:200px} #slides li:nth-child(1) h4{font-size:13px;} #nextx, #prevx{bottom:50%} } /*]]>*/ </style> </b:if> Untuk latar belakang tanggal biar lebih sesuai dengan warna tema blog Anda silahkan rubah latar belakang pada #slides li: nth-child (1) span.dd untuk tanggal pada item Pertama dan background pada #slides .label_text untuk tanggal item lainnya. Kemudian jalankan aba-aba javascript berikut di atas aba-aba </ body>
<b:if cond='data:blog.url == data:blog.homepageUrl'> <script type='text/javascript'> //<![CDATA[ function FeaturedPost(a){(function(e){var h={blogURL:window.location.origin,MaxPost:15,idcontaint:"#featuredpost",ImageSize:600,interval:4000,autoplay:false,loadingClass:"loadingxx",pBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPacKVCF8MCtjoW581OjsauRh-m4wv2CniN0t1lWlRv9Jsxts0cnrwOpYBArVvxv7gEwE9wmnrJWD0LuwlZZfx7RIAiSqNNHGJZw_6vd0cqs3yooZsswtnbbH_lVsWr9MKlDGosFxWxOQ/s1600/nothumb_large.png",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var c=h.blogURL;var d=h.MaxPost*200;if(h.blogURL===""){c=window.location.protocol+"//"+window.location.host}g.html('<div id="slides"><ul class="randomnya"></ul></div><div id="buttons"><a href="#" id="prevx" title="Cara Membuat Post Slider Otomatis Blogger Responsif Terbaru"></a><a href="#" id="nextx" title="Cara Membuat Post Slider Otomatis Blogger Responsif Terbaru"></a></div>').addClass(h.loadingClass);var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail"in s[o]){u=s[o].media$thumbnail.url.replace(/.*?:///g , "//").replace(//s[0-9]+-c/g,"/s"+h.ImageSize)}else{u=h.pBlank.replace(//s[0-9]+(-c|/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'" title="Cara Membuat Post Slider Otomatis Blogger Responsif Terbaru"><div class="overlayx"></div><img class="random" src="'+u+'" title="Cara Membuat Post Slider Otomatis Blogger Responsif Terbaru"><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l)};var b=function(){var i="/-/"+h.tagName;if(h.tagName===false){i="";e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}else{e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}(function(){setTimeout(function(){e("#prevx").click(function(){e("#slides li:first").before(e("#slides li:last"));return false});e("#nextx").click(function(){e("#slides li:last").after(e("#slides li:first"));return false});if(h.autoplay){var k=h.interval;var l=setInterval("rotate()",k);e("#slides li:first").before(e());e("#slides").hover(function(){clearInterval(l)},function(){l=setInterval("rotate()",k)});function j(){e("#nextx").click()}}g.removeClass(h.loadingClass)},d)})()};e(document).ready(b)})(jQuery)};function rotate(){$('#nextx').click();};document.write('') $(document).ready(function () { FeaturedPost(); }); //]]> </script> </b:if> Untuk kalian yang suka tampilannya bergeser secara otomatis silahkan rubah aja code autoplay:false ganti dengan autoplay:true, Sesuaikan dengan selera masing-masing. Untuk memangil code scriptnya supa sanggup tampil di blog salin code ini.
<div id="featuredpost"></div> Terserah mau ditampilkan dimana post slidernya biasanya ditaruh dibawah hidangan header.
kalau ditampilkan diside kafe juga sanggup kembali lagi ke selera kalian masing masing.
Itulah Cara Membuat Post Slider Otomatis Blogger Responsif Terbaru Cukup gampang bukan.