 |
| Labeled Posts Blogger Widget in Tab Styles |
Once again I have another interesting and beautiful blogger widget for you and this is in tabs style.
If you don't know about the tabs then let me tell you what are tabs. This time I am not going to provide you the introduction of tabs instead I am going to show the preview of Tab as you can see below.
 |
| Labeled Posts Blogger Widget in Tab Styles |
View Demo
Here I am going to provide you the steps to add this widget into a static page.
Steps to follow:
- Go to Blogger Dashboard
- Go to Page Section
- Click Add New Page
- Now Copy the code provided below and paste in on that page in HTML Tab.
<!--DOCTYPE html-->
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Labeled Posts Blogger Widget in Tab Style</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400, 700);
body {
margin:0;
padding:0;
background:#fff;
font-family:'Roboto', sans-serif;
}
*, *:before, *:after {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
ins {
background:#fff;
}
#arlina {
background:#fff;
position:relative;
margin:5% auto;
width:100%;
max-width:920px;
overflow:hidden;
box-shadow:0 0 0 20px rgba(0, 0, 0, 0.03);
}
a:link, a:visited:hover {
color:#138be6;
text-decoration:none;
outline:none;
transition:all 0.25s;
}
a:visited, a:link:hover {
color:#333;
text-decoration:none;
}
.recent-labpost {
margin:20px;
}
.rctab-button>span {
padding:15px 20px;
cursor:pointer;
position:relative;
color:#222;
display:inline-block;
font-size:120%;
font-weight:700;
}
.rctab-button>span.active {
color:#222;
background:rgba(0, 0, 0, 0.05)}
.rctab-button>span.active:before {
content:'';
top:0;
opacity:1}
.rctab-content {
padding:15px;
background:rgba(0, 0, 0, 0.05);
position:relative;
min-height:100px;
overflow:auto}
.rctab-item {
float:left;
width:48%;
margin:10px 1%;
background:#fff;
border:1px solid rgba(0, 0, 0, 0);
transition:all .3s;
}
.rctab-item:hover {
border:1px solid rgba(0, 0, 0, 0.1);
}
.rctab-item-inner {
padding:10px}
.rctab-item img {
float:left;
width:120px;
height:auto;
}
.rctab-item h3 {
float:right;
width:calc(100% - 130px);
height:20px;
margin:10px 0;
font-size:120%}
.rctab-item h3 a {
color:#222}
.rctab-item h3 a:hover {
color:#e74c3c}
.loader {
position:absolute;
left:50%;
top:50%;
margin-left:-27.5px;
margin-top:-27.5px;
transition:all .3s linear}
.hide-load .loader {
opacity:0}
.squarin {
background:#374140;
width:15px;
height:15px;
float:left;
top:-10px;
margin-right:5px;
margin-top:5px;
position:relative;
opacity:0;
-webkit-animation:enter 6s infinite;
animation:enter 6s infinite}
.enter {
top:0;
opacity:1}
.squarin:nth-child(1) {
-webkit-animation-delay:1.8s;
-moz-animation-delay:1.8s;
animation-delay:1.8s}
.squarin:nth-child(2) {
-webkit-animation-delay:2.1s;
-moz-animation-delay:2.1s;
animation-delay:2.1s}
.squarin:nth-child(3) {
-webkit-animation-delay:2.4s;
-moz-animation-delay:2.4s;
animation-delay:2.4s;
background:#09c}
.squarin:nth-child(4) {
-webkit-animation-delay:0.9s;
-moz-animation-delay:0.9s;
animation-delay:0.9s}
.squarin:nth-child(5) {
-webkit-animation-delay:1.2s;
-moz-animation-delay:1.2s;
animation-delay:1.2s}
.squarin:nth-child(6) {
-webkit-animation-delay:1.5s;
-moz-animation-delay:1.5s;
animation-delay:1.5s}
.squarin:nth-child(8) {
-webkit-animation-delay:0.3s;
-moz-animation-delay:0.3s;
animation-delay:0.3s}
.squarin:nth-child(9) {
-webkit-animation-delay:0.6s;
-moz-animation-delay:0.6s;
animation-delay:0.6s}
@media screen and (max-width:768px) {
.rctab-item {
float:left;
width:100%;
}
.rctab-item {
margin:10px auto;
}
}
aside#bott {
position:static;
left:0;
right:0;
bottom:0;
margin:5% auto 0 auto;
flex:none;
display:flex;
align-items:center;
justify-content:center;
background:rgba(0, 0, 0, .08);
color:#999;
padding:1em}
aside span.bott {
color:inherit;
text-decoration:none;
font-weight:normal;
display:inline-block;
padding:.4em 1em}
</style>
</head>
<body>
<div id="arlina">
<div class='recent-labpost' data-label='["html","css","seo","blogger","tutorial"]'>
</div>
</div>
<aside id="bott">
<div>
<span class="bott">Read the tutorial on Softweb Tuts</span>
</div>
</aside>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script>
//<![CDATA[
function getMeImg(a) {
var t = [a, a, !1];
return void 0 !== a ? -1 !== a.url.indexOf("img.youtube") ? (t[0] = a.url.replace("default.jpg", "hqdefault.jpg"), t[1] = a.url.replace("default.jpg", "mqdefault.jpg"), t[2] = !0) : (t[0] = a.url.replace("s72-c", "w100-h75-c"), t[1] = a.url.replace("s72-c", "s500-c")) : (t[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj__GnSZ81cPslCiAWqS7TpofoUwiMYwYe6cbDrGTU07zgo5e3Dl-UAqXngIhLzY9YOlPQMgTl2ZpxY7eBMZaOqDw7PFeX5AeYygOYMSPrI7GR-ntRW0Ppe6iMqSoCjoIF78wxmsfRlvPc/s1600/thumb.png", t[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj__GnSZ81cPslCiAWqS7TpofoUwiMYwYe6cbDrGTU07zgo5e3Dl-UAqXngIhLzY9YOlPQMgTl2ZpxY7eBMZaOqDw7PFeX5AeYygOYMSPrI7GR-ntRW0Ppe6iMqSoCjoIF78wxmsfRlvPc/s1600/thumb.png"), t
}
function load_w_tab(a) {
var t = a.find(".rctab-content>.active"),
e = t.attr("data-load");
$.ajax({
type: "GET",
url: "https://www.softwebtuts.com/feeds/posts/summary/-/" + e + "?max-results=20&alt=json-in-script",
async: !1,
contentType: "application/json",
dataType: "jsonp",
success: function(a) {
if (a.feed.entry) {
t.append('<div class="wtab-inner"></div>');
for (var e = 0; e < a.feed.entry.length; e++) {
for (var i = a.feed.entry[e], d = 0; d < a.feed.entry[e].link.length; d++)
if ("alternate" == a.feed.entry[e].link[d].rel) {
var s = a.feed.entry[e].link[d].href;
break
}
var n = i.title.$t,
l = getMeImg(i.media$thumbnail),
r = '<div class="rctab-item"><div class="rctab-item-inner"><a href="' + s + '"><img src="' + l[0] + '"/></a><h3><a href="' + s + '">' + n + '</a></h3><div style="clear:both"></div></div></div>';
t.find(".wtab-inner").append(r)
}
t.addClass("hide-load")
}
}
})
}
function getwtabs(e) {
for (var labelArr = eval(e.attr("data-label")), html = '<div class="rctab-button">', i = 0; i < labelArr.length; i++) html += '<span data-target="' + labelArr[i] + '-genova">' + labelArr[i] + "</span>";
html += '</div><div class="rctab-content">';
for (var i = 0; i < labelArr.length; i++) html += '<div data-load="' + labelArr[i] + '" data-container="' + labelArr[i] + '-genova">' + loaderHTML + "</div>";
html += "</div>", e.append(html), e.find(".rctab-button>span").first().addClass("active"), e.find(".rctab-content>div").hide(0), e.find(".rctab-content>div").first().show(0).addClass("active loaded"), setTimeout(function() {
load_w_tab(e)
}, 500), e.find(".rctab-button>span").click(function() {
var a = $(this).attr("data-target"),
t = $(this),
i = "";
e.find(".rctab-content>div").each(function() {
$(this).attr("data-container") == a && (e.find(".rctab-button>span").removeClass("active"), t.addClass("active"), e.find(".rctab-content>div").removeClass("active").hide(0), $(this).fadeIn().addClass("active"), i = $(this))
}), i.hasClass("loaded") || (i.addClass("loaded"), setTimeout(function() {
load_w_tab(e)
}, 500))
})
}
var loaderHTML = '<div class="loader"> <div class="squarin" ></div> <div class="squarin"></div> <div class="squarin last"></div> <div class="squarin clear"></div> <div class="squarin"></div> <div class="squarin last"></div> <div class="squarin clear"></div> <div class="squarin "></div> <div class="squarin last"></div> </div>';
$(function() {
getwtabs($(".recent-labpost"))
});
//]]>
</script>
</body>
</html>
- Give your page a unique name and add description.
- Finally, Publish your Page.
https://www.softwebtuts.comSo after making all the customizations now, I think this widget is looking pretty on your website or blog I hope you will like this widget.
Replace this URL with your website URL or remove it.html, css, seo, blogger, tutorial Replace all these labels with your labels for which you want to show posts.
0 Comments: