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

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

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


استخرجت الكود وملف 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 بالمرفق

الملفات المرفقة mordant.zip (32.6 كيلوبايت, عدد مرات المشاهدة 199 مرة)