Introduction
The Manual Ads Manager is a lightweight, customizable advertising widget designed to help website owners display rotating ads without relying on third-party services. It’s perfect for bloggers, authors, and small businesses looking to promote their products or services in a clean, professional manner. This guide will walk you through two methods of installation: GitHub Integration and Direct Download. Both methods are easy to follow, even for beginners.
Key Features
Privacy-Focused: No third-party tracking or data collection.
Responsive Design: Works seamlessly on all devices (desktop, tablet, and mobile).
Customizable Ads: Easily add, remove, or modify ads.
MIT Licensed: Free to use, modify, and distribute with proper credit.
Lightweight: Minimal impact on website performance.
Method 1: GitHub Integration
For developers or users familiar with version control systems.
Step 1: Access the Repository
Visit the GitHub repository for the Manual Ads Manager:
GitHub Repository Link
Step 2: Clone the Repository
To clone the repository to your local machine, open your terminal or command prompt and run the following command:
git clone https://github.com/khubaybv2/manual_ads_manager.git
This will download all the necessary files to your computer.
Step 3: File Structure
After cloning, you’ll see the following files:
index.html: A demo file showing how the widget works.
script.js: The core JavaScript file that handles ad rotation and functionality.
style.css: The stylesheet for the widget’s design.
LICENSE: The MIT License file.
Step 4: Add the Widget to Your Website
Upload the
script.jsandstyle.cssfiles to your website’s server or hosting platform.In your website’s HTML file, add the following code before the closing
<link rel="stylesheet" href="path/to/style.css"></head>tag:Add this code before the closing
<script src="path/to/script.js"></script> <div id="custom-ad-widget"></div> Replace `path/to/` with the actual path to your uploaded files.</body>tag:
Step 5: Customize the Ads
Open the script.js file and locate the ads array. Modify the array to include your own ads:
const ads = [
{
image: "URL_TO_YOUR_IMAGE",
title: "Your Ad Title",
author: "Author Name",
link: "YOUR_LINK"
},
// Add more ads as needed
];
Method 2: Direct Download (Beginner-Friendly)
For users who prefer a simple, no-code solution.
Step 1: Download the Files
Visit the Google Drive folder:
Google Drive Folder LinkLocate the file named manual_ads_manager.txt.
Download the file to your computer.
Step 2: Extract and Upload
Rename the file from
manual_ads_manager.txttomanual_ads_manager.zip.Extract the contents of the ZIP file. You’ll find the following files:
script.js: The JavaScript file for ad functionality.
style.css: The CSS file for styling the widget.
Upload these files to your website’s server or hosting platform.
Step 3: Add the Widget to Your Website
In your website’s HTML file, add the following line before the closing
<link rel="stylesheet" href="path/to/style.css"></head>tag:Add these lines before the closing
<script src="path/to/script.js"></script> <div id="custom-ad-widget"></div> Replace `path/to/` with the actual path to your uploaded files.</body>tag:
Step 4: Customize the Ads
Open the script.js file and locate the ads array. Modify the array to include your own ads:
const ads = [
{
image: "URL_TO_YOUR_IMAGE",
title: "Your Ad Title",
author: "Author Name",
link: "YOUR_LINK"
},
// Add more ads as needed
];
Customization Options
1. Change Ad Display Timing
To adjust how long each ad is displayed, open the script.js file and locate the following line:
setInterval(() => this.rotateAd(), 10000);
Change 10000 (10 seconds) to your preferred interval in milliseconds (e.g., 15000 for 15 seconds).
2. Modify Widget Appearance
Open the style.css file to customize the widget’s design. You can change:
Background color: Edit the
backgroundproperty under#custom-ad-widget.Font family: Modify the
font-familyproperty.Border radius: Adjust the
border-radiusvalue.Box shadow: Edit the
box-shadowproperty for depth effects.
MIT License Compliance
The Manual Ads Manager is released under the MIT License, which means you are free to:
Use the widget for personal or commercial projects.
Modify and adapt the code to suit your needs.
Distribute the widget to others.
Requirements:
Include the original copyright notice in all copies or substantial portions of the software.
Provide a link to the MIT License: MIT License Link.
Example Attribution:
Add the following comment in your code or documentation:
"Contains code from Manual Ads Manager by Khubayb Hossain. Licensed under MIT."
Troubleshooting
Ads Not Displaying?
Ensure the
script.jsandstyle.cssfiles are correctly uploaded and linked.Check your browser’s console for errors (press F12 and look at the Console tab).
Design Issues?
Clear your browser cache (Ctrl + F5).
Verify that the
style.cssfile is properly linked in your HTML.
Rotation Not Working?
Ensure there are no JavaScript errors in the console.
Confirm that the
adsarray inscript.jscontains valid ad data.
Live Demo and Support
Live Demo: See the widget in action on my blog: Khubayb Hossain's Blog.
Support: For questions or issues, leave a comment on my blog or email me at [Your Email Address].
Final Notes
This guide provides everything you need to install and customize the Manual Ads Manager on your website. Whether you choose the GitHub method or the direct download option, you’ll have a fully functional ad widget in no time. Don’t forget to share your experience and let me know how it works for you!
