كيف تنشئ صفحة لعرض المعاينات الخاصة بمدونتك !


السلام عليكم ورحمة الله وبركاته ,,
اليوم سوف نشرح كيف تنشئ صفحة عرض للقوالب مثل المواقع المشهورة للقوالب
-----------------------------
طبعا اولا يجب معاينة الاضافة,,

---------------------------
لا تنسي تقييم الاداة بتعليق ^^
نبدء الشرح ,,
---------------------------
اذهب الي مدونتك ثم الصفحات , ثم انشئ صفحة جديدة باسم Demo Page
ثم توجه الي القالب ثم تحرير Html
ثم
ابحث عن :
</b:skin>
ثم اضف فوقها الكود الاتي
#view {
padding: 0;
margin: 0;
border: 0;
position: fixed;
top: 50px;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 93%;
background:url(http://3.bp.blogspot.com/-5W2KoRr-lKc/VoQaebt-TQI/AAAAAAAABDo/VRBJqqDwdhI/s1600/hourglass.gif)no-repeat center center;
transition:all .4s ease-out;
}
#tab-demo {
width:100%;
height:50px;
top:0;
left: 0;
background:#222;
color:white;
font:normal 13px Arial, sans-serif;
z-index:99999;
position:fixed;
}
.closebutton {
background:#111119 url(http://2.bp.blogspot.com/-yDP_V5EQ09U/UuC7diNnwYI/AAAAAAAAGVw/Hez_ZcpmFLE/s1600/close.png)no-repeat 15px 50%;
text-align:center;
height:50px;
padding:0px 20px 0px 50px;
position:fixed;
top:0;
left:10px;
line-height:50px;
cursor:crosshair;
color:white;
}
a.closebutton {color:white;text-decoration:none;}
.closebutton:hover {background:#F74047 url(http://2.bp.blogspot.com/-yDP_V5EQ09U/UuC7diNnwYI/AAAAAAAAGVw/Hez_ZcpmFLE/s1600/close.png)no-repeat 15px 50%}
.dlbutton:hover {background:#111119 url(http://3.bp.blogspot.com/-MHVCwQQDhzQ/UuC7dgZiqvI/AAAAAAAAGV0/llC0hES500M/s1600/download.png)no-repeat 15px 50%}
.dlbutton, a.dlbutton {
background:#F74047 url(http://3.bp.blogspot.com/-MHVCwQQDhzQ/UuC7dgZiqvI/AAAAAAAAGV0/llC0hES500M/s1600/download.png)no-repeat 15px 50%;
text-align:center;
height:50px;
padding:0px 20px 0px 55px;
position:fixed;
top:0;
left:158px;
line-height:50px;
cursor:crosshair;
color:white;
text-decoration:none;
}
.demologo, a.demologo {
padding-right:55px;
font-size:17px;
font-weight:normal;
font-family:Ta3lamFont;
text-transform:uppercase;
line-height:50px;
position:fixed;
color:white;
cursor:crosshair;
text-decoration:none;
}
ثم اضف الكود التالي فوق
<body>
<b:if cond='data:blog.url != &quot;http://www.mostlzmat.com/p/demo-page.html&quot;'>
ثم قم بتعديل الرابط الخاص بنا برابط الصفحة التي انشائناها اولا
-----
ثم اضف الكود الاتي فوق
</body>

</b:if>
<b:if cond='data:blog.url == &quot;http://www.mostlzmat.com/p/demo-page.html&quot;'>
<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("url");
 var download  = getQueryVariable("download")
 document.getElementById('view').src = url;
 document.getElementById('dl').href = download;
};
//]]>
</script>
<div id='tab-demo'>
  <a class='demologo' href='http://www.mostlzmat.com'><img src='http://d.top4top.net/p_221kkp91.png' style='height: 45px'/>
</a>
<a class='dlbutton' href='' id='dl'>تحميل</a>
<a class='closebutton' href='javascript:void(0)' onclick='document.getElementById(&apos;tab-demo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;view&apos;).style.top=&apos;0&apos;;document.getElementById(&apos;view&apos;).style.height=&apos;100%&apos;'>اغلاق الشريط</a>
</div>
<iframe id='view'/>
<style>
body {
background:white;
}
</style>
</b:if>
ايضا قم باستبدال الروابط الخاصة بنا بروابط صفحتك التي انشائناها اولا و شعار مدونتك
و اخيرا قم بمعاينة الاضافة الجديدة من خلال الرابط الاتي مع استبدال رابط موقعنا برابط موقعك ..

http://www.mostlzmat.com/p/demo-page.html?url=http://theme.mostlzmat.com/&download=http://www.mostlzmat.com

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

سوف يتم ارسال ما تريد من معلومات او قوالب خلال يوم قم بمتابعة بريدك ^^.

المتابعون

تابعنا علي مواقع التواصل الاجتماعي

جميع الحقوق محفوظة لـ مستلزمات ©2017