جديد: ايقونات المشاركات بخاصيه .css3

07-09-2012, 05:25 PM

REDA

مدون مميز

تاريخ التسجيل: Apr 2012

المشاركات: 441

جديد: ايقونات المشاركات بخاصيه .css3

أنا : REDA

سجل معنا لتتمتع بهذه الخاصية

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

اضافه ايقونات جديدة للمشاركات الاجتماعيه بخاصيه css3

اكثر من رائعة المتحركة

للمعاينه

كيفيه اضافه هذة الخاصية:

نذهب الى ..تصميم _عناصر الصفحه - اداة HTML/JavaScript

ثم نضيف الاكواد التاليه :

الشكل الاول :

كود بلغة HTML:

<style>p#hb_socialicons img {
 /* Spinning Social Icons Widget By HelperBlogger */
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
 
p#hb_socialicons img:hover {
    -moz-transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
}
 
/* Spinning Social Icons Widget By HelperBlogger */
</style>  
 
 
 
<center><p id="hb_socialicons">
    <a href="http://www.facebook.com/btsnts/">
<img border="0" src="http://3.bp.blogspot.com/-ck0bnvgk5uI/T_fxhb7Ay-I/AAAAAAAACRY/yZR4hu8omnE/s1600/helperblogger.com-facebook.png" /></a>
    <a href="http://www.twitter.com/helperblogger/">
<img border="0" src="http://4.bp.blogspot.com/-P_NkdPIsSQQ/T_fxjUKUF2I/AAAAAAAACRs/KXfA3LnHej8/s1600/helperblogger.com-twitter.png" /></a>
    <a href="https://plus.google.com/u/0/106527290580119996124">
<img border="0" src="http://1.bp.blogspot.com/-uSOHwlVeA68/T_fxiHgtoJI/AAAAAAAACRc/-UZ8ujxc7Ic/s1600/helperblogger.com-google_plus.png" /></a>
    <a href="http://www.feeds.feedburner.com/hblogger/">
<img border="0" src="http://2.bp.blogspot.com/-2sRpqFhID4A/T_fxipoh7DI/AAAAAAAACRo/kn_qiQKBT-o/s1600/helperblogger.com-rss.png" /></a>
    <a href="http://www.youtube.com/helperblogger1/">
<img border="0" src="http://3.bp.blogspot.com/-2wY3FQCZgoM/T_fxkMsCqtI/AAAAAAAACR4/jsNUZdVcCCg/s1600/helperblogger.com-youtube.png" /></a>
</p></center>

الشكل التانى :

كود بلغة HTML:

<style>p#hb_socialicons img {
 /* Spinning Social Icons Widget By HelperBlogger */
    -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;
}
 
p#hb_socialicons img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
 
/* Spinning Social Icons Widget By HelperBlogger */
</style>  
 
 
 
<center><p id="hb_socialicons">
    <a href="http://www.facebook.com/btsnts/">
<img border="0" src="http://3.bp.blogspot.com/-ck0bnvgk5uI/T_fxhb7Ay-I/AAAAAAAACRY/yZR4hu8omnE/s1600/helperblogger.com-facebook.png" /></a>
    <a href="http://www.twitter.com/helperblogger/">
<img border="0" src="http://4.bp.blogspot.com/-P_NkdPIsSQQ/T_fxjUKUF2I/AAAAAAAACRs/KXfA3LnHej8/s1600/helperblogger.com-twitter.png" /></a>
    <a href="https://plus.google.com/u/0/106527290580119996124">
<img border="0" src="http://1.bp.blogspot.com/-uSOHwlVeA68/T_fxiHgtoJI/AAAAAAAACRc/-UZ8ujxc7Ic/s1600/helperblogger.com-google_plus.png" /></a>
    <a href="http://www.feeds.feedburner.com/hblogger/">
<img border="0" src="http://2.bp.blogspot.com/-2sRpqFhID4A/T_fxipoh7DI/AAAAAAAACRo/kn_qiQKBT-o/s1600/helperblogger.com-rss.png" /></a>
    <a href="http://www.youtube.com/helperblogger1/">
<img border="0" src="http://3.bp.blogspot.com/-2wY3FQCZgoM/T_fxkMsCqtI/AAAAAAAACR4/jsNUZdVcCCg/s1600/helperblogger.com-youtube.png" /></a>
</p></center>

الشكل التالت :

كود بلغة HTML:

<style>p#hb_socialicons img {
 /* Spinning Social Icons Widget By HelperBlogger */
    -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;
}
 
p#hb_socialicons img:hover {
    -moz-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    transform: rotate(-360deg);
}
 
/* Spinning Social Icons Widget By HelperBlogger */
</style>  
 
 
 
<center><p id="hb_socialicons">
    <a href="http://www.facebook.com/btsnts/">
<img border="0" src="http://3.bp.blogspot.com/-ck0bnvgk5uI/T_fxhb7Ay-I/AAAAAAAACRY/yZR4hu8omnE/s1600/helperblogger.com-facebook.png" /></a>
    <a href="http://www.twitter.com/helperblogger/">
