ايقونات المواقع الاجتماعية بلغة CSS

شارك :
ايقونات المواقع الاجتماعية بلغة CSS  
السلام  عليكم ورحمة الله وبركاته , هده أول اضافة أنشرها  لهده السنة 2014 التي اتمنى ان يتحقق لك ما ترجوه فيها , ان شاء الله لك ولسائر المسلمين , الاضافة رائعة جدا وتضفي لمسة جميلة على مدونتك  تتميز بخفتها وسرعة إضافته الى مدونتك لن تتحتاج الى التعديل على القالب فقد تم الجمع بين لغة Css و Javascipt في كود واحد .
لمعاينة الاضافة وكيفية عملها أنظر للصورة أٍسفل :



                                     ++++++++++++++++++++++++++++
الان لنذهب لطريقة اضافة الى قالب مدونتك .
من لوحة تحكم مدونتك ~انقر على التخطيط~ ثم اضافة اداة جديدة في اي مكان تريده لكن من الاحسن ان تكون بأعلى السلايدر في اليمين او اليسار~ انسخ الكود التالي والصقه في نافذة المعنونة بــJavaScript 
<h2 class='title'>تابعنا على شبكاتنا الإجتماعية</h2>
<div class='widget-content'><div><style>.reseausocial {margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.reseausocial ul li{list-style:none;border-bottom:none;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.reseausocial li a {margin:5px 5px 0px 5px;padding:0px 0px 0px 0px;width:60px;height:60px;float:left;text-indent:-99999px;background: #191919;border:solid 1px #222121;-moz-border-radius-topleft: 5px;-moz-border-radius-topright:5px;-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;}.reseausocial li a.facebook {background: #28a7f0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg94GW68sehlY1kkWqMT712l72zMkOdyCBuTOFSY1ieSSian3zr1CGVPrnSUGRBYLBm_EUxhm_pdMVEbfQy_6n_LuCJEM53e8aOjuf6mTW4HSI8JCqP32StjYufsMGsFbmNQEN3bOD3HAE/s1600/facebook-a.png) no-repeat -0px -88px;-webkit-transition:All 0.3s ease-out;-moz-transition:All 0.3s ease-out;-o-transition:All 0.3s ease-out;}.reseausocial li a.facebook:hover {background: #28a7f0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg94GW68sehlY1kkWqMT712l72zMkOdyCBuTOFSY1ieSSian3zr1CGVPrnSUGRBYLBm_EUxhm_pdMVEbfQy_6n_LuCJEM53e8aOjuf6mTW4HSI8JCqP32StjYufsMGsFbmNQEN3bOD3HAE/s1600/facebook-a.png) no-repeat -0px -0px;}.reseausocial li a.twitter {background: #9ff4f1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh52J-Jc7RaJ5ksAG142ZwKuKGR_PLpGaxMiktSHC2SwqWxKxQYOZtuZUrFYDGW02-DXBtIB0jfUI8J23FLjjNMSRLQi2uPAHcNOh24Tr5AQUlhMX3sCfEbUVJLCOOCUlBNGEhuEnzIjNw/s1600/twitter-a.png) no-repeat -0px -88px;-webkit-transition:All 0.3s ease-out;-moz-transition:All 0.3s ease-out;-o-transition:All 0.3s ease-out;}.reseausocial li a.twitter:hover {background: #9ff4f1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh52J-Jc7RaJ5ksAG142ZwKuKGR_PLpGaxMiktSHC2SwqWxKxQYOZtuZUrFYDGW02-DXBtIB0jfUI8J23FLjjNMSRLQi2uPAHcNOh24Tr5AQUlhMX3sCfEbUVJLCOOCUlBNGEhuEnzIjNw/s1600/twitter-a.png) no-repeat -0px -0px;}.reseausocial li a.google-p {background:#eb6e6e url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7CDEfVh2Xf6snJaYEMTuEPOOoilaqcvnI5Gy5dv80H2JB87HJjpKYUQDaZ1kjnCWtHeKxH7R4yk2y3TvjClvI6ipgaTQ5HUGJtai6ITYBPEZ7K7i_EIE64QnCB8ExzmuKR55zAzXZgq0/s1600/googleplus-a.png) no-repeat -0px -88px;-webkit-transition:All 0.3s ease-out;-moz-transition:All 0.3s ease-out;-o-transition:All 0.3s ease-out;}.reseausocial li a.google-p:hover {background: #eb6e6e url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7CDEfVh2Xf6snJaYEMTuEPOOoilaqcvnI5Gy5dv80H2JB87HJjpKYUQDaZ1kjnCWtHeKxH7R4yk2y3TvjClvI6ipgaTQ5HUGJtai6ITYBPEZ7K7i_EIE64QnCB8ExzmuKR55zAzXZgq0/s1600/googleplus-a.png) no-repeat -0px -0px;}.reseausocial li a.rss {background:#ecb566 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCtHVohSsGBjPp469sGKAgwrmHP7MLcMpNGU39w_3YoIWFx4HvlFQ6uLAaqUWCAE7RS6NOE5oUwxtybAXty0bOG2FXLONN_YBtW6VOegQFbz7xU79liRx64gj5cT6RCiSMAwe0-wjYZ7I/s1600/rss-a.png) no-repeat -0px -88px;-webkit-transition:All 0.3s ease-out;-moz-transition:All 0.3s ease-out;-o-transition:All 0.3s ease-out;}.reseausocial li a.rss:hover {background: #ecb566 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCtHVohSsGBjPp469sGKAgwrmHP7MLcMpNGU39w_3YoIWFx4HvlFQ6uLAaqUWCAE7RS6NOE5oUwxtybAXty0bOG2FXLONN_YBtW6VOegQFbz7xU79liRx64gj5cT6RCiSMAwe0-wjYZ7I/s1600/rss-a.png) no-repeat -0px -0px;}</style>


<div align="center" class='reseausocial'><ul><li><a class='rss' href='http://feedburner.google.com/fb/a/mailverify?uri=blogspot/usihu' target='_blank'>Rss</a></li><li>
<a class='google-p' href='https://plus.google.com/u/0/102572530628729059335/posts' target='_blank'>Google Plus</a></li><li><a class='twitter' href='https://twitter.com/kurtlarjamaa' target='_blank'>Twitter</a></li><li><a class='facebook' href='https://www.facebook.com/arabicash2-developer/1411113779120889?ref=hl' target='_blank'>Facebook</a></li></ul></div></div></div>
وانقر على حفظ . 

كانت هده كلمات سريعة اتمنى ان تنال  إضافة اعجابك ولتنسى الدعاء لي بالتوفيق .
شارك :

إضافات بلوجر

ايقونات البلوقر

ما رأيك بالموضوع !

5 comments:

  1. إذا كنت تريد تصميم موقع الويب الخاص بك استجابة لتعمل بشكل جيد، وكنت بحاجة لبنائه بحيث يمكن تحميل وظيفة بسرعة على مختلف أجهزة تصفح الإنترنت.

    تصميم مواقع

    ردحذف
  2. شكراً لك علي هذا المجهود الرائع و أتمني لك مزيداً من التوفيق
    http://www.woldcho.blogspot.com

    ردحذف
  3. فيه موقع ممتاز بديل عن ادسنس جوجل لكسب الاموال من موقعك او مدونتك البرنامج اهو للي عايز يشترك فيه بجد جميل وموثوق كمان واي حد يقدر يشترك فيه علي طول حتي لو لسه عامل مدونتك امبارح مش زي جوجل ادسنس لازم تلت شهور علي الاقل عشان تقدر تشترك فيه http://www.revenuehits.com/lps/pubref/?ref=@RH@SxoBnJ0U46M

    ردحذف
  4. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
  5. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف

أكتب تعليقك هنا وشاركنا برأيك .