تركيب صفحة تحويل الروابط لقالب بلوجر

تركيب صفحة تحويل الروابط لقالب بلوجر بشكلها الجديد

إذا كنت تستخدم بلوجر وتحب تضيف لمسة احترافية لمدونتك، فإن تركيب صفحة تحويل الروابط هو خطوة ممتازة! هذه الصفحة تتيح لك توجيه الزوار إلى روابط معينة، زي روابط الإعلانات، أو الروابط التابعة، أو حتى المقالات المهمة في مدونتك. الفكرة إنها تعمل كجسر بين المحتوى اللي الزائر ضغط عليه والصفحة النهائية اللي يوصل لها، وفي الوقت نفسه بتساعدك في زيادة الأرباح وتحليل أداء الروابط.
سنقدم لك صفحة تحويل مميزة و طريقة تركيب صفحة تحويل الروابط في بلوجر؟
بعد التركيب ستقدر الآن تستخدمها كصفحة تحويل روابط. كل مرة تضع رابطًا معينًا في أحد مقالاتك أو إعلاناتك، تمرره أولاً على صفحة التحويل دي، وبذلك تعطي الزوار فرصة يشوفوا أي إعلان أو محتوى إضافي قبل ما يوصلوا للهدف النهائي.
التركيب يتم بطريقة سهلة و قمت بعمل شرح بالفيديو لتسهيل الامر عليك
نصيحة سريعة: خلي تصميم الصفحة بسيط وأنيق، وما تنسى تضيف رسالة صغيرة تشجع الزوار على انتظار بضع ثوانٍ قبل الانتقال.
في النهاية، تركيب صفحة تحويل الروابط في بلوجر مش بس يضيف لك لمسة احترافية، لكنه كمان بيزيد من فرص النجاح والأرباح.

شرح التركيب

الاكواد الخاصة بالصفحة

قم بالتسجيل على بلوجر لتقد الدخول لقالب مدونتك
الذهاب الى الصفحات و انشاء صفحة جديدة باسم conversion-page
قم بلصق الاكواد التالية بداخل الصفحة و قم بالحفظ

ملاحظة

اذا اردت تسميتها باسم اخر أ اذا ظهرت بجانبها ارقام يجب عليك تغير الاسم الافتراضي الموجود في اكواد JavaScript شاهد الفيديو

<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>صفحة الانتقال</title>

<style>
.countdown-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 20px 0;
}
.progress-circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: conic-gradient(#4CAF50 0% 0%, #ddd 0%);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: bold;
color: #333;
margin-bottom: 10px;
transition: background 1s linear; /* تأثير الحركة السلسة */
}
.progress-bar {
width: 100%;
height: 5px;
background-color: #ddd;
position: relative;
margin-top: 10px;
}
.progress-fill {
height: 100%;
background-color: #4CAF50;
width: 0%;
transition: width 1s linear; /* تأثير الحركة السلسة */
}
#skip-button {
display: none;
padding: 10px 20px;
background-color: #4CAF50;
color: #fff;
border: none;
cursor: pointer;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="countdown-container">
<div class="progress-circle">5</div>
<div class="progress-bar">
<div class="progress-fill"></div>
</div>
<button id="skip-button">الانتقال إلى الرابط</button>
</div>

<script>
const skipButton = document.getElementById('skip-button');
const progressBar = document.querySelector('.progress-fill');
const progressCircle = document.querySelector('.progress-circle');
let count = 5; // عدد الثواني

// الحصول على الرابط المستهدف من URL
const urlParams = new URLSearchParams(window.location.search);
const targetUrl = urlParams.get('url');

// تحديث العدّاد والتأثير الدائري
const countdown = setInterval(() => {
count--;
if (count >= 0) {
const percentage = (5 - count) * 20;
progressCircle.style.background = `conic-gradient(#4CAF50 0% ${percentage}%, #ddd ${percentage}%)`;
progressCircle.innerText = count;
progressBar.style.width = `${percentage}%`;
}
if (count === 0) {
clearInterval(countdown);
skipButton.style.display = 'block';
}
}, 1000);

// عند الضغط على زر الانتقال
skipButton.addEventListener('click', function () {
window.location.href = targetUrl;
});
</script>
</body>
</html>

رابعا الذهاب للمظهر ثم تعديل HTML ثم البحث عن </body> و لصق الاكواد التالية اعلاها

<script type='text/javascript'>//<![CDATA[


document.addEventListener('DOMContentLoaded', function () {
const socialSites = ['facebook.com', 'twitter.com', 'instagram.com', 'linkedin.com'];
const blogDomain = window.location.hostname; // الحصول على نطاق المدونة الخاصة بك

// استهداف جميع الروابط على الصفحة
document.querySelectorAll('a').forEach(anchor => {
const url = new URL(anchor.href);

// التحقق من أن الرابط خارجي وليس داخلي ولا ينتمي لمواقع التواصل الاجتماعي
if (url.hostname !== blogDomain && !socialSites.some(site => url.hostname.includes(site)) && !anchor.classList.contains('no-redirect')) {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetUrl = encodeURIComponent(this.href);
window.location.href = '/p/conversion-page.html?url=' + targetUrl; // رابط صفحة العدّاد
});
}
});
});



//]]></script>

ملاحظة

اذا لم يعمل العداد تاكد بان القالب يحتوي على مكتبة جيكويري اذا لا يوجد الصق الكود اعلى <head/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

الاستثنائات

المقصود بالاستثنائات انك تستثني اي دومين ترغب بعدم الانتقال لصفحة التحويل

الكود مجهز بعدم التحويل للروابط الداخلية للمدونة و بعض روابط التواصل الاجتماعي

كل ما عليك ان تضيف اسم الدومين بالمكان المخصص و لا تنسى الفاصلة شاهد الفيديو

ثم قم بالحفظ و مبروك الاضافة

للبحـث بداخـل المدونــة . . .

تركيب صفحة تحويل الروابط لقالب بلوجر

تركيب صفحة تحويل الروابط لقالب بلوجر