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

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

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

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

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

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

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

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

<div id="social">

<ul class="social-sidebar">

<li><a href="http://www.facebook.com/pikpok" target="_blank " class="fa" title="صفحتنا على الفيس بوك"></a></li>

<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/AVvXsEjPNlcDxRWv5wavZABbKs94Xg-jLosIZ8vnoVdtDqM4dmLq-l7OV88cGtMVdoOLLRhchfciXUMCiTRD9QIeWF0NTx05B_kwPESfEbV7iDANO19r0n9sIIzPkC5ShV3kSGR5oK5sThZWJDDF/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/AVvXsEjvZvgZiHYVGT_GF2wZNNCzofLEko6W3rEMopKUd8WdXKHlVEvRvfGiadPc4riUKV5_BueEgX3mJwkLnopJEP0-iL2A3Skr4hYZ51FL0C2Aj3FcIT2ADCZMaI7SIHdkdBpobPSYztVU1-1I/s1600/tw-hover.png);

}

   #social .social-sidebar li .fa { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb8stXNBDmuLiE2XBYwVn-hQv-7DQqEX4JUttQfkDFrAVoly71RpEgf3XVJ9nyrQnxNehta8r_2zkkQqpYEpLxenj7UK9a06syGwi4gA0UMgeP6S07_ndDtALdXao7aEef5ronx9Xc4jQb/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/AVvXsEjC3h5zh1DR-CyhRSWzfstV8Y0cLsFP4SnPbtHDEXRa67VlOb9lk6N1deuiI_kL40l_8-FI5z2_B8DWKdwKFa9RA4sxv-zC8Frt5M2j8f6p6Z-mfrDeI5HomJIx6OrkaOZrTG6eo7c-1YbF/s1600/fb-hover.png);

}

   #social .social-sidebar li .yo { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2nadzS5BFzb8Q5Hd6pyXlNfutO621op77ZIAtr2nREcj1nsVG05B0wzqGMhQ8p6YnO-0LkCE3Q4BLCzoFyPqV3GXURCG1XU_qwO__2guFTR9nsFEvRVk_qbZpQceKoku-iUt66DtQGJbY/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/AVvXsEinJLbvnSxE2Sy5i6C_qD1HxDwDNh_UKM7Mny6eCEEnI8HTEj24uFhuKJMUD4TKN-EDJCfkUgVcWW13Mw_TNmD46ii8lPEGIVnBV3YpLARR6yMuUfTaaNH_6V_DI4jQ41A7F6V4JMh84FTK/s1600/yo-hover.png);

}</style>

• غرد
• مشاركة
• اضافة