طريقة انشاء صفحة المعاينة في بلوجر

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

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

تعد صفحة المعاينة في المواقع المتخصصة في تحميل قالب بلوجر أمر مهم لأنها توفر للمستخدمين معاينه القالب قبل التحميل وبدون الخروج من الصفحه المقصودة. ومع ذلك، يواجه الكثيرون مشكلة في تحميل واستخدام القوالب الصحيحة بشكل صحيح. وهنا تأتي أهمية انشاء صفحة المعاينة أو Preview Page في إيضاح المظهر النهائي للقالب قبل التحميل والاستخدام.

ما أهمية انشاء صفحة المعاينة؟

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

طريقه انشاء صفحه معاينه Previewpage

اذا كنت تملك مدونة توفير تحميل قالب وتريد انشاء صفحه معاينة. اقدم اليكم هذا الكود الذي يقوم بتوفير معاينه القالب مع زر التحميل من نفس الصفحة.

لإنشاء صفحة معاينة في بلوجر، يمكن اتباع الخطوات التالية:

1. اذهب الى الصفحه الرئيسيه Blogger.com.
2. ثم اضغط على القائمه في الجانب الايمن واذهب الى الصفحات.
3. قم بانشاء صفحه جديده واكتب اسمها Preview Page.
4. من داخل الصفحه الذي انشاتها اضغط على تبويب HTML.
5. الان قم بنسخ الكود التالي ولصقه في الصفحه واحفظ العمل.

<style>.blogMn{display:none;}.navS{display:none;}.footer{display:none;}.wvC{display:none;}.header{display:none;}.mobMn{display:none;}.brdCmb{display:none;}.pTtl{display:none;}#view{padding:0;margin:0;border:0;position:fixed;top:50px;left:0;right:0;bottom:0;width:100%;height:93%;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZHWDaHS8f4AcEbXlg_Y6Lv8vqj-ezB5Bamgi8pO1wYHfsRLohQ0K_7TPi3WiW4y7AcByk_NoUj9OQrOXdS3-dORSwqRhTpFffvcTNWHtCVRdm_FsHSQoQtuopPjDO-1BYXvUUi5IyTJk/s0/loader.gif)no-repeat center center;transition:all .4s ease-out;}#Preview-Page{width:100%;height:50px;top:0;left:0;background:var(--notifC);transition:var(--trans-1);color:white;font:normal 13px;z-index:99999;position:fixed;}.closebutton{background:var(--themeC) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMitzy6osEvFDx6yJc9rdIFOwTYIJqVCG6tbHKFmoS2N41r2IIrHDVooQhLV_Yc3IFS1Nbvl_6P7gPLjvE4fEzjMeTI9oyJyUARTk2oVQ8aF0c79eyPqyK5-TteWYArlQADdQDlPHES50/s0-rw/close.png)no-repeat 15px 50%;text-align:center;height:50px;padding:0 20px 0 50px;position:fixed;top:0;right:0;line-height:50px;cursor:pointer;color:white;}a.closebutton{color:white;text-decoration:none;}.closebutton:hover{background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMitzy6osEvFDx6yJc9rdIFOwTYIJqVCG6tbHKFmoS2N41r2IIrHDVooQhLV_Yc3IFS1Nbvl_6P7gPLjvE4fEzjMeTI9oyJyUARTk2oVQ8aF0c79eyPqyK5-TteWYArlQADdQDlPHES50/s0-rw/close.png)no-repeat 15px 50%;}.dlbutton:hover{background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcgkAy_4fJ-eGzDRgiEZTmu_lMkiMSINMn7gunO0IySm1Zxp5MsaxWquahG8CfLc4Q95qCtVoM53eyeTU6MbyM2wydW48V6BKYs-80s_p4zrTg5F2vACJL7pkfCVl62flFLz6lHqzwpH4/s0-rw/download.png)no-repeat 15px 50%;}.dlbutton,a.dlbutton{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcgkAy_4fJ-eGzDRgiEZTmu_lMkiMSINMn7gunO0IySm1Zxp5MsaxWquahG8CfLc4Q95qCtVoM53eyeTU6MbyM2wydW48V6BKYs-80s_p4zrTg5F2vACJL7pkfCVl62flFLz6lHqzwpH4/s0-rw/download.png)no-repeat 15px 50%;text-align:center;height:50px;padding:0 20px 0 55px;position:fixed;top:0;right:158px;line-height:50px;cursor:pointer;color:white;text-decoration:none;}.demologo,a.demologo{padding-left:30px;font-size:17px;font-weight:normal;text-transform:uppercase;line-height:50px;left:15px;position:fixed;color:white;text-decoration:none;}</style>
<script type='text/javascript'>
//<![CDATA[
function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  }
  return (false);
}
window.onload = function() {
 var url  = getQueryVariable("demo");
 var download  = getQueryVariable("dl")
 document.getElementById('view').src = url;
 document.getElementById('dl').href = download;
};
//]]>
</script>
<div id='Preview-Page'>
  <a class='demologo' href='https://www.mr-medo.net'>Homepage</a>
  <a class='dlbutton' href='' id='dl'>Download</a>
  <a class='closebutton' href='javascript:void(0)' onclick='document.getElementById('Preview-Page').style.display='none';document.getElementById('view').style.top='0';document.getElementById('view').style.height='100%''>Remove Frame</a>
</div>
<iframe id='view'/>

اداة مولد روابط صفحة المعاينة:

ادخل عنوان الموقع: رابط التحميل: رابط الشراء:

رابط صفحة المعاينة جاهز:

الان قم بنسخ العنوان التالي والتعديل عليه بروابط موقعك

https://mr-medo.net/p/preview.html?demo=https://about.mr-medo.net&dl=https://drive.google.com/drive

ينتهي هنا موضوعنا عن "طريقة انشاء صفحة المعاينة في بلوجر"، ونلتقي في موضوع جديد على مدونة مستر ميدو. دمتم في امان الله :)

فتح رابط التوجية