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



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

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




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


معاينة


طريقة الإضافة لمدونات بلوجر

توجه إلى لوحة التحكم في مدونتك -->> القالب ثم أنقر على تحرير 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='https://www.facebook.com/mdadice' target='_blank'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUgAd3xpeF45YWt0K8BGT2jTCLgmyvFiyCo8BVDQa2XE4Th7L-aDFoaiPbxHermfTEZM4O-XYD-my15Z1g6gXPZ9iq4E_RyuZ01F2MNrrln_jcB8sOWLyOdJvMTOB74deV-c_mSDYJ5u_9/s1600/Facebook.png'/></span></a></li> 
<li><a href='http://twitter.com/mohammed1811990' target='_blank'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN-aAsSbcQxGXAOB78ty8H_T1dnoV_O9lmyjYgcADEopoDPjrTh1IiCUEXg6fS7ehfOdIzHYjODbqigedJYBTQ6yf099dDaayiV1U84jFtQUF91UAHjoJ3GkYtnwtrlS6jh0cPqnwBgk0B/s1600/Twitter.png'/></span></a></li> 
<li><a href='https://plus.google.com/+مدادالجليد' target='_blank'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2B2-r2srwnH5Hphd1OKPjB0K2p87II7Pw5P9RPt39OLndvZUYjvTomiNvK8rh4ZsNH6FeNTrIPwaPcxog0l5b9WjmylCWmKLqHhlr1o9plwBblaT-NeDXtGVT3lGjxkvtjO4qKkfL1t-A/s1600/GooglePlus.png'/></span></a></li> 
<li><a href='http://www.pinterest.com/mohammedmaher' target='_blank'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAbWYnVJLlEKSANo_Y2K95_8VR6BNeTYCtmCxpneVXeRU4ZqVFKzd4EAVwsgm9CkNtZsDMj1Aog-j8hyfqoYjONzQL2C5QbCnvZUhYterQ7ZMwZev50sZS9h2TNiGohpPJ6c2SNxpCL0D-/s1600/Pinterest.png'/></span></a></li> <li><a href='http://feeds.feedburner.com/blogspot/medad' target='_blank'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2I5exHTPAfcTPxY6TZM5jVm_lXjO4iY9kJ-3ZVP_HmHf5ejtmCoRrJGgldhYP69xidSmB0K9ESHdHhmunRSIoqyI_3BagvOFvsoNjD1GnewHIL73mHcIt4k73Tyy6itfccwAvqgNao8Nx/s1600/Rss.png'/></span></a></li><li><a href='http://www.youtube.com/user/معرف القناة' target='_blank'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgH088MlKWHFGxssctPr67CDObsIhKi1Qyj34qWnQLgLx3HCB9kGPyvjL4Ur7XZOpESZZb06QUbnWE6EFdTaMS7t785feVS6yFhVbB3j-UaLLLG3igy_nGWQ5jPEvPX5Xhqp1o0GjaWdkP/s1600/YouTube.png'/></span></a></li></ul>

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

شكراً لمتابعتكم

مشاركات أقدم المقال التالي
15 تعليق
  • Unknown
    Unknown 13‏/06‏/2014، 7:31:00 م

    ممكن هذا القالب الي مسوين بيه معاينه واكون ممنون جدا

    • مداد الجليد
      مداد الجليد 13‏/06‏/2014، 8:29:00 م

      تفضل أخي لكن يحتاج تعديل كثير لقد ابقيت كل شيء على ما هو هناك الكثير من الاضافات التجريبية تحتاج ازالة
      http://www.gulfup.com/?H2SPlO

  • مسلم السيلاوي
    مسلم السيلاوي 07‏/07‏/2014، 7:58:00 م

    شكراااااااااا نزلت الملف او القالب انتم رووووووووعه وابداع

    • مداد الجليد
      مداد الجليد 08‏/07‏/2014، 1:35:00 ص

      عفواً عزيزي شكراً لمرورك

  • غير معرف
    غير معرف 12‏/09‏/2014، 12:57:00 ص

    هل ممكن ان تجعلها ثابت في اعلى الهيدر

    • مداد الجليد
      مداد الجليد 13‏/09‏/2014، 10:02:00 م

      لا يمكن ذلك حالياً شكراً لك.

  • Unknown
    Unknown 22‏/02‏/2015، 4:16:00 ص

    https://twitter.com/a0s0_a0/status/569276963753369601

  • Unknown
    Unknown 22‏/02‏/2015، 4:21:00 ص

    مرحب بالجميع

  • Unknown
    Unknown 22‏/02‏/2015، 4:23:00 ص

    مرحب ساع

  • Unknown
    Unknown 22‏/02‏/2015، 4:27:00 ص

    هلا

  • Unknown
    Unknown 14‏/03‏/2015، 8:33:00 م

    شكرا لك تمت الاضافة

    • مداد الجليد
      مداد الجليد 14‏/03‏/2015، 11:09:00 م

      العفو، أشكرك على مرورك

  • Niche Marketing
    Niche Marketing 21‏/10‏/2015، 3:17:00 ص

    كيف اجعله بحيث يكون بشكل ثابت؟

أضف تعليق
عنوان التعليق