ايقونات المواقع الاجتماعية

  المصدر/

المدونة التعليمية للحاسوب

 

أيقونات المواقع الاجتماعية بخمسة أشكال مختلفة وخصائص CSS3

الكاتب Mohamed Filali Aouami at 3:37 ص هناك 6 تعليقات:

أقدم لكم اليوم اخواني زوار ومتابعي المدونة التعليمية للحاسوب ، وفي موضوع جديد من مواضيع إضافات بلوجر ، أيقونات المواقع الإجتماعية بخمسة أشكال مختلفة وخصائص CSS3 .

لإضافة احد هته الأيقونات  تابع الشرح التالي :

1- الذهاب إلى لوحة مدون .

2- انقر على تخطيط > إضافة أداة  إختر اضافة اداة  HTML أو جافا سكريبت .
قم بنسخ ولصق كود الأداة المراد إضافتها وأنقر على حفظ لتجد ان الاداة قد تمت اضافتها.

الأداة رقم الأولى :

كود الأداة :

<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="Enter-YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/Www.HamidShahzad.Com-RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Get Free Updates Via Email" href="Enter-YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/Www.HamidShahzad.Com-RSS-Email-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> <!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="Enter-YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/Www.HamidShahzad.Com-Facebook-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="Enter-YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/Www.HamidShahzad.Com-Twitter-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="Enter-YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/Www.HamidShahzad.Com-Google-Plus-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="Enter-YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/Www.HamidShahzad.Com-Pinterest-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/>

الأداة الثانية :

كود الأداة :

<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="Enter-YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S2-Www.HamidShahzad.Com-RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Get Free Updates Via Email" href="Enter-YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S2-Www.HamidShahzad.Com-Email-RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> <!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="Enter-YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S2-Www.HamidShahzad.Com-Facebook-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="Enter-YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S2-Www.HamidShahzad.Com-Twitter-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="Enter-YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S2-Www.HamidShahzad.Com-Google-Plus-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="Enter-YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S2-Www.HamidShahzad.Com-Pinterest-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/>

الأداة الثالثة :

كود الأداة :

<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="Enter-YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S3-Www.HamidShahzad.Com-RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Subscribe on Youtube" href="Enter-YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S3-Www.HamidShahzad.Com-Youtube-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> <!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="Enter-YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S3-Www.HamidShahzad.Com-Facebook-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="Enter-YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S3-Www.HamidShahzad.Com-Twitter-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="Enter-YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S3-Www.HamidShahzad.Com-Google-Plus-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="Enter-YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S3-Www.HamidShahzad.Com-Pinterest-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/>

الأداة الرابعة :

كود الأداة :

<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="Enter-YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S4-Www.HamidShahzad.Com-RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Get Free Updates Via Email" href="Enter-YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S4-Www.HamidShahzad.Com-Email-RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> <!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="Enter-YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S4-Www.HamidShahzad.Com-Facebook-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="Enter-YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S4-Www.HamidShahzad.Com-Twitter-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="Enter-YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S4-Www.HamidShahzad.Com-Google-Plus-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="Enter-YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S4-Www.HamidShahzad.Com-Pinterest-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/>

الأداة الخامسة : 

كود الأداة : <style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="Enter-YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S5-Www.HamidShahzad.Com-RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Subscribe on Youtube" href="Enter-YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S5-Www.HamidShahzad.Com-Youtube-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> <!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="Enter-YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S5-Www.HamidShahzad.Com-Facebook-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="Enter-YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S5-Www.HamidShahzad.Com-Twitter-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="Enter-YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S5-Www.HamidShahzad.Com-Google-Plus-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="Enter-YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S5-Www.HamidShahzad.Com-Pinterest-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br

كود التبادل الإعلاني

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

 اقدم لكم اليوم 

شرح طريقة اضافة 

 كود التبادل الاعلانى لمدونات بلوجر بأسهل الطرق

إضافة بنرات إعلانية بمقاس 125x125 بيكسيل

حيث ستقوم بتبادل غعلاني مع أحد المدونات التي اخترت

أن تضع إعلاناتها بمدونتك

وكذللك أصحاب المدونة الأخرى التي اخترتها سيضمون إعلانك عندكم

وهذا مايعنى بالتبادل الإعلاني

الذي سيجعل الزوار ينتقلون بإعلاناتكم

حتى يجدوا مبتغاهم حتى ولو اختلفت مواضيع المدونات

كفى كلاما وهيا إلى الشرح السهل جدا جدا

