إضافة أزرار المواقع الإجتماعية و الخلاصة إلى المدونات و المواقع

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

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

الأن حان وقت عرض الاكواد لوضع هذه الإضافة الرائعة في مدونتنا.

الخطوات :

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

 ]]></b:skin>

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

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

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

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

  انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ثم إضافة أداة ثم اختر

  HTML/Javascript

و ضع الكود التالي في الأداة :

    <div class="Amizmiz-Soft-center">
    <a href=" رابط صفحتك على الفيسبوك هنا" target="_blank" title="Find us on Facebook!"><img class="Azrar-Amizmiz-Soft" src="http://3.bp.blogspot.com/-3S8srj3azVA/UGOS7W1cUXI/AAAAAAAABeQ/h5p3_UBNOFg/s1600/amizmiz-soft-facebook.png" /></a>
    <a href="رابط حسابك على تويتر هنا" target="_blank" title="Find us on Twitter!"><img class="Azrar-Amizmiz-Soft" src="http://1.bp.blogspot.com/-tfMaupPDGt4/UGOYvtxZeaI/AAAAAAAABfY/jTQZXwC_dPI/s1600/amizmiz-soft-twitter.png" /></a>
    <a href="رابط صفحتك على جوجل بلس هنا" target="_blank" title="Find us on Google Plus!"><img class="Azrar-Amizmiz-Soft" src="http://2.bp.blogspot.com/-HQ-jONwjFsk/UGOewa_LauI/AAAAAAAABgg/k-1hZAh_6QA/s1600/amizmiz-soft-google-plus.png" /></a>
    <a href="رابط الخلاصة للمدونة هنا" target="_blank" title="Find us on RSS!"><img class="Azrar-Amizmiz-Soft" src="http://3.bp.blogspot.com/-ccpu3F2n_NQ/UGOYXOChsFI/AAAAAAAABfQ/Q0AanVEFybQ/s1600/amizmiz-soft-rss.png" /></a>
    </div>

وأخيرا لا تنس تغيير ما كتب باللون الأحمرثم قم بحفظ الأداة.

 .