PDA

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


Mahmoud Hamed
20th December 2015, 02:35 PM
كود جميع ايقونات مواقع التواصل الاجتماعي بشكل متحرك ورائع

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

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

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

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


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

<!-- 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

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

الكود + الصورة + ملف css بالمرفقات
موضوع منقول