القائمة الرئيسية

الصفحات

أحدث المواضيع
Women's Shoes Category

طريقة إنشاء صفحة اعادة توجيه الروابط في مدونة بلوجر

 

انشاء صفحة اعادة توجيه بلوجر


كيفية اضافة صفحة اعادة توجيه بلوجر


ربما يعرف معظم الأشخاص بالفعل ما هي صفحة إعادة توجيه، المدون في مدونة بلوجر كما شرحنا كيفية انشاء مدونة على بلوجر ، ولكن كتذكير ، سيتم شرحها مرة أخرى هنا.


صفحة إعادة توجيه بلوجر هي صفحة على موقع ويب أو مدونة تُستخدم لتحويل الزوار إلى صفحة انتظار عندما ينقرون على رابط خارجي داخل المدونة.


 توجد صفحة تحويل الروابط عادةً في المدونات / مواقع الويب التي تحتوي على روابط تنزيل ، وقد حاولنا في هذه المقالة الحصول على رمز صفحة إعادة التوجيه الخارجي عن طريق تحميل صفحة تظل في المدونة الرئيسية وتعمل بشكل مثالي.


فوائد صفحة اعادة توجيه بلوجر

الطريقة التي تعمل بها هي عندما يريد الزائر تنزيل ملف معين على مدونة أو الانتقال الى رابط خارجي معين ، فسيتم توجيهه إلى صفحة معينة من المدونة قبل التوجه أخيرًا إلى صفحة تنزيل الملف.


هناك العديد من الفوائد التي يمكن الحصول عليها من هذا الإصدار من صفحة تحويل الروابط ، بما في ذلك:


  • لا حاجة لإنشاء مدونة جديدة وشراء مجال جديد.
  •  أسهل في التخصيص.
  •  ابق على المدونة الرئيسية ، مما يعني أنها ستزيد تلقائيًا عدد زوار المدونة الرئيسية.
  •  زيادة صفحة المدونة نتيجة زيادة الزوار .
  •  تقليل معدل الارتداد للمدونة الرئيسية.
  •  طرق وضع إعلانات ادسنس لزيادة دخل المدونة.
  •  100٪ آمن لأنه لا يزال في نفس المجال مثل المدونة الرئيسية


عيوب صفحة اعادة توجيه

عيب صفحة إعادة توجيه بلوجر هو أنها تقوم بتحويل جميع الروابط الخارجية إلى ترميز ويتم توجيهها إلى صفحة إعادة التوجيه ، بما في ذلك روابط الوسائط الاجتماعية أو روابط المدونات الأخرى (وليس مواقع التنزيل) .

 والطريقة الوحيدة هي أنه يتعين عليك إضافة كل موقع تريده لا تريد ستتم إعادة توجيهك إلى صفحة إعادة توجيه بلوجر في قائمة استثناءات المواقع.


انشاء صفحة اعادة توجيه

في هذه المقالة ، سأشرح طريقتين مختلفتين لإنشاء صفحة إعادة توجيه مدونة خارجية في مدونة بلوجر، و ستقوم باتطبيقها ماعليك سوى تطبيق شرح اسفله.


الطريقة الاولى لانشاء صفحة اعادة توجيه


هذه الطريقة هي الأسهل لأنها تتطلب منك إضافة الكود إلى الصفحة فقط ووضع كود إعادة التوجيه في هذه الصفحة ، ولكن يجب عليك تغيير جميع الروابط في مقالاتك التي تريد إعادة توجيهها ، كما سيتم إعادة توجيه الزوار تلقائيًا بعد انتهى عداد الانتظار.


 بخلاف الطريقة الثانية التي لن تحتاج إلى تعديل جميع الروابط في مقالاتك ، لأنه بمجرد العمل على الطريقة الثانية ، سيتم نقل جميع الروابط الخارجية في مدونتك إلى الصفحة لتحويل الروابط ، و لن يتم إعادة توجيه الزوار تلقائيًا ، ولكن سيطلب منهم النقر فوق زر إعادة التوجيه.


استمر في شرح هذه الطريقة:

 انتقل أولاً إلى الصفحات وأنشئ صفحة جديدة وقم بوضع الكود التالي عليها بعد تحويل العرض التقديمي إلى HTML.


---------------------------

/* ضع هنا محتوى واكود اعلانات ادسنس */ <center><p style="font-size:18px;">من فضلك انتظر سيتم توجيهك الى الرابط في <strong><span id="countdown">15</span> ثانية</strong></p> <script type="text/javascript"> const queryString = window.location.search; const Urlparams = new URLSearchParams(queryString); const fileName = Urlparams.get('link');

// Total seconds to wait

var seconds = 15;

