0

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

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

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

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

إرسال تعليق

جميع الردود تعبّر عن رأي كاتبيها فقط. حريّة النقد والرد متاحة لجميع الزوار بشرط أن لا يكون الرد خارج نطاق الموضوع وأن يكون خال من الكلمات البذيئة. تذكّر قول الله عز وجل (مَا يَلْفِظُ مِن قَوْلٍ إِلاَّ لَدَيْهِ رَقِيبٌ عَتِيد).

 
Top