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

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

يمكنكم معاينة الاضافة من هنا

شرح تركيب الاضافة

اولا تفتح صفحة للمعاينة
ثانيا تضع هذا الكود في الصفحة ثم تنشرها
<i class="abdoutech-preview"></i>
الان تذهب الى التعديل على القالب
تبحث على </head> وتضع الكود التالي فوقه

<b:if cond='data:blog.url == "https://www.abdoutech.org/p/preview.html"'>
<style type='text/css'>
/*<![CDATA[*/
body{overflow:hidden}
body:before{content:"";background:#fff;position:fixed;z-index:99999;left:0;right:0;bottom:0;top:0}
#preview-iframe{box-shadow: 0 0 20px rgba(0,0,0,.15);z-index:99999;padding:0;margin:0;border:0;position:fixed;top:54px;left:0;right:0;bottom:0;width:100%;height:100%;transition:all .4s ease-out;margin:0 auto}
#nav-demo{width:100%;top:0;left:0;color:#fff;position:fixed;-webkit-transform:translateZ(0);font-size:12px;height:54px;background-color:#262626;z-index:100;line-height:54px;margin-bottom:1px;z-index:99999999}
.preview__actions a:hover{background-color:#7aa93c}
.preview__info{float:left;padding:0 8px;overflow:hidden;height:100%}
.preview__actions,.preview__action--close{float:right;padding:0 20px}
.preview__logo{float:right;padding:0 20px}
.preview__action--close{border-right:1px solid #333333}
.preview__action--close a{color:#ffffff;text-decoration:none;display:inline-block;padding:0 20px}
.preview__actions a{font-size:14px;line-height:1.5;background-color:#82b440;color:#fff;box-sizing:border-box;display:inline-block;margin:0;border:none;border-radius:4px;text-align:center;text-decoration:none;cursor:pointer;padding:9px;-webkit-box-shadow:0 2px 0 #6f9a37;box-shadow:0 2px 0 #6f9a37;position:relative;transition:all .4s ease-out;margin-right:5px}
.preview__logo a{display:inline-block;position:absolute;top:8px;text-indent:-9999px;height:35px;width:152px;background-size:152px 34px!important}
.preview__actions a i,.preview__action--close a i{margin-right:9px}
.responsive{float:left;height:30px;margin:12px 0 0 29%}
.responsive .btn_responsive{cursor:pointer;float:left;width:30px;height:30px;padding:0;margin:0 5px 0 0;border-radius:3px;outline:0;border:0;background:rgba(255,255,255,.05) url(https://bit.ly/2NW4ghE);transition:background-color .15s ease,background-position .15s ease}
.responsive .btn_responsive.desktop{background-position:0 -30px}
.responsive .btn_responsive.desktop:hover,.responsive .btn_responsive.desktop.active{background-position:0 0}
.responsive .btn_responsive.iPad{background-position:-30px -30px}
.responsive .btn_responsive.iPad:hover,.responsive .btn_responsive.iPad.active{background-position:-30px 0}
.responsive .btn_responsive.tab-square{background-position:-60px -30px}
.responsive .btn_responsive.tab-square:hover,.responsive .btn_responsive.tab-square.active{background-position:-60px 0}
.responsive .btn_responsive.phone{background-position:-90px -30px}
.responsive .btn_responsive.phone:hover,.responsive .btn_responsive.phone.active{background-position:-90px 0}
.responsive .btn_responsive.portrait-phone{background-position:-120px -30px}
.responsive .btn_responsive.portrait-phone:hover,.responsive .btn_responsive.portrait-phone.active{background-position:-120px 0}
.responsive .btn_responsive:hover{background-color:rgba(255,255,255,.1)}
.responsive .btn_responsive.active{background-color:#82b440}
a.postbutton.toggle i{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}
.preview__actions a[href='undefined']{display:none}
.preview__actions a[href='']{display:none}
/*]]>*/
</style>
</b:if>

الان تبحث على </body> وتضع الكود التالي فوقه مباشرة

الان في الاكواد السابقة كان هناك كود عليه رابط صفحتي انا انتا غيره برابط صفحتك

<b:if cond='data:blog.url == "https://www.abdoutech.org/p/preview.html"'>

الان احفظ القالب و في كل ما تريد ضافة رابط للمعاينة قم إملاء هذه البيانات وثم ينتج لك رابط المعاينة

رابط الصفحة

رابط معاينة

اضافة رابط تحميل

إضافة رابط شراء

جيك برو | Geek Pro 4 يناير 2019 في 4:13 ص

تعرف اخي ما بعرف اشكرك علي هذه المجهودات لاني لا اقدر ان اعبر عنها بالكلام بل بالقلب "انت الافضل"وسوف تكون يوم ما في القمه فوقهم جميعا

جيك برو | Geek Pro 4 يناير 2019 في 4:14 ص

اخي هل اقوم بوضع هذا الكود في صفحة html ام ماذا
- عبدو تكنولوجي - Abdou Technologie 4 يناير 2019 في 4:42 ص
  
  الكود الاول تضعه في صفحة التي انشئتها و الاكواد الباقية فهيا توضع في المظهر -> تعديل html