HOW TO STYLE THE ABOUT US OR MEET THE TEAM PAGE OF A BLOG TO BEAUTIFY YOUR VISITORS INTEREST

HOW TO STYLE THE ABOUT US OR MEET THE TEAM PAGE  OF A BLOG

Have you ever visited top blogs or standard websites were you visit the ABOUT US PAGE of the blog or MEET THE TEAMS and you see the profile of the companies staffs arranged in Rich card formats and you like it but don't know how you can add it to your blog or websites you try to google it but google couldn't give you a positive response because no one as written article similar to that { Yea no blogger as written article similar to that cause they never believe a blog needs something like that } Well today me i have actually bring that cause i love beautiful things and i like design so much so that's why i am going to be sharing with you a little CSS and HTML code that will make a simplify meet the teams page or about us section of your blog cause as a blogger we need to upgrade our blog by adding features that will make our visitors know we care about them and what they see's, beautifying the interest of our visitors should be our concern cause sometimes you don't do things on your blog to impress your self you have to do it to impress your readers cause they are the one visiting they should be the one to determine what difficult for them and your aim is to fix it that will make them know you care about them and it will make them love coming back, Beauty is power if you don't build a standard blog with complete features you might not get the most out of blogging, Visitors love good and beautiful things the first and for most of every visitors who find comfort in your blog will visit the "ABOUT US " section of your blog cause they want to know who is the owner of this awesome blog that where you need to captivate there mind with style adding this code will help you finalize everything when they get there but if your blog "About us" section is boring and hard to stroll around they will bounce back and go

SO WHAT IS THIS CODE ALL ABOUT

This code is designed to style the meet the team page or about us page of your blog by turning your text into images making your blog standout as a professional website and business website it will longer be a blog, 

AM A TECH BLOGGER CAN I SHARE THESE CODE WITH MY VISITORS

Yes you can but read this first { Sharing is not the problem but giving back due credit, just as you will see below this post we gave back the credit to w3schools They empower us to build the ideas of this code so if you will give us our credit then use the code we do not demand for a do-follow back-link you can use no-follow link } so that's what it takes to re-share this code to your visitors

SO LET GET  STARTED BUT BEFORE WE GET STARTED SEE DEMO HERE

STEP 1 : Login to your blogger dashboard
====================================
STEP 2: Click on theme
====================================
Step 3: Click on edit html
======================================
STEP 4: hold down the ctrl+f on your keyboard to find ]]></b:skin>
===============================================
STEP 5: cope the code below and paste it below ]]></b:skin>
===================================================

<style>
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.column {
  float: left;
  width: 33.3%;
  margin-bottom: 16px;
  padding: 0 8px;
}
@media (max-width: 650px) {
  .column {
    width: 100%;
    display: block;
  }
}
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.container {
  padding: 0 16px;
}
.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}
.title {
  color: grey;
}
.button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  Font-family: Inherit;
  background-color: lightblue;
  text-align: center;
  cursor: pointer;
  width: 100%;
  text-transfrom: upper case;
}
.button:hover {
  background-color: lightgreen;
}
</style>

Once you have successfully paste it then press SAVE you are done

NOW LET ADD HTML

Now to add this html code below you will have to go to your about us page or meet the teams page on your blogger blog switch to html copy the code below and paste it inside

<div class="row">
<div class="column">
    <div class="card">
      <img src="ADD IMAGE URL HERE" alt="ADD IMAGE ALT HERE" style="width:100%">
      <div class="container">
        <h2>ADD STAFF NAME HERE</h2>
        <p class="title">:ADD POSITION HELD HERE:</p>
        <p>ADD INFORMATION ABOUT THE STAFF HERE</p>
        <p>ADD EMAIL ADDRESS HERE</p>
        <a href="ADD STAFF FACEBOOK OR TWITTER URL HERE" target=" _blank"><p><button class="button">Contact</button></p></a>
      </div>
    </div>
  </div>
<div class="column">
    <div class="card">
      <img src="ADD IMAGE URL HERE" alt="ADD IMAGE ALT HERE" style="width:100%">
      <div class="container">
        <h2>ADD STAFF NAME HERE</h2>
        <p class="title">:ADD POSSITION HELD HERE:</p>
        <p>ADD INFORMATION ABOUT THE STAFF HERE</p>
        <p>ADD EMAIL ADDRESS HERE</p>
        <a href="ADD STAFF FACEBOOK OR TWITTER URL HERE" target=" _blank"><p><button class="button">Contact</button></p></a>
      </div>
    </div>
  </div>
<div class="column">
    <div class="card">
      <img src="ADD IMAGE URL HERE" alt="ADD IMAGE ALT HERE" style="width:100%">
      <div class="container">
        <h2>ADD STAFF NAME HERE</h2>
        <p class="title">:ADD POSITION HELD HERE:</p>
        <p>ADD INFORMATION ABOUT THE STAFF HERE</p>
        <p>ADD EMAIL ADDRESS HERE</p>
        <a href="ADD STAFF FACEBOOK OR TWITTER URL HERE" target=" _blank"><p><button class="button">Contact</button></p></a>
      </div>
    </div>
  </div>
</div>

Now after adding that this are what you will need to change below:

ADD IMAGE URL HERE: Add your image or staff image url inside the quota " " don't modify any code just follow this step below
ADD IMAGE ALT HERE: Add image alt to the image
ADD STAFF NAME HERE: Add your staff name there
ADD POSITION HELD HERE Add the position held
ADD INFORMATION ABOUT THE STAFF HERE: Write information about the staff
EMAIL ADDRESS HERE: Write email address of the staff
ADD STAFF FACEBOOK OR TWITTER URL HERE : add a url of you or the staff social media handle

After that click SAVE you are done go to your about us page and see the awesomeness made out of it | If you have any complaint then do not hesitate to come back here and ask we will answer you

THANKS FOR VIEWING THIS POST | PLEASE THE LEAST YOU CAN DO FOR US IS TO SHARE IT PLEASE 👋👋😍

DID I MISS ANYTHING Now your turn you can contribute yours via the comment box and we will add it to these post which simply means that this post will be updated as new contributors comes in...  Be the first to contribute any other site you know can help other bloggers earn from sponsor review or post

And don't forget to always check back we update our blog with new post every day on topics that can help you or your business grow and also help you earn big from what you love doing we never disappoint we make sure our visitors get every benefit for their Visit we love comments 💗 |

This code was empowered by w3schools

Do you like this post then you can subscribe for it here SUBSCRIBE HERE so when next we post relatedly to HOW TO STYLE THE ABOUT US OR MEET THE TEAM PAGE OF A BLOG TO BEAUTIFY YOUR VISITORS INTEREST you will get it directly to your PC so you don't miss out - No email required

MORE ABOUT RICHARD ODDS

==================================================

I am Richard Odds by name a blogger, Social media Expert, Business planner, SEO specialist and a Web developer with the power of creativity i decided to create this blog where i can teach people how to explore this Digital erra and making the goal of archieving three things online which is KNOWLEDGE | POWER | and WEALTH

Join me on Social Media