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

السبت، 16 فبراير 2013

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

8:29 ص Unknown لا يوجد تعليقات

الغالبية العظمى للمدونات تستخدم روابط إما لعرض معاينة او رابط لتحميل مادة

لكن هذه الروابط عند دخول الزائر لها لا تستفيد المدونة من شئ أما مع هذا الموضوع سيتغير هذا الأمر

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

وبالتالي مع كل تحميل أو معاينة تعود الفائدة على المدونة أيضاً

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

أحيانا وجود خطوط تسبب عدم عمل تلك الطريقة فمن لا تعمل معه عليه أولا بتجربة حذف الخطوط أو تغيير القالب نهائيا

الجزء الأول إنشاء الصفحات

قم بإنشاء صفحة ثابته جديدة على مدونتك وأعطها إسم بالإنجليزية يتناسب مع المعاينة مثل 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>

كرر العملية مع صفحة أخرى ولكن سميها بشئ يدل على التحميل وليكن Download

ثم إنسخ روابط الصفحتين لاننا سنستخدمهم لاحقاً

الجزء الثاني إعداد القالب

نحتاج الآن إلى إعداد القالب بحيث يتم تفعيل الطريقة

وسيكون الأمر كالتالي

قم بالدخول الى تحرير قالبك ولا تنسى نخستك الإحتياطية

علم على خانة توسيع العناصر

إبحث عن الوسم <body> وألصق تحته مباشرة الكود التالي

<div id='MBT-REDIRECTION'>

ثم إبحث عن الوسم </body> وأضف فوقه الكود التالي

</div>

وأخير قم بإضافة الكود التالي تحت الوسم </b:skin>

     <script>

    $(document).ready(function() {
    $('[data-MBTdemo]').click(function(e) {
    e.preventDefault();
    if($(e.srcElement).attr('target') == "_blank") {
    window.open("http://cnmu.blogspot.com/demo?url=" + $(e.srcElement).attr('href'), '_blank');
    } else {
    window.location = "http://cnmu.blogspot.com/demo?url=" + $(e.srcElement).attr('href');
    }

    });

    $('[data-MBTdownload]').click(function(e) {
    e.preventDefault();
    if($(e.srcElement).attr('target') == "_blank") {
    window.open("http://cnmu.blogspot.com/download?url=" + $(e.srcElement).attr('href'), '_blank');
    } else {
    window.location = "http://cnmu.blogspot.com/download?url=" + $(e.srcElement).attr('href');
    }

    });

    });

    </script>

قم بإستبدال http://cnmu.blogspot.com/demo بربط صفحة المعاينة

وإستبدل http://cnmu.blogspot.com/download برابط صفحة التحميل

طريقة الإسخدام

فقط أضف الرابط الذي تريده للكود التالي

كود المعاينة

<a target="_blank" href="الرابط" rel="nofollow" data-MBTdemo="true">معاينة</a>

كود التحميل

<a target="_blank" href="الرابط" rel="nofollow" data-MBTdownload="true">تحميل</a>

وهذا مثال حي سأعرض مدونة أخرى داخل مدونتي أنظر للرابط ستجده رابط مدونتي
لكن المحتوى لمدونة أخرى

إضغط هنا للمعاينة

ملحوظة أخيرة هذا الكود يتطلب وجود مكتبة جي كويري إن لم تكن أضفتها أضف الكود التالي فوق الوسم </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'/>

مع الشكر للأخ محمد مصطفى صاحب موقع mybloggertricks.com

منشورة في: *, دروس, هاكات

كل شي عندي

السبت، 16 فبراير 2013