زائدا ملحق للموضوع الثاني
دخلت الى احد المواقع الاجنبية وجدت ايقونات التواصل الاجتماعي بطريقة
اعجبتني .. وضع دائري وتتحرك ويتغير لونها عند تمرير الماوس مع التحويل
استخرجت الكود وملف css والصورة وتم التطبيق .. واحببت ان اضعة للجميع لمن يهتم
بايقونات مميزة حصريا
بالبداية للمعاينة وضعتها في صفحة منفصله لرؤايتها ومن اعجبته يكمل بقية
الموضوع لمعرفة كيف وضعها بموقعه باي مكان يريد وهي في غاية السهوله
هذا هو رابط المعاينة ... هناااا
طبعا إنا وضعت 4 ايقونات فقط من اصل 13 وبإمكانك إضافة ما تشاء دون اضافة أي صوره
مميزاتها
1. لا داعي للبحث عن ايقونات لكل موقع تواصل .. هي صورة واحدة فقط وعليها 13
موقع تواصل اجتماعي + rss
2. تستطيع ان تختار ما تشاء من المواقع الموجودة وحذف ما تريد وكل ما عليك
وضع التسمية بالكود والصوره تظهر لوحدها
3. تستطيع وضعها باي مكان .. منتدى او مدونه او اي موقع وفي اي مكان تريد
ان اعجبتك الايقونات بعد المعاينه طبق معي الشرح وعلى بركة الله
1. ارفع الصورة المرفقة واسمها icons-social.png وهي صوره واحدة فقط
(تحتوي على 13 موقع تواصل) الى موقعك واعرف مسارها
2. افتح ملف ( css ) ثم قم بالبحث عن اسم الصورة (icons-social.png) ثم ضع رابط
الصورة مكانها طبعا حسب مسارها بموقعك وهي موجودة بالسطر 30 مع ابقاء الرابط بين
قوسين وبعد ذلك ارفع ملف الـ css الى موقعك واعرف المسار
2. واخيرا انسخ هذا الكود وعدل حسب ما هو موضح
وضع الكود اينما تريد ...
( الهيدر او النافبار او الفوتير او أي مكان اخر تريد ظهور الايقونات به )
- الكود:
-
<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 -->
وانتهى
ملاحظة :
من يريد حذف أي ايكونه فقط احذف رابطها بالكامل من بداية (
)
من يريد اضافة ايقونات اخرى فقط علية اضافة اسمها فقط بعد وضع رابط جديد وستظهر الصوره لوحدها
مثلا رابط اليوتيوب بالاخضر انسخ نفس الرابط وضعة اسفله مع تغيير التسمية ورابط الصفحة
ومهم ان تكون التسمية مطابقة للموجوده في ملف 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>
الملفات المرفقه
الملفات المرفقة
- mordant.zip (32.6 كيلوبايت, 29 مشاهدات)