كيفية عرض المدونات داخل مدونتك بشكل مميز

كيفية عرض المدونات داخل مدونتك بشكل مميز

السلام عليكم ورحمة الله وبركاته

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


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

شرح طريقة اضافة الاضافة الى المدونات

  • أول عملية نقوم باللإنشاء صفحة جديدة نضع لها إسم و نترك المحتوى فارغ و أخيرا نقوم بالنسخ رابك الصفحة لأننا سنحتاجه في المراحل الأتية .
  • العملية الثانية : نتوجه الى قالب >> تحرير HTML  >> نبحث عن الوسم   ]]></b:skin>
  • ثم نضع الكود التالي فوقه مباشرة .
#view {
padding: 0;
margin: 0;
border: 0;
position: fixed;
top: 50px;
right: 0;
left: 0;
bottom: 0;
width: 100%;
height: 93%;
background:url(http://s28.postimg.org/4q8ydonk9/ajax_loader.gif)no-repeat center center;
transition:all .4s ease-out;
}
#tab-demo {
width:100%;
height:50px;
top:0;
right: 0;
background:#222;
color:white;
font:normal 13px 'DroidKufi-Bold';
z-index:99999;
position:fixed;
}
.closebutton {
background:#66af33 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtL3HptOob4_m6auCRqU94SSlvZ6SHyXWC37EzcBrLU5v5yBvlHAzSOqgi4REEWnJDhv-U9mKbvUKY5Riqfzu4su1jJFWLKnsoz_IyZAWLQaIHzqTboi97F5MGnpHrmbxQoEklxUHrV8c/s1600/close.png)no-repeat 15px 50%;
text-align:center;
height:50px;
padding:0px 20px 0px 50px;
position:fixed;
top:0;
left: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/AVvXsEhtL3HptOob4_m6auCRqU94SSlvZ6SHyXWC37EzcBrLU5v5yBvlHAzSOqgi4REEWnJDhv-U9mKbvUKY5Riqfzu4su1jJFWLKnsoz_IyZAWLQaIHzqTboi97F5MGnpHrmbxQoEklxUHrV8c/s1600/close.png)no-repeat 15px 50%}
.dlbutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAtQ-EHwlRe6zrxSrAEH8A4-IDp4PuL0WcisT872Q20b8JKb2KfQb_NDOhMQQQwvNmyNt8vCs27B4F5IXOZHJxHoUgpjoH9Tvcv0RXUAy-xhy8fCJM6k-CCABhKDkdrScDscLLnFir0mM/s1600/download.png)no-repeat 15px 50%}
.dlbutton, a.dlbutton {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAtQ-EHwlRe6zrxSrAEH8A4-IDp4PuL0WcisT872Q20b8JKb2KfQb_NDOhMQQQwvNmyNt8vCs27B4F5IXOZHJxHoUgpjoH9Tvcv0RXUAy-xhy8fCJM6k-CCABhKDkdrScDscLLnFir0mM/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:pointer;
color:white;
text-decoration:none;
}
.demologo, a.demologo {
background: url(http://i.cubeupload.com/wU2yQg.png)no-repeat right center;
padding-right:55px;
font-size:17px;
font-weight:normal;
font-family: 'DroidKufi-Bold';
text-transform:uppercase;
line-height:50px;
right:15px;
position:fixed;
color:white;
text-decoration:none;
}


  •  المرحلة الثالثة نبحث عن الوسم  <body>
  • نضيف الكود التالي تحته أسفل الوسم <body> . مع تغيير الرابط الأحمر بالرابط الصفحة التي قمت بلإنشاءها  في الأول 

 <b:if cond='data:blog.url != &quot;http://hukmat.blogspot.com/p/demo.html&quot;'>


  •  العملية الرابعة : نبحث عن الوسم </body>
  • نضيع الكود التالي فوقه مع تغيير ما يلائم مدونتك . أيضا تغيير الرابط الاحمر بالرابط الصفحة .


</b:if>

<b:if cond='data:blog.url == &quot;http://hukmat.blogspot.com/p/demo.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://hukmat.blogspot.com'>موقع تعلم أكثر للمعلوميات</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>


  • لوضع رابط معاينة لرابط يكون كالتالي 
hukmat.blogspot.com/p/demo.html?url=http://Kooora.com&download=www.gulfup.com/456fdg54fg

1. رابط صفحة المعاينة التي قمت بالإنشائها في الأول .
2. الموقع الذي تريد معاينته .
3.  رابط تحميل للقالب "عندما سيضغط الزائر على خيار التحميل في صفحة المعاينة سيتوج الى رابط التحميل " .
4. ما عليك سوى وضع الرابط على ذاك الشكل و سترى النتيجة .

لا تنسى مشاركة الموضوع و أيضا وضع أرائك و استفساراتك . نلتقي في موضوع قادم .

مقالات ذات صلة

Previous
Next Post »

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