بسم الله الرحمن الرحيم
والصلاة والسلام على نبينا الكريم محمد عليه وعلى اله افضل الصلاة واتم التسليم
السلام عليكم ورحمة الله وبركاته
والصلاة والسلام على نبينا الكريم محمد عليه وعلى اله افضل الصلاة واتم التسليم
السلام عليكم ورحمة الله وبركاته
احضرت لكم اليوم إضافة أكثر من رائعة ان شاء الله تعجبكم
و هذه الاضافة هى أزرار المواقع الإجتماعية متحركه بتأثير css3
و هذه الاضافة هى أزرار المواقع الإجتماعية متحركه بتأثير css3
طريقة التركيب :
- ادخل مدونتك .
- قم باضافة هذا الكود فى اداة جديده HTML/JavaScript .
<div id="social"><ul class="social-sidebar"><li><a href="http://www.facebook.com/EgyGeniusOfficial" target="_blank " class="fa" title="صفحتنا على الفيس بوك"></a></li><li><a href="http://www.twitter.com/thelover500" target="_blank " class="tw" title="صفحتنا على تويتر">twitter</a></li><li><a href="http://www.youtube.com/geeksamu" target="_blank " class="yo" title="قناتنا على اليوتيوب">youtube</a></li></ul></div><style>#social .social-sidebar li a, .social-sidebar li a:visited { width: 40px; height: 40px; display: block; text-indent: -9999px; overflow: hidden; text-decoration: none; opacity: 0.2;}#social {}#social .social-sidebar { margin-top: 10px; float: left; margin-left: 13px; margin-bottom: 11px;}#social .social-sidebar li { float: left; list-style: none; width: 69px; height: 68px; margin: 0 13px;}#social .social-sidebar li .tw { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLn4S3ZxV6tLOYORcX2X_aB-zSrVtGDrg2v7oSd86QW8QE88B3zH4EDv4_L6ZuzAVZq5TW11xh08UOTB1KTIJ04UBGJFvtYG-7U7M10wLGWZTd9TaY2HazaVhfaroYm1nC7Gge1kwpHpQ7/s1600/twt.png); opacity: 1; width: 69px; height: 68px; -webkit-transition: all 1.05s ease; -moz-transition: all 1.05s ease; -o-transition: all 1.05s ease; transition: all 1.05s ease;}#social .social-sidebar li .tw:hover {-webkit-transition: all 0.55s ease;-moz-transition: all 0.55s ease;-o-transition: all 0.55s ease;transition: all 0.55s ease;-webkit-transition: all 0.55s ease; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg);background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpLJ_4aFzZwApx742ETOP9mjnjQwyki1QRC3Z1Hyl-KTn95CPvd6Qp9twwnJRn6f2sj-HAM9ho29eTp7HbGOIuNnozbmOTbRJHkRoD4vDJyLwVN-M31DwzoLy80jcyAm8qT_fhSKKIw4Fq/s1600/tw-hover.png);}#social .social-sidebar li .fa { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8aKJWHqamvVgn3cGfbftil5pfqQnLUvKxOLT0L1mUQZ94ZwvE2rJGiFdGO_F0mqCscN-xepocYqHIMrwTg2QQ7q2TxPNIo-mx7p7lc76rfO3vToBv8gufEd1L9569GzMxbdXX6dCcYIrt/s1600/fcb.png); opacity: 1; width: 69px; height: 68px; -webkit-transition: all 1.05s ease; -moz-transition: all 1.05s ease; -o-transition: all 1.05s ease; transition: all 1.05s ease;}#social .social-sidebar li .fa:hover {-webkit-transition: all 0.55s ease; -moz-transition: all 0.55s ease; -o-transition: all 0.55s ease; transition: all 0.55s ease; -webkit-transition: all 0.55s ease; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg);background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIpu3sKU5xrGoeibETTaHr3CRwaY5-YmpUP5RdOBQ6Y5VlvZXS09YDaoHwZwGIcnoA8SGAkAz1y5GT8YWLCY6o0GAktP5hQXg8cXzcVSDLpW8rLz5P6jgXjX0hVCi7Jir4I43pNoBGWcef/s1600/fb-hover.png);}#social .social-sidebar li .yo { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPFgpY28_wDknKSilwTOfm79TaCJ7m4Dv5uvkTu17URpt_WrX06bkUVZN3bckhmeIEjh0J3b4D5nQMdqsFEK4naek8BX8ClO4lF_4oIpTwUHU8KOSyUO8y7bd3hUZ7iGQvUMBZnWtZHQY6/s1600/yo.png); width: 69px; height: 68px; margin-top: 4px; opacity: 1; -webkit-transition: all 1.05s ease; -moz-transition: all 1.05s ease; -o-transition: all 1.05s ease; transition: all 1.05s ease;}#social .social-sidebar li .yo:hover {-webkit-transition: all 0.55s ease;-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-o-transform: rotate(360deg);-ms-transform: rotate(360deg);background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNMM0Y4r-1kJnVHZ4cEsIwl18es90B05inpBdYn6bNV8fsrNdAtNvJzp7tD3f-DZmCtIBV7hdR2NNuJ9B0ph0__yM6aF0vDnkTK20QFZQY5WEV-ofF-qOuXKd82-EDU3aNOUi4wVBOLiYM/s1600/yo-hover.png);}</style>
قم بتغيير
EgyGeniusOfficial بمعرف فيسبوك الخاص بصفحتك
thelover500 بتويتر الخاص بك
geeksamu بقناتك على يوتيوب
الان احفظ الاداة و استمتع بتلك الاضافة الجميلة
المصدر : خبراء الحاسوب
مدونة : ايجي جينيس
بقلم منير العراقي
أنا من العراق، احب أن أضع كل ما أعرف من معلومات حول الحاسوب ولاأبخل به عليكم، وخطرت لي فكرة عمل مدونة تضم كل المجالات التعليمية للكومبيوتر التي أستطيع إفادتكم بها، فأرجوا ان لاتبخلوا علي أيضا بمتابعتكم لمواضيعي كما ان تعليقاتكم تهمني وتزيد من عطائي لكم إخوتي الكرام وأي استفسار ان موجود وشكرا
الرطبة اون لاين
إرسال تعليق