بسم الله السلام عليكم
منذ فترة وانا اعمل على ضبط هذه الاضافة والحمد لله تم العمل بنجاح وهي كيفية توحيم التدوينات ولقد بحثت في المواقع الغربية فوجدت الشرح مبهم او لنقل يحتاج الى القليل من العمل لتضبط الاضافة على منصة بلوجر واذكر اني مررت باحد المدونات قام صاحبها فعلا بتطبيق الاضافة من نفس المصدر الذي استعنت به وهو موقع غربي انصح به وسادرج رابطه في نهاية التدوينةاو كيف تعطي وصفا موجزا توحمه باحترافية
نبدا بسم الله
قم بمعاينة الاضافة اولا من هنـــــا
(اضغط على تابع القراءة )
اولا كود الاستدعاء ويكون دائما بصيغة html
<a href="#?w=500" rel="popup_name" class="poplight">تابع القراءة</a>
<div id="popup_name" class="popup_block">
<h2>اكتب عنوان الموضوع هنا</h2>
<p>اكتب هنا نص الموضوع</p>
</div>
ثانيا كود ضبط الانماط القياسية للاضافة وطبعا يكون بصيغة css
#fade { /*--Transparent background layer--*/
display: none; /*--hidden by default--*/
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;
}
.popup_block{
display: none; /*--hidden by default--*/
background: #fff;
padding: 20px;
border: 20px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
/*--CSS3 Box Shadows--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Rounded Corners--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -55px -55px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
وأخيرا كود التحكم في شكل الحركة واضفاء اللمسة الجمالية طبعا سيكون بلغة جي كويري الرائعة
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL-krj4EClKvIrIcm_NdtTzRuj0narYFtJnoQKqv0MLKyf6YPIo7tx4owQgAdVIdC1RiSSFsmHLFzLhuWkf2oxakmR76UvkHJoD-ewfwZ_Kc08UMXH5UV6D6PKt0NkCEcp6L5rFp3zlaU/h80/111.png" class="btn_close" title="اغلاق النافدة" alt="اغلاق النافذة" /></a>');
//Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer
return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();
}); //fade them both out
return false;
});
});
//]]>
</script>
ملاحضة :
اذا كنت تستخدم مكتبة جي كويري في مدونتك فتجاهل مالونه ازرق
المصدر
الى هنا ينتهي الشرح للاستفسار والتعليق انا في الخدمة
إشترك لتحصل على جديد المواضيع
