[درس] كيفية عمل صفحة المعاينة في بلوجر

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

معاينة

1- إذهب إلى لوحة تحكم بلوجر ثم الصفحات ثم اختر صفحة جديدة

إذن إليكم الطريقة بالتفصيل الممل بالصور :

2- اكتب كلمة demo في العنوان بعد ذلك قم بنسخ الكود التالي وضعه داخل HTML

<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>

3- تأكد من إعدادات الخيارات ( يجب أن تكون كما في الصورة ) ثم قم بحفظ الصفحة .

4- إذهب للقالب ثم تحرير HTML

5- قم بالبحث عن

<body>

أضف أسفله الكود التالي :

<div id='MBT-REDIRECTION'>

6- ابحث عن :

</body>

أضف فوقه الكود التالي من أجل إغلاق الوسم

</div>

7- ابحث عن :

]]></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.proayoub.com/p/demo.html?url=" + $(target).attr('href'), '_blank');
        } else {
            window.location = "http://www.proayoub.com/p/demo.html?url=" + $(target).attr('href');
        }
    });
});
//]]>
</script>

غير http://www.proayoub.com/p/demo.html برابط صفحة المعاينة الخاص بك.

هكذا نكون قد أنهينا جميع الخطوات , الأن عندما تريدون عمل معاينة لموقع أو قالب ... عليكم أن تستعملوا الرابط التالي :

http://www.proayoub.com/p/demo.html?url=http://www.yoursite.com

ولا تنسى تغيير http://www.proayoub.com/p/view.html برابط صفحة المعاينة الخاصة بك وتغيير http://www.yoursite.com برابط الموقع أو القالب الذي تريد أن تعمل له معاينة .

ملحوظة يمكنك تغيير demo بما تريد مثلا أنا غيرتها بـ view

إلى هنا انتهى الدرس لا تبخلوا علينا بتعليقاتكم المشجعة وشاركوا الموضوع لتكون الإفادة أكثر

مواضيع مشابهة :

● [بلوجر] أفضل واجهة احترافية لمدونة البلوجر 2014

● [السيو] الـ headings أهم من الـ meta في الأرشفة

(صفحات المعاينة , إنشاء صفحة , صفحة demo , صفحة view , إنشاء صفحة demo )

By glok

Similiar tagsblogger internet