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

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

Di postingan kali ini kita akan membahas kembali dan sedikit menambhakan aba-aba 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 ketika 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 supaya dapat tampil disetiap halaman sesuai dengan label yang sudah ditentukan disetiap Postingan dengan memodifikasi juga aba-aba 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 aba-aba CSS ini di pembahasan sebelumnya aba-aba ini sama hanya sedikit ada modifikasi Conditional Tag Silahkan salin aba-aba CSS dibawah ini lalu ganti aba-aba yang sudah dipasang sebelumnya dan letakkan di atas aba-aba </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/AVvXsEg8MRcw4I8Sy6m77zfO3LppTQI-565vProGGQlG5I407ap7DoF2Wh1NTRHeypuXaDMjvjMvzfPW5hc2ZdhWW7nrsqlcsysRIc5zVzyxLfCfG3lrTX_AsqRd_builRqdjKG2XdTw1UqGG10/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/AVvXsEjLyImI9oqhSMWGFz9ndrmk9Eb0juhEj3SYQx8sNpE4eS4tC5PEf5J4SEi95X_IKTBNx6MmcbL7MiSX24JFMpX-dxG9bdFJmb7U-obZouTOHHtOpXooVzbnYuWoE0jiBLcwgj8zkMgrrPE/s1600/code-less-than.png") center no-repeat;background-size:50px 50px} #nextx{right:50%;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhph-NA0VUJBSAbCwdi8DEw3_5MM8X8VjWk2N5Y0EfpLN2GOwdWy8oZ6uYolxC_w-3DDffrj0ucVeb-SPakLcDlWWLn2yjsA61iuOvNLI3OhNSXagr_OBIoFl42P1yUWii48ZSKuO5MUmY/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 aba-aba Javascript dibawah ini lalu letakkan diatas aba-aba </body>, Bagi yang sudah pernah memasang aba-aba javascript menyerupai ini silahkan ganti dengan aba-aba 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/AVvXsEhKg4hA9bBctHr49jWDBoPWI0rO74YFxMawMrOJp57G8d91bbe2BQAUaxeeHs97kuQCClmqf_yWB9OmAes_THt6XGApk6PyAEkH_VFFf8Y6ebShl8sF6n_2nsTObHs9D_UF-w1ltLrSTjU/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 aba-aba yang ditandai silahkan sesuiakan dengan label yang akan ditampilkan kemudian perhatikan juga penulisannya harus sesuai besar kecilnya alasannya yaitu tidak akan tampil kalau penulisannya tidak sama.

Jika ingin menampilkannya secara Slide untuk halaman label lainnya silahkan sahabat tambahkan aba-aba dibawah ini.

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

Perhatikan kembali aba-aba yang ditandai silahkan sesuia kembali dengan label yang akan ditampilkan dan begitu seterusnya kalau ada banyak label yang mau ditambahkan.

Langkah Ke Tiga
Silahkan salin aba-aba 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 aba-aba yang ditandai silahkan sesuaikan, dan diatas hanya rujukan untuk Label Postingan dan kalau mau menambahkan slidedi halaman label silahkan tambahkan aba-aba dibawah ini.

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

Dan seterusnya kalau ada banyak label yang mau ditampilkan.

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