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

السلام عليكم ورحمه الله وبركاته

في هذا شرح جديد راح نتعلم كيفية اضافة تأثير احترافي 

على صور في بلوجر 

وهي اضافة رائعة عبارة عن حفض اضواء 

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

للتركيب اضافة 

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

2. قالب 

3. تحرير HTML

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

</head>

ونضيف هذا كود فوقة 

<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>

وقم بحفظ ومبروك عليك اضافة 

وانتظرو كل جديد من حمزه ويب