اضافة المشاركات الشائعة بشكل جديد وبسيط Add popular posts

اشكال المشاركات الشائعة متعددة وتتواجد بكثرة وتختلف من مدونة الى اخرى على حسب ذوق المصمم او على حسب ذوق صاحب المدونة  .

فى احدى الدروس الأضافات السابقة فى قسم متغيرات القالب وضعت لكم اضافة من خلال هذا العنوان : كيفية ترقيم المشاركات الشائعة بتقنية CSS بشكل مميز POPULAR POSTS .

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

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

كيفية تركيب الاضافة  :

اولا عليك باضافة المشاركات الشائعة من خلال التخطيط واضافة اداء جديدة ومنها قم بازالة صورة مصغرة من الصورة وايضا ازالة خيار مقتطف مثل ما ظاهر لنا بالصورة التالية :

قبل اضافة اى اكواد يجب اخذ نسخة احتياطية قبل وضع اى اكواد ومن هنا درس بسيط يعلمك طريقة اخذ نسخة احتياطية الان ناتى  الى الطريقة  فى البداية ادخل الى لوحة تحكم مدونتك ومن بعدها اضغط على القالب الأن اضغط على تحرير HTML

الان قم بالبحث عن هذا الكود :

]]></b:skin>

ضع قبلة مباشرة هذا الكود :

.popular-posts ul{padding-right:0px;}

    .popular-posts ul li {background: #ffffff  no-repeat scroll 5px 10px;

    list-style-type: none;

    margin:0 0 5px 0px;

    padding:5px 5px 5px 20px !important;

    border: 1px solid #dddddd;

    border-radius:7px;

    -moz-border-radius:7px;

    -webkit-border-radius:7px;

    }

    .popular-posts ul li:hover {

        border:1px solid #555555;

    }

.popular-posts ul li a

{

text-decoration:none;

font:16px Georgia, verdana;

color:#333333;

}

    .popular-posts ul li a:hover {

    text-decoration:none;

    color:#555555;

    }

بالأخير اضغط على حفظ التغيرات 

انتقل الى الصفحة الرئيسية لتشاهد النتيجة ستجدها بهذا الشكل البسيط :

ملحوظة هامة :

اذا اكنت تريد بعض التغيرات فى الاضافة تابع معى طريقة التغيرات :

1- لتغيير لون محييط المشاركات قم بتغيير الكود المحدد باللون الاحمر .

2- لتغيير لون الحدود عليك بتغيير الكود المحدد باللون الاورنج .

3- لتغيير لون الحدود عند وضع مؤشر الماوس قم بتغيير الكود المحدد باللون الاصفر .

4- لتغيير لون الكتابة بالمشاركات الشائعة قم بتغيير الكود المحدد باللون الأخضر .

5- لتغيير لون الكتابة عند وضع مؤشر الماوس عليها قم بتغيير الكود المحدد باللون السماوى .

اتمنى بأن هذه الاضافة اعجبتكم وانتظرونى بتدوينة اخرى جديدة.