أضف تأثير تحريك الصور والألوان في أداة المشاركات الشائعة لمدونة بلوجر

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

شكل الاضافة

 

 لنمر الى طريقة التركيب

أولا بالنسبة  لمن لا يضع أداة المشاركات الشائعة 

طريقة تركيبها 

من لوحة التحكم  اختر تخطيط ثم  اختر اضافة أداة  تم ستجد أداة بااسم المشاركات الشائعة  اضغط عليها 

ثم طبق ما يلي في الصورة 

 ثم الأن لنتوجه لوضع الكود طريقة سهلة 

طريقة التركيب 

 

 ثم قم بالضغط على     ctrl + f   ثم قم بالبحث على  الكود التالي

 ]]></b:skin>

ثم ضع فوقه مباشرة الكود التالي

#PopularPosts1 {

    max-width: 300px

}

#PopularPosts1 dd {

    float: left;

    border-bottom: none;

    margin: 8px 8px 0 8px;

    background: none;

    display: block;

    padding: 0

}

#PopularPosts1 img {

    -webkit-transition: all 0.5s ease;

    -moz-transition: all 0.5s ease;

    transition: all 0.5s ease;

    padding: 4px;

    background: #eee;

    background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));

    background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);

    -webkit-border-radius: 4px;

    -moz-border-radius: 4px;

    border-radius: 4px;

    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);

    -moz-box-shadow: 0 0 3px rgba(0,0,0,.7);

    box-shadow: 0 0 3px rgba(0,0,0,.7);

}

#PopularPosts1 img:hover {

    -moz-transform: scale(1.2) rotate(-350deg);

    -webkit-transform: scale(1.2) rotate(-350deg);

    -o-transform: scale(1.2) rotate(-350deg);

    -ms-transform: scale(1.2) rotate(-350deg);

    transform: scale(1.2) rotate(-350deg);

    -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);

    -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);

    box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);

}

ثم قم بحفض القالب ,ثم عاين الاضافة

مازال هنالك ثأثيرات أخرى واضافات أخرى  خاصة بأذات المشاركات الشائعة سنتطرق لها ان شاء الله

وهدا كل ما في الأمر والسلام عليكم