Kien Templates: Blog2s Blogger Template

Demo Download

Customize Templates

Delete About Author

HTLM:

<div class='author_info'>

<h3>About Author</h3>

</div>

<p>Hi, I'm Kienn. Every templates is free. So you can delete everything that you want.</p>

</div>

CSS:

.author_info{
padding:5px;
border:1px solid #e0e0e0;
margin-bottom:15px;
margin-top:15px;
border-radius:12px;
}

.author-info h3{
margin-bottom:10px;
padding-bottom:7px;
border-bottom:2px solid #e6e6ef;
color:#203656;
font-weight:400;
font-size:25px;
}

.author_info b{
color:#203656;
}

.author_photo{
min-height:70px;
min-width:70px;
float:left;
margin:0 0 0 10px;
}

.author_photo img{
padding:3px;
border:1px solid #ddd;
margin-right:10px;
height:70px;
width:70px;
border-radius:100px;
}

Delete Random Posts

Code:

<style>

.label-title {

background: #111;

color: #fff;

text-align: center;

}

.label-title h3 {

color: #fff;

}

.label-posts-container {

display: flex;

flex-wrap: wrap;

justify-content: center;

gap: 1%;

background: #fff;

padding: 0px;

margin: 0 auto;

margin-bottom: 20px;

align-items: center;

height:200px;

width: 100%;

}

.label-posts-container .label-post {

background: #fff;

display: flex;

flex-direction: column;

align-items: center;

box-shadow: 0 4px 40px -8px rgba(0, 0, 0, 0.3);

width: calc(32.65% - 0px);

position: relative;

height:100%;

}

.label-posts-container .thumb-container {

width: 100%;

position: relative;

overflow: hidden;

}

.label-posts-container .label-post img {

width: 100%;

height: 100%;

object-fit: cover;

display: block;

filter: brightness(100%);

}

.label-posts-container .post-title-container {

position: absolute;

bottom: 0;

left: 0;

width: 100%;

background-color: rgba(0, 0, 0, 0.7);

padding: 8px;

text-align: center;

}

.label-posts-container .post-title {

margin: 0;

font-size: 14px;

color: #fff;

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

overflow: hidden;

}

.loading-image {

width: 50px;

height: 50px;

animation: spin 1s linear infinite;

}

@keyframes spin {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(360deg);

}

