السلام عليكم و رحمة الله و بركاته
اليوم اقدم لكم تأثير اكثر من رائع للصور فى مدونة بلوجر فهذا التأثير يعتمد على اخفاء صورة تحت اخرى و بمجرد مرور الماوس تظهر الصورة المخفية بشكل رائع و انيق و يمكن اضافتها فى مكان فى المدونة لاعطاء مظهر جمالى رائع .
تركيب الاضافة
1. ادخل الى لوحة تحكم بلوجر ثم اختار layout او تخطيط
2. اختر اداة html/javascript
3. الصق الكود التالى
<style type="text/css"> a.nowandthen{ position:relative; display: block; overflow:hidden; cursor: pointer; width: 650px; height: 434px; } a.nowandthen img{ position:absolute; left:0; top:0; width: 100%; height: 100%; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; transition: all 0.4s ease; z-index: 2; clip: rect(0,650px,434px,0); } a.nowandthen img:nth-of-type(2){ z-index: 1; } a.nowandthen:hover img:nth-of-type(1){ clip: rect(0,0,434px,0); opacity: 0; } </style> <a class="nowandthen" href="http://www.blogger.com/null"> <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghiMcGmkJoIv-B15bEcTMmmFNz6wdFuOHeREGX12rkVdJSChc1Q45ZEr8NKRYlI0UHtP257sfqjhmiuRWdMTmDTRy6sXrg_Iyn7RJ4hHD2L8X5QDBQRXsLc9dQ_jzZDwyzaHz9LbFkAho/s1600/sunset-sunrise-btrix+(1).jpg" /> <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX7VV0XaU3-bxQH1NZzEvGVYoTN64f_EXIUWrI3EqFU2TTSHxi9tP2cfiM74YUaAdX0gr3c8i7xczzx4_NT9p-chaTEHWoWfMAtqlJW_bvTry_w_eBaN-64bqsaitCi1ntniHeabFqOGI/s1600/sunset-sunrise-btrix+(2).jpg" /> </a>4. اضغط حفظ وبكده نكون انتهينا
