إضافة صفحة معاينات لمدونات بلوجر

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

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

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

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

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

<b:if cond='data:blog.url == "https://www.abdoutech.com/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.com/p/preview.html"'><script type='text/javascript'>//<![CDATA[ var yourlogo = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwNL03TU07_cS6OdWngNq8I1gp5vKF9jxkYwEPWHY6h44H90rflJEjsI4cbvvkX5-M31YuQK1HEhMyORzPaP0gbN8G78QSBlN1xXSqX8wtabkL7AdPyK7CcUOpl51w3X6b6RBElzTf4Y8/s270/rkm.png"; !function(){var e=document.createElement("script") e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/abdelalilebbihi/abdou_tech/gadget/page-preview.js" var t=document.getElementsByTagName("script")[0] t.parentNode.insertBefore(e,t)}(); //]]></script></b:if>

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

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

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

رابط الصفحة

رابط معاينة

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

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

شارك هذا