إضافة عرض موقع داخل المدونة مع رابط التحميل

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

أولاً قم بمعاينة الإضافة من هنا 



شرح تركيب الإضافة
أولاً : قم بالدخول على الصفحات ثم إنشاء صفحة جديدة بإسم demo
ثانياً : قم بالدخول على إلي المظهر ثم محرر html
وقم بالبحث عن <body> أو <body وقم بإضافة هذا الكود أسفلها
<b:if cond='data:blog.url != &quot;https://www.tegnai.com/p/demo.html&quot;'>
</b:if> 

ثالثاً : قم بالبحث عن </body> أو <body/> وقم بإضافة هذا الكود فوقها
<b:if cond='data:blog.url == &quot;https://www.tegnai.com/p/demo.html&quot;'>
<style type='text/css'>
body{background:#fff}
#view{padding:0;margin:0;border:0;position:fixed;top:60px;left:0;right:0;bottom:0;width:100%;height:94%;transition:all .4s ease-out}
#tab-demo{width:100%;height:60px;top:0;left:0;background:#34495e;color:#fff;z-index:99999;position:fixed;-webkit-transform:translateZ(0)}
.closebutton{background:#2ecc71;text-align:center;height:60px;padding:0 20px 0 57px;position:fixed;top:0;left:0;line-height:60px;cursor:pointer;color:#fff;left:20px;transition:all .3s}
.closebutton:before{content:'\f00d';position:absolute;left:0;font-family:fontawesome;padding:0 20px;font-weight:normal;font-size:22px;transition:all .6s;}
a.closebutton {color:#fff;text-decoration:none;}
.closebutton:hover {background:#27ba66}
.closebutton:hover:before {transform:rotate(360deg);}
.dlbutton,a.dlbutton{background:#3f5870;text-align:center;height:60px;padding:0 20px 0 57px;position:fixed;top:0;left:146px;line-height:60px;cursor:pointer;color:#fff;text-decoration:none;transition:all .3s}
.dlbutton:before{content:'\f019';position:absolute;left:0;font-family:fontawesome;padding:0 20px;font-weight:normal;font-size:22px;transition:all .6s;}
.dlbutton:hover {background:#2c3e50}
.dlbutton:hover:before {transform:rotate(360deg);content:'\f00c';}
.demologo,a.demologo{padding-right:75px;font-size:18px;font-weight:700;text-transform:uppercase;line-height:60px;right:20px;position:fixed;color:#fff;letter-spacing:.5px;text-decoration:none}
.demologo:before{content:'\f108';position:absolute;right:0;background:#2ecc71;font-family:fontawesome;padding:0 20px;font-weight:normal;font-size:22px;}
.demologo:after {content: ' ';text-transform:capitalize;opacity:0;visibility:hidden;padding-left:5px;transform:scale(0.9) translate(-34px,0);transition:all.3s;}
.demologo:hover:after {opacity:1;visibility:visible;transform:scale(1.0) translate(0,0);}
</style>
<script type='text/javascript'>
//<![CDATA[
// Demo Page
function getQueryVariable(e){for(var r=window.location.search.substring(1),t=r.split("&"),n=0;n<t.length;n++){var a=t[n].split("=");if(a[0]==e)return a[1]}return!1}window.onload=function(){var e=getQueryVariable("url"),r=getQueryVariable("download");document.getElementById("view").src=e,document.getElementById("dl").href=r};
//]]>
</script>
<div id='tab-demo'>
<a class='demologo' href='https://www.tegnai.com'>تقني للمعلومات</a>
<a class='dlbutton' href='' id='dl'>تحميل القالب</a>
<a class='closebutton' href='javascript:void(0)' onclick='document.getElementById(&#39;tab-demo&#39;).style.display=&#39;none&#39;;document.getElementById(&#39;view&#39;).style.top=&#39;0&#39;;document.getElementById(&#39;view&#39;).style.height=&#39;100%&#39;'>Remove</a>
</div>
<iframe id='view'></iframe>
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
</script><script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/3107131574-widgets.js"></script>
</b:if>



ملحوظة هامة !
عندما تريد أن تقوم وبعض موقع في المعاينة باستعمال هذا الرابط 
غير مابالون الأحمر برابط موقعك وما باللون الأخضر برابط التحميل وماباللون الأصفر برابط المدونة التي تظهر في المعاينة
https://www.tegnai.com/p/demo.html?url=https://tegnai.blogspot.com&download=http://tegnai.com
google-playkhamsatmostaqltradent