DEV Community: herryjobn

QR Code Generator Online 2023

herryjobn — Wed, 14 Dec 2022 14:35:54 +0000

The best simple and Free QR Code Generator Online 2023

The Top Web Safe Fonts to Use on Your Website 2022

herryjobn — Mon, 24 Oct 2022 16:10:13 +0000

Web Safe Fonts to Use on Your Website. Fonts play a vital role in framing your brand language and website design. Find the most suitable fonts for your websites, where to bring them, and when to add them. To have a wonderful web font that should be readable and safe web-fonts. It affects well across different devices, browsers, and operating systems.

Regardless, selecting the right font is not ever so easy. It’s standard to come across fonts that are visually attractive but aren’t web-safe or vice versa.

What Is A Web-Safe Font?

Web-safe fonts come pre-installed on most operating systems. It confirms that the font effect is as planned when accessed from different devices and browsers.

The most well-known examples of web-safe fonts include Arial, Times New Roman, and Helvetica.

What Are The Categories Of Fonts?

There are many varieties and types of fonts, and each deviation has its area relying on your brand. Some fonts are more decorated and prominent, while others are fairly simplistic and universal.

Web Safe Fonts To Use On Your Website

Some font types are perfect for a bold, eye-catching title, while others are best used in a lengthy paragraph of text. The different font types are as follows:

Sans-serif
Fantasy
Arial
Times New Roman
Times
Courier,... So on

How to Add Schema Markup in WordPress

herryjobn — Mon, 17 Oct 2022 16:31:01 +0000

Schema markup helps you supply search engines with important information that they can use to increase your listing in search results.

In this article, I will show you how to easily insert schema in WordPress and get more users to your website. But first, you need to know what a WordPress schema is and why it is prominent in your SEO strategy. So let’s get started!

What is Schema Markup?

A schema is a personal structure or idea that supports managing and representing information. In computer programming, the schema is the control and structure for a database. Schema markup is a superior type of HTML code that you can add to your WordPress website to tell search engines more about your content.

Schema is useful because it allows us to bring shortcuts to analyze the extensive amount of information and knowledge available in any condition.

Schema markup can boost your website traffic because all main search engines measure the effects of schema when showing a search engine results page. In addition, schema markup is intended to improve your search engine rankings as well as increase clickthrough rates...

7 Effective Ways To Promote Your YouTube Videos

herryjobn — Thu, 06 Oct 2022 01:38:13 +0000

Promote Your YouTube Videos. In this post, we are going to let you know how you can promote your YouTube videos with 7 major methods. We’ve got some thoughtfully smart and effective methods to promote your YouTube channel to enhance your views, and subscribers and improve the ROI of your YouTube strategy. Video content is the secret to successful content marketing.

If you want to stand out on YouTube, you need to take advantage of as many promotional tactics as possible.

Here are 7 effective ways to promote your YouTube Videos:

Choose Google-Friendly Keywords:
Use Concise, Descriptive Titles
Create Eye-Catching Thumbnail
Target audiences on Google search
Optimize Your Description
Create High-Quality Videos
Organize Your Videos in Playlist

Choose Google-Friendly Keywords:

A great YouTube video rises with great SEO (Search Engine Optimization). And prominent SEO begins with knowing what users are seeking. It sets out, people do not just look for videos on YouTube, they use Google too. ‘YouTube’ was the second most popular search term in 2019. Google now prioritizes video over other content for many explorations.

There’s no set practice for which keywords will support your YouTube video rank well. But a bit of reverse engineering can go a long way. Here’s how to obtain a Google-friendly keyword for any video, Classify possible keywords with a tool like the Google Ads Keyword Planner.

Use Concise, Descriptive Titles

The title is the first impression users see when they see your content. And if it isn’t punchy, it might be the last.

Here are some fundamental tips for writing strong YouTube titles:

Keep it brief and sweet. The most popular YouTube videos manage to have the shortest titles. Stick to 60 characters or less or some of your titles may get cut off when displayed.

Engaging does Not mean clickbait.

The best headlines offer a clear benefit or create an emotional reaction. Clickbait is tempting but can harm your channel’s reliability in the long term. Still can’t come up with a title? YouTube’s autocompleted feature is a great way to find popular keywords. Start by searching for a special theme or topic, and see what title YouTube suggests.
Read More: 7 Effective Ways To Promote Your YouTube Videos

