شاشة الإنتظار

لغة القالب

الأدوات

الصفحات

آداة روابط أيقونات بالتخصيص المناسب لك

Admin
الأربعاء, سبتمبر 21, 2022

 أحيانا يكون وضع روابط يأخذ حيز كبير في المدونة لكن ان تم وضعها بشكل أيقونات يكون المظهر جمالي أكثر وفي نفس الوقت يكون الحيز الذي تشغله أقل

آداة روابط أيقونات بالتخصيص المناسب لك

صنعت اضافة مميزة يمكنك استخدامها ليس فقط كإضافة مواقع اجتماعية لكن أيضاً للأيقونات بشكل عام 

ويمكنك تخصيصها كيفما شئت فهي معتمدة على خط الأيقونات Fontawesome بالتالي كل الأيقونات المدعومة في ذلك الخط يمكنك استخدامها

ان لم تكن لديك معلومة عن الخط يمكنك التعرف عليه من هذا الموضوع

تعرف على خط الأيقونات الرائع Font Awesome

كذلك يمكنك زيارة مكتبة الأيقونات لنسخ كود أى أيقونة من هنــــــا

كود الإضافة يمكنك وضعه في آداة HTML/JavaScript

<style>

#cnmu-iconsiT{margin:10px auto 0;overflow:hidden;position:relative;clear:both;max-width:300px;}

#InTable{margin:0 -3px;}

#InTable span{float:left;width:25%;}

#InTable a{height:60px;line-height:60px;background-color:#333;margin:0 3px 6px!important;text-align:center;text-decoration:none!important;font-size:30px;display:block;color:#fff;transform:perspective(300px) rotateY(0deg);transition:transform 0.4s linear,background-color 0s linear 0.2s,color 0s linear 0.2s;}

#InTable span:hover a{transform:perspective(300px) rotateY(180deg);transition:transform 0.2s linear,background-color 0s linear 0.1s,color 0s linear 0.1s;}

#InTable i{transition:transform 0s linear 0.2s,text-shadow 0s linear 0.2s;display:block;line-height:inherit;}

#InTable span:hover i{transition:transform 0s linear 0.1s,text-shadow 0s linear 0.1s;transform:scale(-1,1);text-shadow:0 0 50px rgba(255,255,255,0.5);}

#InTable span:nth-child(1):hover  a {background-color: #3B5998;}

#InTable span:nth-child(2):hover  a {background-color: #00ACED;}

#InTable span:nth-child(3):hover  a {background-color: #FD3500;}

#InTable span:nth-child(4):hover  a {background-color: #E3316B;}

#InTable span:nth-child(5):hover  a {background-color: #F8B706;}

#InTable span:nth-child(6):hover  a {background-color: #4183C4;}

#InTable span:nth-child(7):hover  a {background-color: #3399CC;}

#InTable span:nth-child(8):hover  a {background-color: #EA4C89;}

#InTable span:nth-child(9):hover  a {background-color: #3F729B;}

#InTable span:nth-child(10):hover  a {background-color: #FF0084;}

#InTable span:nth-child(11):hover  a {background-color: #F26300;}

#InTable span:nth-child(12):hover a {background-color: #396FD7;}

@media screen and (max-width : 400px) {#cnmu-iconsiT{max-width:260px;}#InTable span{width:33.33%;}}

</style>


<div id="cnmu-iconsiT">

<div id="InTable">

<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-facebook"></i></a></span>

<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-twitter"></i></a></span>

<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-youtube-play"></i></a></span>

<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-instagram"></i></a></span>

<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-snapchat-ghost"></i></a></span>

<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-tumblr"></i></a></span>

<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-paper-plane"></i></a></span>

<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-qq"></i></a></span>

<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-user-secret"></i></a></span>

<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-suitcase"></i></a></span>

<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-html5"></i></a></span>

<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-css3"></i></a></span>

</div>  

</div>  

تنسيق الكود

لديك من 1 الى 12 سطر في الكود مرقمين كل واحد منهم يخص لون خلفية الأيقونة يمكنك تعديل الألوان ان اردت

كيف تستخدم الأيقونة

سطر الأيقونة يكون كالتالي
<span><a href="#" rel="nofollow" target="_blank"><i class="fa fa-facebook"></i></a></span>
رمز # تستبدله بالرابط المراد فتحه عند الضغط على الأيقونة
الكود المعلم بالأحمر هو كود الأيقونة ويمكنك ان تستبدله بأى كود أيقونة من المكتبة
طبعا يمكنك حذف أسطر ان لم ترد كل هذا العدد من الأيقونات
ويمكنك كذلك زيادة الأسطر ان أردت المزيد لكن عليك كذلك زيادة الأسطر في أكواد الألوان بنفس العدد الذي ستزيده

معاينة

تعليقك يساهم في تطوير المحتوى ويزيد من الفائدة بمشاركتنا بأفكارك واقتراحاتك , رأيك يهمنا فساهم بتعليقاتك معنا
يرجى عدم وضع روابط خارجية في التعليقات لضمان نشرها

  1. كم انت رائع أيها الأروع
    الاداة ممتازة ونجحت معي
    شكرا لك من القلب ♥ أستاذنا الغالي

    ردحذف
    الردود
    1. دائما ما أسعد عندما تعجبك آداة أخي منير , فأنت من أفضل أصدقاء الموقع
      ويسرني دائما ان تجد شئ فيه يعجبك
      شكراً لدعمك يا غالي

      حذف
  2. منذ التوجه الي عالم البلوجر و"كن مدون" احد العلامات الفارقة للمدونين العرب خاصة بالأضافات المميزة والشروحات المتعلقة بهذه المنصة وموضوعك اليوم أستاذ/ عمرو من اكثر الموضوعات التي افتقدنها مؤخرآ "اضافات البلوجر" خاصة المجانية منها، شكرآ جزيلآ لك وبارك الله بك ونتمني المذيد من الموضوعات المشابهة وشروحات البرامج التي سبق ونوهت عنها بالموقع

    ردحذف
    الردود
    1. أسعدك الله أستاذ علي كما أسعدتي بمرورك الجميل
      شكراً لذوقك يا طيب ,والشروحات التي نوهت عنها ان شاء الله ساعرضها انا فقط لم ارد ان انشر مواضيع متعلقة بالبرامج بشكل متتالي مباشر حتى يظل الطبع الغالب على الموقع هو محتوى بلوجر لكن لم انسى وان شاء الله سأنشر الموضوع التالي قريباً

      حذف
  3. رائع كالعاده تسلم يداك

    ردحذف
    الردود
    1. سلمك الله من كل سوء يا غالي شكراً لمرورك

      حذف

عدد المواضيع