اضافة ايقونة الشبكات الاجتماعية v2 عائمة


السلام عليكم اعزائى متابعى دبور فون اليوم نقدم لكم الاصدار الثانى من ايقونات الشبكات الاجتماعية هذه المرة كما عودناكم الاضافة مميزة بانها توضع عائمة بجوار المدونة ^_^ مع اهم المواقع الاجتماعية  مثل تويتر,جوجل بلس,فيسبوك,يوتيوب,خمسات وخدمة rss
والان كى لا اطيل عليكم ندخل الى الشرح

طريقة التركيب

  1.  من لوحة التحكم >> قالب >> تحرير HTML  
  2. خذ نسخة احتياطية لقالب المدونة قبل اجراء اي تغير
  3.  قم بالبحث عن الكود التالي  ]]></b:skin>  بالاستعانة بلوحة التحكم  (CTRL+F)   واضف فوقه مباشراً الكود التالي 




/* CSS Floating Social Icons Dabour Phone */
.dabourphone_nav {float: center;width: 300px;}ol, ul {list-style: none;}
.dabourphone_nav li {float: center;}
.dabourphone_nav {text-align: center;position: fixed;bottom: 45px;left: -225px;}
a#twitr {background: url('http://up-dabourphone.eb2a.com/imagef-1437615963051-png.html') no-repeat 235px -66px #0ED6CE;}
a#twitr:hover {background: url('http://up-dabourphone.eb2a.com/imagef-1437615963051-png.html') no-repeat 150px -66px #ffffff;}
a#ggl {background: url('http://up-dabourphone.eb2a.com/imagef-1437615963051-png.html') no-repeat 230px -227px #ED5029;}
a#ggl:hover {;background: url('http://up-dabourphone.eb2a.com/imagef-1437615963051-png.html') no-repeat 148px -227px #ffffff;}
a#face {background: url('http://up-dabourphone.eb2a.com/imagef-1437615963051-png.html') no-repeat 235px -141px #5157DF;}
a#face:hover {background: url('http://up-dabourphone.eb2a.com/imagef-1437615963051-png.html') no-repeat 147px -142px #FFFFFF;}
a#you {background: url('http://up-dabourphone.eb2a.com/imagef-1437616092341-png.html') no-repeat 236px -390px #ff0000;}
a#you:hover {background: url('http://up-dabourphone.eb2a.com/imagef-1437616092341-png.html') no-repeat 141px -390px #ffffff;}
a#khamsat {background: url('http://up-dabourphone.eb2a.com/imagef-1437616092341-png.html') no-repeat 232px -308px #f2bb12;}
a#khamsat:hover {background: url('http://up-dabourphone.eb2a.com/imagef-1437616092341-png.html') no-repeat 142px -308px #ffffff;}
a#rss {background: url('http://up-dabourphone.eb2a.com/imagef-1437616092341-png.html') no-repeat 230px -474px #ff5a00;}
a#rss:hover {background: url('http://up-dabourphone.eb2a.com/imagef-1437616092341-png.html') no-repeat 142px -477px #ffffff;}
.dabourphone_nav li .hdr_navi:hover {background-color: #ffffff;color: #df517f;}
a:hover, body a:hover  {text-decoration: none;}a {text-decoration: none;}
.dabourphone_nav li .dabourphone_navi:hover {-ms-transform: scale(1.1);-webkit-transition: 0.4s; -moz-transition: 0.4s; -o-transition: 0.4s; -ms-transition: 0.4s; transition: 0.4s;}
.dabourphone_nav li .dabourphone_navi {display: block;height: 95px;color: #fff;font-family: goth;font-size: 22px;transition: all 600ms cubic-bezier(0.76, 2.35, 0.70, 4.74);text-align: center;;padding-top: 31px;margin-top: -7px;padding-right: 170px;}
@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;}

  • والان ابحث عن الوسم </body>  واضف فوقه الكود التالى 

<ul class="dabourphone_nav"><li><a class="dabourphone_navi" href="http://dabourphone.blogspot.com/" id="twitr" rel="nofollow" target="_blank"></a></li><li><a class="dabourphone_navi" href="https://plus.google.com/+iMohamedAbodia" id="ggl" rel="nofollow" target="_blank"></a></li><li><a class="dabourphone_navi" href="https://www.facebook.com/mohamed.ibrahim.2036" id="face" rel="nofollow" target="_blank"></a></li><li><a class="dabourphone_navi" href="http://dabourphone.blogspot.com/" id="you" rel="nofollow" target="_blank"></a></li><li><a class="dabourphone_navi" href="http://dabourphone.blogspot.com/" id="khamsat" rel="nofollow" target="_blank"></a></li><li><a class="dabourphone_navi" href="http://feeds.feedburner.com/dabourphone" id="rss" rel="nofollow" target="_blank"></a></li></ul>

 ومبرووك عليك الاضافة 
***
ملاحظة: لاتنسى تغيير الروابط بما يناسبك 



    دبور فون

    M.H.I

    هناك 4 تعليقات:

    نسعد ونتشرف بتعليقاتكم
    لكن فى إطار الموضوع وليس خارجه حفاظاً على راحتك الشخصية
    لوضع اى اكواد Html فى التعليقات يرجى تحوليها اولاً بمحول الأكواد من هنا
    لذلك نرجو منك ان تستعمل كل شىء بطريقته الصحيحة شكراً لتفهمك 😊

    أحدث الأخبار

    10/recent