• Translate

7/19/2017

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

Tutorial Blogspot |

Advertisement

Tutorial Create Responsive Blogger Recent Posts Slide By Label And Show On Label Pages
Today's tutorial we will try to make a Recent Post Responsive Slide Corresponding Label and Appear on the Label Page. How to make this tutorial I got from my friend Adhy, the owner of kompiajaib.com, So on the main page/homepage slide shows the usual regular post, while on the label page will display the recent post by label according to the label page.

To create Responsive Blogger Recent Posts Slide By Label And Show On Label Pages please follow the steps below.

For CSS code is still the same as yesterday, only difference in conditional tag. Please save the CSS code below above </head> code.
<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://2.bp.blogspot.com/-j5_B6uRRf_I/WUnnQw-tddI/AAAAAAAArpQ/tN7vxuosXf0w2g4qOHqH6UD02hi-al-uACLcBGAs/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://4.bp.blogspot.com/-ZQB4gdDffz8/WWrzkJ1QceI/AAAAAAAAr2U/GANOfBvKSE0QY9S3jHroeylebqq6wRaJQCLcBGAs/s1600/code-less-than.png") center no-repeat;background-size:50px 50px}
#nextx{right:50%;background:url("https://2.bp.blogspot.com/-64GKW6NEjcM/WWrzkROR2jI/AAAAAAAAr2Y/ufjUCKpoks0GFTQGiLw9QkvbvqdxTYpFQCLcBGAs/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>
Then please save the following javascript code above code </body>.
<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://1.bp.blogspot.com/-jHWwEwTEwQ4/WJJ4k71QSYI/AAAAAAAApVc/XO_OitR_VGQS_Wquq1pv1h1D-dgiejSuQCLcB/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;Review&quot;'>
<script>
//<![CDATA[
var label={
   tagName:"Review"
};
//]]>
</script>
</b:if>
<b:if cond='data:blog.searchLabel == &quot;Tutorial Android&quot;'>
<script>
//<![CDATA[
var label={
   tagName:"Tutorial%20Android"
};
//]]>
</script>
</b:if>
Notice what I mark, it's an example of a post label. Note also for example labeling post with 2 words. The labeling is sensitive, so the writing should be in accordance with the label for small letter writing.

To add a slide to another label page just add the following code:
<b:if cond='data:blog.searchLabel == &quot;Review&quot;'>
<script>
//<![CDATA[
var label={
   tagName:"Review"
};
//]]>
</script>
</b:if>
Customize those marked with the post label. And so on for other label pages. Then please save the code below where you want to display the slide. Usually under the header menu..
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='featuredpost'/>
</b:if>
<b:if cond='data:blog.searchLabel == &quot;Review&quot;'>
<div id='featuredpost'/>
</b:if>
<b:if cond='data:blog.searchLabel == &quot;Tutorial Android&quot;'>
<div id='featuredpost'/>
</b:if>
Notice what I mark, it's an example of a post label. The labeling is sensitive, so the writing should be in accordance with the label for small letter writing.

To add a slide to another label page just add the following code:
<b:if cond='data:blog.searchLabel == &quot;Tutorial Web Design&quot;'>
<div id='featuredpost'/>
</b:if>
Customize those marked with the post label. And so on for other label pages.
Good luck..

Cooperation with kompiajaib

Disqus
Blogger
Comment
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>, and please parse the code in the parser box below.
Show Parser Box

No comments Add Comment

Comments not appropriate topic will sign SPAM.