بسم الله الرحمن الرحيم
1- رفع الايقونات على موقع تحميل مناسب لعرض الصور مثل Photobucket. (طبعاً يتطلب لك التسجيل في الموقع ورفع صورك). او ممكن تعملين مثلي اذا كان عندك تمبلر سوي لك مدونة فرعية وقفليها وخليها بس لرفع الملفات :)
2- افتحي مدونتك في "بلوقر Blogger" ثم من لوحة التحكم اختاري مدونتك.
3- اختيار "Layout" من على اليمين.
4- اختيار "Add a Gadget"
5- اختيار "HTML/JavaScript"
6- في مربع "HTML/JavaScript" حطي الكود التالي:
الاحمر: عنوان الموقع مثل يوزرك في الفلكر التويتر او في التمبلر او الفيسبوك
الازرق: عنوان الصورة اللي رفعتيها على الـ 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 وانتبهي لعلامات التنصيص
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 زيادة او نقص
كيف نضيف هالشي للكود اللي عندنا :
مثلا عندي الكود اللي فوق بتكون الاضافة على هالشكل :
ممكن لو ابعاد الايقونة غير متساوية مثل ماذكرت تكتفين يا بالطول او العرض عشان شكل وصفة الايقونات تكون مرتبة و متناسقة ... :)
اعيدي جميع الخطوات السابقة لكل ايقونة ..
ملاحظة: بالنسبة لايقونة الايميل والمراسلة حطي الكود mailto: في مكان العنوان اللي بالاحمر معها ايميلك ويصير الشكل النهائي له: mailto:YOUREMAIL
نضيف خاصية لتحديد حجم الايقونة مثلا نحدد طولها 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>
وخلصنا .. الحمدلله :)
في تدوينة السابقة بتلقون مجموعات كثيرة لاشكال والوان من الايقونات اللي تقدرون تحملونها وتزينون فيها مدونتكم..
آلله وآخيررآ آحد علمني كيف ههههه
ReplyDeleteصرآحة من آول آبغى آتعلم وآحآول بس مآلقى آلجوآب آلمطلوب ..
جزآك الله خخير يآقلبي ومرآ شكرآ
=) XOXO
اجمعين يارب
Deleteالعفو
:))
شكرا جزيلا ..
ReplyDeleteمدونة مفيدة جدا
انا لمن سويتها طلعت لي الايقونات كبيرة -ـ- كيف كذا ):
شوفي الرابط حق الصورة شوفيها كيف حجمها واذا تبغي حطي لي الكود هناا
Deleteخليني اشوف
ياحبيلك هيا❤❤❤❤❤❤
ReplyDeleteمررره استفدت من موضوعك ماكنت اعرف كيف ومررره ساعدتيني الله يسعدك ❤❤❤❤
اخييييييرا ♥♥
ReplyDeleteربي يسعدك زي م اسعدتيتي: )
وباتتظار تدوينات اكثر لك: *