السلام عليكم ورحمة الله تعالى وبركاته
مرحبا بك اخي الزائر واختي الزائرة بمدونة محترفي الويب
في الموضوع السابق من قسم البلوجر تطرقنا الى كيفية اضافة اطار احترافي للصور
اما في هادا الموضوع سنتطرق فيه الى كيفية اضافة خاصية مطلوبة عند المدونين وعند المبرميجن الا وهي اضافة لتصفح المدونة بشكل أفضل استعمل احدى هاته المتصفحات ...
الاضافة احترافية جداا وسهلة التركيب
أولا سندخل الى القالب تم تخطيط تم اضافة اداة من القوائم ونختار
HTML/JavaScript
ستاتينا صفحة جديدة الخانة الاولى سنكتب فيها
لتصفح المدونة بشكل أفضل
والخانة الثانية تضع فيها هادا الكود
<center><div class="hovergallery"><a href='https://www.google.com/intl/ar/chrome/browser/'><img class='logo' src='http://im37.gulfup.com/YLcCM.png'/></a><a href='https://www.mozilla.org/en-US/firefox/new/?utm_source=firefox-com&utm_medium=referral'><img class='logo' src='http://im37.gulfup.com/pKuJG.png'/></a><a href='http://windows.microsoft.com/en-us/internet-explorer/download-ie'><img class='logo' src='http://im37.gulfup.com/Mo1Lg.png'/></a></div>
<style type="text/css">
.hovergallery img{-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/-moz-transform:scale(0.8); /*Mozilla scale version*/-o-transform:scale(0.8); /*Opera scale version*/-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/-moz-transition-duration: 0.5s; /*Mozilla duration version*/-o-transition-duration: 0.5s; /*Opera duration version*/opacity: 0.7; /*initial opacity of images*/margin: 0 10px 5px 0; /*margin between images*/}
.hovergallery img:hover{-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/-moz-transform:scale(1.1); /*Mozilla scale version*/-o-transform:scale(1.1); /*Opera scale version*/box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/opacity: 1;}
</style><div class="hovergallery"> <a href='http://www.apple.com/safari/'><img class='logo' src='http://im37.gulfup.com/SxtCs.png'/></a><a href='http://www.opera.com/ar/computer/windows'><img class='logo' src='http://im37.gulfup.com/VDQ21.png'/></a><a href='http://rockmelt.com/download'><img class='logo' src='http://im37.gulfup.com/xrJcf.png'/></a></div><style type="text/css"></style></center>
وفي الأخير ستضغط على حفظ والنتيجة هي ظهور اداة احترافية جديدة على مدونتك
كان معكم أخوكم لطفي من مدونة محترفي الويب
اذا أعجبك الموضوع فلماذا تبخل علينا بالردود المشجعة ؟؟
الكاتب : Khaled Chami
شامي خالد, 22 سنة , من الجزائر وبالضبط من مدينة مقرة , مصمم ومدون ومبرمج مواقع حر ومهوس بعالم الانترنت ومهتم بشؤون المعلوميات .
تحويل كودإخفاء محول الأكواد الإبتساماتإخفاء