bluehost

Showing posts with label Blogger. Show all posts
Showing posts with label Blogger. Show all posts

Wednesday, 27 September 2023

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.
.






at No comments:
Labels: , , , ,

Thursday, 9 September 2021

How To Create A Gallery Using HTML, CSS , And JS;

 



Today's article is aimed at creating a gallery where we can put our photos and or videos. It will function as gallery app or google photos.

The gallery will contain buttons where you will be selecting whether to move forward or backward by pressing the buttons.

The HTML codes.

<!DOCTYPE html>

<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="gallery.css">


<h2 style="text-align:center">My Gallery</h2>
<video width="600" controls autoplay loop>
<source src="https://www.theedublogger.com/google-photos-guide/" type="video/mp4">
</video>
<div class="container">
<div class="mySlides">
<div class="numbertext">1 / 9</div>
<img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fwww.cnet.
com%2Fa%2Fimg%2FpLwWAw3f1OdjhUWe1-u0jcqhIcI%3D%2F
1200x630%2F2019%2F09%2F10%2Fd3dc3047-4c7f-499e-8b8c-240b3e27c6d2%2Fgoogle-
logo-6.jpg&imgrefurl=https%3A%2F%2Fwww.cnet.com%2Ftech%2Fservices-and-software
%2Fgoogle-one-storage-starts-offering-some-features-for-free%2F&tbnid=EHjUDy1Y
NjPeHM&vet=12ahUKEwiimYTh1fHyAhUDGRoKHeksDPsQMygcegUIARCGAg..i&docid=iTrW3iE24
PKfIM&w=1200&h=630&q=google%20photos&ved=2ahUKEwiimYTh1fHyAhUDGRoKHeksDPsQMyg
cegUIARCGAg" style="width:100%">

</div>

<div class="mySlides">
<div class="numbertext">2 / 9</div>
<img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fimages.indianexpress.
com%2F2021%2F05%2FGoogle_Reuters_F.jpg&imgrefurl=https%3A%2F%2Findianexpress.
com%2Farticle%2Ftechnology%2Ftechook%2Fgoogle-photos-free-storage-policy-june-
1-ends-check-plans-storage-pixel-users-7337569%2F&tbnid=Sx3ERkzPGnTY4M&vet=
12ahUKEwiimYTh1fHyAhUDGRoKHeksDPsQMygfegUIARCMAg..i&docid=wVPDJT3nWFtmyM&w=
1200&h=667&q=google%20photos&ved=
2ahUKEwiimYTh1fHyAhUDGRoKHeksDPsQMygfegUIARCMAg" style="width:100%">
</div>

<div class="mySlides">
<div class="numbertext">3 / 9</div>
<img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fcdn-res.
keymedia.com%2Fcms%2Fimages%2Fus%2F039%2F0132_637309597704291234.
jpg&imgrefurl=https%3A%2F%2Fwww.hcamag.com%2Fasia%2Fspecialisation%2Flearning-
development%2Fgoogle-to-support-3000-jobseekers-in-singapore%2F228475&tbnid=
I6tgnIsHZoivuM&vet=10CIoBEDMonwFqFwoTCMjv0cTW8fICFQAAAAAdAAAAABAC..i&docid=
cRnRmoII5sHFSM&w=1000&h=600&q=google%20photos&ved=
0CIoBEDMonwFqFwoTCMjv0cTW8fICFQAAAAAdAAAAABAC" style="width:100%">
</div>

<div class="mySlides">
<div class="numbertext">4 / 9</div>
<img src="tech.jpg" style="width:100%">
</div>

<div class="mySlides">
<div class="numbertext">5 / 9</div>
<img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fimages.ctfassets.
net%2Fwcfotm6rrl7u%2F24PvUvHxz3ZwBFFtufgRQe%2F14f808748369bba7d34493023b6fa4dc%
2FGoogle_One-og_image.jpg&imgrefurl=https%3A%2F%2Fwww.nokia.com%2Fphones%2Fen_
int%2Fgoogle-one&tbnid=a3voUblV2VLiLM&vet=12ahUKEwiimYTh1fHyAhUDGRoKHeksDPsQMy
hOegUIARCSAQ..i&docid=FRCdA0hBH27ePM&w=1200&h=630&q=google%20photos&ved=2ahUKEw
iimYTh1fHyAhUDGRoKHeksDPsQMyhOegUIARCSAQ" style="width:100%">
</div>

