In today’s time, if you want to earn money from blogging, then you can easily make 10 to 15000 dollars a month by creating a tool website. Many of you think that you can earn money in blogging only by writing articles or blog posts, but it is not so.
There are many ways in blogging with the help of which you can earn money and I have provided the codes of some tools below, which you can directly copy paste and create your own tool website.
1. Barcode Generator Tool Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Barcode Generator</title>
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>
<style>
/* Basic Reset */
body, h1, input, button {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
/* Main Container */
.barcode-container {
max-width: 500px;
margin: 50px auto;
padding: 20px;
background: #f9f9f9;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
/* Heading */
.barcode-container h1 {
font-size: 24px;
color: #333;
margin-bottom: 20px;
}
/* Input Field */
.barcode-container input[type="text"] {
width: 80%;
padding: 10px;
margin-bottom: 20px;
border: 2px solid #ddd;
border-radius: 5px;
font-size: 16px;
outline: none;
transition: border-color 0.3s ease;
}
.barcode-container input[type="text"]:focus {
border-color: #007bff;
}
/* Generate Button */
.barcode-container button {
padding: 10px 20px;
background: #007bff;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background 0.3s ease;
}
.barcode-container button:hover {
background: #0056b3;
}
/* Barcode SVG */
#barcode {
margin-top: 20px;
background: #fff;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="barcode-container">
<h1>Barcode Generator</h1>
<input type="text" id="barcodeInput" placeholder="Enter text to generate barcode">
<button onclick="generateBarcode()">Generate Barcode</button>
<br>
<svg id="barcode"></svg>
</div>
<script>
function generateBarcode() {
const input = document.getElementById("barcodeInput").value;
if (input.trim() === "") {
alert("Please enter some text to generate a barcode.");
return;
}
JsBarcode("#barcode", input, {
format: "CODE128", // Barcode type
displayValue: true, // Show text below barcode
fontSize: 18,
});
}
</script>
</body>
</html>2. Youtube Thumbnail Download Tool
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube Thumbnail Downloader</title>
<style>
/* Basic Reset */
body, h1, input, button, a {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
/* Main Container */
.thumbnail-container {
max-width: 600px;
margin: 50px auto;
padding: 20px;
background: #f9f9f9;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
/* Heading */
.thumbnail-container h1 {
font-size: 24px;
color: #333;
margin-bottom: 20px;
}
/* Input Field */
.thumbnail-container input[type="text"] {
width: 80%;
padding: 10px;
margin-bottom: 20px;
border: 2px solid #ddd;
border-radius: 5px;
font-size: 16px;
outline: none;
transition: border-color 0.3s ease;
}
.thumbnail-container input[type="text"]:focus {
border-color: #007bff;
}
/* Button Styling */
.thumbnail-container button {
padding: 10px 20px;
background: #007bff;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background 0.3s ease;
}
.thumbnail-container button:hover {
background: #0056b3;
}
/* Thumbnail Preview */
.thumbnail-preview {
margin-top: 20px;
}
.thumbnail-preview img {
max-width: 100%;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* Download Links */
.download-links {
margin-top: 20px;
}
.download-links a {
display: inline-block;
margin: 5px;
padding: 10px 15px;
background: #28a745;
color: #fff;
text-decoration: none;
border-radius: 5px;
transition: background 0.3s ease;
}
.download-links a:hover {
background: #218838;
}
</style>
</head>
<body>
<div class="thumbnail-container">
<h1>YouTube Thumbnail Downloader</h1>
<input type="text" id="videoUrl" placeholder="Enter YouTube Video URL">
<button onclick="fetchThumbnails()">Get Thumbnails</button>
<!-- Thumbnail Preview -->
<div class="thumbnail-preview" id="thumbnailPreview">
<!-- Thumbnails will be shown here -->
</div>
<!-- Download Links -->
<div class="download-links" id="downloadLinks">
<!-- Download buttons will be shown here -->
</div>
</div>
<script>
function fetchThumbnails() {
const videoUrl = document.getElementById("videoUrl").value;
const thumbnailPreview = document.getElementById("thumbnailPreview");
const downloadLinks = document.getElementById("downloadLinks");
// Clear previous results
thumbnailPreview.innerHTML = "";
downloadLinks.innerHTML = "";
// Extract Video ID from URL
const videoId = extractVideoId(videoUrl);
if (!videoId) {
alert("Invalid YouTube URL. Please enter a valid URL.");
return;
}
// Thumbnail URLs
const thumbnailSizes = [
{ label: "Max Resolution", url: `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg` },
{ label: "High Quality", url: `https://img.youtube.com/vi/${videoId}/hqdefault.jpg` },
{ label: "Medium Quality", url: `https://img.youtube.com/vi/${videoId}/mqdefault.jpg` },
{ label: "Standard Quality", url: `https://img.youtube.com/vi/${videoId}/sddefault.jpg` },
];
// Display Thumbnails and Download Links
thumbnailSizes.forEach(size => {
// Thumbnail Preview
const img = document.createElement("img");
img.src = size.url;
img.alt = size.label;
thumbnailPreview.appendChild(img);
// Download Link
const link = document.createElement("a");
link.href = size.url;
link.download = `thumbnail_${size.label}.jpg`;
link.innerText = `Download ${size.label}`;
downloadLinks.appendChild(link);
});
}
function extractVideoId(url) {
// Extract Video ID from YouTube URL
const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
const match = url.match(regex);
return match ? match[1] : null;
}
</script>
</body>
</html>3. Url Shortener Tool Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>URL Shortener Tool</title>
<style>
/* Basic Reset */
body, h1, input, button, a {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
/* Main Container */
.urlshortener-container {
max-width: 600px;
margin: 50px auto;
padding: 20px;
background: #f9f9f9;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
/* Heading */
.urlshortener-container h1 {
font-size: 24px;
color: #333;
margin-bottom: 20px;
}
/* Input Field */
.urlshortener-container input[type="text"] {
width: 80%;
padding: 10px;
margin-bottom: 20px;
border: 2px solid #ddd;
border-radius: 5px;
font-size: 16px;
outline: none;
transition: border-color 0.3s ease;
}
.urlshortener-container input[type="text"]:focus {
border-color: #007bff;
}
/* Button Styling */
.urlshortener-container button {
padding: 10px 20px;
background: #007bff;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background 0.3s ease;
}
.urlshortener-container button:hover {
background: #0056b3;
}
/* Short URL Display */
.short-url {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.short-url a {
color: #007bff;
text-decoration: none;
font-size: 18px;
word-break: break-all;
}
.short-url a:hover {
text-decoration: underline;
}
/* Copy Button */
.copy-button {
padding: 8px 15px;
background: #28a745;
color: #fff;
border: none;
border-radius: 5px;
font-size: 14px;
cursor: pointer;
transition: background 0.3s ease;
}
.copy-button:hover {
background: #218838;
}
</style>
</head>
<body>
<div class="urlshortener-container">
<h1>URL Shortener Tool</h1>
<input type="text" id="longUrl" placeholder="Enter your long URL here">
<button onclick="shortenUrl()">Shorten URL</button>
<!-- Short URL Display -->
<div class="short-url" id="shortUrl">
<!-- Shortened URL and Copy Button will be shown here -->
</div>
</div>
<script>
async function shortenUrl() {
const longUrl = document.getElementById("longUrl").value;
const shortUrlDiv = document.getElementById("shortUrl");
// Clear previous result
shortUrlDiv.innerHTML = "";
if (!longUrl) {
alert("Please enter a valid URL.");
return;
}
try {
// Use TinyURL API to shorten the URL
const response = await fetch(`https://tinyurl.com/api-create.php?url=${encodeURIComponent(longUrl)}`);
if (!response.ok) {
throw new Error("Failed to shorten URL.");
}
const shortUrl = await response.text();
// Display the shortened URL and Copy Button
shortUrlDiv.innerHTML = `
<a href="${shortUrl}" target="_blank">${shortUrl}</a>
<button class="copy-button" onclick="copyToClipboard('${shortUrl}')">Copy URL</button>
`;
} catch (error) {
shortUrlDiv.innerHTML = "Error: Unable to shorten the URL. Please try again.";
console.error(error);
}
}
// Copy to Clipboard Function
function copyToClipboard(text) {
navigator.clipboard.writeText(text)
.then(() => {
alert("URL copied to clipboard!");
})
.catch(() => {
alert("Failed to copy URL. Please try again.");
});
}
</script>
</body>
</html>You have to simply copy the above code and paste it in your WordPress post or page and your tool website will be ready within 5 minutes. I have also given the link of the video below, by watching which you can add these tools to your website.
By watching this video you can easily create your own tool website inside WordPress and if you want more information related to tool website then you can watch more videos on our YouTube channel and if you want to generate a good income from blogging then you can also subscribe to our channel.
