سلسلة التدوين | طريقة إضافة ايقونات شبكات التواصل الاجتماعي + عرض صورالانستقرام في المدونة

Wednesday, May 18, 2016

السلام عليكم و رحمة الله و بركاته

صباح / مساء النشاط





اول شي راح اشرح طريقة اضافة ايقونات شبكات التواصل الاجتماعي هي طريقتين . 

الطريقة الأولى : 

1- افتحي مدونتك . 







2- بعد ما فتحتي المدونة من الخيارات الي على الجنب تضغطي تخطيط واذا مدونتك انجلش تضغطي على ( layout ) .









3- اختيار " اضافة اداة " أو add a gadget .







4- اختيار HTML/Java Script نضغط على المربع الازرق . 






5- في مربع ال HTML نحط الكود التالي :

<a href="http://www.YourWebsiteAddress.com"target="_blank" ><img src="http://www.URLofImageLocation.com" height="70" width="70" /></a>



http://www.YourWebsiteAddress.com هنا تحطي رابط الموقع مثال: حسبابك في تويتر https://twitter.com/lolaabdoul .


http://www.URLofImageLocation.com هنا تحطي رابط الايقونة الخطوة الي بعدها حقول كيف اجيب رابط الايقونة .


 height="70" width="70 هنا تتحكمي في طول و عرض الايقونة ، بامكانك تحذفي هذي الجزئية من الكود إذا حابة الايقونة تكون نفس مقاسها الاساسي . 


الكود بدون الطول و العرض: 

<a href="http://www.YourWebsiteAddress.com"target="_blank" ><img src="http://www.URLofImageLocation.com" /></a> 


ملاحظة : الايميل يختلف عن الايقونات الباقية في المكان الي احط فيه رابط حسابي احط ايميلي 
<a href="mailto:itslolaal@gmail.com"target="_blank > 





6- تفتحي تطبيق photobucket و ترفعي صورة الايقونة و تنسخي عنوانها من direct .





هنا توضيح للشكل النهائي للكود :

<a href="http://www.instagram.com/lolaabdoul"target="_blank" ><img src="http://i1168.photobucket.com/albums/r497/lolaabdoul/Blue%20Floral%20Media%20Icon%20-%20Instagram_zps8hyoh4kf.png" height="45" width="45" /></a> 



و بكذا انتهت الطريقة الاولى 




الطريقة الثانية :

الخطوة 1 و 2 نفس الطريقة الأولى . 



3- تفحي مشاركة جديدة في المدونة و تضغطي على HTML .







4- بعدين اختاري اضافة صورة و تحطي الصورة الي تبغيها . 





5- حتكون الصورة كذا عبارة عن كود .









6- نرجع الموضوع على و ضع التأليف أو ( COMPOSE ) و نغط ع الصورة و نختار ارتباط  و نحط الرابط الي نبغاه ، ملاحظة : لمى تضغطي ع الصورة و بعدين ارتباط ممكن تحتاجي انكي تكرري الخطوة مرتين عشان يضبط . 






7- نحدد ع الصورة و نخليها في النص .




8- بعدين ترجعي مرة تانية لل HTML و ننسخ الكود و تسوي نفس الخطوة 3 و 4 في الطريقة الأولى . 









هذي الصورة تبين الفرق بين الطريقتين الطريقة الأولى اقدر اتحكم في مقاس الايقونة اما الثانية لا بس اقدر اغير المقاسات .





هذا الكود حق التويتر :

<div dir="rtl" style="text-align: right;" trbidi="on">
<div style="text-align: center;">
<a href="https://twitter.com/lolaabdoul"><img border="0" src="https://1.bp.blogspot.com/-3mTygD9EO0g/VzsnezgB_QI/AAAAAAAAA9k/x7hoa8uwz-Mp3YW9DJvYxW-HRnUGxoo3gCLcB/s320/Blue%2BFloral%2BMedia%2BIcons%2B-%2BTwitter.png"height="45" width="45'' /></a>
</div>
</div> 

حذفت الي بالاصفر و اضفت الي بالوردي عشان يسير زي ايقونة الانستجرام . 

هذي هي الطريقتين كل وحدة اسهل من الثانية اتمنى تفيدكم ، نهاية البوست راح احط مجموعة ايقونات .







نجي دحين لطريقة عرض صور الانستقرام : 

بس اكتبي في قوقل " instagram widget " راح تطلع لك برامج كثيرة انا استخدمت snap widget  بس ماحشرح عليه لانو سار لازم اسوي اكاونت  و websta برضو لازم اكاونت اما light widget الستايل الاساسي مجاني و الباقي ب 10 دولار .




موقع light widget الستايل المجاني الي هو  grid انا احب ستايل ال slide show بس مو مجاني عندهم حتلاقوه في snap widget مجاني حسب ما اعرف .









موقع websta لازم تفتحي اكاونت عشان تاخذي الكود 








ايقونات مجانية : 
























































































و بكذا اكون انتهيت من البوست اتمنى انكم تستفيدو دمتم بحب 



 photo sig_zpsnzw9exvy.jpg

3 comments:

  1. مر اشكرا ساعدتيني ان كيف احط ايقونات في مدونتي

    ReplyDelete
  2. حبيت السلسة ، نفسي يعببرون السنابتشات شوي ويحطون له ايقونة ..❤

    ReplyDelete