اضافة ستايل للصورة و الملخص على المشاركات الشائعة في بلوجر

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

تطبيق الإضافة على مدونتك في بلوجر :

1. نتوجه الى لوحة التحكم الخاصة بمدونتك
2. إضغط على قالب
3. ثم تحرير HTML
4. إبحث بالضغط على CTRL + F عن الكود التالي :

]]></b:skin>

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

.popular-posts ul{padding-left:0px;font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0} .popular-posts ul li {background: url(#) no-repeat scroll 5px 5px; list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 5px !important;font-size:12px!important;font-weight:550; border: 1px solid #58ACFA; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } .popular-posts ul li:hover { background: #CCE9FD;border:1px solid #58ACFA; } .popular-posts ul li a:hover { text-decoration:none; } .popular-posts .item-thumbnail img { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); box-shadow: 0 1px 3px rgba(0, 0, 0, .4);height:70px;width:70px;}.popular-posts .item-thumbnail img:hover { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}

مبروك عليك الإضافة . هنا ينتهي الموضوع أتمنى ان يكون شرح في متناول. لا تنسوا دعمنا من خلال اشتراك على المواقع الإجتماعية .

مقالات ذات صلة