السلام عليكم ورحمة الله وبركاته .. اليوم درس خفيف وسريع وهو كما موضح في العنوان اضافه css خفيفه تضاف الى قالب مدونة بلوجر من خلالها يتم عمل تاثيرات انيقه على الصور الخاصه باداة المشاركات الشائعه المعروفه كما هو موضح في الصوره المرفقه في هذا الموضوع .. ولاضافة كود الاضافه الي قالب مدونتك :قم اولا باضافة اداة المشاركات الشائعه الى مدونتك ان لم تكن قمت باضافتها من قبل من خلال صفحة التخطيط .. ثم اذهب الي تحرير html وابحث عن ]]></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);}
ثم قم بحفظ القالب ومبروك عليك الاضافه ...
يسمح لكم بنقل الموضوع بشرط ذكر المصدر : طريقة اضافة تاثير css على صور المشاركات الشائعه | TATWEERWEB
ساهم في نشر الموضوع ولك جزيل الشكر !
أضف تعليقك عن طريق الفيسبوك :