عرض مواضيعك باحترافية مع الايجاز باستخدام jquery+css

بسم الله السلام عليكم






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








نبدا بسم الله






قم بمعاينة الاضافة اولا من هنـــــا


(اضغط على تابع القراءة )






اولا كود الاستدعاء ويكون دائما بصيغة 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/AVvXsEjmCYQwyrCdO5jWpUipjegv178Xd3W4ahMleDPVP1n841DHcRCGQ0bYvNbYAHq5KXJ6gWwp3olK-ZNiv_3oEM2pNYboEQgbFftlQj2WXZL3F7337LeZFXmIir-5EhyphenhyphenbHvIJa5H2Z93wIyI/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>

ملاحضة :


اذا كنت تستخدم مكتبة جي كويري في مدونتك فتجاهل مالونه ازرق




المصدر


الى هنا ينتهي الشرح للاستفسار والتعليق انا في الخدمة