How to Make About Us Page in Plus UI Blogger Theme

Creating an attractive and informative "About Us" page is essential for any website or blog. It enables you to introduce yourself or your brand, establish credibility and connect with your audience. If you're using the Plus UI Blogger theme, this article will provide you with a step-by-step process for creating an impressive "About Us" page that integrates seamlessly with your theme.

Accessing your Blogger dashboard

To get started, log in to your Blogger account and go to your blog's dashboard where you can manage various aspects of your blog.

Adding a new page

On the left sidebar of your Blogger dashboard, find the "Pages" option and click on it. This action will take you to the Pages screen, which allows you to create a new "About Us" page. On the "New Page" button.

Title and Contents

In the new page editor, you'll find a field labeled "Title". Enter an appropriate title for your page, such as "About Us" or "Our Story." It will appear on both the title page and the navigation menu.

Add page content

Now copy the following codes one by one and paste them inside your post editor.

    	<div class="pS post-body postBody" id="postBody">
<style>/*<![CDATA[*/
/* To change Header Subtitle */
.headH .headSub{max-width:none}
.headH .headSub::before{content:"About"}
/* About Author CSS */ .aboutAuthor{padding:60px 0 20px 0} .aboutAuthor .aboutCont{justify-content:center;position:relative;display:flex;max-width:95%;margin:auto;padding:80px 30px 95px 30px;background-color:#fff;box-shadow:0 10px 40px rgba(149,157,165,.2);border-radius:20px} .aboutAuthor .aboutCont img{box-shadow:0 5px 20px rgba(0,0,0,.2);padding:0;border:7px solid #fff;width:120px;height:120px;position:absolute;border-radius:50%;top:-60px;pointer-events:none} .aboutAuthor .aboutCont p{margin:0;text-align:center;font-family:var(--fontBa)} .drK .aboutAuthor .aboutCont{background:var(--darkBs);box-shadow:0 10px 40px rgba(0,0,0,.2)} .drkM .aboutAuthor .aboutCont img{background-image:linear-gradient(to top right,#363636,#717171);border-color:#fff;box-shadow:0 10px 40px rgba(0,0,0,.2)}.drK .aboutAuthor .aboutCont img{border-color:var(--darkBs);box-shadow:0 10px 40px rgba(0,0,0,.2)}
/* About Author Button */ .aboutAuthor .aboutCont .athrBtn{text-align:center;position:absolute;bottom:0;left:0;right:0} .aboutAuthor .aboutCont .athrBtn .button{border-radius:50px;margin:0 0 30px} .aboutAuthor .aboutCont .athrBtn .button svg{stroke:var(--darkT);margin-right:5px}
/* Website Stats */ .statsHeading{text-align:center} .statsWebsite{display:flex;flex-wrap:wrap;flex-direction:column;margin:12px auto} .statsCont{background-color:#fff;display:flex;justify-content:center;padding:8px;width:95%;margin:12px auto;box-shadow:0 5px 20px rgba(149,157,165,.2);border-radius:20px} .statsCont .stats{height:80px;width:200px;display:flex;align-items:center;justify-content:center; flex-direction:column; margin:0 35px} .statsCont .statsName{display:inline-flex;align-items:center;font-size:16px;font-family:var(--fontBa)} .statsCont .statsName svg{margin-right:7px} .statsCont .statsNumber{font-family:var(--fontB);font-size:30px;margin-top:6px;font-weight:normal} .statsNumber.v >span::before{content:attr(data-text)} .drK .statsCont{background-color:var(--darkBs);box-shadow:0 5px 20px rgba(0,0,0,.2)}
@media screen and (min-width:641px){.aboutAuthor .aboutCont{max-width:97%} .statsWebsite{flex-direction:row} .statsCont{max-width:46%;margin:12px}}
/* To change Profile background */
/* Light Mode */
.aboutAuthor .aboutCont img{background-color:#ffeaef}
/* Dark Mode */
.drK .aboutAuthor .aboutCont img{background-image:linear-gradient(to top right,#363636,#717171)}
/*]]>*/</style>

<script>
  /*<![CDATA[*/
  function statsPst(json){var el = qSel('.statsNumber.p');el.innerHTML = '<span>' + parseInt(json.feed.openSearch$totalResults.$t,10) + '</span>'};
  function statsCmt(json){var el = qSel('.statsNumber.c');el.innerHTML = '<span>' + parseInt(json.feed.openSearch$totalResults.$t,10) + '</span>'};
  if(isPrivateBlog!='true'){
    Defer.js(blogUrl+'feeds/posts/default?alt=json-in-script&callback=statsPst', 'sts-pst');
    Defer.js(blogUrl+'feeds/comments/default?alt=json-in-script&callback=statsCmt', 'sts-cmt');
  };
  /*]]>*/
</script>

<!--[ About Author ]-->
<div class="aboutAuthor">
  <div class="aboutCont">
    <!--[ Author Profile Picture, Recommended Sizes: 1280&#215;1280px, 720&#215;720px below 30KB for fast loading, use transparent picture ]-->
    <img alt="alt_here" class="noLb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2ejmYAVTNcUs_PgKatHjKUBMQe9rM09MP-v8-K0_uR4Cl3RAvvRz7qiGgKzCTuSKKG15Il9cOfuFsdsbfXoXwsY5VCk8OFxX71eutBAxs_hYbYWAS5t06i-i3j5wNGpvW1G-_AK2t40UPeUyUd_wRDJMf0cB6mrpKg8WKLTz6xDNSoUUBzL5GU9xfPhA/s1000/24711982_6995929-ai.png">
    <!--[ Author Description ]-->
    <p>Author Description.<br><br> If you have any questions or comments, please don't hesitate Get in touch</p>
    <div class="athrBtn">
      <a class="button" href="https://www.blogger.com/profile/16542346501107515979" target="_blank">
        <!--[ Button SVG ]-->
        <svg class="line" viewBox="0 0 24 24"><g transform="translate(5.000000, 2.400000)"><path d="M6.84454545,19.261909 C3.15272727,19.261909 -8.52651283e-14,18.6874153 -8.52651283e-14,16.3866334 C-8.52651283e-14,14.0858516 3.13272727,11.961909 6.84454545,11.961909 C10.5363636,11.961909 13.6890909,14.0652671 13.6890909,16.366049 C13.6890909,18.6658952 10.5563636,19.261909 6.84454545,19.261909 Z"></path><path d="M6.83729838,8.77363636 C9.26002565,8.77363636 11.223662,6.81 11.223662,4.38727273 C11.223662,1.96454545 9.26002565,-1.0658141e-14 6.83729838,-1.0658141e-14 C4.41457111,-1.0658141e-14 2.45,1.96454545 2.45,4.38727273 C2.44184383,6.80181818 4.39184383,8.76545455 6.80638929,8.77363636 C6.81729838,8.77363636 6.82729838,8.77363636 6.83729838,8.77363636 Z"></path></g></svg>
        <!--[ Button Text ]-->
       Home
      </a>
    </div>
  </div>
</div>
  
<h3 class="statsHeading">
  <!--[ Stats Heading ]-->
  Blog Stats
</h3>

<!--[ Website Statistics ]-->
<div class="statsWebsite">
  <!--[ Page Views Count ]-->
  <div class="statsCont">
    <div class="stats">
      <div class="statsName">
        <!--[ Change SVG Icon ]-->
        <svg class="line" viewBox="0 0 24 24"><g transform="translate(2.000000, 4.000000)"><path d="M13.1643,8.0521 C13.1643,9.7981 11.7483,11.2141 10.0023,11.2141 C8.2563,11.2141 6.8403,9.7981 6.8403,8.0521 C6.8403,6.3051 8.2563,4.8901 10.0023,4.8901 C11.7483,4.8901 13.1643,6.3051 13.1643,8.0521 Z"></path><path d="M0.7503,8.0521 C0.7503,11.3321 4.8923,15.3541 10.0023,15.3541 C15.1113,15.3541 19.2543,11.3351 19.2543,8.0521 C19.2543,4.7691 15.1113,0.7501 10.0023,0.7501 C4.8923,0.7501 0.7503,4.7721 0.7503,8.0521 Z"></path></g></svg>
        <!--[ Stats Name ]-->
        Total Visits
      </div>
      <div class="statsNumber v">
        <!--[ Posts Number (automatically updates) ]-->
        <span class="pu-views" data-id="WebsiteStats" data-text="0"></span>
      </div>
    </div>
  </div>
  
  <!--[ Posts Number ]-->
  <div class="statsCont">
    <div class="stats">
      <div class="statsName">
        <!--[ Change SVG Icon ]-->
        <svg class="line" viewBox="0 0 24 24"><g transform="translate(2.000000, 2.000000)"><path d="M10.0002,0.7501 C3.0632,0.7501 0.7502,3.0631 0.7502,10.0001 C0.7502,16.9371 3.0632,19.2501 10.0002,19.2501 C16.9372,19.2501 19.2502,16.9371 19.2502,10.0001"></path><path d="M17.5285,2.3038 L17.5285,2.3038 C16.5355,1.4248 15.0185,1.5168 14.1395,2.5098 C14.1395,2.5098 9.7705,7.4448 8.2555,9.1578 C6.7385,10.8698 7.8505,13.2348 7.8505,13.2348 C7.8505,13.2348 10.3545,14.0278 11.8485,12.3398 C13.3435,10.6518 17.7345,5.6928 17.7345,5.6928 C18.6135,4.6998 18.5205,3.1828 17.5285,2.3038 Z"></path><line x1="13.009" y1="3.8008" x2="16.604" y2="6.9838"></line></g></svg>
        <!--[ Stats Name ]-->
        Posts
      </div>
      <div class="statsNumber p"><span></span></div>
    </div>
  </div>
  
  <!--[ Comments Number ]-->
  <div class="statsCont">
    <div class="stats">
      <div class="statsName">
        <!--[ Change SVG Icon ]-->
        <svg class="line" viewBox="0 0 24 24"><g transform="translate(2.000000, 2.000000)"><line x1="13.9394" y1="10.413" x2="13.9484" y2="10.413"></line><line x1="9.9304" y1="10.413" x2="9.9394" y2="10.413"></line><line x1="5.9214" y1="10.413" x2="5.9304" y2="10.413"></line><path d="M17.0710351,17.0698449 C14.0159481,20.1263505 9.48959549,20.7867004 5.78630747,19.074012 C5.23960769,18.8538953 1.70113357,19.8338667 0.933341969,19.0669763 C0.165550368,18.2990808 1.14639409,14.7601278 0.926307229,14.213354 C-0.787154393,10.5105699 -0.125888852,5.98259958 2.93020311,2.9270991 C6.83146881,-0.9756997 13.1697694,-0.9756997 17.0710351,2.9270991 C20.9803405,6.8359285 20.9723008,13.1680512 17.0710351,17.0698449 Z"></path></g></svg>
        <!--[ Stats Name ]-->
        Comments
      </div>
      <div class="statsNumber c"><span></span></div>
    </div>
  </div>
</div>
<div id="aChp"></div>
</div>

	

page publishing

Once you finalize the content, click the "Publish" button to make your "About Us" page visible on your blog. Congratulations! You have successfully created your page.

conclusion:

Creating an attractive “About Us” page is a vital component of building a successful blog or website. With the Plus UI Blogger theme, it becomes easy to create an attractive and seamlessly integrated “About Us” page. By following the step-by-step instructions in this guide, you can introduce your brand, share your story, and build a meaningful connection with your audience. So, go ahead, create your eye-catching “About Us” page and let your blog's personality shine!

How to make split post in PlusUI theme

Are you a Blogger user looking to improve the navigation experience on your blog posts? If yes, then you have come to the right place! Pages play an important role in breaking long content into more manageable parts, improving readability and user experience. In this blog post, we will discuss in detail how to effectively implement pagination in your Blogger posts using PlusUI theme.

Why does pagination matter

Before we get into the technical details, let's understand why pagination is necessary.

Better readability: Long, uninterrupted blocks of text can overwhelm readers. Pagination breaks content into smaller sections, making it easier to digest.

Enhanced navigation: Visitors can navigate your content more efficiently, jumping to specific sections or pages.

Shorter load times: Loading smaller chunks of content at a time can improve page load speeds, especially for users on slow connections or mobile devices.

let's start the process

First, go to your theme HTML file Then copy the code below and paste it into your theme's </body> tag.

<!--[ Split Post javascript ]-->
<script>/*<![CDATA[*/ document.addEventListener('DOMContentLoaded', function() {function checkChildren(nodes, elemId){for(i=0;i<nodes.length;i++){if(nodes[i].id==elemId){return nodes[i];}else{return checkChildren(nodes[i].children, elemId);}}} function isNumeric(value) {var type = typeof value; return (type === 'number' || type === 'string') && !Number.isNaN(value - Number.parseFloat(value));} var nodes = document.querySelector('div.postBody').children; var splitdong = checkChildren(nodes, 'postSplit').innerHTML; var content = splitdong.split('<!--nextpage-->'); var url = window.location.href; var url = url.split('?page='); var no = url[1] + '&m=4'; var no = no.split('m'); var no = no[0]; var no = no.replace('&', ''); var url = url[0]; var i = 1; if( !isNumeric(no) ){var no = 1;} document.getElementById('postSplit').innerHTML = content[no-1]; if( content.length > 1 ) {document.getElementById('postSplit').innerHTML += "<div class='blogPg' id='postPager'><span class='page current'>Pages :</span></div>";} if( no>1 ){document.getElementById('postPager').innerHTML += "<!-- <a href='"+url+"?page="+(no-1)+"' title='Previous Page'>Prev</a> -->";} content.forEach(function(item) { if( no == i ){document.getElementById('postPager').innerHTML += "<span class='current'>"+i+"</span>";} else {document.getElementById('postPager').innerHTML += "<a href='"+url+"?page="+i+"'>"+i+"</a>";} i++; }); if(content.length > no){ var nn = parseInt(no) + 1; document.getElementById('postPager').innerHTML += "<a href='"+url+"?page="+nn+"'>Next</a>";} }); /*]]>*/</script>

The final step

Now each <!--nextpage-->Create a post using below code will create a new page in your article

<div id='postSplit'>
   <h2>Sample text to extend content</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum. Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.</p>
   <!--nextpage-->
   <p>Curabitur quis vestibulum arcu, at aliquet urna. Aenean ex risus, rhoncus vitae urna accumsan, congue aliquet tortor. Suspendisse imperdiet nibh eget odio posuere maximus. Integer vitae neque ante. Donec pellentesque dictum diam, a luctus lectus ultrices vitae.</p>
   <p>Donec pretium dui erat, a maximus nunc dapibus sed. Nulla malesuada lectus a felis malesuada pretium. Nulla sit amet augue in neque rhoncus commodo ac nec nibh. Duis semper eleifend mauris, vel tristique velit bibendum sit amet. Mauris vitae justo eu nisl scelerisque condimentum eget eu mi.</p>
   <!--nextpage-->
   <p>Proin finibus aliquam suscipit. Mauris malesuada ornare sollicitudin. Sed faucibus lacinia pharetra. Nunc ultrices neque eget accumsan dignissim. Fusce efficitur ultricies volutpat. Maecenas ut mauris in dui pretium eleifend eu at purus. Etiam pretium luctus massa eget condimentum. Morbi gravida, elit at molestie rutrum, ligula est accumsan nunc, fringilla suscipit orci ligula vel est.</p>
   <p>Aliquam auctor cursus lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non porttitor ligula, vitae ultricies nisl. Phasellus quis arcu arcu. Praesent at nunc faucibus, sagittis ipsum non, egestas magna. Nam enim eros, fermentum nec odio vitae, blandit molestie lorem. Pellentesque sed mattis elit.</p>
</div>

Summary

Pages are a valuable tool for increasing the navigation and readability of your blog posts, and implementing them has never been easier with the Plus theme for Blogger. By following the steps outlined in this guide and following best practices, you can provide your visitors with a seamless browsing experience, keeping them engaged and coming back for more. Happy blogging!

How to Create a Download Box with Countdown Timer for Blogger Plus UI Theme

In this article, I will show you how we can add a great countdown download box to your Blogger posts.

Hey dear blog readers, if you are using a download blogger site then you need to use the countdown button to control the bounce rate of your website. In this article, I will show you how we can add a stunning countdown download box to your Blogger posts. So, today we have been able to create a download container with countdown timer for blogger internet site. When customers click on the download button, a countdown will start before the download begins.

How to create a countdown download box?

Creating a countdown download box for your Blogger website won't require much knowledge of HTML, CSS or JS because I've already designed it for you. All you have to do is place the code in the right place in your Blogger post

Before you start adding all the code, I suggest you backup your current theme. If by chance another problem occurs, you can restore it later.

countdown download box

This feature will show the user a countdown before downloading a file.

Blogge Brackets.png Image 3.05MB 1920×1080 .png

This feature requires a direct download link for cloud files. You can use Google Drive to get a direct download link of a file.

Now copy this code and paste in your blogger post

<div class='dldCo' id='download1'>
  <div class='dldBx'>
    <div class='dldTp'>
      <div class='dldIm' data-text='.png' style='background-image:url(image_url_here)'>
        <svg class='dldSv' viewBox='0 0 34 34'>
          <circle class='b' cx='17' cy='17' r='15.92' />
          <circle class='c dldPg' cx='17' cy='17' r='15.92' />
        </svg>
      </div>
      <div class='dldIn'>
        <span data-text='Name'>Music_Wallpaper.png</span>
        <span data-text='Category'>Music</span>
        <span data-text='Size'>3.05MB</span>
        <span data-text='Resolution'>1920×1080</span>
        <span data-text='Extension'>.png</span>
      </div>
    </div>
    <button onclick='download("#", "10", "false", "#download1")' class='dldBt dldDl'><svg class='line' viewBox='0 0 24 24'><polyline points='8 17 12 21 16 17'/><line x1='12' x2='12' y1='12' y2='21'/><path d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29'/></svg></button>
    <button class='dldBt dldRt'><svg class='line' viewBox='0 0 24 24'><polyline points='23 4 23 10 17 10'/><path d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/></svg></button>
  </div>
  <div class='dldSl'>
    <div class='dldMe'></div>
  </div>
</div>

Replace data-text with any name to show, data-file with filename, data-lang with file extension, data-time with countdown in seconds.

Change this html code according to your content

Music_Wallpaper.png

Music.

3.05MB.

1920×1080

.png

image url here #

Conclusion

That's all about creating a countdown download box for blog posts. I hope you like this article. Please share this article. And if you face any problem in any section or have any question then ask us in the comment box.