<img border="0" src="http://4.bp.blogspot.com/-P_NkdPIsSQQ/T_fxjUKUF2I/AAAAAAAACRs/KXfA3LnHej8/s1600/helperblogger.com-twitter.png" /></a>
    <a href="https://plus.google.com/u/0/106527290580119996124">
<img border="0" src="http://1.bp.blogspot.com/-uSOHwlVeA68/T_fxiHgtoJI/AAAAAAAACRc/-UZ8ujxc7Ic/s1600/helperblogger.com-google_plus.png" /></a>
    <a href="http://www.feeds.feedburner.com/hblogger/">
<img border="0" src="http://2.bp.blogspot.com/-2sRpqFhID4A/T_fxipoh7DI/AAAAAAAACRo/kn_qiQKBT-o/s1600/helperblogger.com-rss.png" /></a>
    <a href="http://www.youtube.com/helperblogger1/">
<img border="0" src="http://3.bp.blogspot.com/-2wY3FQCZgoM/T_fxkMsCqtI/AAAAAAAACR4/jsNUZdVcCCg/s1600/helperblogger.com-youtube.png" /></a>
</p></center>

ثم غير الروابط الى الروابط الخاصة بك

__________________

من مواضيع REDA

07-09-2012, 07:18 PM	#2
admin مدير عام تاريخ التسجيل: Apr 2012 الدولة: جده المشاركات: 2,846	رد: جديد: ايقونات المشاركات بخاصيه .css3 أنا : admin سجل معنا لتتمتع بهذه الخاصية رائع أخي حركة مبدعة بانتظار جديدك __________________ من مواضيع admin تحميل قالب / استايل بلوجر Games Inc المعرب تحميل قالب / استايل بلوجر Simple View المعرب أعتذر لعدم تلبيتي بعض طلبات التعديل والتعريب توضيح بخصوص عدم اشتغال بعض الخطوط بالمعهد دورة الربح من كليك بانك ClickBank ~ الحلقة 4 : أدوات إيجاد أفضل الكلمات الدلالية

07-09-2012, 09:21 PM	#3
REDA مدون مميز تاريخ التسجيل: Apr 2012 المشاركات: 441	رد: جديد: ايقونات المشاركات بخاصيه .css3 أنا : REDA سجل معنا لتتمتع بهذه الخاصية شكرا لك اخى عثمان...مرورك رائع :) __________________ من مواضيع REDA قالب جميل Bloggerpress بخصوص ارشيف مدونة بلوجر كيفيه وضع صورة رمزيه فى تعليقات بلوجر مارايكم فى هذا القالب الاحترافى بامانة !! قالب Black Gallery Press لعرض القوالب ...روعه

07-16-2012, 12:31 AM	#4
mint12 مدون جديد تاريخ التسجيل: Jul 2012 المشاركات: 67	رد: جديد: ايقونات المشاركات بخاصيه .css3 أنا : mint12 سجل معنا لتتمتع بهذه الخاصية إضافة رائعة جدآ __________________ من مواضيع mint12 عـــالم الــبيئة...ان كنت تظن مجرد مدونة ..فكر من جديد!! ...عـــالم الــبيئة...تبادل الاعلانات مع المدونات- اعلان نصي او اعلان بصورة . موقع لإنشاء محطة راديو او بث فيديو على الانترنت موقع رائع يضم ٱجمل الخلفيات الرائعة تزين بها مكتبك تجعله في أبهى حلة تم شراء دومين للمدونة

مواقع النشر (المفضلة)

« الموضوع السابق | الموضوع التالي »

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)

أدوات الموضوع
مشاهدة صفحة طباعة الموضوع أرسل هذا الموضوع إلى صديق
انواع عرض الموضوع
العرض العادي الانتقال إلى العرض المتطور الانتقال إلى العرض الشجري

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة لا تستطيع الرد على المواضيع لا تستطيع إرفاق ملفات لا تستطيع تعديل مشاركاتك BB code is متاحة الابتسامات متاحة كود [IMG] متاحة كود HTML معطلة قوانين المنتدى

الانتقال السريع

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
حصريا ايقونات Social-3d Blogger بشكل جديد مثل عالم العرب	alam3arbcom	إضافات وأدوات بلوجر	0	05-16-2013 01:10 PM
المشاركات الشائعة بشكل أنيق و جديد 2013	السيد ابو جبل	إضافات وأدوات بلوجر	12	05-09-2013 08:42 AM
موقع يقدم اكواد ايقونات الفيس بوك	mywaleed39	مقتطفات تدوينية	1	05-06-2013 12:17 PM
جديد أضف لوحة تحكم مختصرة كاملة إلى مدونتك مخفية عن الزوار بشكل جديد	مى محمد	إضافات وأدوات بلوجر	0	09-22-2012 10:08 AM
كيف أرفع عدد المشاركات التي تظهر في الصفحة الرئيسية و المشاركات الشائعة؟	مدونتي	طلبات الدعم الفني	3	08-30-2012 03:05 PM

جديد: ايقونات المشاركات بخاصيه .css3

إضافات وأدوات بلوجر