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

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

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

معاينة الإضافة

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

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

أول عملية نقوم باللإنشاء صفحة جديدة نضع لها إسم و نترك المحتوى فارغ و أخيرا نقوم بالنسخ رابك الصفحة لأننا سنحتاجه في المراحل الأتية .
العملية الثانية : نتوجه الى قالب >> تحرير 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 != "http://hukmat.blogspot.com/p/demo.html"'>

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

</b:if>

<b:if cond='data:blog.url == "http://hukmat.blogspot.com/p/demo.html"'>
<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('tab-demo').style.display='none';document.getElementById('view').style.top='0';document.getElementById('view').style.height='100%''> تخطي الإعلان </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. ما عليك سوى وضع الرابط على ذاك الشكل و سترى النتيجة .

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

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

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