اضافة تأثير احترافي على صور في البلوجر

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

معاينة الإضافة

شرح طريقة الإضافة

1. نتوجه الى المدونة .

2. قالب 

3. تحرير HTML

4. نبحث عن الكود 

</head>

5. نضيف الكود الثالي فوقه مباشرة 

  <style>
<!--- hukmat.blogspot.com --->
.post-body img {
  /* Firefox 10+, Firefox on Android */
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
  /* IE 6-9 */
  filter: gray;
  /*
    Chrome 19+,
    Safari 6+,
    Safari 6+ iOS,
    Opera 15+
  */
  -webkit-filter: grayscale(100%);
}
.post-body img {
  -webkit-transition: -webkit-filter .5s;
}
.post-body img:hover {
  -webkit-filter: grayscale(0%);
  filter: none;
}
.post-body img svg {
  opacity: 1;
  -webkit-transition: opacity .5s ease;
  transition: opacity .5s ease;
}
.post-body img:hover svg {
  opacity: 0;
}
  </style>

6. ثم أخيرا نضغط على حفظ .

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