Pages

اضافة ايقونة الشبكات الاجتماعية 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

    التعليقات

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