Responsive Blogger Recent Posts Slide By Label And Show On Label Pages
Setelah kemarin kita mencoba menjalankan kembali Responsive Blogger Recent Posts Slide dan memodifikasi beberapa kodenya untuk mengubah responsive-nya dan supaya menjadi support HTTPS serta menampilkan tombol next prev, sekarang kita akan mencoba menampilkannya di setiap halaman label dengan recent posts by label.Makara di halaman utama/homepage slide menampilkan recent post biasa, sementara di halaman label akan menampilkan recent post by label sesuai dengan halaman labelnya.
Kita akan sedikit memodifikasi javascript-nya untuk mempermudah menampilkan recent posts slider di homepage menambahkan label untuk menampilkan recent posts by label pada setiap halaman label dengan memakai conditional tags untuk halaman homepage dan halaman label.
Jika Anda ingin tau ingin mencobanya, silahkan ikuti langkahnya di bawah ini.
Untuk aba-aba CSS masih sama dengan yang kemarin, hanya beda pada tag conditionalnya. Silahkan simpan aba-aba CSS di bawah ini di atas aba-aba
</head>. Jika kemarin Anda sudah memasang CSS yang kemarin aku bagikan, silahkan ganti dengan yang berikut ini. <b:if cond='data:blog.pageType != "static_page" and data:blog.pageType != "item"'>
<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/AVvXsEhvpbUJcGaWpmbYqy2aCqMIcq0TI-tDPvuDAcnuqu6FqQT0N_Ds4F9yi4GkPDt-grO-8knDbtCXbX9ye-7JgqWkQNxlT5CbbRY9eSqfc47hXQDt6VG17Zav-QgEqpgXe2qM58_GmyrIjVw/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/AVvXsEgEeib9E8ajRLFmWPsNM-fJ63tuLmFi3TZIzlf8U8xeTR9_3knzYHR9XJF0tOUwJxeu481IHlwZs7JGnP1XXLaXjf5XIZU1r0czee8ePcmQCjyMb7Y2CGhCxBUj1WXopU2yqezqtX4gdEI/s1600/code-less-than.png") center no-repeat;background-size:50px 50px}
#nextx{right:50%;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2jYnVqI7z6T4cN2ezpJa9KHMYCff7nzX_LpCT-KHiUxsBZ7h3SUatUpSzfoE5zz9lIdvj5zQBEvN2mXGgZ9SzIvkFaLGWVkvt65TfkliJU8S_Dzu0hz4s3vA-Ijzm_Zhgc2YERZ4GQi0/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>
Kemudian silahkan simpan aba-aba javascript berikut di atas aba-aba
</body>. Jika Anda sudah memasang javascript dari postingan sebelumnya silahkan ganti dengan yang berikut ini. <b:if cond='data:blog.pageType != "static_page" and data:blog.pageType != "item"'>
<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/AVvXsEjA5WGPwtbRWRudNcYOSwvfaD7UYjWqXPNAo98fU5wZZnyHDJc3cBTxsgCuXnvsLL0CiVwfVRu37Sv03uChACl_c6PovZyt2xRdFn2kGDs_cIzUcEE8M6ALIuXtvgpBV_X02-1dxNoUdxE/s1600/nothumb_large.png",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],};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="Responsive Blogger Recent Posts Slide By Label And Show On Label Pages"></a><a href="#" id="nextx" title="Responsive Blogger Recent Posts Slide By Label And Show On Label Pages"></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="Responsive Blogger Recent Posts Slide By Label And Show On Label Pages"><div class="overlayx"></div><img class="random" src="'+u+'" title="Responsive Blogger Recent Posts Slide By Label And Show On Label Pages"><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="/-/"+label.tagName;if(label.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>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script>
//<![CDATA[
var label={
tagName:false
};
//]]>
</script>
</b:if>
<b:if cond='data:blog.searchLabel == "Blogger"'>
<script>
//<![CDATA[
var label={
tagName:"Blogger"
};
//]]>
</script>
</b:if>
<b:if cond='data:blog.searchLabel == "Tutorial CSS"'>
<script>
//<![CDATA[
var label={
tagName:"Tutorial%20CSS"
};
//]]>
</script>
</b:if>
Perhatikan yang aku tandai, itu referensi label postingan. Perhatikan juga untuk referensi label postingan dengan 2 kata. Penulisan label itu sensitif, jadi penulisannya harus sesuai dengan label untuk penulisan besar kecil hurufnya.
Untuk menambahkan slide pada halaman label lainnya tinggal tambahkan aba-aba berikut:
<b:if cond='data:blog.searchLabel == "Blogger"'>
<script>
//<![CDATA[
var label={
tagName:"Blogger"
};
//]]>
</script>
</b:if>
Sesuaikan yang ditandai dengan label postingan.
Begitu seterusnya untuk halaman label lainnya.
Kemudian silahkan simpan aba-aba di bawah ini di mana Anda ingin menampilkan slide-nya. Biasanya di bawah sajian header.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='featuredpost'/>
</b:if>
<b:if cond='data:blog.searchLabel == "Blogger"'>
<div id='featuredpost'/>
</b:if>
<b:if cond='data:blog.searchLabel == "Tutorial CSS"'>
<div id='featuredpost'/>
</b:if>
Perhatikan yang aku tandai, itu referensi label postingan. Penulisan label itu sensitif, jadi penulisannya harus sesuai dengan label untuk penulisan besar kecil hurufnya.
Untuk menambahkan slide pada halaman label lainnya tinggal tambahkan aba-aba berikut:
<b:if cond='data:blog.searchLabel == "Blogger"'>
<div id='featuredpost'/>
</b:if>
Sesuaikan yang ditandai dengan label postingan.
Begitu seterusnya untuk halaman label lainnya.
Selamat mencoba.... Sumber https://www.kompiajaib.com/
0 Response to "Responsive Blogger Recent Posts Slide By Label And Show On Label Pages"
Posting Komentar