بسم الله الرحمن الرحيم
 |
| شكل ازرار التواصل الإجتماعي |
اضافة مميزة في درس اليوم ازرار الشبكات الاٍجتماعية مع تأثيرات Css3 بشكل رائع وتأثيرات متحركة فعند تمرير مؤشر الماوس فوقها تدور بشكل جميل و عند اٍزالة المؤشر تدور بالعكس لتعود اٍلى حالتها الاٍبتدائية وتحتوي الاٍضافة على أزرار جوجل بلس وفيسبوك وتويتر وخلاصات المدونة واليوتيوب. اضافة اٍلى كونها تزيد من معجبيك ومتابعيك عبر المواقع الاجتماعيه .
اٍذهب الى لوحة التحكم ← تخطيط ← إضافة أداة HTML/JavaScript.
اٍختيار أي الشكل الذي تريده ← استبدال الروابط ← ثم الصق الكود اسفله وحفظه :
وهذا الكود
<style>p#hb_socialicons img { /* Spinning Social Icons Widget By HelperBlogger Ar konozblog */
-moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } p#hb_socialicons img:hover { -moz-transform: rotate(-360deg); -webkit-transform: rotate(-360deg); -o-transform: rotate(-360deg); -ms-transform: rotate(-360deg); transform: rotate(-360deg); } /* Spinning Social Icons Widget By HelperBlogger Ar konozblog */
</style> <center><p id="hb_socialicons"> <a href="http://www.facebook.com/konozblog/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFsTyB-4Hd9sXUc6DlpMOs83-Lt2jZaczakoWmOfRGTRBPHbP9sJz8_iFpkspzqRK4rlDy0aWoA4D0oK4Z87nSBPboUVW_s8edd-OWILvA7ZBVcSEZ_896n3aE_4K3dKO7wUXkx1A8bIg/s1600/helperblogger.com-facebook.png" /></a> <a href="https://twitter.com/ALEMAD5/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3_0CYLH_MYA607fqHL0pHyuauWRxSUCVnnPR5jVXHXiHNTiUsyS2k1Jci8zeedqUPftll8VIxkehwmAlz7U3cd_PHRycgypKd5bYMnuoYrqy74GSmTh_iutQaAU8ZxoLDk0dtdURvpgQ/s1600/helperblogger.com-twitter.png" /></a> <a href="https://plus.google.com/u/0/106314147416991843215/posts"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjePvZpSQWHy_QU1lVGlCilfjcOkzJb-8xSCF86Bl2yjXeeoXVi-aOueXFUMW-jR5iVhAZXOs49KA5p9gzEv3NQRnPSc75RuGfrA6kLH1e4EMIFFWHxgwg0CcaoXnSPcdXAKFTVmG1wxNY/s1600/helperblogger.com-google_plus.png" /></a> <a href="http://feeds.feedburner.com/konozblog/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQzPSOtjHrYQh1HHS03LXcvspmp5_V9_yy2lIh7814UJJrIp0Bb1mkauws3Xg2uwm4GuKIjpqDbhRZOB7904A9N_9PmBNMtUDEg1vAMXVWqfX_plbCshn0tu05GsrPbaNiMb0d8qfhozQ/s1600/helperblogger.com-rss.png" /></a> <a href="http://www.youtube.com/konozblog/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6KXeu-OYjxEYCC0meSRGdPr7gXvAiw3fwu4f7uO58xBM0QUEb9B0NDujs-mWbKzT5Offew5_juFlM7MxmW86z-FfUYlwDWDVsQWU10GzM_WxORv-INqlwqE-Kcpp4cCw_jsIFwIBiEsc/s1600/helperblogger.com-youtube.png" /></a> </p></center>
-moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } p#hb_socialicons img:hover { -moz-transform: rotate(-360deg); -webkit-transform: rotate(-360deg); -o-transform: rotate(-360deg); -ms-transform: rotate(-360deg); transform: rotate(-360deg); } /* Spinning Social Icons Widget By HelperBlogger Ar konozblog */
</style> <center><p id="hb_socialicons"> <a href="http://www.facebook.com/konozblog/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFsTyB-4Hd9sXUc6DlpMOs83-Lt2jZaczakoWmOfRGTRBPHbP9sJz8_iFpkspzqRK4rlDy0aWoA4D0oK4Z87nSBPboUVW_s8edd-OWILvA7ZBVcSEZ_896n3aE_4K3dKO7wUXkx1A8bIg/s1600/helperblogger.com-facebook.png" /></a> <a href="https://twitter.com/ALEMAD5/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3_0CYLH_MYA607fqHL0pHyuauWRxSUCVnnPR5jVXHXiHNTiUsyS2k1Jci8zeedqUPftll8VIxkehwmAlz7U3cd_PHRycgypKd5bYMnuoYrqy74GSmTh_iutQaAU8ZxoLDk0dtdURvpgQ/s1600/helperblogger.com-twitter.png" /></a> <a href="https://plus.google.com/u/0/106314147416991843215/posts"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjePvZpSQWHy_QU1lVGlCilfjcOkzJb-8xSCF86Bl2yjXeeoXVi-aOueXFUMW-jR5iVhAZXOs49KA5p9gzEv3NQRnPSc75RuGfrA6kLH1e4EMIFFWHxgwg0CcaoXnSPcdXAKFTVmG1wxNY/s1600/helperblogger.com-google_plus.png" /></a> <a href="http://feeds.feedburner.com/konozblog/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQzPSOtjHrYQh1HHS03LXcvspmp5_V9_yy2lIh7814UJJrIp0Bb1mkauws3Xg2uwm4GuKIjpqDbhRZOB7904A9N_9PmBNMtUDEg1vAMXVWqfX_plbCshn0tu05GsrPbaNiMb0d8qfhozQ/s1600/helperblogger.com-rss.png" /></a> <a href="http://www.youtube.com/konozblog/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6KXeu-OYjxEYCC0meSRGdPr7gXvAiw3fwu4f7uO58xBM0QUEb9B0NDujs-mWbKzT5Offew5_juFlM7MxmW86z-FfUYlwDWDVsQWU10GzM_WxORv-INqlwqE-Kcpp4cCw_jsIFwIBiEsc/s1600/helperblogger.com-youtube.png" /></a> </p></center>
الان لم يتبقى سوى تخصيص الاضافة بروابطك الخــاصة بك .
- استبدل اللون الأحمر برابط خلاصة مواضيع مدونتك .
- استبدل اللون الأزرق برابط صفحتك على جوجل بلس.
- استبدل اللون البرتقالي برابط صفحتك على الفايسبوك .
- استبدل اللون الأخضر بك برابط صفحتك على تويتر .
احفظ الاداة ومبروك عليك الاضافة..
اذا كان عندكم اي استفسارات يمكنكم كتابة تعليق وسيتم الرد عليكم ان شاء الله