<div class="mySlides">
<div class="numbertext">6 / 9</div>
<img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fcdn57.androidauthority.
net%2Fwp-content%2Fuploads%2F2020%2F11%2Fgoogle-photos-app-icon-logo-google-
pixel-5-2.jpg&imgrefurl=https%3A%2F%2Fwww.androidauthority.com%2Fgoogle-photos
-937968%2F&tbnid=Q6JFAzN64gbW3M&vet=12ahUKEwiimYTh1fHyAhUDGRoKHeksDPsQMyhSegU
IARCaAQ..i&docid=Bjph8NoD5mBaqM&w=1920&h=1080&q=google%20photos&ved=2ahUKEwi
imYTh1fHyAhUDGRoKHeksDPsQMyhSegUIARCaAQ" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">7 / 9</div>
<img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fwww.cnet.com%2Fa%2Fimg%2
FvyXvPd3VpbvIftGIu2uu6M7Yk7o%3D%2F1200x630%2F2021%2F06%2F03%2F094be1de-9cce
-4762-b8e5-6f69cfafed81%2Fgoogle-one-plan-upgrade-google-photos-unlimited-
ending-cnet-2021-008.jpg&imgrefurl=https%3A%2F%2Fwww.cnet.com%2Ftech%2Fservices
-and-software%2Fgoogle-photos-unlimited-free-storage-has-ended-heres-what-to
-do-now%2F&tbnid=9JDDOlww9ESe3M&vet=12ahUKEwiimYTh1fHyAhUDGRoKHeksDPsQMyhQegU
IARCWAQ..i&docid=99qLieN9Jb67kM&w=1200&h=630&q=google%20photos&ved=2ahUKEwiimY
Th1fHyAhUDGRoKHeksDPsQMyhQegUIARCWAQ" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">8 / 9</div>
<img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fstatic01.nyt.
com%2Fimages%2F2020%2F10%2F21%2Fbusiness%2F21Googleworld-illo%2F30Googleworld-
illo-videoSixteenByNineJumbo1600.jpg&imgrefurl=https%3A%2F%2Fwww.nytimes.
com%2F2020%2F10%2F20%2Ftechnology%2Fdoj-google.html&tbnid=6VkDOKNz2jqSKM&vet=
10CBYQMyhuahcKEwjI79HE1vHyAhUAAAAAHQAAAAAQAg..i&docid=3tHeBj2gDZ0x6M&w=1600&h=
900&q=google%20photos&ved=0CBYQMyhuahcKEwjI79HE1vHyAhUAAAAAHQAAAAAQAg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">9 / 9</div>
<img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fcdn.pocket-lint.
com%2Fr%2Fs%2F1200x%2Fassets%2Fimages%2F141075-apps-feature-what-is-
google-lens-and-how-do-you-use-it-image1-fvo5qgkrqn.jpg&imgrefurl=
https%3A%2F%2Fwww.pocket-lint.com%2Fapps%2Fnews%2Fgoogle%2F141075-what-is-
google-lens-and-how-does-it-work-and-which-devices-have-it&tbnid=
OTxzNM7uMS20yM&vet=10CFcQMyiKAWoXChMIyO_RxNbx8gIVAAAAAB0AAAAAEAI..
i&docid=_c-UEac8WF-XvM&w=1200&h=800&q=google%20photos&ved=0CFcQMyiKAWoXChMIyO_
RxNbx8gIVAAAAAB0AAAAAEAI" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>

<div class="caption-container">
<p id="caption"></p>
</div>

<div class="row">
<div class="column">
<img class="demo cursor" src="moon.jpg" style="width:100%"
onclick="currentSlide(1)" alt="The horizon">
</div>
<div class="column">
<img class="demo cursor" src="web.jpeg" style="width:100%"
onclick="currentSlide(2)" alt="third-world">
</div>
<div class="column">
<img class="demo cursor" src="we.jpg" style="width:100%"
onclick="currentSlide(3)" alt="$ is the future">
</div>
<div class="column">
<img class="demo cursor" src="tech.jpg" style="width:100%"
onclick="currentSlide(4)" alt="skypers">
</div>
<div class="column">
<img class="demo cursor" src="images (39).jpeg" style="width:100%"
onclick="currentSlide(5)" alt="life is $ ">
</div>
<div class="column">
<img class="demo cursor" src="website.jpeg" style="width:100%"
onclick="currentSlide(6)" alt="guru and net">
</div>
<div class="column">
<img class="demo cursor" src="saf.jpg" style="width:100%"
onclick="currentSlide(7)" alt="get new ideas">
</div>
<div class="column">
<img class="demo cursor" src="dev.jpg" style="width:100%"
onclick="currentSlide(8)" alt="socialise">
</div>
<div class="column">
<img class="demo cursor" src="blog.jpg" style="width:100%"
onclick="currentSlide(9)" alt="develop yourself">
</div>
</div>
</div>



</body>

</html>

The CSS codes.

body {
font-family: Arial;
margin: 0;
}

* {
box-sizing: border-box;
}

img {
vertical-align: middle;
}


/* Position the image container (needed to position the left and right arrows) */

.container {
position: relative;
}


/* Hide the images by default */

.mySlides {
display: none;
}


/* Add a pointer when hovering over the thumbnail images */

.cursor {
cursor: pointer;
}


/* Next & previous buttons */

.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}


/* Position the "next button" to the right */

.next {
right: 0;
border-radius: 3px 0 0 3px;
}


/* On hover, add a black background color with a little bit see-through */

.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}


/* Number text (1/3 etc) */

.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}


/* Container for image text */

.caption-container {
text-align: center;
background-color: #222;
padding: 2px 16px;
color: white;
}

.row:after {
content: "";
display: table;
clear: both;
}


/* Six columns side by side */

.column {
float: left;
width: 16.66%;
}


/* Add a transparency effect for thumnbail images */

.demo {
opacity: 0.6;
}

.active,
.demo:hover {
opacity: 1;
}

JavaScript codes.

<script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
captionText.innerHTML = dots[slideIndex - 1].alt;
}
</script>

You can create,change or modify the codes at your wish.

at No comments:
Labels: , , , , , ,
Subscribe to: Posts (Atom)

React vs Angular; Front-End Web Development

Angular and React  are two of the most popular Javascript tools for front-end development. React is a Javascript created by Meta...