إضافة تابعنا على المواقع الاجتماعية بشكل عائم للمدونة

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

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

معاينة الأداة

لتطبيق الأداة نقوم بالتوجه إلى لوحة التحكم ثم التخطيط ثم إضافة أداة ثم HTML / javascript ثم نقوم بنسخ هذا الكود بعد تغير ما

باللون الأحمر إلى صفحتكم على الفايسبوك

باللون الأخضر إلى صفحتكم على التويتر

باللون الأزرق إلى قناتكم على اليوتيوب

<li><a href="http://www.twitter.com/pikpok7" target="_blank " class="tw" title="صفحتنا على تويتر">twitter</a></li>

<li><a href="http://www.youtube.com/user/pikpokmoho" target="_blank " class="yo" title="قناتنا على اليوتيوب">youtube</a></li>

</ul>

</div>

<style>

#social .social-sidebar li a, .social-sidebar li a:visited { width: 30px; height: 30px; 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: 40px; height: 40px; margin: 0 13px;}

#social .social-sidebar li .tw { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgr17UhnDELGCq3pAVPOuonoR6RGJp9_G1n48PK1jAIwOIY-GdIQ7-pZIu2YikWdjA-PytB09OsVQX7F-qk58SUOWjW7LCzJ97PoX5Eegx35X_PEFBWxsVNSvQgAJrn3p4TisEGpFMnSrf/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/AVvXsEhjdLvkXrC3_ICFBIQxT8vplQeCXkEJGDHaD2jDienyPUedqjyGzqQhNdekh3MgUesk2DobvL6RkN8O5dbOgLUSPncIcrmTdiWq3Kb0MMO-X2aQ8cFCtL-illGmO5buAkb5rzRmEMPxMmHW/s1600/tw-hover.png);

}

#social .social-sidebar li .fa { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEvlV1lZwXyqkQU7jXe_2bJeyY-syc8U0wxy6yWvCNiFxQoqhRIla7ODHiHHH9pDLqqR2LPNxpuL7CjKA0U2VsfMcmvIGHhEO-1xl1xgLPMf82RwFFCybHPh2_doc1J3K4C-t7NGSds5RC/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/AVvXsEjdZb_1Z1ntHmr6NfjjIsQUADFZ423GMlM90ZB4_QZhpT0oR0CypLzHVmY76Q8uobIUUGirS2zx-qPyj16oTmMw4uSAIr5oHhCVx419lkqfWu2BBtkIuOw5wcV3Yl2beT7b4zGDGFdpr4RS/s1600/fb-hover.png);

}

#social .social-sidebar li .yo { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbEmRjAzR0cfgCcVKJ-VDBrIkEfkFF1ibFUtCzl8F7OdwRJBo-uM9ncxEW7qDhQS6fpjJ5LdAYc2eEWxscaZAFpHi_xc8m_PXGSsIbo_GD9m93aZelBp_lNfhyphenhyphen6EID6VTbIw70rRiudUq5/s1600/yo.png); width: 68px; height: 69px; 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/AVvXsEhG-P3deDkJ9b6u-YJdSlTBhaSjRFKQpyBtgs6Ty6LRcMAwp5qHzBAnifZffiNnWHia4ka3o1gzu6u1ZA7oqTTFqj7kAJSt6uSR3dAZOBu75d7zDXudA5gHDEy6BEGeprrR1wxeaeq1KZJ-/s1600/yo-hover.png);

}</style>