كيفية إضافة ايقونات شبكات التواصل للمدونة

بسم الله الرحمن الرحيم

1- رفع الايقونات على موقع تحميل مناسب لعرض الصور مثل Photobucket. (طبعاً يتطلب لك التسجيل في الموقع ورفع صورك). او ممكن تعملين مثلي اذا كان عندك تمبلر سوي لك مدونة فرعية وقفليها وخليها بس لرفع الملفات :)

2- افتحي مدونتك في "بلوقر Blogger" ثم من لوحة التحكم اختاري مدونتك.

3- اختيار "Layout" من على اليمين.

4- اختيار "Add a Gadget"

5- اختيار "HTML/JavaScript"

6- في مربع "HTML/JavaScript" حطي الكود التالي:

<a href="URL Goes Here"><img src="Image Direct Link Goes Here" /></a>

الاحمر: عنوان الموقع مثل يوزرك في الفلكر التويتر او في التمبلر او الفيسبوك

الازرق: عنوان الصورة اللي رفعتيها على الـ Photobucket

7- ارجعي للـ Photobucket وانسخي عنوان الأيقونة اللي اخترتيها او اللي حملتيها هناك 

8- ارجعي لمربع  "HTML/JavaScript" والصقي عنوان الأيقونة في المكان اللي بالأزرق Image Direct Link Goes Here  بين علامات التنصيص

<a href="URL Goes Here"><img src="http://i292.photobucket.com/albums/mm20/jpladani/icon/flickr.png" /></a>

9- الحين يجي دور عنوانك على فلكر مثلاً, خلي مربع الـ "HTML/JavaScript" مفتوح وانسخي رابطك من على فلكر

10- في مربع "HTML/JavaScript" الصقي عنوانك على فلكر في المكان اللي بالاحمر URL Goes Here وانتبهي لعلامات التنصيص

<a href="

http://www.flickr.com/photos/missy-miss/"><img src="http://i292.photobucket.com/albums/mm20/jpladani/icon/flickr.png" /></a>

11- في مربع الـ "HTML/JavaScript" اختاري حفظ وكذا راح يكون الشكل النهائي 

<a href="

http://www.flickr.com/photos/missy-miss/"><img src="http://i292.photobucket.com/albums/mm20/jpladani/icon/flickr.png" /></a>

طيب ، لو كانت الايقونة كبيرة وانتي حابة تصغرينه حجمها شتسوين؟؟

نضيف خاصية لتحديد حجم الايقونة مثلا نحدد طولها hight و عرضها  width ..
الايقونات المربعة اللي تجي متساويه الابعاد ماعنك مشكله في تحديدها ، لكن الايقونات اللي تجي بحرف من غير حدود واضحة مثل الايقونات في الثيم هذا (LightGreen - BubbleGum) راح تجربين تحددين العرض لحاله وتشوفين اذا ضبط معه او العرض والطول مع بعض او بس الطول .. غالبا انا بالنسبة لي ما آتعدا حجم 24 زيادة او نقص

كيف نضيف هالشي للكود اللي عندنا :
مثلا عندي الكود اللي فوق بتكون الاضافة على هالشكل :

<a href="

http://www.flickr.com/photos/missy-miss/"><img src="http://i292.photobucket.com/albums/mm20/jpladani/icon/flickr.png" hight="24" width="24" /></a>

ممكن لو ابعاد الايقونة غير متساوية مثل ماذكرت تكتفين يا بالطول او العرض عشان شكل وصفة الايقونات تكون مرتبة و متناسقة ... :)



اعيدي جميع الخطوات السابقة لكل ايقونة ..
ملاحظة: بالنسبة لايقونة الايميل والمراسلة حطي الكود mailto: في مكان العنوان اللي بالاحمر معها ايميلك ويصير الشكل النهائي له: mailto:YOUREMAIL

<a href="

mailto:YOUREMAIL"><img src="http://i292.photobucket.com/albums/mm20/jpladani/icon/flickr.png" /></a>

وخلصنا .. الحمدلله :)

في تدوينة السابقة بتلقون مجموعات كثيرة لاشكال والوان من الايقونات اللي تقدرون تحملونها وتزينون فيها مدونتكم..