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

اضافة مميزة في درس اليوم  ازرار الشبكات الاٍجتماعية مع تأثيرات Css3 بشكل رائع وتأثيرات متحركة فعند تمرير مؤشر الماوس فوقها تدور بشكل جميل و عند اٍزالة المؤشر تدور بالعكس لتعود اٍلى حالتها الاٍبتدائية وتحتوي الاٍضافة على أزرار جوجل بلس وفيسبوك وتويتر وخلاصات المدونة واليوتيوب. اضافة اٍلى كونها تزيد من معجبيك ومتابعيك عبر المواقع الاجتماعيه .

اٍذهب الى لوحة التحكم ← تخطيط ← إضافة أداة 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/konozblog/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhfmRrMJzh3Ic-MHdKuKUQfzedi8fTqvKPG2VymnWpaHGwj-7MGk9lfO1sTshEXFa_6f2EDsaCp9H7wFWmh3Kg5CMOtuVLVJ4ZK10NZ6kNQ4CbziMNlis3v5Uf1GEHYKtQtMJFd50qpAA/s1600/helperblogger.com-facebook.png" /></a> <a href="https://twitter.com/ALEMAD5/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOFn052W0NwzrEzzvVLI2tTkhjUBBltPPogNZgauRnHANbPAizSGGJoxG2tJLeks09miefqdsKuobzosXrAqxK7TEi8K9PQzuf6Akg7_CiOzRjj4cq73u9l05WHjTzCsArbWGnkgDuYZk/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/AVvXsEg5wNsfdQIyMV4HwrVQEsFn9xPFErDTr1v9sye2fk-YC-xskMlvnS0mcoBKpfvInQo0C__LRpYoiofzCDgVjINS1JGqCvWXEgPbqXJ_s2DiSxA8dTgtsUfuFvRUvx0iynehxBrMdC5xpmQ/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/AVvXsEgOHJ1RBWE77yg5l6u4GDh30w_f6SE926gDk086BlZJGQU-tmlEuO83aEW5DjK4qTgxPBZa5AC2vBIagNG73KX8XO27nawmojUHt6ufzdrpRm1t-IdzbPIKvQU2adUq6ZgTdlmU6llPxSw/s1600/helperblogger.com-rss.png" /></a> <a href="http://www.youtube.com/konozblog/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuU3H6-E9Q2rLAXzX-NcFQUHbEogXZSekH0-Zixroj25u90v3VPCZWummRsle5Gedp5IgjLBZt4O5kQGVKrbrfQVuBIcSefWBlqxaEAw9fb7T7J5LUP8IzH7_PVP4TtxLIneHeLYSL9So/s1600/helperblogger.com-youtube.png" /></a> </p></center>

//////////////////////////////////////////

الكود الثاني

<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/AVvXsEjhfmRrMJzh3Ic-MHdKuKUQfzedi8fTqvKPG2VymnWpaHGwj-7MGk9lfO1sTshEXFa_6f2EDsaCp9H7wFWmh3Kg5CMOtuVLVJ4ZK10NZ6kNQ4CbziMNlis3v5Uf1GEHYKtQtMJFd50qpAA/s1600/helperblogger.com-facebook.png" /></a> <a href="https://twitter.com/ALEMAD5/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOFn052W0NwzrEzzvVLI2tTkhjUBBltPPogNZgauRnHANbPAizSGGJoxG2tJLeks09miefqdsKuobzosXrAqxK7TEi8K9PQzuf6Akg7_CiOzRjj4cq73u9l05WHjTzCsArbWGnkgDuYZk/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/AVvXsEg5wNsfdQIyMV4HwrVQEsFn9xPFErDTr1v9sye2fk-YC-xskMlvnS0mcoBKpfvInQo0C__LRpYoiofzCDgVjINS1JGqCvWXEgPbqXJ_s2DiSxA8dTgtsUfuFvRUvx0iynehxBrMdC5xpmQ/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/AVvXsEgOHJ1RBWE77yg5l6u4GDh30w_f6SE926gDk086BlZJGQU-tmlEuO83aEW5DjK4qTgxPBZa5AC2vBIagNG73KX8XO27nawmojUHt6ufzdrpRm1t-IdzbPIKvQU2adUq6ZgTdlmU6llPxSw/s1600/helperblogger.com-rss.png" /></a> <a href="http://www.youtube.com/konozblog/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuU3H6-E9Q2rLAXzX-NcFQUHbEogXZSekH0-Zixroj25u90v3VPCZWummRsle5Gedp5IgjLBZt4O5kQGVKrbrfQVuBIcSefWBlqxaEAw9fb7T7J5LUP8IzH7_PVP4TtxLIneHeLYSL9So/s1600/helperblogger.com-youtube.png" /></a> </p></center>

//////////////////////////////////////////////

الكود الثالث

<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/AVvXsEjhfmRrMJzh3Ic-MHdKuKUQfzedi8fTqvKPG2VymnWpaHGwj-7MGk9lfO1sTshEXFa_6f2EDsaCp9H7wFWmh3Kg5CMOtuVLVJ4ZK10NZ6kNQ4CbziMNlis3v5Uf1GEHYKtQtMJFd50qpAA/s1600/helperblogger.com-facebook.png" /></a> <a href="https://twitter.com/ALEMAD5/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOFn052W0NwzrEzzvVLI2tTkhjUBBltPPogNZgauRnHANbPAizSGGJoxG2tJLeks09miefqdsKuobzosXrAqxK7TEi8K9PQzuf6Akg7_CiOzRjj4cq73u9l05WHjTzCsArbWGnkgDuYZk/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/AVvXsEg5wNsfdQIyMV4HwrVQEsFn9xPFErDTr1v9sye2fk-YC-xskMlvnS0mcoBKpfvInQo0C__LRpYoiofzCDgVjINS1JGqCvWXEgPbqXJ_s2DiSxA8dTgtsUfuFvRUvx0iynehxBrMdC5xpmQ/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/AVvXsEgOHJ1RBWE77yg5l6u4GDh30w_f6SE926gDk086BlZJGQU-tmlEuO83aEW5DjK4qTgxPBZa5AC2vBIagNG73KX8XO27nawmojUHt6ufzdrpRm1t-IdzbPIKvQU2adUq6ZgTdlmU6llPxSw/s1600/helperblogger.com-rss.png" /></a> <a href="http://www.youtube.com/konozblog/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuU3H6-E9Q2rLAXzX-NcFQUHbEogXZSekH0-Zixroj25u90v3VPCZWummRsle5Gedp5IgjLBZt4O5kQGVKrbrfQVuBIcSefWBlqxaEAw9fb7T7J5LUP8IzH7_PVP4TtxLIneHeLYSL9So/s1600/helperblogger.com-youtube.png" /></a> </p></center>

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

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

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