كود جميع ايقونات مواقع التواصل الاجتماعي بشكل متحرك ورائع

[اميرة عبد الدايم]

السلام عليكم ورحمة الله وبركاته

اخواني

دخلت الى احد المواقع الاجنبية وجدت ايقونات التواصل الاجتماعي بطريقة

اعجبتني .. وضع دائري وتتحرك ويتغير لونها عند تمرير الماوس مع التحويل

استخرجت الكود وملف css والصورة وتم التطبيق .. واحببت ان اضعة للجميع لمن يهتم
بايقونات مميزة حصريا لترايدنت

بالبداية للمعاينة وضعتها في صفحة منفصله لرؤايتها ومن اعجبته يكمل بقية
الموضوع لمعرفة كيف وضعها بموقعه باي مكان يريد وهي في غاية السهوله

هذا هو رابط المعاينة ... هناااا

طبعا إنا وضعت 4 ايقونات فقط من اصل 13 وبإمكانك إضافة ما تشاء دون اضافة أي صوره

مميزاتها
1. لا داعي للبحث عن ايقونات لكل موقع تواصل .. هي صورة واحدة فقط وعليها 13
موقع تواصل اجتماعي + rss
2. تستطيع ان تختار ما تشاء من المواقع الموجودة وحذف ما تريد وكل ما عليك
وضع التسمية بالكود والصوره تظهر لوحدها
3. تستطيع وضعها باي مكان .. منتدى او مدونه او اي موقع وفي اي مكان تريد

ان اعجبتك الايقونات بعد المعاينه طبق معي الشرح وعلى بركة الله

1. ارفع الصورة المرفقة واسمها icons-social.png وهي صوره واحدة فقط
(تحتوي على 13 موقع تواصل) الى موقعك واعرف مسارها

2. افتح ملف ( css ) ثم قم بالبحث عن اسم الصورة (icons-social.png) ثم ضع رابط
الصورة مكانها طبعا حسب مسارها بموقعك وهي موجودة بالسطر 30 مع ابقاء الرابط بين
قوسين وبعد ذلك ارفع ملف الـ css الى موقعك واعرف المسار

2. واخيرا انسخ هذا الكود وعدل حسب ما هو موضح
وضع الكود اينما تريد ...
( الهيدر او النافبار او الفوتير او أي مكان اخر تريد ظهور الايقونات به )

رمز PHP:

<!-- mordant -->
<link rel="stylesheet" href="رابط مسار ملف سي اس اس" type="text/css" />
</div>
<div class="clearbreak"></div>
<div id="jsn-social-icons">
<ul>
<li class="facebook">
<a href="رابط صفحتك على الفيس بوك" title="Facebook" target="_blank">
Facebook</a>
</li>
<li class="twitter">
<a href="رابط صفحتك على تويتر" title="Twitter" target="_blank">
Twitter</a>
</li>
<li class="googleplus">
<a href="رابط صفحتك على قوقل بلص" title="googleplus" target="_blank">
googleplus</a>
</li>
<li class="youtube">
<a href="رابط قناتك على اليوتيوب" title="YouTube" target="_blank">
YouTube</a>
</li>
</ul>
</div>
<!-- mordant -->

وانتهى

ملاحظة :

من يريد حذف أي ايكونه فقط احذف رابطها بالكامل من بداية ( <li ) وحتى ( </li> )

من يريد اضافة ايقونات اخرى فقط علية اضافة اسمها فقط بعد وضع رابط جديد وستظهر الصوره لوحدها

مثلا رابط اليوتيوب بالاخضر انسخ نفس الرابط وضعة اسفله مع تغيير التسمية ورابط الصفحة

ومهم ان تكون التسمية مطابقة للموجوده في ملف css حتى ياخذ الصورة لوحدة

وهذه هي تسميات مواقع التواصل الموجوده بملف css

facebook

twitter

youtube

googleplus

pinterest

myspace

flickr

dribble

stumbleupon

yahoo

skype

rss

linkedin

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

pinterest

رمز PHP:

<li class=" pinterest ">
<a href=" رابط صفحتك على بنترست" title=" pinterest " target="_blank">
pinterest </a>
</li>

ارجو ان ينال اعجابكم

الكود + الصورة + ملف css بالمرفق