function countdown() { seconds = seconds - 1; if (seconds < 0) { // Download link window.location.href = `${fileName}`; } else { // Update remaining seconds document.getElementById("countdown").innerHTML = seconds; // Countdown wait time is 1 second setTimeout("countdown()", 1000); } }

// Run countdown function countdown(); </script></center> /* ضع هنا محتوى واكود اعلانات ادسنس */

------------------------


اكتب عنوانًا لاسم الصفحة ، ويفضل أن يكون باللغة الإنجليزية ، مثل "إعادة توجيه" واحفظ صفحتك ، "يمكنك تغيير الاسم لاحقًا." 

سيبدو الرابط إلى هذه الصفحة التي قمت بإنشائها بهذا الشكل:

-------------------------------------------------

https://yourdomin.com/p/redirect.html

-------------------------------------------

الآن عند إضافة رابط خارجي داخل مدونتك ، قم بإضافته على النحو التالي:

-----------------------------------------------

https://yourdomin.com/p/redirect.html?link=https://www.example.com

------------------------------------------


سيكون الرابط الأول هو الرابط إلى الصفحة التي أنشأتها وسيكون رابط "المثال" هو الرابط الخارجي الذي تريد إعادة توجيهه.


 سيتم الآن نقل جميع الروابط التي تضيفها بهذه الطريقة إلى صفحة ، انتظر لمدة "15 ثانية". يمكنك زيادة المدة أو تقليلها حسب رغبتك من كود الصفحة أعلاه حيث تظهر المدة باللون الأحمر.


اطريقة الثانية الاضافة صفحة اعادة توجيه بلوجر

نقوم بإنشاء صفحة جديدة و نسميه redirect، ثم اختر وضع HTML و ازالة جميع الكواد الموجودة.
و بعد ذلك قم بوضع الكود HTML الثالي:

<div class='ad-placement'> <!--[ ضع كود الأعلانات هنا ]--> </div> <div class='safelink-button' id='safelink'> <div style='text-align: center'> <div class='button outline' id='safelink-wait'>برجاء الأنتظار...</div> <script>/*<![CDATA[*/ var currentURL = location.href; var str = currentURL; var res = str.replace('https://your_blog_address.com/p/redirect-page.html' + '?url=', " "); function changeLink(){ var decodedString = Base64.decode(res); window.open(decodedString, '_blank')}; document.write('<a href="#getLink" id="safelink-download" class="button">إنشاء الرابط</a>'); var linkDL = document.getElementById("safelink-download"); var notif = document.getElementById("safelink-wait"); var time = 5; var textTime = document.createElement("span"); linkDL.parentNode.replaceChild(textTime, linkDL); var id; id = setInterval(function () { time--; if (time < 0) { textTime.parentNode.replaceChild(linkDL, textTime); clearInterval(id); notif.style.display = "none"; linkDL.style.display = "inline-block"; } else { textTime.innerHTML = "سيظهر الرابط الخاص بك خلال " + time.toString() + " ثانية"; }}, 1000); /*]]>*/</script> </div> </div> <div class='safelink-content'> <!--[ هنا تقوم بوضع محتوي الصفحة ]--> </div> <div class='safelink-create' style='text-align:center'> <div class='ad-placement'> <!--[ ضع كود الأعلانات هنا ]--> </div> <div id='getLink'> <a class='button' href='javascript:;' onclick='changeLink();' rel='noreferrer noopener' target='_blank'>الذهاب إلي الرابط</a> </div> <div class='ad-placement'> <!--[ ضع كود الأعلانات هنا ]--> </div> </div>



قم بتغيير الجزء المحدد من المثال الذي ستضعه على صفحة تحويل الروابط ، وكذلك ضع الإعلانات في المساحة المتوفرة بالأحجام المناسبة غيّر https://your_blog_address.com/p/redirect-page.html بالرابط المؤدي إلى الصفحة التي أنشأناها قبل الوصول إلى هذه الخطوة.

 يمكنك أيضًا تغيير النصوص التي تم تمييزها على أنها إنشاء ارتباط أو الانتقال إلى الرابط والنصوص الأخرى المحددة الرقم 5 في الكود أعلاه هو الوقت (بالثواني) لعرض رابط الوجهة ، يمكنك تغييره ليكون أسرع أو أبطأ.

 يمكنك أيضًا تخصيص نص الوقت الذي يظهر عن طريق تغيير قسم "سيظهر الرابط في القسم الثاني".

 يوصى بأن تدعم مدونتك //:https لأن هذا سيؤثر على تجربة الزوار ويؤثر على وظائف البرنامج النصي تمامًا.


اضغط على الصفحة بعد تعديل ما ذكر أعلاه وتجاهل أي تنبيه قد يظهر ، حتى نكون قد انتهينا من المرحلة الأولى وننتقل إلى المرحلة الثانية.


اضافة بعض اكود CSS و الجافا سكريبت

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

يرجى تعديل القالب الخاص بك في وضع "تحرير HTML" ، باختصار الرجاء النقر فوق المظهر والنقر فوق تعديل HTML كما هو موضح في الصورة أدناه ؛ إذا كنت بحاجة إلى نسخ القالب احتياطيًا أولاً لتجنب أخطاء التحرير

يعمل رمز css هذا على تنسيق صفحة توجيه الروابط التي أنشأناها أعلاه.


/* redirect page */ :root { --link-outline-color: #48525c ; --link-bg-color: #204ecf ; // لو خلفية زر الرابط } .button{display: inline-flex;align-items: center;margin: 15px 15px;padding: 10px 20px;outline: 0;border: 0;border-radius: 2px;color: #fefefe;background-color: var(--link-bg-color);font-size: 14px;white-space: nowrap;overflow: hidden;max-width: 100%;line-height: 2em} .button.outline{color: var(--link-outline-color);background-color: transparent;border: 1px solid #ebeced} .button.outline:hover{border-color: var(--link-bg-color)} .safelink-button, .safelink-create > *{margin: 1.8em 0} .safelink-button span{display: block;font-size: 12px} #getLink{margin: 5px 0} #getLink .button{display: none} #getLink:target .button{display: inline-flex}


يمكنك تعديل هذا القسم مثل تغيير حجم النص على الروابط وما إلى ذلك. في Blogger ، يتم تمييز كود CSS بـ <b: skin> ... </ b: skin>.

 إذا كان من الصعب وضع كود CSS أعلاه ، يمكنك البحث عن </head> ووضع كود CSS مباشرة فوق كود </head> مع ملاحظة أنه يجب عليك استخدام <style> ... </style>. ستكون النتيجة مشابهة لما يلي:

: <style> <!--[ تقوم هنا بوضع كود css أعلاه ]--> </style> </head>





تعليقات

Mobile Category
Small Appliances  Category
Black Friday Live Banners
التنقل السريع