كلمة الفريق

في عصرنا يوجد مئات الآلاف من المدونين والمدونات، البعض يعمل بشغف وحب...، والآخر يعمل بشكل إنتاجي للكسب فقط !، أما نحن .. نحب ونعشق التدوين ونؤمن أننا سنقوم بإضافة كبيرة للمحتوى العربي ولو بشيئ بسيط، نتعلم بشكل مستمر ونشارككم بكل جديد...، نحاول المساعدة، نحب أصدقاءنا، نهتم بإستفساراتهم كما لو كانت ملكنا، فريقنا فريق واحد رغم أنه متكون من شخص واحد :) لكنه يعمل بجنون

كيفية عمل صفحة المعاينة في بلوجر


الــسـلام عــلــيــكـم ورحــمـة الله وبــركــاتـه، أهـلا بــكـم أحــبـائي مـن جــديـد فـي درس مــهـم ومــفــيـد لــكـل مــســتــخــدمـي مــدونـات بــلــوجـر، فـي هـذا الـدرس ســأشـرح لــكـم كــيــفــيـة عــمـل صــفــحـة مــعــايــنـة، هـذه الــصــفــحـة الــتـي تــســتــعــمـل فـي عـرض الــمــواقـع مــبــاشـرة مـن مــدونــتـك دون الــحــاجـة لــلإنــتــقـال إلـى الــمــوقـع نــفــسـه.
وطبعا بــالــنــســبـة لــلأشــخـاص الــذيـن يــريـدون عـرض قــوالـب لــلــمــعــايــنـة مــبــاشـرة مـن مــدونــتــهـم، فــهـذه هـي الــطــريــقـة الــمــمــكــنـة لــذلـك، وإلــيــكـم الــمــثـال الــتــالـي :
مراحل تركيب الإضافة
  1. ادخل إلى لوحة تحكم المدونة في بلوجر، ثم الصفحات ثم اختر صفحة جديدة :
  2. [درس] كيفية عمل صفحة المعاينة في بلوجر
  3. اكتب كلمة demo في العنوان بعد ذلك قم بنسخ الكود التالي وضعه داخل HTML
  4. <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();
    $('#b4_redirection').html(str);
    $('iframe').height($(window).height());
    </script>
  5. تــأكــد مــن إعــدادات الـخــيــارات ( يــجــب أن تــكــون كــمــا فــي الــصــورة ) ثــم قــم بـحــفــظ الــصـفــحــة.
  6. [درس] كيفية عمل صفحة المعاينة في بلوجر
  7. اختر قالب المدونة ثم تحرير HTML
  8. ابحث عن الوسم <body> واضف الكود التالي أسفله :
  9. <div id='b4_redirection'> 
  10. ابحث عن الوسم </body> و أضـف الـكـود الـتـالـي فـوقـه مـن أجـل إغـلاق الـوسـم الـسـابـق :
  11. </div>
    
    [درس] كيفية عمل صفحة المعاينة في بلوجر

  12. مجدداً نبحث عن ]]></b:skin>، ونضع الكود التالى أسفلة مباشرة :
<script>
//<![CDATA[
$(document).ready(function () {
    $('[data-b4_demo]').click(function (e) {
        e.preventDefault();
        var target = e.target || e.srcElement;
        if ($(target).attr('target') == "_blank") {
            window.open("http://www.teqniweb.com/p/demo.html?url=" + $(target).attr('href'), '_blank');
        } else {
            window.location = "http://www.teqniweb.com/p/demo.html?url=" + $(target).attr('href');
        }
    });
});
//]]>
</script>
غير http://www.teqniweb.com/p/demo.html برابط صفحة المعاينة الخاص بك.
هــكـذا نــكـون قـد أنـهــيــنـا جــمــيـع الــخــطـوات، الأن عــنــدمـا تــريـدون عــمـل مـعــايــنـة لــمــوقـع أو قــالـب، عـلــيــكـم أن تــسـتـعــمــلـوا الــرابـط الــتــالـي :
http://www.teqniweb.com/p/demo.html?url=http://www.yoursite.com
ملاحظة :
- لا تنسى تغيير http://www.teqniweb.com/p/view.html برابط صفحة المعاينة الخاصة بك وتغيير http://www.yoursite.com بـرابـط الــمـوقـع أو الــقـالـب الـذي تـريـد أن تــعـمـل لـه مـعــايـنـة.
- يمكنك تغيير demo بما تريد مثلا أنا غيرتها بـ view.

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

إشترك في قناتنا على اليوتيوب لتتوصلو بجديد حلقاتنا التقنية
سبحان الله، والحمدلله، ولا إله إلا الله، والله أكبر
إذا أعجبك الموضوع فلماذا تبخل علينا بالردود المشجعة ؟!

ليست هناك تعليقات

يمكنك وضع تعليقك هنا

إذا أعجبك محتوى مدونتنا نتمنى البقاء على تواصل دائم ، فقط قم بإدخال بريدك الإلكتروني للإشتراك في بريد المدونة السريع ليصلك جديد المدونة أولاً بأول ، كما يمكنك إرسال رساله بالضغط على الزر المجاور ...