@media (max-width: 640px) {

.label-title {

background: #111;

color: #fff;

text-align: center;

}

.label-posts-container {

display: flex;

flex-wrap: wrap;

justify-content: center;

background: #fff;

margin: 0 auto;

margin-bottom: 20px;

align-items: center;

height: auto;

width: 100%;

}

.label-posts-container .label-post {

width: 100%;

height: 250px;

margin-bottom: 20px;

}

.label-posts-container .post-title {

font-size: 16px;

}

</style>

<h3>Random Posts</h3>

</div>

const FacebookPosts = document.querySelector('.facebook-posts');

const facebookLoadingImage = document.createElement('img');

facebookLoadingImage.src = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq28OUI_N8DBoog34xc8FnidI9qIiWvgo-ZSeH5GgtAji9bQNbSVdpMy8OmA1gCi4wpmYzFEKspfPpTJneyNINIAOPWjirRZss-LyTei0RsY39aKuO4OjObzAeUbUAVrFaPjNGyETsRnO1CoilyXCkV160U2DZiFf3WuXYj5yAhH2XXeiD4qfgvCSlw42P/s200/200.gif';

facebookLoadingImage.classList.add('loading-image');

FacebookPosts.appendChild(facebookLoadingImage);

const populateLabelPosts = (data, container) => {

const shuffledPosts = shuffleArray(data);

const postsToDisplay = shuffledPosts.slice(0, 3); // Thay đổi số lượng bài viết hiển thị ở đây

postsToDisplay.forEach((post) => {

const labelPost = document.createElement('div');

labelPost.classList.add('label-post');

const thumbContainer = document.createElement('a');

thumbContainer.href = post.link[post.link.length - 1].href;

thumbContainer.classList.add('thumb-container');

const thumbnail = document.createElement('img');

thumbnail.src = post.media$thumbnail.url.replace('/s72', '/s300');

thumbContainer.appendChild(thumbnail);

labelPost.appendChild(thumbContainer);

const textContent = document.createElement('div');

textContent.classList.add('text-content');

const postTitleContainer = document.createElement('a');

postTitleContainer.href = post.link[post.link.length - 1].href;

postTitleContainer.classList.add('post-title-container');

const title = document.createElement('h3');

title.classList.add('post-title');

title.innerHTML = post.title.$t;

postTitleContainer.appendChild(title);

textContent.appendChild(postTitleContainer);

labelPost.appendChild(textContent);

container.appendChild(labelPost);

});

};

const displayFacebookLabelPosts = (posts) => {

populateLabelPosts(posts.feed.entry, FacebookPosts);

FacebookPosts.removeChild(facebookLoadingImage);

};

// Hàm đảo ngẫu nhiên một mảng

const shuffleArray = (array) => {

for (let i = array.length - 1; i > 0; i--) {

const j = Math.floor(Math.random() * (i + 1));

[array[i], array[j]] = [array[j], array[i]];

}

return array;

};

</script>

const scriptTag1 = document.createElement('script');

scriptTag1.src = '/feeds/posts/default?max-results=100&alt=json-in-script&callback=displayFacebookLabelPosts';

document.body.appendChild(scriptTag1);

</script>

Delete CSS Contact

.footer-content .form input[type="text"], .footer-content .form textarea{
background: rgba(255,255,255,0.075);
padding:10px 15px;
color: #aaa;
border: 3px solid rgba(0,0,0,0.1);
font-size: 14px;
margin-bottom: 16px;
border-radius: 5px;
transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
transition-delay: 0.2s;
width: 100%;
outline:none;
}

.footer-content .contact-form-button{
background-color:#4d90fe;
color:#fff;
border:none;
width:100%;
}

Delete CSS Follow Us footer

.footer-content .fa{
float:left;
margin-left:7px;
font: normal normal normal 14px/1 FontAwesome;
background-color:#3e3e3e;
color:#fff;
padding:9px;
border-radius:5px;
}

Delete CSS Follow Us sidebar

.sidebar-wrapper .fa{
padding:10px;
}

.sidebar-wrapper .fa-facebook{
background-color:#264c9d;
}

.sidebar-wrapper .fa-youtube{
background-color:#FF0000;
}

.sidebar-wrapper .fa-twitter{
background-color:#1DA1F2;
}

.sidebar-wrapper .fa-instagram{
background-color:#E4405F;
}.sidebar-wrapper .fa{
padding:10px;
}

.sidebar-wrapper .fa-facebook{
background-color:#264c9d;
}

.sidebar-wrapper .fa-youtube{
background-color:#FF0000;
}

.sidebar-wrapper .fa-twitter{
background-color:#1DA1F2;
}

.sidebar-wrapper .fa-instagram{
background-color:#E4405F;
}

Change from 12 posts to 18 or any you want

var postperpage=12; to var postperpage=18;

Delelte page count

HTML:

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:blog.pageType != "static_page"'>

/*<![CDATA[*/

var perPage=12;

var numPages=3;

var firstText ='First';

var lastText ='Last';

var prevText ='« Previous';

var nextText ='Next »';

var urlactivepage=location.href;

var home_page="/";

if(typeof firstText=="undefined")firstText="First";if(typeof lastText=="undefined")lastText="Last";var noPage;var currentPage;var currentPageNo;var postLabel;pagecurrentg();function looppagecurrentg(pageInfo){var html='';pageNumber=parseInt(numPages / 2);if(pageNumber==numPages-pageNumber){numPages=pageNumber*2+1}

pageStart=currentPageNo-pageNumber;if(pageStart<1)pageStart=1;lastPageNo=parseInt(pageInfo / perPage)+1;if(lastPageNo-1==pageInfo / perPage)lastPageNo=lastPageNo-1;pageEnd=pageStart+numPages-1;if(pageEnd>lastPageNo)pageEnd=lastPageNo;html+="<span class='showpageOf'>Page "+currentPageNo+' of '+lastPageNo+"</span>";var prevNumber=parseInt(currentPageNo)-1;if(currentPageNo>1){if(currentPage=="page"){html+='<span class="showpage firstpage"><a href="'+home_page+'">'+firstText+'</a></span>'}else{html+='<span class="displaypageNum firstpage"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+firstText+'</a></span>'}}

if(currentPageNo>2){if(currentPageNo==3){if(currentPage=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+prevText+'</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+prevNumber+');return false">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+prevNumber+');return false">'+prevText+'</a></span>'}}}

if(pageStart>1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}

if(pageStart>2){html+=' ... '}

for(var jj=pageStart;jj<=pageEnd;jj++){if(currentPageNo==jj){html+='<span class="pagecurrent">'+jj+'</span>'}else if(jj==1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}

if(pageEnd<lastPageNo-1){html+='...'}

if(pageEnd<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}}

if(currentPageNo<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastText+'</a></span>'}else{html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastText+'</a></span>'}}

var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}

if(pageArea&&pageArea.length>0){html=''}

if(blogPager){blogPager.innerHTML=html}}

function totalcountdata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);looppagecurrentg(totaldata)}

function pagecurrentg(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}

if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){currentPage="page";if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}

document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")}else{currentPage="label";if(thisUrl.indexOf("&max-results=")==-1){perPage=20}

if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}

document.write('<script src="'+home_page+'feeds/posts/summary/-/'+postLabel+'?alt=json-in-script&callback=totalcountdata&max-results=1" ><\/script>')}}}

function redirectpage(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}

function redirectlabel(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+postLabel+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}

function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(currentPage=="page"){var pAddress="/search?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}else{var pAddress="/search/label/"+postLabel+"?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}

location.href=pAddress}

/*]]>*/

</script>

</b:if>

CSS:

#blog-pager{
clear:both;
margin:30px auto;
text-align:center;
padding: 7px;
}

.blog-pager {
background: none;
}

.displaypageNum a,.showpage a,.pagecurrent{
display:inline-block;
float:center;
margin-right:6px;
padding:0 12px;
border:1px solid #010101;
text-transform:uppercase;
line-height:32px;
font-weight:700;
color:#010101;
border-radius: 100px;
}

.displaypageNum a:hover,.showpage a:hover, .pagecurrent{
background:#E5E5E5;
text-decoration:none;
color: #222;
}

#blog-pager .pagecurrent{
font-weight:bold;
color: #fff;
background:#111;
}

.showpageOf{
display:none!important
}

#blog-pager .pages{
border:none;
}

Posts

Change colors hover posts

.home-posts:hover{

box-shadow: 0 7px 8px 0 rgba(117, 149, 246, 0.8), 0 9px 25px 0 rgba(117, 149, 246, 0.8);

}

Change number of labels (12 to 18 or any you want)

News

Blog

News

Blog

Blog2s Blogger Template

Customize Templates

Delete About Author

Delete Random Posts

Delete CSS Contact

Delete CSS Follow Us footer

Delete CSS Follow Us sidebar

Change from 12 posts to 18 or any you want

Delelte page count

Posts

Change colors hover posts

About Author

No comments:

Post a Comment

View