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

اقدم لكم اليوم اضافة جديدة في عالم ايقونات التواصل الاجتماعي بشكل جديد تستطيع اضافة الازرار الاجتماعية بشكل متحرك في مدونتك مدونة بلوجر

الشرح :

طريقة الإضافة لمدونات بلوجر
توجه إلى لوحة التحكم في مدونتك -->> القالب ثم أنقر على تحرير Html
الآن بإستخدام مفتاح الإختصار من لوحة مفاتيح الكمبيوتر اضغط على ctrlوf  ثم أبحث عن الرمز:  ]]></b:skin>


ثم أضف الكود التالي فوقه مباشرةَ:

ul.flatflipbuttons{ position:fixed; padding:0 0 3px 0; bottom: 22%; margin-left:0px; float:left; list-style:none; -webkit-perspective: 10000px;  -moz-perspective: 10000px; perspective: 10000px; }ul.flatflipbuttons li{ margin:0; display: block; width: 25px;height: 25px; margin-bottom: 25px;background: transparent; text-transform: uppercase; text-align: center; }ul.flatflipbuttons li a{ display:table; font: bold 36px Arial;width: 100%; height: 100%; color: black; background: transparent; text-decoration: none; outline: none; -webkit-transition:all 300ms ease-out; -moz-transition:all 300ms ease-out; transition:all 300ms ease-out; }ul.flatflipbuttons li a span{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display: table-cell; vertical-align: middle; width: 100%; height: 100%; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; transition: all 300ms ease-out; }ul.flatflipbuttons li a img{  border-width: 0; vertical-align: middle; }ul.flatflipbuttons li:hover a{ -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); background:   transparent; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; transition-delay: 0.2s; }ul.flatflipbuttons li:hover a span{ -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg);transform: rotateY(180deg); -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; transition-delay: 0.2s; }

الآن إبحث عن الرمز: </body>
ثم أضف الكود التالي فوقه مباشرةَ:

<ul class='flatflipbuttons second'> <li><a href='#' target='_blank'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNn7MdQHw_gB9UTlC31zM1JFvYtQoeVMJYrf9GQ3SZu46rpzrTp5PU7LbjH0MX-u9kAgJxQxmEU0S8j5MlCYdl-OHO7KxvZPsuztnKZHnGimbe542zUYpiQh007X27aRy7r4Z20LH9Q9z-/s1600/Facebook.png'/></span></a></li> <li><a href='#' target='_blank'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh07_42-Eq5R-KPGxlIBtpjCqAAPTBt2Ji8bVVuY2owN1aG1DyqdKy9ViPyp4JLRJ4MtARXtBH_o8e9h9-qTCIkofuawcKPHui0ELSCOKmTZCmjXWBtRMq2-K3V_egP2ap_R7ckybyW8Xp4/s1600/Twitter.png'/></span></a></li>
<li><a href='#' target='_blank'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipxjObZvdskjXeWMZ3-L3Kb87O2SdHOEulokoC74QUG5CPLx2IphNuewnfi76OWZLrnqaqqvKMnx7NFfUbwypKkysQGj1QOUocsGNgbyjT8KvvCxe4Jz9x48e7kpApMonb9vS_57eur4jY/s1600/GooglePlus.png'/></span></a></li>
<li><a href='#' target='_blank'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEJ76CHHKL1iExvmg0ibEBdEVINEgPKD916_YYMuaX_eIBqWMJBtdUGUvyZXgdImFXRXy6fCOC5_oH8xTlg46Jc-ZyGDnqv5Yy1JXvx56ojsQQbuH3SZGCywngnZ6qG3vwhKcOI7gyXEE9/s1600/Pinterest.png'/></span></a></li>
<li><a href='#' target='_blank'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFeZKSiqS8BkjixwAl34_A18Jq3Q2fT0IAOt-6WISvnhkmHRTmayUkN_drymJnDeStcxHMPAqUre2ofxbuKv7LgomMJHBI9nuSJeWccm_sW6Nd6wWQm69ATwNUM0X6Q4IyLFGzdxe5cFOf/s1600/Rss.png'/></span></a></li><li><a href='#' target='_blank'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCHomhFlOjhOwczq1KbcXxkZvzFHEJvIcKPW5yjOIIwB0K1NwZcgAJqPaiY4lupoIPyQgau8AUsTSGZGAT01zcWlbRJMvHUT1NzwC98K2MPZ-EQ51EiTM3x9Dv_Xu9I6zghcgS6j9TTn6q/s1600/YouTube.png'/></span></a></li></ul> 

غير إسم المستخدم الخاص بصفحاتك على مواقع التواصل الاجتماعي لكل موقع مشار إليه# ثم أحفظ القالب