أزرار تابعني

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

- ونلاحظ من الصورة  عند المرور بمؤشر الفأرة على احد الأيقونات، لاحظ ايقونة اليوتوب كيف هي مختلفة بحدود مربعة عن باقي الأيقونات.

.
الخطوات: 

أولا سنقوم بأخذ بعض الإحطياتات، سنقوم بحفظ القالب من اجل تفادي حصول اي مشكلة ، ثم نتجه الى تحرير 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/AVvXsEj857p-GNj5FjGgxVGcLlYTASVr_7t0G8ELwKJSBpqmOpnCQRdbk-PHMOyb6Ok2dMaO1gl6bTOqFB4VZ6GZ7KwhNZy8ReZDS22E-AZWD81h0U1zYwD1zOvUv-HbBixTLPq0zTPibAJ54Haj/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/AVvXsEjLPkE9ziOE106Be6yq8OFHLy3h44S8v4a3cGpXqhrPQezZPidzWclns5rhWhJjJEfSZE18EDumeAzfasrc39Iq-vyF3bHUPQ_VFUNJ6sZFMi975l5vnm2suz9UWusLyWm-YcA21ma8urFL/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/AVvXsEiA3hJwPuVhBF1kr-zMg2giJ5HvT-tbyFurCE3o0Uh043r02Ao_rTYPUe0kIJLBv-QzRGeU6shBDj8pfMgCJ-JibloDgc57rFdhSVybkAznd5yds7pC4FNSqrqDBaJDMODSIvxGzzxL8f5l/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/AVvXsEhjUc-TySGdQRoxWX7pi8HbJuZ79CNfZrrRT8x0H8q6bC-W05UTMxECi6JUyLIOC3-EQ1pitxWb85I1SaVs2HRr07S43h1ipbGV5u8iz3_YI6t_bxHXtr8TKeAVk1RkQ0hx1xDLDtwU_7oD/s1600/sus-Ayoub-Etmaiti-rss.png" /></a>
</div>

وأخيرا قم بحفظ  التغير

هل أعجبك الموضوع ؟

ضع تعليقا