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

السلام عليكم ورحمة الله وبركاتة

سوف اشرح اضافة اكثر من رائعة للبلوجروهي اضافة اعادة توجيه روابط التحميل والعرض في داخل مدونة بلوجر
في البداية اشكر الاخ المهندس محمد مصطفى على هذه الاضافة الرائعة حيث ان هذه المقالة ترجمة عن مقالته من هنا

حيث تم تطبيق هذه الاضافة بنجاح في مدونتي "عرب سبشل"
ولتوضيح عملها كما في الشكل التالي

ولمشاهدة هذه الاضافة على الرابط ادخل Demo

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

<div height="100%" id="iframe-container" width="100%">
<style>
body { padding: 0!important; background: none!important; }
#iframe-container { overflow: hidden; background: none!important; }
#frame { border: 0; }
</style>
<iframe frameborder="0" id="frame" src="" width="100%"> </iframe>
</div>
<script>
document.documentElement.style.overflow = 'hidden'; // firefox, chrome
document.body.scroll = "no"; // ie only
var query = window.location.search.substring(1);
query = query.replace("url=", "");
$('#frame').attr('src', query);
var str = $('#iframe-container').html();
$('#MBT-REDIRECTION').html(str);
$('iframe').height($(window).height());
</script>

ونتأكد ان خيارات الصفحة كما يلي:

تعليمات القراء : سماح
وضع الإنشاء : تفسير HTML
فواصل الاسطر : استخدام علامة <br>

كما في الشكل التالي

ثم نعمل صفحة جديدة ونسميها download او اي اسم اخر يدل على تحميل الصفحة
ثم نضع بداخلها الكود السابق كما عملنا مع صفحة Demo

ملاحظة: احفظ عناوين الصفحتين سوف نستعملهم لاحقا.

الان سوف نعدل القالب:

نذهب الى القالب ثم تحرير HTML

الان سوف نبحث عن

<body>
او
<body

حسب القالب المستخدم

ونضع تحته مباشرة

<div id='MBT-REDIRECTION'>

ثم نبحث عن

</body>

ونضع فوقها مباشرة

</div>

ثم نبحث عن

]]></b:skin>

ثم نضع هذا الكود تحتها

<script>
//<![CDATA[
$(document).ready(function () {
$('[data-MBTdemo]').click(function (e) {
e.preventDefault();
var target = e.target || e.srcElement;
if ($(target).attr('target') == "_blank") {
window.open("http://www.aliwebs.com/p/demo.html?url=" + $(target).attr('href'), '_blank');
} else {
window.location = "http://www.aliwebs.com/p/demo.html?url=" + $(target).attr('href');
}
});
$('[data-MBTdownload]').click(function (e) {
e.preventDefault();
var target = e.target || e.srcElement;
if ($(target).attr('target') == "_blank") {
window.open("http://www.aliwebs.com/p/download.html?url=" + $(target).attr('href'), '_blank');
} else {
window.location = "http://www.aliwebs.com/p/download.html?url=" + $(target).attr('href');
}
});
});
//]]>
</script>

ملاحظة: غير اللون الاحمر الموقع واسماء الصفحات حسب ما يناسب موقعك

كيف نعمل HTML tag لهذه الاضافة ؟

بكل بساطة فقد اضف هذا الكود داخل المقالة المراد العمل بها عرض او تحميل

لصفحة العرض