إضافة أزرار المواقع الإجتماعية متحركة بتأثير css3 بشكل متحرك لمدونة بلوجر

اليوم سوف أشرح طريقة إضافة أزرار المواقع الإجتماعية متحركة بتأثير css3 بشكل متحرك لمدونة بلوجر وهذه القائمة الجانبية تتميز بخصائص رائعة جداً ومن أفضل المميزات أنها حصرية وخفيفة جداً ومنظرها أنيق لكل المدونات ولكل الأذواق بإذن الله .

طريقة التركيب : 

• أدخل مدونتك .
• ثم التخطيط .
• أضف أداة عبارة عن HTML.
• إنسخ والصق هذا الكود بها  :   

<div id="social">

<ul class="social-sidebar">

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

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

<li><a href="http://www.youtube.com/yosef3awad" 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/AVvXsEhDbNBnfY1mlxffehpwo8W1P5NirUsuoy4O9jJe5aqpKJpeGpo8_ocZDbGW8npPPWBuOtZDKHebe15D0rGIIVQ-gYhSdns1YCfTFVWdzZUBH2aQRHmORcIFkWBWMhwfBdjFrprLtMqfzpdP/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/AVvXsEg_j13a3j3pYq-WwVTbUHxxRjtGiwjaunhAjjkCKngpsooON0_2cIlWuRG-zsWn2AV39yBbYx_zI9mBhfXLsX8kg64H-bR8BCV5fLXOQv-QtW-Tdsqf7qaHY20OVAIj0a-wMZs2Ttusvtz_/s1600/tw-hover.png);

}

   #social .social-sidebar li .fa { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP82XLsvqVAAK0PiMExS1SR8umqR_A2VHALAfFvO8XqgAkPxL7NZGCIPWWVIBlFdRc9WZDObDpKx6MbMq9o4VkzrSZBC7tpONPb05I2YULHNhxl2G7g24pyq_tLiAObWRbso1JF_ZZwLXX/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/AVvXsEgZxkAmi_tygw5Zl9imEiU9DsvQDYxQ1LnPKwFVnPb3p7RxKgarCd2jHiboZaOeMlsS3xK6P-GK8igR01f0TwrzWctSH__rI-IjY5TLnAIUzW5yROLZbWm5zGkMq-N8vq8CC_r4xfm4WtnS/s1600/fb-hover.png);

}

   #social .social-sidebar li .yo { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1rCGBqhOkQwxocN2RgI0Hgy6nW2qIf_KJuOhpSMVW46QKVplFGpHGF3te69CcTLVtjInfiuR5Y1ZV7MhGkvzxCiiNxFBsZNkjhJAM0dXm0RO9ohpFD9h644JjvDOma2mtbBj-JrOxbxl2/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/AVvXsEhfyv8t6vO6HgDzXGkzOCKsd6D8rKin5-T812h2M8qWBrOQYil1AniglVz4dIYO71CRpqaYqbkbkVq2znesUceHXGHjAXp97GB1LDWuzbq723z5ztPONZoa43_omkzd9s0f2PWPm12BkZiI/s1600/yo-hover.png);

}</style>

غير ما باللون الأزرق بروابط المواقع الإجتماعية التي تريد وضعها في المدونة ثم إحفظ القالب، و بهذا تكون قد أنهيت المهمة بنجاح، حيث سيمكنك معاينة عملك عبر التوجه لمدونتك.

هل اعجبك الموضوع ؟

شارك معنا بتعليق حول الموضوع