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

Author:

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


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

مثال حي على الإضافة:

كيفية الإضافة إلى مدونات بلوجر

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

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; 
}

الآن ابحث عن الكود:

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

<ul class="flatflipbuttons second"> 
<li><a href="https://www.facebook.com/mdadice" target="_blank"><span><img src=" 
<li><a href="http://twitter.com/mohammed1811990" target="_blank"><span><img src=" 
<li><a href="https://plus.google.com/+مدادالجليد" target="_blank"><span><img src=" 
<li><a href="http://www.pinterest.com/mohammedmaher' target="_blank"><span><img src=" <li><a href="http://feeds.feedburner.com/blogspot/medad" target="_blank"><span><img src="http://3.bp.blogspot.com/-Ck1Ptx0xIeI/U5IPSdom0ZI/AAAAAAAAYf0/VVK87eMB1Ks/s1600/Rss.png"/></span></a></li><li><a href="http://www.youtube.com/user/معرف القناة" target="_blank"><span><img src="

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

شكرا على استماعكم