اضافة ازرار الشبكات الاجتماعية بتأثيرات CSS

السلام عليكم ورحمة الله وبركاته , مرحبا بكم , اليوم سنقدم لكم اضافة جديدة و حصرية , و هي عبارة عن اضافة ازرار الشبكات الاجتماعية بتأثيرات روعة لن اطيل عليكم ننتقل الى طريقة الاضافة
أولا ـ ابحث في القالب عن :

]]></b:skin>

و ضع قبله مباشرة هذا الكود :

p#hb_socialicons img {
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
margin-bottom: -40px;
margin-left: 20px;
}
p#hb_socialicons img:hover {
    -moz-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    transform: rotate(-360deg);
margin-bottom: 0px;

}

ثم توجه إلى التخطيط و ضع هذا الكود في المكان الذي تريد :

<center>
<p id='hb_socialicons'><a href='https://www.facebook.com/#'>
<img border='0' src='https://cdn1.iconfinder.com/data/icons/flat-shadow-social-media-icons/48/facebook.png'/></a>
<a href='https://www.youtube.com/#'>
<img border='0' src='https://cdn1.iconfinder.com/data/icons/flat-shadow-social-media-icons/48/youtube.png'/></a>