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

Ditulis oleh: Adhy Suryadi

Ditulis pada: 7/17/2017

Setelah kemarin kita mencoba menjalankan kembali Responsive Blogger Recent Posts Slide dan memodifikasi beberapa kodenya untuk mengubah responsive-nya dan agar menjadi support HTTPS serta menampilkan tombol next prev, kini kita akan mencoba menampilkannya di setiap halaman label dengan recent posts by label.

Jadi 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 menggunakan conditional tags untuk halaman homepage dan halaman label.

Jika Anda penasaran ingin mencobanya, silahkan ikuti langkahnya di bawah ini.

Untuk kode CSS masih sama dengan yang kemarin, hanya beda pada tag conditionalnya. Silahkan simpan kode CSS di bawah ini di atas kode </head>. Jika kemarin Anda sudah memasang CSS yang kemarin saya bagikan, silahkan ganti dengan yang berikut ini.

<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/AVvXsEiWjteZ2wh3dGfUmNbXTtRBoX36n6QjXE35iOt93vxCxgteCYpbXijdE_s7-kqoXOujCApK0NCpiblEZvMhgoRg2wdavAYS2osie4qGPc_Q5XOsA8HWvg0dG7WOFr1aYoIqIirQ-Br89EU/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/AVvXsEi5_Ps84EfGcKptIk8KPSEoJ4FZaIhuUzYO1TNNGf8SuqUFokV877NryiXka89yZqf22YP7gih5dn5xSc2G2psN_Z4Cd93FuCYHdqIsLLLFE0K-Qa1tDj1fQo4y3UKAs_CVQtP-d1pUYWI/s1600/code-less-than.png") center no-repeat;background-size:50px 50px}

#nextx{right:50%;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieTPVJw7QboxETqrNvdUNURlFvo9KuIQ6ZnW8ByodB_Yu2ProlmBo4i5VGAgiSfKHy8TWZE4-BqgEh1D_gJLDwzELfHZz9AEfHRGB2KaR4t5GB4_pt3CeUJ-h0h1lwplDcBd1-jJ5gaJA/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 kode javascript berikut di atas kode </body>. Jika Anda sudah memasang javascript dari postingan sebelumnya silahkan ganti dengan yang berikut 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/AVvXsEj16AqPAEqfNVxmZ5Q3IEzYcCf0BkVZzfki24gnZ8Ztrww-0Y_8qzLYz5UQCubOZYRUOyTZuJHymuYpODsL7l0LII6k5aCfgEpKwf8hVh7lawgMX7AXMorvrqrU20c6d10YoC7Cby3L1WA/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 yang saya tandai, itu contoh label postingan. Perhatikan juga untuk contoh 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 kode berikut:

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

<script>

//<![CDATA[

var label={

   tagName:"Blogger"

};

//]]>

</script>

</b:if>

Sesuaikan yang ditandai dengan label postingan.

Begitu seterusnya untuk halaman label lainnya.

Kemudian silahkan simpan kode di bawah ini di mana Anda ingin menampilkan slide-nya. Biasanya di bawah menu header.

<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 yang saya tandai, itu contoh 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 kode berikut:

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

<div id='featuredpost'/>

</b:if>

Sesuaikan yang ditandai dengan label postingan.

Begitu seterusnya untuk halaman label lainnya.

Selamat mencoba....