صورة الإضافة

 

لمعاينة الإضافة ستجدها يمدونتي

شرح الإضافة

فما عليك إلا بالتوجه إلى التبويب 

  التخطيط | عناصر الصفحة 

  إختر إضافة أداة HTML/JavaScript  

وألصق الكود التالي

<div align="center">
<table border="0"  cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff">
<tbody><tr>

<td><center><a href="رابط المعلن" rel="nofollow"><img border="0" alt="وصف الإعلان" width="125" src="رابط صورة الإعلان" title="نص الإعلان" height="125" /></a></center></td>

<td><center><a href="رابط المعلن" rel="nofollow"><img border="0" alt="وصف الإعلان" width="125" src="رابط صورة الإعلان" title="نص الإعلان" height="125" /></a></center></td>
</tr>
<tr>

<td><center><a href="رابط المعلن" rel="nofollow"><img border="0" alt="وصف الإعلان" width="125" src="رابط صورة الإعلان" title="نص الإعلان" height="125" /></a></center></td>

<td><center><a href="رابط المعلن" rel="nofollow"><img border="0" alt="وصف الإعلان" width="125" src="رابط صورة الإعلان" title="نص الإعلان" height="125" /></a></center></td>
</tr>

</tbody></table>

</div>

تهانينا تم عمل الإعلانات ماعليك إلى ان تعدل على الكود

تعليقاتكم تهمنا ولأي استفسار أنا موجود

المصدر
المدونة التعليمية للحاسوب

وضع خلاصة لمدونتك

Make Rss Feeds for Your Blog

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

إنهارده لأحلى زوار مدونه أيقون وبيس

وبعد غيآب 3 شهور عن وضع جديد الدروس والأدوات

وبمنآسبه إنكم وحشتونى وكدهون ^_^

هاقدملكم طريقه عمل

 {روابط الخلاصات,التغذيه,Feeds ,Rss }

إستنى إستنى كدا ماتخفش دول كلهم حآجه واحده ع فكره :)

إيه هى الخلاصات بقى وأهميتها إيه ؟

الخلاصات هى خدمه شركه جوجل بتقدمهآلك مجانا لموقعك أو مدونتك أو غيره وهى مهمه جدا لأنها بتتيح لزوار موقعك أو مدونتك الإشتراك فيها بحيث يوصلهم  جديد مواضيعك وتدويناتك وبكده يقدروا يعرفوا يقرأو المواضيع

الجديده اللى إنت بتنشرها فى مدونتك من غير مايدخلوها

أيون سامعه واحد هنآك بيقول زى الجرنآن يعنى

 أيون بالظبط زى الجرنان ^_^

كيف أصنع روابط الخلاصات لمدونتى فى بلوجر؟

الإجآبه سهله إتبع الخطوآت التآليه :

1. إذهب إلى هذا الرآبط  feedburner
2.  ثم إكتب بريدك الإلكترونى وكلمه السر وأضغط sign in

•  ثم أكتب  الدومين الخآص بمدونتك وأضغط next

•  ستظهر لك هذه الصفحه علم على الدائره الثآنيه وأضغط next

ستظهر لك هذه الصفحه وبهآ إسم مدونتك

1. عنوان الخلاصات الخاص بك كما فى الصوره {يمكنك أن تقوم بحفظه} 
2. ثم إضغط next

هنا ستظهر لك هذه الصفحه

1. هذا رآبط الخلاصات الخاص بمدونتك 
2. إضغط  skip directly to feed management

ستجد نفسك قد دخلت حسآب الخلاصات الخاص بمدونتك

1. إضغط publicize
2. ثم إضغط email subscriptions

• الآن سيظهر أمآمك هذا الزر activate إضغط عليه

• ستظهر أمامك صفحه بها هذا المربع إنسخ الكود اللذى بدآخله

الآن إذهب لمدونتك لتضع الكود بهآ 

طريقه وضع الكود بمدونتك

• إذهب إلى لوحه تحكم مدونتك
• ثم إختر تخطيط ثم إضافه أداه
• ثم إختر HtmlJavaScript
• ثم قم بوضع كود اللذى قمت بنسخه
• ثم إضغط حفظ

وستجد الأداه قد ظهرت على صفحتك بهذا الشكل 

ومبروك تمت إضافه قائمتك البريديه اللتى تتيح لزوار إشتراك فى القائمه البريديه الخاصه بمدونتك

- See more at: http://iconwpic.blogspot.com/2013/09/make-rss-feeds-for-your-blog.html#sthash.oeiZuvsJ.dpuf