الدليل انشاء أداة توليد أكواد AdSense
ملاحظة: هذا الدليل يشرح كيفية إنشاء أداة متكاملة لتوليد أكواد AdSense يمكن استخدامها في المواقع والمدونات.
المقدمة
أداة توليد أكواد AdSense تساعد مالكي المواقع والمدونات على إنشاء أكواد إعلانية جاهزة للاستخدام بسهولة. في هذا الدليل، سنتعلم كيفية بناء هذه الأداة من الصفر.
الخطوة 1: التخطيط للمشروع
1
تحديد المتطلبات الأساسية
قبل البدء في البرمجة، نحتاج إلى تحديد:
- الهدف من الأداة
- المنصات المستهدفة (WordPress، Blogger، AMP، إلخ)
- الميزات الأساسية المطلوبة
2
تصميم واجهة المستخدم
نحتاج إلى تصميم واجهة سهلة الاستخدام تحتوي على:
- حقول إدخال البيانات
- خيارات التنسيق
- منطقة عرض الكود الناتج
- أزرار التحكم
الخطوة 2: إنشاء الهيكل الأساسي (HTML)
هذا هو الهيكل الأساسي للصفحة:
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>أداة توليد أكواد AdSense</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>أداة توليد أكواد AdSense</h1>
<div class="form-group">
<label for="client-id">معرف العميل (ca-pub-XXXXX)</label>
<input type="text" id="client-id" placeholder="أدخل معرف العميل">
</div>
<div class="form-group">
<label for="slot-id">معرف الإعلان (XXXXX)</label>
<input type="text" id="slot-id" placeholder="أدخل معرف الإعلان">
</div>
<div class="form-group">
<label for="ad-format">تنسيق الإعلان</label>
<select id="ad-format">
<option value="auto">تلقائي</option>
<option value="banner">بانر (728×90)</option>
<option value="rectangle">مستطيل (300×250)</option>
</select>
</div>
<button id="generate-btn">توليد الكود</button>
<div class="code-output">
<textarea id="generated-code" readonly></textarea>
<button id="copy-btn">نسخ الكود</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
الخطوة 3: تصميم الواجهة (CSS)
إنشاء ملف styles.css لتنسيق الصفحة:
/* تهيئة عامة */
body {
font-family: 'Tajawal', sans-serif;
background: #f5f7fa;
margin: 0;
padding: 20px;
color: #333;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #4285F4;
text-align: center;
margin-bottom: 30px;
}
/* حقول الإدخال */
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
input, select {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
button {
background: #4285F4;
color: white;
border: none;
padding: 12px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
width: 100%;
margin: 20px 0;
}
button:hover {
background: #3367d6;
}
.code-output {
margin-top: 20px;
}
#generated-code {
width: 100%;
height: 150px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-family: monospace;
}
#copy-btn {
margin-top: 10px;
background: #34A853;
}
الخطوة 4: البرمجة الوظيفية (JavaScript)
إنشاء ملف script.js لجعل الأداة تعمل:
document.addEventListener('DOMContentLoaded', function() {
const generateBtn = document.getElementById('generate-btn');
const copyBtn = document.getElementById('copy-btn');
const generatedCode = document.getElementById('generated-code');
generateBtn.addEventListener('click', function() {
const clientId = document.getElementById('client-id').value.trim();
const slotId = document.getElementById('slot-id').value.trim();
const adFormat = document.getElementById('ad-format').value;
if (!clientId || !slotId) {
alert("الرجاء إدخال معرف العميل ومعرف الإعلان!");
return;
}
// توليد الكود بناءً على المدخلات
const code = `
<!-- كود AdSense -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${clientId}" crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="${clientId}"
data-ad-slot="${slotId}"
data-ad-format="${adFormat}"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>`;
generatedCode.value = code.trim();
});
copyBtn.addEventListener('click', function() {
generatedCode.select();
document.execCommand('copy');
alert("تم نسخ الكود بنجاح!");
});
});
الخطوة 5: رفع الصفحة إلى الموقع
| المنصة | طريقة الرفع |
|---|---|
| WordPress | إنشاء صفحة جديدة واستخدام وضع النص لصق الكود |
| Blogger | إنشاء مقالة جديدة واستخدام وضع HTML |
| موقع شخصي | رفع الملفات عبر FTP أو File Manager |
الخطوة 6: اختبار الأداة
1
اختبار حقول الإدخال والتأكد من ظهور الأخطاء عند تركها فارغة
2
اختبار زر توليد الكود والتأكد من صحة الكود الناتج
3
اختبار زر النسخ والتأكد من عملها بشكل صحيح
نصائح للتطوير المستقبلي
- إضافة المزيد من خيارات التنسيق
- إمكانية معاينة الإعلان قبل النسخ
- إضافة دعم للمزيد من المنصات
- تحسين التصميم ليكون أكثر جاذبية.
معاينة أداة توليد كود Adsense
معاينة القالب الحي
