اضافة مواقع التواصل الاجتماعى بشكل فريد من نوعه

عدت لكم وبعد طول غياب عن التدوين فى مجال اضافات البلوجر الاحترافية باضافة جميلة جدا ومميزة للغاية وهى اضافة مواقع التواصل الاجتماعى بشكل بسيط ومميز جدا وبتقنية css فهى عبارة عن أزرار جميلة بمجرد الوقوف عليها تتحول لمربعات منتظمة بشكل جميل والآن مع الشرح

لتذهب لمعاينة سريعة من هنا 

شرح التركيب 

اذهب للوحة التحكم >> التخطيط >> اضافة أداة >> جافا سكربت 

ضع بها الكود التالى

<style>
 .myebd3at {
border-radius: 50%; /* الحدود الدائرية  */
box-shadow: 0px 0px 15px #000; /* الظل*/
padding:0;
border:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.myebd3at:hover {
box-shadow: 0; /* لحذف الحدود الدائرية عند مرور المأشر */
border-radius: 0; /* لحذف الظل عند مرور المأشر */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}
</style>
<div class="myebd3at-center">
<a href=" رابط الفيسبوك هنا " target="_blank" title=" فيس بوك "><img class="myebd3at" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBLNbN0CgQGXZiLIN-twC_GIO_CmKZTwIDoNZPuoZ4soZ3F-fWO4fsVWi_a41l69spH3aXTKJd5IOt_jWCsY4GHEl9Z3vZSgen7VhxqP3xvSKavqBkN6pwVqTuxBP-oXHBGLEfuryvlSD1/s1600/sus-Ayoub-Etmaiti-facebook.png" /></a>
<a href=" رابط تويتر هنا " target="_blank" title=" تويتر "><img class="myebd3at" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjunYMexgnlhlu1ncoBrVQVY3c3zjSd98FbnZBuyH9usYkVg3lYS4ZpYEh-_cVWeVk8FUHr8suwhe8Rl17Da-tZAU3QSf__TkGSI8vjV3XZz04LIQYZPLupPxGAEyzHc1JN8dwQaeypB7Ps/s1600/sus-Ayoub-Etmaiti-twitter.png" /></a>
<a href=" رابط يوتوب هنا " target="_blank" title=" يوتيوب "><img class="myebd3at" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIInT0PQxOX2kmch_izdEuJ6lOyS9O1UspEpnP-O6mQPDcrRl95tFozXeWQeVtKMH8nEEcyFcff-ZK6s8JrVZh3947u9eNBBm4zJEmJ5VnDXu0CuMpomJk-g3DxJq_k0TyYMeX7MmQ2yTN/s1600/sus-Ayoub-Etmaiti-youtube.png" /></a>
<a href=" رابط الخلاصة هنا " target="_blank" title=" الخلاصة "><img class="myebd3at" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoSPRrfkhlaT8FIaQyhAEK0DTmpHd1XDWRQEio8jg8B9jIMfw-xMQYwDjuv5isH3FbwStiOM7fldNSMPJOghOSrqBiBqf144gJZpeGUsB-vLIQCohuHU8W1kmyfZINQF7bjs16q0AuPdgs/s1600/sus-Ayoub-Etmaiti-rss.png" /></a>
</div>

غير الروابط الملونة بما يناسبك