السلام عليكم ورحمة الله تعالى وبركاته، أهلا وسهلا بكم في تدوينة جديدة حول كيفية اضافة ازرار الشبكات الاٍجتماعية مع تأثيرات Css3 بشكل رائع وتأثيرات متحركة مثل التي في مدونتي حسني للمعلوميات، حيث عند تمرير مؤشر الماوس فوقها تدور بشكل جميل و عند اٍزالة المؤشر تدور بالعكس لتعود اٍلى حالتها وتحتوي هذه الاٍضافة أيضا على أزرار جوجل بلس وفيسبوك وتويتر واليوتيوب. اضافة اٍلى أنها بمكن أن تزيد من معجبيك ومتابعيك عبر المواقع الاجتماعيه.
طريقة التركيب:
اٍذهب الى لوحة التحكم ← تخطيط ← إضافة أداة HTML/JavaScript.
بعد ذلك ← استبدال الروابط ← ثم الصق الكود اسفله وحفظه:
اٍذهب الى لوحة التحكم ← تخطيط ← إضافة أداة HTML/JavaScript.
بعد ذلك ← استبدال الروابط ← ثم الصق الكود اسفله وحفظه:
الكـــــــود
<style>p#hb_socialicons img { /* Spinning Social Icons Widget By HelperBlogger Ar konozblog*/
-moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } p#hb_socialicons img:hover { -moz-transform: rotate(120deg); -webkit-transform: rotate(120deg); -o-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg); } /* Spinning Social Icons Widget By HelperBlogger Ar konozblog */
</style> <center><p id="hb_socialicons"> <a href="http://www.facebook.com/hasni28professional/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWXgx2t54-c445aqk7ODBXVzFjpHUrfCHmlwkMwEOReCMHmElIF9nphDtecFsP99Wbgpc6lq2GozMLPYXZfmfp_JGHIZlXqR-ALUlbMSb8QdEy33dIVPfd3lH8u0EPEhRGLP_mh2b9HCQ/s1600/helperblogger.com-facebook.png" /></a> <a href="https://twitter.com/hasni28professional/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_Y09XXSbtUIuitSaUXVS6AfS7k-NS1liUjL_jXaj8j1K8gY1FlFiqDM9lnSr1W2hfAcbCqSSvzVjD4XJNgjkv0ZBLxRdMO4qoCx5g0EGpXGsZwUcEjGhsVe48-ZXA4ALw5HJFkWNWKVw/s1600/helperblogger.com-twitter.png" /></a> <a href="https://plus.google.com/112900353697393316865/posts"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA8xPFcN8laWC03XEvxd_29QMoL57Q-ktn3sms1BVMey5BVZOno4jtxu5WvkVCqfc3YrnQsSCz2qyP_XnVh_JPI050Whuy9PdzeetVrtXWzctrWzJc94UxVnUeoOOF95jxA-1_etFoGgo/s1600/helperblogger.com-google_plus.png" /></a> <a href="http://feeds.feedburner.com/hasni28professional/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_noqigE874paXQwUcQt2G-ot08PViUJ7qUrwygkcgFMEoInSi4-9slKgklpRTB3ymewtf7QinmjkxWhyusPVOQ4gv7wH3jz8lvkN2cA5D1m_Core66olaDMOThzMnYBhtU5_EymCQ64E/s1600/helperblogger.com-rss.png" /></a> <a href="https://www.youtube.com/user/Mrskull28dz/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVu9pI2Rz8sWTsc7ljkVhCbq7zPCOQndr0EoA_-Mj2eJ_dzgSy4bEBWsMHj2lVn9KrMcwy92XPmrNVLAZ8iawMEMlQ1di5iN8JG322nV5qe1SXlYgOnJR7Ms8Rajwpo3McpNadiFXkjh4/s1600/helperblogger.com-youtube.png" /></a> </p></center>
-moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } p#hb_socialicons img:hover { -moz-transform: rotate(120deg); -webkit-transform: rotate(120deg); -o-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg); } /* Spinning Social Icons Widget By HelperBlogger Ar konozblog */
</style> <center><p id="hb_socialicons"> <a href="http://www.facebook.com/hasni28professional/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWXgx2t54-c445aqk7ODBXVzFjpHUrfCHmlwkMwEOReCMHmElIF9nphDtecFsP99Wbgpc6lq2GozMLPYXZfmfp_JGHIZlXqR-ALUlbMSb8QdEy33dIVPfd3lH8u0EPEhRGLP_mh2b9HCQ/s1600/helperblogger.com-facebook.png" /></a> <a href="https://twitter.com/hasni28professional/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_Y09XXSbtUIuitSaUXVS6AfS7k-NS1liUjL_jXaj8j1K8gY1FlFiqDM9lnSr1W2hfAcbCqSSvzVjD4XJNgjkv0ZBLxRdMO4qoCx5g0EGpXGsZwUcEjGhsVe48-ZXA4ALw5HJFkWNWKVw/s1600/helperblogger.com-twitter.png" /></a> <a href="https://plus.google.com/112900353697393316865/posts"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA8xPFcN8laWC03XEvxd_29QMoL57Q-ktn3sms1BVMey5BVZOno4jtxu5WvkVCqfc3YrnQsSCz2qyP_XnVh_JPI050Whuy9PdzeetVrtXWzctrWzJc94UxVnUeoOOF95jxA-1_etFoGgo/s1600/helperblogger.com-google_plus.png" /></a> <a href="http://feeds.feedburner.com/hasni28professional/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_noqigE874paXQwUcQt2G-ot08PViUJ7qUrwygkcgFMEoInSi4-9slKgklpRTB3ymewtf7QinmjkxWhyusPVOQ4gv7wH3jz8lvkN2cA5D1m_Core66olaDMOThzMnYBhtU5_EymCQ64E/s1600/helperblogger.com-rss.png" /></a> <a href="https://www.youtube.com/user/Mrskull28dz/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVu9pI2Rz8sWTsc7ljkVhCbq7zPCOQndr0EoA_-Mj2eJ_dzgSy4bEBWsMHj2lVn9KrMcwy92XPmrNVLAZ8iawMEMlQ1di5iN8JG322nV5qe1SXlYgOnJR7Ms8Rajwpo3McpNadiFXkjh4/s1600/helperblogger.com-youtube.png" /></a> </p></center>
الكاتب : Unknown
هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق
ليست هناك تعليقات:
إرسال تعليق