أضف تاثير تعدد الالوان لأداة المشاركات الشائعة v1+هدية في الداخل

شاركه على +Googleأضفه الى Deliciousشاركه على Twetter شاركه على Facebookأضفه الى StumbleUpon أضفه الى Digg

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

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

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

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

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

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

 

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

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

 

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

]]></b:skin>

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

الكود :: الخاص  بتلوين المشاركات الشائعة

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

ثم قم بالحفض

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

 كما قلت سأضع بين أديكم أكواد ستمكنك من تعديل وتزين الاضافة حسب دوقك(هدية من مدونة شامل كول)

1. اضافة التأثيرات

•   جعل الصور دائرية

شكل تأثيره 

سيسمح لك هدا الكود بجعل  الصور دائرية  في الاداة

الكود الخاص به

#PopularPosts1 img{
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

لتركيبه ضعه مباشرة فوق   ]]></b:skin>   وقم بالحفض

•  تدوير الصور 380 درجة

شكل التأثير

سيسمح لك هدا الكود  باضافة تأثير المواس هوفر على الصورة و دوارن بنسبة 380 درجة

الكود الخاص به

#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);
}

لتركيبه ضعه مباشرة فوق   ]]></b:skin>   وقم بالحفض

• و يمنكنك وضع الكودين معا  الخاصان باضافة  التأثير على الصور والحصول على تأثير جميل   وهو كالتالي  (جعل الصور دائرية + تدوير الصور 380 درجة )

شكل التأثير

هدا كل مافي الموضوع والسلام عليكم
ولا تنسى المساهمة في نشر الموضوع و شكرا

Tweet

Social Sharing Widget bychamelcool

التصنيف : أكواد و هكات,خاص بالمدونات