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

الأحد، 6 يوليو 2014

100 100 100

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

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

معاينة

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 )

تم النشر في : blogger internet

غير معرف6 يوليو 2014 في 8:42 ص
شكرا لك اخي انتظرت الدرس بفارغ الصبر
http://th3pro-islam.blogspot.com/
ردحذف
الردود
فيصل أيت العرابي6 يوليو 2014 في 1:05 م
و انا ايضا
www.w-sport.tk
ردحذف
الردود
Unknown10 يوليو 2014 في 10:56 ص
كيف اعمل مدونة بلوقر جديدة ضروري
ردحذف
الردود
غير معرف29 يوليو 2014 في 8:37 م
أزال المؤلف هذا التعليق.
ردحذف
الردود
غير معرف29 يوليو 2014 في 8:39 م
مشكوررررررررررر يغالى مدونتى
g-a3.blogspot.com
ردحذف
الردود
غير معرف18 أغسطس 2014 في 2:11 ص
طبقت كل الخطوات بتفتح صفحة العرض فاضيه لما افتح الرابط ؟
ردحذف
الردود
omran5 أكتوبر 2014 في 7:02 ص
شكرا لك ولكني لا يوجد لدي الوسم body ابدا وشكرا هل لي بتقييم لمدونتي
http://th3geekweb3.blogspot.com
ردحذف
الردود
jidsggn5 نوفمبر 2014 في 11:15 ص
انهو يقول لى
‏حدث خطأ أثناء تحليل script
ردحذف
الردود
teqani5 ديسمبر 2014 في 7:14 ص
شكرا جزيلا لك اخي الكريم
Thetwinsrab.com
ردحذف
الردود
غير معرف4 فبراير 2015 في 5:42 م
أخي عذرا ولكن كيف أجلب رابط القالب لأضعه في صفحة المعاينة
ردحذف
الردود
اسعد القيسي11 مارس 2015 في 8:20 م
مشكووووور اخي انا ابحث عن هذه طريقة من زمان شكرا لك يشرفني زيارتك لمدونتي

http://www.taqafa2.co.vu/
ردحذف
الردود
اسعد القيسي 230 مارس 2015 في 7:37 ص
مشكوووور

http://www.taqafa2.co.vu/
ردحذف
الردود

إضافة تعليق

يسرنا أن تعلق وتشاركنا برأيك وأفكارك لكننا لا نقبل بأي تعليق يمس الشريعة الإسلامية أو يشخصية ما , بالنسبة لمن يرغب في وضع كود في التعليق فلا بدة من تحويله عبر أداة تحويل الأكواد , وإذا كنت تريد إضافة ابتسامة في تعليقك فما عليك سوى تمرير الماوس عليها لكي يظهر الكود الخاص بها وشكرا
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r

728x90 AdSpace

الأحد، 6 يوليو 2014