🚀 أكواد مميزة لتحسين صفحات Blogger فقط!
📌 هذه الأكواد مخصصة لتحسين الصفحات في Blogger فقط (مثل “من نحن”، “اتصل بنا”، “سياسة الخصوصية”، إلخ). سأشرح كيفية إضافتها وتفعيلها بالتفصيل.
📜 1️⃣ تحسين تصميم الصفحات وجعلها أكثر احترافية
📌 هذا الكود يجعل الصفحات أكثر ترتيبًا، مع خطوط واضحة وتأثيرات احترافية.
<style>
.page-container {
max-width: 900px;
margin: auto;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #007bff;
}
p {
line-height: 1.8;
text-align: justify;
}
</style>
<div class="page-container">
<h1>عنوان الصفحة</h1>
<p>هذا هو المحتوى الخاص بالصفحة...</p>
</div>
✅ كيفية إضافته:
1️⃣ اذهب إلى “الصفحات” → “صفحة جديدة”.
2️⃣ الصق الكود داخل محتوى الصفحة.
3️⃣ انشر الصفحة وستحصل على تصميم احترافي.
📩 2️⃣ نموذج “اتصل بنا” مخصص داخل الصفحة
📌 يضيف نموذجًا جميلًا للتواصل معك مباشرة من داخل صفحة “اتصل بنا”.
<form action="https://formspree.io/f/YOUR_FORM_ID" method="POST">
<label>📧 البريد الإلكتروني:</label>
<input type="email" name="email" required>
<label>✉️ الرسالة:</label>
<textarea name="message" required></textarea>
<button type="submit">📩 إرسال</button>
</form>
<style>
form {
max-width: 600px;
margin: auto;
display: flex;
flex-direction: column;
}
input, textarea {
margin: 10px 0;
padding: 10px;
width: 100%;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
background: #007bff;
color: white;
padding: 10px;
border: none;
cursor: pointer;
}
</style>
✅ كيفية إضافته:
1️⃣ استبدل "YOUR_FORM_ID" بمعرف النموذج الخاص بك في Formspree.
2️⃣ انشر الصفحة وسيظهر النموذج بشكل جميل.
⚖️ 3️⃣ صفحة سياسة الخصوصية تلقائيًا
📌 إذا كنت تستخدم AdSense أو تريد تحسين ثقة الزوار، فأنت بحاجة إلى صفحة سياسة الخصوصية.
<h2>⚖️ سياسة الخصوصية</h2>
<p>نحن نستخدم ملفات تعريف الارتباط لضمان أفضل تجربة على موقعنا.</p>
<p>لن نشارك بياناتك مع أي طرف ثالث.</p>
✅ كيفية إضافته:
1️⃣ انتقل إلى “الصفحات” → “صفحة جديدة”.
2️⃣ ألصق هذا الكود واحفظه كـ “سياسة الخصوصية”.
📝 4️⃣ إضافة زر لتحميل الصفحة كملف PDF
📌 يسمح للزوار بحفظ محتوى الصفحة كملف PDF للرجوع إليه لاحقًا.
<button onclick="downloadPageAsPDF()">📄 تحميل هذه الصفحة</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<script>
function downloadPageAsPDF() {
var { jsPDF } = window.jspdf;
var doc = new jsPDF();
doc.text(document.body.innerText, 10, 10);
doc.save("الصفحة.pdf");
}
</script>
✅ كيفية إضافته:
1️⃣ ألصقه في صفحة ثابتة مثل “عن المدونة” أو “سياسة الخصوصية”.
2️⃣ سيظهر زر لتنزيل الصفحة كملف PDF.
📄 5️⃣ إنشاء جدول محتويات تلقائي للصفحات الطويلة
📌 يساعد الزوار في التنقل بسهولة داخل الصفحات الطويلة.
<div id="table-of-contents">
<h3>📌 محتويات الصفحة</h3>
<ul id="toc-list"></ul>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
let headers = document.querySelectorAll("h2, h3");
let tocList = document.getElementById("toc-list");
headers.forEach((header, index) => {
let link = document.createElement("a");
link.textContent = header.innerText;
link.href = "#" + header.id;
let listItem = document.createElement("li");
listItem.appendChild(link);
tocList.appendChild(listItem);
});
});
</script>
✅ كيفية إضافته:
1️⃣ ألصقه في أي صفحة تحتوي على عناوين متعددة.
2️⃣ سيتم إنشاء فهرس تلقائي للصفحة لمساعدة الزوار.
🔎 6️⃣ إضافة محرك بحث داخلي للصفحة
📌 يسمح للزوار بالبحث داخل الصفحة نفسها بسهولة.
<input type="text" id="search-box" placeholder="🔍 ابحث في هذه الصفحة...">
<button onclick="searchText()">🔎 بحث</button>
<script>
function searchText() {
let searchTerm = document.getElementById("search-box").value;
if (searchTerm) {
window.find(searchTerm);
}
}
</script>
✅ كيفية إضافته:
1️⃣ ألصقه داخل الصفحة التي تريد فيها البحث.
2️⃣ سيظهر مربع بحث يسمح للمستخدمين بالبحث في محتوى الصفحة.
🖼️ 7️⃣ تأثير عرض تدريجي للنصوص داخل الصفحات
📌 يجعل النصوص تظهر بشكل تدريجي عند التمرير لزيادة التفاعل.
<style>
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
</style>
<script>
document.addEventListener("scroll", function() {
let elements = document.querySelectorAll(".fade-in");
elements.forEach(element => {
let rect = element.getBoundingClientRect();
if (rect.top < window.innerHeight) {
element.style.opacity = "1";
element.style.transform = "translateY(0)";
}
});
});
</script>
<p class="fade-in">✨ هذا النص سيظهر تدريجياً عند التمرير لأسفل.</p>
✅ كيفية إضافته:
1️⃣ ألصقه داخل أي صفحة.
2️⃣ سيتم تفعيل التأثير عند التمرير لأسفل.
📌 كيفية إضافة هذه الأكواد في Blogger؟
✅ انتقل إلى “الصفحات” (Pages) → “صفحة جديدة”.
✅ ألصق الأكواد داخل الصفحة التي تريدها.
✅ احفظ الصفحة وانشرها.