WordPress vs Blogger: Key differences

Maybe you are asking yourself why you should have a blog. I'm here to tell you that many people have taken blogging as their full-time employment(career) and they are making very huge money from it.

As for now, there are very many blogging sites where bloggers can create their blogs and get the best services from them, but I'm going to take you through just two; Blogger and WordPress.

Note: In this article, we are only talking about WordPress.org but not WordPress.com. you can also learn about their differences in this blog.

WordPress is a full content management system which means you can create a website using it. WordPress is not entirely free because you have to pay for a hosting plan in any hosting site of your choice. If you are looking for a cheap hosting site, look for Namecheap.com. If you want a better hosting company do it on Bluehost.com.

Blogger is beginner-friendly. It is very easy to create and publish your posts. All you need is to create a user profile using a google account. Then, you need to choose your URL which will have a .blogspot.com added to the end o your URL, for example, johnkey.blogspot.com. You can always change the domain ending by buying a custom domain.

After creating your account, you will get into the blogger dashboard where you can set up your blog, create posts, pages, and many more blog settings.

Pros and cons of WordPress.

1. The platform is beginner-friendly and easy to learn especially if you want to perform simple tasks like blogging.

2. There are many customized options in form of plugins and themes enabling you to design your site the way you want.

3. You are responsible for your site's management and making sure it's very secure.

4. You will need some money to invest when starting up your WordPress account like buying a domain name.

Pros and cons of the blogger.

1. It's very simple and quick to get started with a blogger. It takes very few minutes to create your blog and start running it.

2. Blogger is 100% free because you don't need any hosting plan like buying a domain and hosting it.

3. The platform is very basic because you can't do much with it. Many blog features are highly restricted.

4.Your blogger contents are not fully owned by you although you can export the contents to another site or blog.

.

How To Make An Active Download Button Using HTML And CSS.

 

If you are creating a blog or a website, and you want to put downloadable documents, there are ways you can create the download button and link it to your documents.

For the button to work out perfectly, the documents to be downloaded should be in the same folder as the other documents.

The link of the document should now be mounted into the website code e.g. if "post/edit/310299486750145624" is the document link, now the code should be like

href="post/edit/310299486750145624"

create a button like this;

<button class="btn"><i class="fa fa-download"></i> Download</button>

Make sure you position your button at the preferred place.

Then give your button a class so that the program can know what it's going to do.

class="et_pb_button"

The full button code;

<a href="post/edit/310299486750145624" download="newname" target="_blank"

class="et_pb_button" style="color: #1148df;">Download Link</a>

How To Add Social Media channels Into Your HTML Website

The href=" " is where you put your  channel links like if your you tube channel link is 'UC2PEw' ; you have to copy-paste it there.

You also need to paste an icon links in your coding area to ensure that, they are uploaded into your site.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font

-awesome/4.7.0/css/font-awesome.min.css" />

Paste the link between the head tangs

If you are using external CSS style-sheet ;make sure to use the right link to connect the CSS and HTML

<link rel="stylesheet" href="index.css">

The HTML coding;

<div class="Social">

<!-- Add font awesome icons -->

<a href="https://www.youtube.com/channel/UC7oVVWRPEw"

target="blank" class="fa fa-youtube"></a>

<a href="https://pin.it/1gTSr5H" target="blank"

class="fa fa-pinterest"></a>

<a href="https://www.facebook.com/meyermachapython.9"

target="blank" class="fa fa-facebook"></a>

<a href="https://twitter.com/"johnjoy target="blank"

class="fa fa-twitter"></a>

<a href="#" target="blank" class="fa fa-linkedin"></a>

<a href="mailto:meyechas@gmail.com? subject=subject text">

<img src="email.jpeg" width="25" height="25"></a>

</div>

The CSS coding;

.fa:hover {

opacity: 0.9;

}

.fa-linkedin {

/* background: white; */

color: rgb(69, 123, 238);

}

.fa-pinterest {

/* background: #cb2027; */

color: rgb(206, 46, 46);

}

.fa-instagram {

/* background: #ff5700; */

color: rgb(240, 161, 161);

}

.fa-facebook {

color: rgb(52, 77, 223)

}

.fa-twitter {

color: rgb(66, 105, 233);

}

.fa-youtube {

color: rgb(207, 37, 37);

}

.fa {

padding: 20px;

font-size: 40px;

width: 60px;

text-decoration: none;

margin: 5px 8px;

/* display: inline-block; */

}

Thank you for your time.

Creating A Registration Form Using HTML And CSS

A registration form may contain information like; Username, Password, Email, Gender, etc. We are going to create the registration form using HTML and use CSS for styling it. At the end of the coding, we have to get something like this; 

 This is just an example and you can take the codes and try to create a better form

You can also add more questions like country, city pin code, etc depending on how you want the form to look like.

The HTML coding;

<body>

<h1>connection form</h1>

<div id="form_reg">

<!-- <form action="data.php" id="contact-form" target="_blank"

method="post" enctype="application/x-www-form-urlencoded"></form> -->

<form NAME="frmContact" METHOD="post" class="form_class"

ACTION="data.php" target="_blank">

<p>

<label for="Name">First Name: </label>

<input type="text" name="txtName" id="txtName" required>

</p>

<p>

<label for="Name">Last Name: </label>

<input type="text" name="txtName" id="txtName" required>

</p>

<p>

<label for="email">Email:</label>

<input type="text" name="txtEmail" id="txtEmail" required>

</p>

<p>

<label for="phone">Phone:</label>

<input type="text" name="txtPhone" id="txtPhone" required>

</p>

<p>

<label for="Name">Password: </label>

<input type="password" name="password" id="txtName" required>

</p>

<label for="Name">conferm password: </label>

<input type="password" name="password" id="txtName" required>

<br>

<p>

<label for="Name">Gender: </label><br>

<input type="radio" name="gender" value="male" checked/>male<br />

<input type="radio" name="gender" value="female" />female<br/>

<input type="radio" name="gender" value="other" />other<br />

The CSS coding;

.container {

max-width: 1350px;

width: 100%;

margin: 50px;

height: auto;

display: block;

}

body {

color: #8A2BE2;

font-size: 20px;

font-family: Verdana, Arial, Helvetica, monospace;

background-color: #F0E8A0;

text-align: center;

}

h2 {

text-align: center;

}

.form_group {

padding: 10px;

;

display: block;

}

label {

float: left;

padding-right: 50px;

line-height: 10%;

display: block;

width: 208px;

}

.skills {

text-decoration: none;

}

.submit {

padding: 14px 20px;

background-color: #0caf0c;

font-size: 17px;

}