Memasang Recent Posts Slide Responsive By Label And Show On Label Pages

Ini adalah postingan lanjutan dari pembahasan sebelumnya Cara Memasang Recent Post Slider Responsive Support HTTPS, dimana sebelumnya sudah kita bahas dan kita modifikasi beberapa kode script didalamnya agar support HTTPS dan tampilannya Responsive menyesuaikan dengan Device yang dipakai pengunjung. 

Di postingan kali ini kita akan membahas kembali dan sedikit menambhakan kode scriptnya untuk menampilkan Recent posts dengan tampilan slider sesuai dengan label postingan yang ditampilkan. Untuk tampilan awal di Home Page tetap dengan Tampilan Recent Posts biasa namun saat masuk ke Postingan akan kita kreasikan tampilan Recent Posts akan menampilkan sesuai dengan label yang telah kita tetapkan. 

Disini kita akan menambahkan juga Conditional Tag untuk halaman Homepage dan  untuk memanggil labelnya di Recent Post slider agar dapat tampil disetiap halaman sesuai dengan label yang sudah ditentukan disetiap Postingan dengan memodifikasi juga kode Javascript nya. 

Langsung saja bagi yang mau mencobanya mari kita simak penerapannya Memasang Recent Posts Slide Responsive By Label And Show On Label Pages.

Langkah Pertama

Untuk yang pernah memasang kode CSS ini di pembahasan sebelumnya kode ini sama hanya sedikit ada modifikasi Conditional Tag Silahkan salin kode CSS dibawah ini lalu ganti kode yang sudah dipasang sebelumnya dan letakkan di atas kode </head>.

<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<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/AVvXsEhHPqFMpomCO9_by0BkGN8Xk3qnjh13gocPrcsk2yj1rEQd3Lr-USjB1jAAEcQDqCw41R4Ugmrc1_2sil9kG_KksPUF6e6EvBmtQuJs6Tr7tm-hy0E05Lacpw2aEknQweNz1bqHJNo0Ud8/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/AVvXsEiA7dTSLFsIiF1yxwqpriIwreqUDzPmEskQKzDVpiMUkFybPsXrNcBlN_s6-hmkhxYc-zoqztF5sE40ev_BqKUSVrPsbRtFClosR_MRXXFt05OLYm0TnqJ5ijYf5QBmnFVNdr633Syc3h8/s1600/code-less-than.png") center no-repeat;background-size:50px 50px}
#nextx{right:50%;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE4FSVoDx3H1TOfR6qBK62kMmEeLkObnpyf1_53XGwTNP7irc3dRS1luPOi8-tekX5GsVGLbRW9Qn7XYK8pCw0AeFOfvGiQ5kdTHNBLnOX_Wjb7VOhqazhlMOP9e7w9Pq2wPJYDMzAuMU/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>

Langkah Ke Dua
Silahkan salin kode Javascript dibawah ini lalu letakkan diatas kode </body>, Bagi yang sudah pernah memasang kode javascript seperti ini silahkan ganti dengan kode ini.

<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<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/AVvXsEgMgRmiiv1nNRPwlQQtWk8lJOEqmmIRS1n8RU1ihWxToX3hyphenhyphenVwrgdbFXREkqOTEJF0a0QK_rnlcoKRIi7WrBTpFoII1JfR2tBtrbWaukBoXoRv2MX1WZK-tMLajZK8eDtTgdqh_hUN7LL4/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="prev"></a><a href="#" id="nextx" title="next"></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="'+k+'"><div class="overlayx"></div><img class="random" src="'+u+'" title="'+k+'"><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 == &quot;Blogger&quot;'>
<script>
//<![CDATA[
var label={
   tagName:"Blogger"
};
//]]>
</script>
</b:if>
<b:if cond='data:blog.searchLabel == &quot;Tutorial CSS&quot;'>
<script>
//<![CDATA[
var label={
   tagName:"Tutorial%20CSS"
};
//]]>
</script>
</b:if>

Perhatikan kode yang ditandai silahkan sesuiakan dengan label yang akan ditampilkan kemudian perhatikan juga penulisannya harus sesuai besar kecilnya karena tidak akan tampil jika penulisannya tidak sama.

Jika ingin menampilkannya secara Slide untuk halaman label lainnya silahkan sobat tambahkan kode dibawah ini.

<b:if cond='data:blog.searchLabel == &quot;Blogger&quot;'>
<script>
//<![CDATA[
var label={
   tagName:"Blogger"
};
//]]>
</script>
</b:if>

Perhatikan kembali kode yang ditandai silahkan sesuia kembali dengan label yang akan ditampilkan dan begitu seterusnya jika ada banyak label yang mau ditambahkan.

Langkah Ke Tiga
Silahkan salin kode dibawah ini untuk menampilkan slide-nya letakkan dimana ingin ditampilkan umumnya ini di taruh di bawah Menu Header Blog.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='featuredpost'/>
</b:if>
<b:if cond='data:blog.searchLabel == &quot;Blogger&quot;'>
<div id='featuredpost'/>
</b:if>
<b:if cond='data:blog.searchLabel == &quot;Tutorial CSS&quot;'>
<div id='featuredpost'/>
</b:if>

Perhatikan kembali kode yang ditandai silahkan sesuaikan, dan diatas hanya contoh untuk Label Postingan dan jika mau menambahkan slidedi halaman label silahkan tambahkan kode dibawah ini.

<b:if cond='data:blog.searchLabel == &quot;Blogger&quot;'>
<div id='featuredpost'/>
</b:if>

Dan seterusnya jika ada banyak label yang mau ditampilkan.

Perhatikan setiap langkah penerapannya, ada baiknya sebelum mencobanya dibackup terlebih dahulu templatenya antisipasi jika terjadi error setelah sesuai silahkan SAVE dan selesai. Selamat mencoba semoga bermanfaat.