banner
banner
banner
banner

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

76
banner
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 company’s 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, 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 because 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

0


Related Articles & Comments

  • banner
  • Wow thanks for the information. I was really struggling to how to put up an about page. Does this work for WordPress Blog sites as well.

    Sharon Chanyau July 12, 2017 2:55 pm Reply
  • Thanks so much

    SAMUEL KAYODE July 12, 2017 11:04 pm Reply
  • Kayode you welcome we hope to see you again on our platform

    Kindly follow back July 12, 2017 11:10 pm Reply
  • Very very informative blog for me.. will be using info from your blog soon

    Prasnavani July 13, 2017 7:38 am Reply
  • Lovely. But, I won't be applying it now but glad I can always return here for the guide. Your blog makes blogging simple. Thanks.

    Udunma Nnenna Ikoro July 13, 2017 7:38 am Reply
  • Very informative!! Thank you for the fantastic info! Definitely bookmarking your blog for future reference.

    Rebecca July 14, 2017 10:42 pm Reply
  • Prasnavani you welcome hope to see you again

    Kindly follow back July 14, 2017 10:45 pm Reply
  • Yeah it work with wordpress but i will be written the direct code for it very soon

    Kindly follow back July 14, 2017 10:48 pm Reply
  • Thanks so much i appreciate that hope to be seen you around Rebbecca

    Kindly follow back July 14, 2017 10:50 pm Reply
  • Thanks Udunma we look forward to write more amazing tips about blogging thanks for stopping by

    Kindly follow back July 14, 2017 10:52 pm Reply
  • You are welcome kayode thanks for stopping by

    Kindly follow back July 14, 2017 10:53 pm Reply

Leave a Comment

Your email address will not be published. Required fields are marked *

Join our feeds to automatically receive the latest headlines, news, and information formatted for your club's website or news reader.

Social connect:
[apsl-login-lite login_text='']