Create Modal Box Using CSS And JS

herryjobn — Tue, 20 Sep 2022 15:49:10 +0000

How to create Modal Box with CSS and JavaScript. The purpose is to complete a transparent and simple modal popup box that does not use third-party libraries and is cross-browser compatible. We have to use vanilla JavaScript. Since we have been creating it from the start, we have complete control over how it looks and works.

Create Modal Box Using CSS and JS

Modal popups are widely used on the web. Some of their popular uses include driving newsletter signups, displaying notifications/alerts, and handling registration forms.

This model will be broad which means you’ll be free to use it for any purpose and anywhere.

HTML

Let’s start with HTML code.

<div class="container">
    <div class="popup-box">
        <a class="close-button popup-close" title="close">×</a>
        <h2>This is My PopUp</h2>
      <h3>How to create a model box with HTML CSS and JavaScript.</h3>
    </div>
</div>
<a class="button popup-button">Open Model!</a>

CSS Code:

<style>
body {
  font-family: "Open Sans";
  line-height: 200%;
}
.container {    position: fixed;    left: 0;    top: 0;
    width: 100%;    height: 100%;    background: rgba(0, 0, 0, 1.5);
    opacity: 0;    visibility: hidden;    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
h2, h3{
  text-align:center;  font-size: 5.5em;  padding:20px;}
h3{
  text-align:center;  font-size: 4em;  line-height:1.5em;  color:#888;}

.button {
  padding: 2.2% 5.5%;  display: inline-block;  -webkit-transition: all linear 0.15s;
  transition: all linear 0.15s;  border-radius: 3px;  background: #7b78ff;
  font-size: 22px;  font-weight: bold;  text-decoration: none;
  text-transform: uppercase;  color: #fff;}

.button:hover {  opacity: 1.75;  cursor:pointer;  color:#000;}

.popup-box {  width: 80%;  height:500px;  padding: 70px;
  transform: translate(-50%, -50%) scale(0.5);
  position: absolute;  top: 50%;  left: 50%;
  box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.8);
  border-radius: 5px;  background: #fff;
  text-align: center;}

.close-button {  width: 35px;  height: 35px;  display: inline-block;
  position: absolute;  top: 10px;  font-size:60px;  right: 10px;
  -webkit-transition: all ease 0.5s;  transition: all ease 0.5s;
  border-radius: 50%;  background: #7b78ff;  font-weight: bold;
  color: #fff;  text-align:center;  cursor:pointer; 
}
.close-button:hover {  -webkit-transform: rotate(180deg);
  transform: rotate(400deg);
}
.show-container {    opacity: 1;    visibility: visible;    transform: scale(1.0);
    transition: visibility 0s linear 0s, opacity 1.25s 0s, transform 1.25s;
}
</style>

Read More and see Demo:Create Modal Box Using CSS And JS

7 Best Anti-Spam WordPress Plugins

herryjobn — Sun, 11 Sep 2022 13:11:54 +0000

7 Best Anti-Spam WordPress Plugins. If you are running a website or a blog on WordPress or any content management system, then you’ve likely had some understanding of spam. Spam can impact different areas and features of your website, including your forms, comments, orders, email lists, surveys, trackbacks, etc.

In spare to destroying your time and server resources, spambots can provide you a false appearance of your WordPress traffic, email list size, and other performance metrics. Spam, particularly spam trackbacks, and comments, can also make your site peek less professional and reliable to your users.

Fortunately, you can bring steps to control spambots from flooding your WordPress website. One of the most comfortable and sufficient solutions is downloading a WordPress plugin that will check, filter out, stop, or remove spam from your website.

Given below we’ll go over some of the best anti-spam plugins, which can support securing your website.

7 Best Anti-Spam WordPress Plugins | Securing Your Site

Akismet Spam Protection
Spam Protection, AntiSpam, FireWall by CleanTalk
Titan Anti-Spam & Security
WP Cerber Security, Anti-Spam & Malware Scan
Antispam Bee
WP Armour
Hide My WP

Akismet Spam Protection

Akismet checks your contact form and comments submissions against a global database of spam to control your website from publishing malicious content. With over five million+ downloads, Akismet is the most famous plugin for guarding WordPress websites from spam. Akismet inspections comments and contact form submissions against its global database of spam and filters out any that appear like spam.

You can review the comment spam in your dashboard, and retrieve any that you think aren’t spam.
Please note that this plugin does require an API key to activate it.
To get API you need to signup on Akismet. Depends on you you can get their free plan.

How To Add Tooltips In HTML & CSS

herryjobn — Tue, 06 Sep 2022 16:46:20 +0000

Tooltip is a way used in HTML for displaying some extra details about the particularly selected element. This can be done on the mouse hover effect whenever the user drags the mouse over an element that is using a tooltip to display particular information about that element.

Tooltip is used as an inline element like div, periodically with class tooltip text. One can set a place to that tool-tipped text by using CSS, which supports us to represent some style and position to our tooltip.

Add Tooltips in HTML & CSS

To add tooltips you need to create two files one is index.html and one is style.css or you can add CSS in the HTML file as well. so, let’s start.

HTML Code.

<div>Here is an examples of a <a class="tooltip" href="#">Tooltip<span class="classic">This is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own!</span></a></div>

CSS Code

<style>
.tooltip {position: relative;}
.tooltip span {
 margin-left: -999em;
 position: absolute;
}
.tooltip:hover span {
 border-radius: 5px; 
 position: absolute; left: 1em; top: 2em; z-index: 99;
 margin-left: 0; width: 250px;
}
.classic { padding: 0.8em 1em; 
}
* html a:hover { background: transparent; }
.classic {background: #f3f4fe; border: 1px solid green; }
</style>

Create A Responsive Grid In CSS

herryjobn — Sun, 04 Sep 2022 01:25:59 +0000

How to Create a responsive grid in CSS for your website is essential if you want to show multiple grids to attract the user. So, are you trying to create responsive grid elements?

As you know one size can’t adjust every screen size. Now, the current solution is a responsive grid that will modify based on the size of the screen by bearing a view on a screen. Developers begin to design a website framework for responsive grid requirements. But it might not be difficult as you think to code your own.

How to create a responsive grid in CSS.

So, let’s start to write a few lines HTML code that will help to create a responsive grid.

<div class="grids">
  <div class="grid">1</div>
  <div class="grid">2</div>
  <div class="grid">3</div>
  <div class="grid">4</div>
  <div class="grid">5</div>
  <div class="grid">6</div>
  <div class="grid">7</div>
  <div class="grid">8</div>
  <div class="grid">9</div>
</div>

CSS Code:

html { 
font-size: 22px; 
}
body {
 padding: 1rem;
 }

.grid {
  background-color: blue;
  color: white;
  padding: 1rem;
  height: 4rem;
  font-size:50px;
}

.grids {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-gap: 1rem;
}

/* Screen larger than 600px? 2 column */
@media (min-width: 600px) {
  .grids { grid-template-columns: repeat(2, 1fr); }
}

/* Screen larger than 900px? 3 columns */
@media (min-width: 900px) {
  .grids { grid-template-columns: repeat(3, 1fr); }
}

Well, you have all done now a time to check what your grid looks like save your file with the .html extension open this file to your web browser you will see the result.

Create A Slideshow in HTML , CSS and JS

herryjobn — Sat, 03 Sep 2022 09:44:14 +0000

How to create a slideshow in HTML and CSS3 and javascript. So, We’ll not use any external source or script for our stunning automatic slider.

As we know a web slider/slideshow is a flow of images or text that consists of displaying one element of the flow in a certain time interval. In real-time conditions, there may be a need to put an image slideshow on web applications, web pages, or anywhere else. Within seconds, a developer considers using an existing jQuery plugin or something else or slider scripts.

While using such kinds of scripts, sometimes there is a chance of code conflicts between the script libraries and the existing libraries used in the web application or pages, and this takes time to get fixed. If you will use any plugin to create a slideshow then keep in mind it can be slow down your web page speed and many other effects. So, we can’t recommend using any external plugin.

Slideshow in HTML and CSS3

If the slider need is simple and short, you can build your own slideshow by using HTML, CSS, and JavaScript. It is one of the best ways to create a slideshow. This will get less time to perform and give no errors and time-consuming..
So, Let’s start making it.

<div class="soft-slideshow">

<div class="softSlides out">
  <div class="numbers">1 / 3</div>
  <img src="https://softcodeon.com/wp-content/uploads/revslider/home-3/slide-sh-8n.jpg" style="width:100%">
  <div class="text">Your text here</div>
</div>

<div class="softSlides out">
  <div class="numbers">2 / 3</div>
  <img src="https://softcodeon.com/wp-content/uploads/revslider/home-3/slide-sh-7n.jpg" style="width:100%">
  <div class="text">Your text here</div>
</div>

<div class="softSlides out">
  <div class="numbers">3 / 3</div>
  <img src="https://softcodeon.com/wp-content/uploads/revslider/home-3/slide-sh-9n.jpg" style="width:100%">
  <div class="text">Your text here</div>
  </div></div><br>
<div style="text-align:center">
  <span class="bullets"></span> 
  <span class="bullets"></span> 
  <span class="bullets"></span> 
</div>

CSS Code:

<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.softSlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.soft-slideshow {
  max-width: 1000px;
  position: relative;
  margin: auto;
}
/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}
/* Number text (1/3 etc) */
.numbers {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
/* The bulletss/bullets/indicators */
.bullets {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active {
  background-color: #717171;
}
/* Fading animation */
.out {
  -webkit-animation-name: out;
  -webkit-animation-duration: 1.5s;
  animation-name: out;
  animation-duration: 1.5s;
}

@-webkit-keyframes out {
  from {opacity: .4} 
  to {opacity: 1}
}
@keyframes out {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
</style>

To get in detail and demo Read More: Create A Slideshow In HTML And CSS3

How To Add Custom Image Size In WordPress

herryjobn — Thu, 01 Sep 2022 07:28:29 +0000

Add Custom Image Size in WordPress. By default, WordPress automatically produces many models of image uploads in diverse sizes. Additionally, WordPress themes and plugins can also produce their own image size.

In this article, you will learn how to easily create custom image sizes in WordPress and use them on your website.

What Are Default WordPress Images Size?

By default, each WordPress installation appears with three custom image sizes.

Thumbnail – 150*150
Medium– 300*300
Large – 1024*1024

This indicates that when you upload an image to your website, the kernel will automatically generate models in those sizes. However, sometimes these dimensions are not the ones you want for your website.

Exclude Pages From WordPress Search Results

herryjobn — Tue, 30 Aug 2022 12:55:24 +0000

How to Exclude Pages from WordPress Search Results. By default, the internal search on your WordPress website will cover all posts and pages in the WordPress search results. To address it more relaxed for your site users to find what they’re looking for, you may require to exclude certain Pages or Posts, so it nevermore appears in those results.

In this article, you will learn how to exclude Pages or Posts from the WordPress search results. Let’s div.

Here we will see two different methods to do this.

Using PHP Code in a template.
Using a specific Plugin

Why Need to Exclude Pages from WordPress Search Results?

By default WordPress, site search covers all of your content in the search results. This works well full for various WordPress website owners. However, if you are managing an online store, then you may desire to hide pages like your account page, Welcome Page, checkout page, thank you page, etc. Also you may require to hide subscriber-only content from appearing in search.

Note: This guide meets on-site search results when a user uses your website search box to search through your website content.

How To Hide A WordPress Page From Google

herryjobn — Mon, 29 Aug 2022 16:45:01 +0000

How to Hide a WordPress Page From Google. Sometimes you may require to exclude a post/page from looking in Google search results as it is not related to your website’s content, to defend your privacy from unwanted users.

In this article, you will learn how to hide a WordPress post/page from Google without harming your site’s overall (SEO) Search Engine Optimization.

Why Need to Hide a WordPress Page from Google?

As we know Search engines like Google support website owners to exclude content (Posts) from search results. You can hide WordPress blog posts and pages that don’t have any importance to the wide public such as posts you might have to design for website ownership confirmation.

The different situation where excluding WordPress pages from search results is useful if you have a membership website. You can protect/hide the profile pages of your users from appearing on search engines.

Protecting content from Google is also effective if your website is under development, and you want to share a sneak show with your audience. This way Google won’t index an uncovered website in its search results.

Besides that, excluding pages that have special or raw information supports protecting your privacy and stops private information from falling into evil hands.

Easiest Way to Hide a WordPress Posts from Search Engines
This process is the easiest and suggested for trainees.

You can hide a WordPress post from Google by using a WordPress plugin like Rank Math. It’s one of the most popular SEO plugins used by 1+ million websites. First, you need to do is install and activate the Rank Math plugin.