ايقونات المواقع الاجتماعية بلغة 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(http://2.bp.blogspot.com/-xUQ9cbmG_is/UqeEhTFUB6I/AAAAAAAAAq4/0bljkJtD-SE/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(http://2.bp.blogspot.com/-xUQ9cbmG_is/UqeEhTFUB6I/AAAAAAAAAq4/0bljkJtD-SE/s1600/facebook-a.png) no-repeat -0px -0px;}.reseausocial li a.twitter {background: #9ff4f1 url(http://3.bp.blogspot.com/-XarwkkSqVEQ/UqeEiRiz_5I/AAAAAAAAArQ/lFJ4XemLRrQ/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(http://3.bp.blogspot.com/-XarwkkSqVEQ/UqeEiRiz_5I/AAAAAAAAArQ/lFJ4XemLRrQ/s1600/twitter-a.png) no-repeat -0px -0px;}.reseausocial li a.google-p {background:#eb6e6e url(http://4.bp.blogspot.com/-tKAY-AhWiBI/UqeEhhvVJgI/AAAAAAAAArA/hrjcLTKxk4Y/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(http://4.bp.blogspot.com/-tKAY-AhWiBI/UqeEhhvVJgI/AAAAAAAAArA/hrjcLTKxk4Y/s1600/googleplus-a.png) no-repeat -0px -0px;}.reseausocial li a.rss {background:#ecb566 url(http://1.bp.blogspot.com/-b0FRzRxDLcI/UqeEhhNK6PI/AAAAAAAAAq8/iWGzgU5GgrU/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(http://1.bp.blogspot.com/-b0FRzRxDLcI/UqeEhhNK6PI/AAAAAAAAAq8/iWGzgU5GgrU/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>
وانقر على حفظ .
كانت هده كلمات سريعة اتمنى ان تنال إضافة اعجابك ولتنسى الدعاء لي بالتوفيق .
ليست هناك تعليقات:
إرسال تعليق