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


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



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


                                                                              شـكل الإضافة : 

لتركيب أتبع الخطوات الأتية .
  1. أدخل الى مدونتك على بلوجر
  2. أختار تخطيط    
3. أظغط على إضافة أداة 

4.أختار html/javascript 

5.  ثم ضع هذا الكود 

<ul class="pro-ayoub_nav">
<li><a class="pro-ayoub_navi" target="_blank" rel="nofollow" href="#" id="twitr">تويتر</a></li>
<li><a class="pro-ayoub_navi" target="_blank" rel="nofollow" href="#" id="ggl">جوجل بلس</a></li>
<li><a class="pro-ayoub_navi" target="_blank" rel="nofollow" href="#" id="face">فيس بوك</a></li>
</ul>
<ul class="pro-ayoub_nav">
<li><a class="pro-ayoub_navi" target="_blank" rel="nofollow" href="#" id="you">يوتيوب</a></li>
<li><a class="pro-ayoub_navi" target="_blank" rel="nofollow" href="#" id="khamsat">خمسات</a></li>
<li>خدمة أرس <a class="pro-ayoub_navi" target="_blank" rel="nofollow" href="#" id="rss">rss</a></li>
</ul>
<style>
.pro-ayoub_nav {
float: left;
width: 300px;
}
ol, ul {
list-style: none;
}
.pro-ayoub_nav li {
float: right;
margin-left: 5px;
}
a#twitr {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat 24px -73px #0ED6CE;
}
a#twitr:hover {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat -60px -73px #ffffff;
}
a#ggl {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat 24px -235px #ED5029;
}
a#ggl:hover {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat -60px -235px #ffffff;
}
a#face {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat 28px -151px #5157DF;
}
a#face:hover {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat -60px -151px #ffffff;
}
a#you {
background: url('http://im54.gulfup.com/Ft99u.png') no-repeat 26px -397px #ff0000;
}
a#you:hover {
background: url('http://im54.gulfup.com/Ft99u.png') no-repeat -67px -397px #ffffff;
}
a#khamsat {
background: url('http://im54.gulfup.com/Ft99u.png') no-repeat 24px -318px #f2bb12;
}
a#khamsat:hover {
background: url('http://im54.gulfup.com/Ft99u.png') no-repeat -65px -318px #ffffff;
}
a#rss {
background: url('http://im54.gulfup.com/Ft99u.png') no-repeat 24px -480px #ff5a00;
}
a#rss:hover {
background: url('http://im54.gulfup.com/Ft99u.png') no-repeat -65px -480px #ffffff;
}
.pro-ayoub_nav li .hdr_navi:hover {
background-color: #ffffff;
color: #df517f;
}
a:hover, body a:hover  {
color: #df517f;
text-decoration: none;
}
a {
text-decoration: none;
}
.pro-ayoub_nav li .pro-ayoub_navi {
display: block;
height: 35px;
width: 95px;
background: url('img/big_ics.png') no-repeat -202px 33px #2ad0ff;
color: #fff;
font-family: goth;
font-size: 14px;
text-align: center;
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-o-transition: all 600ms ease;
-ms-transition: all 600ms ease;
transition: all 600ms ease;
padding-top: 60px;
}
@font-face {
 font-family: 'goth';
 src: url(//:) format('no404'), url('https://themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
}
</style>


وقم بوضع رابط مواقع التواصل الإجتماعي خاصتك (مكان اللغة العربية مثل جوجل بلس..ألخ)

5. أظغط على حـفـظ 




أرجو أن تكون الإضافة أعجبتكم .. تابعونا على مواقع التواصل الإجتماعي , وساعدونا بنشر موقعنا على الويب العربي !
المصدر : ارابيا ويب

اشترك في آخر و احدث المقالات عبر البريد الإلكتروني :

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

  1. مشكوووووووووووووررررررررررررر

    ردحذف
  2. مشكور اخي الكريم

    ردحذف
  3. مشكور اخي الكريم

    ردحذف
  4. صندوق فيس بوك متنقل

    ردحذف
  5. اخي ممكن تعطيني رابط لتحميل قالب مدونتك

    ردحذف
    الردود
    1. تفظل اخي الكريم http://rnohammed.blogspot.com/2015/05/Alafezl-absolutely-professional-template-blogger-2016.html

      حذف
  6. اخي الكريم اولا شكرا على هذه الاداة الجميلة> لكن اود ان اقوم بتصغير القياسات كيف يمكنني ذلك

    ردحذف
  7. اخي ممكن شرح كيف اعدل على قالبك هذا لاني حملتو بس ماا اعرف كيف اعدل عليه ارجوك

    ردحذف
    الردود
    1. https://www.youtube.com/watch?v=f8Izkh7MyMc طريقة التعديل على القالب لاتنسى اشتراك للقناة

      حذف
  8. جزاك الله كل خير اخي جميلة جداً

    ردحذف
  9. غير معرف1/11/2016 07:49:00 ص

    جزاك الله كل خير

    ردحذف
  10. مشكرو اختي جزاكالله كل خير

    ردحذف
  11. اين اضع موقع التواصل الاجتماعي الخاص بي

    ردحذف
  12. جزاك الله خير أخي على الشرح المفيد والمختصر..

    ردحذف
  13. غير معرف5/25/2019 05:51:00 م

    هاذا رابط مدونتي
    ارجوا منكم الاشتراك لانها جديدة
    https://alhamed-lilma3lomiat.blogspot.com/

    ردحذف

اضف تعليقأ مناسباً عن الموضوع .. ونرد عليكم في اقرب وقت ( تعليقك يسعدني :) )

الإعلانات أعلى المقالات

الإعلان المركزي المادة 1

الإعلان المركزي المادة 2

اعلانات أسفل المقالات