[درس] كيفية عمل صفحة المعاينة في بلوجر
السلام عليكم ورحمة الله وبركاته أهلا
بكم أحبائي من جديد في درس مهم ومفيد لكل مستخدمي مدونات بلوجر هذا الدرس
هو كيفية عمل صفحة معاينة , هذه الصفحة التي تستعمل في عرض المواقع مباشرة
من مدونتك دون الحاجة للإنتقال إلى الموقع نفسه , وطبعا بالنسبة للأشخاص
الذين يريدون عرض قوالب للمعاينة مباشرة من مدونتهم فهذه هي الطريقة
الممكنة لذلك , وإليكم المثال التالي :
1- إذهب إلى لوحة تحكم بلوجر ثم الصفحات ثم اختر صفحة جديدة
إذن إليكم الطريقة بالتفصيل الممل بالصور :
2- اكتب كلمة demo في العنوان بعد ذلك قم بنسخ الكود التالي وضعه داخل HTML
3- تأكد من إعدادات الخيارات ( يجب أن تكون كما في الصورة ) ثم قم بحفظ الصفحة .
4- إذهب للقالب ثم تحرير HTML
5- قم بالبحث عن
أضف أسفله الكود التالي :
<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
إلى هنا انتهى الدرس لا تبخلوا علينا بتعليقاتكم المشجعة وشاركوا الموضوع لتكون الإفادة أكثر
إرسال تعليق
جميع الردود تعبّر عن رأي كاتبيها فقط. حريّة النقد والرد متاحة لجميع الزوار بشرط أن لا يكون الرد خارج نطاق الموضوع وأن يكون خال من الكلمات البذيئة. تذكّر قول الله عز وجل (مَا يَلْفِظُ مِن قَوْلٍ إِلاَّ لَدَيْهِ رَقِيبٌ عَتِيد).