السبت، 7 سبتمبر 2013

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

5:16 ص  Unknown  لا يوجد تعليقات

السلام عليكم ورحمة الله وبركاته


كما عودتكم خبراء الحاسوب على الجديد ، أقدم لكم اضافة مميزة في درس اليوم ازرار الشبكات الاٍجتماعية
 مع تأثيرات Css3 بشكل رائع وتأثيرات متحركة فعند تمرير مؤشر الماوس فوقها تدور بشكل جميل و عند اٍزالة المؤشر تدور بالعكس لتعود اٍلى حالتها الاٍبتدائية وتحتوي الاٍضافة على أزرار فيسبوك وتويتر واليوتيوب. اضافة اٍلى كونها تزيد من معجبيك ومتابعيك عبر المواقع الاجتماعيه .



كود الاضافه :

<div id="social">
<ul class="social-sidebar">
<li><a href="http://www.facebook.com/computerexp" target="_blank " class="fa" title="صفحتنا على الفيس بوك"></a></li>
<li><a href="http://www.twitter.com/mostafatalaat65" target="_blank " class="tw" title="صفحتنا على تويتر">twitter</a></li>
<li><a href="http://www.youtube.com/geekmostafa" 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/AVvXsEiF_Whw9W7_Rj2pebu6gVBIdgcMAm6EIM352-b23CEB1YESex4qzcauz0bOhj08PjvfeCsACb35fyiE8nJv6CuHW7GOps1-tjYveTSosRlke51YK39zO-jEzyGlkvn178qMTtSwNz7p0FH7/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/AVvXsEhgYC_K1boBVgGAhTLyKqZLVOnK9TrjJcdupG93BwF7SKfR49__tfVA7zSv3wu-BLBhvqTw2_iwmqCdgXlpiuVEnMs3Ki-KPTUJBsdQXE5Rbc0SzQykPPyGCfix5GsRO1ag2DDzI9nRG6aW/s1600/tw-hover.png);
}
   #social .social-sidebar li .fa { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW6_KUIl7n91IYdlX81FMiNmQjQWefIf3zqx4er4ES7rPZ39hLJXAllA6WOeQABtXbr8_6ESkoC0nIcXpfhV5WZSXuh5AocBP-JQs2LwjBxOjPWSSdrufxlkgqpCJzJ5TzbOnJSul15t9p/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/AVvXsEhCzudlB2OB-L6RcJ5DvqJITZlllmLlYghRtT6Q5DsGngJbzdfWX36vUz_6HFQgMmg7zj3XIt5eNgbIhbp6OELIFOYpRS-KlDfP7rR7dc0_Eq9qiY_-5KQxY65dWU0LY7wOnI3l7bw8vf-g/s1600/fb-hover.png);
}
   #social .social-sidebar li .yo { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJv0SHaFuW_0jyoO1A0lq9Pd2dvlMB09KEORyut3v-RKxeuOCAfwGmmfkQR-xltaTfr_G5gYXMzmRdHoRbew717pSe3VUyCWZG8spr5Sr5ow3uxYlHTYavc7Mtlp63OQwlwUGEhZc6_3gF/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/AVvXsEgurZwm3DEIF2ieHY0EiBWDwWPvAv76UddPxyZ8NaSCsoAine4YzsY5qbyuWDPMwTw_IiLo_-hPXQxzys888LRIn4J96LcFl5GCCa8Mpd4OLrmf_PY2RRKFao7haHOVGURlQSLt4aRn-9PG/s1600/yo-hover.png);
}</style>

كيفية التركيب :

اٍذهب الى لوحة التحكم ← تخطيط ← إضافة أداة HTML/JavaScript.
ثم الصق الكود ،
مع تغيير ما بالون الأحمر بصفحتك على الفيسبوك
مع تغيير ما بالون البرتقالي بحسابك على تويتر
مع تغيير ما بالون الأخضر قناتك على اليوتيوب
و قم بحفظ الأداه و مبروك عليك هذه الإضافه الجميله .
و انتظروا منا خبراء الحاسوب الجديد بإذن الله ، ونسعي الى تطوير محتوي الويب العربي .
أرجو ان يكون أعجبكم الموضوع و الإضافه ، والسلام عليكم ورحمة الله وبركاته

منشورة في:

0 التعليقات:

إرسال تعليق