ايقونات المواقع الاجتماعية بلغة 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/AVvXsEi6T_U6T3W-UP9NBoYHYmnWvewHeRVuKTdiPZf_3zR8Capo9Ryi0AKPNe2hNsfctRUxrsjKKp_CP6X3q0dOaZPQuvzJilBMc7T2E8_YpsxeS15Tx1PjRwu7lpdFZK0FWruBGkFiOJ66FcE/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/AVvXsEi6T_U6T3W-UP9NBoYHYmnWvewHeRVuKTdiPZf_3zR8Capo9Ryi0AKPNe2hNsfctRUxrsjKKp_CP6X3q0dOaZPQuvzJilBMc7T2E8_YpsxeS15Tx1PjRwu7lpdFZK0FWruBGkFiOJ66FcE/s1600/facebook-a.png) no-repeat -0px -0px;}.reseausocial li a.twitter {background: #9ff4f1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJXQM0k7uUQT1AFUzCCEI2pW0kltjUojsXI5NFqZdyqrJqhNWp2fPH9Pspw0NKzGOg50PSZ1xbkPtT8DKlsCqhHPm7kNpkF3IJiD3BDSHJbzFbmL2pjnMLtyyVKI5If6WXaFVN5sJMWv0/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/AVvXsEgJXQM0k7uUQT1AFUzCCEI2pW0kltjUojsXI5NFqZdyqrJqhNWp2fPH9Pspw0NKzGOg50PSZ1xbkPtT8DKlsCqhHPm7kNpkF3IJiD3BDSHJbzFbmL2pjnMLtyyVKI5If6WXaFVN5sJMWv0/s1600/twitter-a.png) no-repeat -0px -0px;}.reseausocial li a.google-p {background:#eb6e6e url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF3XGUSUOK6JJftXgQt4yAKESZ_1d3vBMz3hGmpey4z_ORE9r2O46dc8t2jCwG9mwiiktEAayGmg49A_lssUj-1Z4D4WTTnaMm7B0rgHnlWw2M6q4XDhy-cnxtLC7umLORiOP3dl2yVy0/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/AVvXsEhF3XGUSUOK6JJftXgQt4yAKESZ_1d3vBMz3hGmpey4z_ORE9r2O46dc8t2jCwG9mwiiktEAayGmg49A_lssUj-1Z4D4WTTnaMm7B0rgHnlWw2M6q4XDhy-cnxtLC7umLORiOP3dl2yVy0/s1600/googleplus-a.png) no-repeat -0px -0px;}.reseausocial li a.rss {background:#ecb566 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoNQ-snO5pBlOOQwzbE4KC1eBqsZyEV5WVH6-JZ_p4PqH_ZkJzX5KUfe8HovxJ_y7so4xMFge4EASxy4Bi4InQ_X2TqvzrvojJPcDRBowAh8tqTL6L044Bwlj9UVFhpcCeBVmR8-uxTp0/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/AVvXsEjoNQ-snO5pBlOOQwzbE4KC1eBqsZyEV5WVH6-JZ_p4PqH_ZkJzX5KUfe8HovxJ_y7so4xMFge4EASxy4Bi4InQ_X2TqvzrvojJPcDRBowAh8tqTL6L044Bwlj9UVFhpcCeBVmR8-uxTp0/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>
وانقر على حفظ .
كانت هده كلمات سريعة اتمنى ان تنال إضافة اعجابك ولتنسى الدعاء لي بالتوفيق .