أزرار تابعني على يوتوب،فيسبوك،تويتر و الخلاصة

السلام عليكم

في هذا الدرس سوف أقدم لكم إضافة جميلة وهي أزرار تابعني على يوتوب ، فيسبوك،تويتر والخلاصة والإضافة تتميز بأزرار أو أيقونات أنيقة وواضحة بحدود دائرية جميلة وعند الإتجاه إليها بمؤشر الفأرة تصبح الحدود مربعة شاهد الصورة :

الخطوات: 

أولا سنقوم بأخذ بعض الإحطياتات، سنقوم بحفظ القالب من أجل تفادي حصول أي مشكلة ، ثم نتجه إلى تحرير html ، ثم نضغط على متابعة.نقوم بالضغط على Cntrl + F إذا كنت تستخدم متصفح جديد مثل كروم أو موزيلا ونبحث عن :  ]]></b:skin>

ثم نضيف الكود التالي قبله .

 /*sus code by Ayoub-Etmaiti */
 .Azrar-Ayoub-Etmaiti {
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;
}
.Azrar-Ayoub-Etmaiti:hover {
box-shadow: 0; /* لحذف الحدود الدائرية عند مرور المأشر */
border-radius: 0; /*لحذف الظل عند مرور المأشر */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

.Ayoub-Etmaiti-center {
        text-align: center /*لتوسيط الأزرار  */
}
 /*sus code by Ayoub-Etmaiti */

قم بحفظ القالب

طريقة التركيب:

• لوحة التحكم
• تخطيط
• عناصر الصفحة
• Html/Javascript
•  ركب هذا الكود  

<div class="Ayoub-Etmaiti-center">
<a href="رابط الفيسبوك هنا" target="_blank" title="¡فيسبوك!"><img class="Azrar-Ayoub-Etmaiti" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQIdSe7iauFwht5MsAx5SqPLHlxoT-L631IpktUpt7MlK55AFnPaVnBRRuWkSbJTcsAoyDrLX3adXYexFjRDpvCnfzHJGezHBTd04GsK8wZt3VUAJw-rpYEMicT6eJpZD6ng_eN_wXlpk5/s1600/sus-Ayoub-Etmaiti-facebook.png" /></a>
<a href="رابط تويتر هنا" target="_blank" title="¡تويتر!"><img class="Azrar-Ayoub-Etmaiti" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBvdGCxbEOezmTQl-QEkdx5Xj6E7ViEMxlwpuEChuSs0wGj0n64hfoF4-5941hgeMSMkoMcA5iavV20Ao52-D01looAYH7-LodTlJ4C0k6BIb4PEjN0gfCwZR5PsPPC9V6QExjfbxVBaHB/s1600/sus-Ayoub-Etmaiti-twitter.png" /></a>
<a href="رابط يوتوب هنا" target="_blank" title="¡يوتوب!"><img class="Azrar-Ayoub-Etmaiti" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYlElcf-Debn2eyEzalUaVIgngUxcYK7-QZSw60Sw-CUzE5m6fKomManX1DdMXU-oNYDXrgVFTmbOpk51-tZ9PoVbhsl78l14UP8u4fYpbMZf1_pgmIWXRZSjXdW3akgqYoNYyW4jGZHbx/s1600/sus-Ayoub-Etmaiti-youtube.png" /></a>
<a href="رابط الخلاصة هنا" target="_blank" title="¡الخلاصة!"><img class="Azrar-Ayoub-Etmaiti" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR1-rbvJ_YiQPECTRkGmEj7i4QK3Qj9sZDZLMlip97HMFrWgDJjYyMsMbLa28tjjuq7EAHaSoxqXix2AumAeQqyWbhwoBLC0z0dH0Fl_rrzE9PTchE3lCkr9VqYK7-5KrmIo4AU4kGKm7_/s1600/sus-Ayoub-Etmaiti-rss.png" /></a>
</div>

وأخيرا قم بحفظ الأداة