إضافة أزرار الشبكات الاٍجتماعية بتاثير دائرية للمدونات مثل التي اسفل مدونتي

بسم الله الرحمن الرحيم

شكل ازرار التواصل الإجتماعي

اضافة مميزة في درس اليوم  ازرار الشبكات الاٍجتماعية مع تأثيرات 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>

الان لم يتبقى سوى تخصيص الاضافة بروابطك الخــاصة بك .

• استبدل اللون الأحمر برابط خلاصة مواضيع مدونتك .
• استبدل اللون الأزرق برابط صفحتك على جوجل بلس.
• استبدل اللون البرتقالي برابط صفحتك على الفايسبوك .  
• استبدل اللون الأخضر بك  برابط صفحتك على تويتر .  

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

اذا كان عندكم اي استفسارات يمكنكم كتابة تعليق  وسيتم الرد عليكم ان شاء الله

بالتوفيق...