كيفية إضافة النوافذ الاجتماعية على جانب مدونات بلوجر عائمة وبشكل إحترافي

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

أنقر للمعاينة

click to view

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

1- أدخل إلى مدونتك أختر لوحة التحكم >> قالب >> تحرير قالب .

2- إبحث عن الوسم : ]]></b:skin>

3- أضف الكود التالي فوقه :

/*homeblog7.blogspot.com CSS starts*/
#ks-floatbar {
position:fixed;_position:absolute;bottom:8%;left:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);  width:64px;}
#ks-floatbar img {height:64px; width:64px;}
.ks-wiggle {
  cursor: pointer; 
 }
.ks-wiggle:hover  {
    -webkit-animation-name: wiggle;
    -moz-animation-name: wiggle;
    -ms-animation-name: wiggle;
    -o-animation-name: wiggle;
    animation-name: wiggle;
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}
@-webkit-keyframes wiggle {
    0% { -webkit-transform: skewX(9deg); }
    10% { -webkit-transform: skewX(-8deg); }
    20% { -webkit-transform: skewX(7deg); }
    30% { -webkit-transform: skewX(-6deg); }
    40% { -webkit-transform: skewX(5deg); }
    50% { -webkit-transform: skewX(-4deg); }
    60% { -webkit-transform: skewX(3deg); }
    70% { -webkit-transform: skewX(-2deg); }
    80% { -webkit-transform: skewX(1deg); }
    90% { -webkit-transform: skewX(0deg); }
    100% { -webkit-transform: skewX(0deg); }
}
@-moz-keyframes wiggle {
    0% { -moz-transform: skewX(9deg); }
    10% { -moz-transform: skewX(-8deg); }
    20% { -moz-transform: skewX(7deg); }
    30% { -moz-transform: skewX(-6deg); }
    40% { -moz-transform: skewX(5deg); }
    50% { -moz-transform: skewX(-4deg); }
    60% { -moz-transform: skewX(3deg); }
    70% { -moz-transform: skewX(-2deg); }
    80% { -moz-transform: skewX(1deg); }
    90% { -moz-transform: skewX(0deg); }
    100% { -moz-transform: skewX(0deg); }
}
@-ms-keyframes wiggle {
    0% { -ms-transform: skewX(9deg); }
    10% { -ms-transform: skewX(-8deg); }
    20% { -ms-transform: skewX(7deg); }
    30% { -ms-transform: skewX(-6deg); }
    40% { -ms-transform: skewX(5deg); }
    50% { -ms-transform: skewX(-4deg); }
    60% { -ms-transform: skewX(3deg); }
    70% { -ms-transform: skewX(-2deg); }
    80% { -ms-transform: skewX(1deg); }
    90% { -ms-transform: skewX(0deg); }
    100% { -ms-transform: skewX(0deg);  }
}
@-o-keyframes wiggle {
    0% { -o-transform: skewX(9deg); }
    10% { -o-transform: skewX(-8deg); }
    20% { -o-transform: skewX(7deg); }
    30% { -o-transform: skewX(-6deg); }
    40% { -o-transform: skewX(5deg); }
    50% { -o-transform: skewX(-4deg); }
    60% { -o-transform: skewX(3deg); }
    70% { -o-transform: skewX(-2deg); }
    80% { -o-transform: skewX(1deg); }
    90% { -o-transform: skewX(0deg); }
    100% { -o-transform: skewX(0deg); }
}
@keyframes wiggle {
    0% { transform: skewX(9deg); }
    10% { transform: skewX(-8deg); }
    20% { transform: skewX(7deg); }
    30% { transform: skewX(-6deg); }
    40% { transform: skewX(5deg); }
    50% { transform: skewX(-4deg); }
    60% { transform: skewX(3deg); }
    70% { transform: skewX(-2deg); }
    80% { transform: skewX(1deg); }
    90% { transform: skewX(0deg); }
    100% { transform: skewX(0deg); }
}
/*homeblog7.blogspot.com CSS ends*/

4- بعد ذلك إبحث عن الوسم : <body>

5- أضف الكود التالي تحته مباشرة :

<!--homeblog7.blogspot.com widget starts-->
    <div id="ks-floatbar">
    <a href="https://www.facebook.com/صفحتك على الفيس بوك هنا" title="Get Update by Facebook" target="_blank" rel="nofollow">
    <img class="ks-wiggle" src="http://1.bp.blogspot.com/-Z3Xg2sCOrWY/VNIH4PjwlMI/AAAAAAAAFX8/jNQVMKIzZ40/s1600/1.png
    "/></a>

    <a href="https://twitter.com/ بروفايلك على تويتر" title="Get Update by Twitter" target="_blank" rel="nofollow">
    <img class="ks-wiggle" src="http://1.bp.blogspot.com/-4-S5udrzF7Q/VNIIGy66-4I/AAAAAAAAFYE/qB9-mIfu7aI/s1600/2.png"/></a>

    <a href="http://plus.google.com/بروفايلك على جوجل بلس" title="Get Update by Google circle" target="_blank" rel="nofollow">
    <img class="ks-wiggle" src="http://3.bp.blogspot.com/-P3-6TJnhaIw/VNIE47qm98I/AAAAAAAAFXU/Oid_5pgnJ-U/s1600/3.png"/></a>

    <a href="http://pinterest.com/بروفايلك على " title="Get Update by Pinterest" target="_blank" rel="nofollow">
    <img class="ks-wiggle" src="http://2.bp.blogspot.com/-cO6awiHkrXQ/VNIE5zokRGI/AAAAAAAAFXc/qxJDfSpjNvA/s1600/4.png"/></a>

    <a href="http://linkedin.com/برفايلك على لينكيد" title="Get Update by LinkedIn" target="_blank" rel="nofollow">
    <img class="ks-wiggle" src="http://3.bp.blogspot.com/-4NbaRkNaaYU/VNIE6dWCFzI/AAAAAAAAFXg/P2XFHBHiAb8/s1600/5.png"/></a>

    <a href="http://feeds.feedburner.com/أي دي فيد مدونتك"  title="Get Update by Email" target="_blank" rel="nofollow">
    <img class="ks-wiggle" src="http://2.bp.blogspot.com/-FTJWpW31_DE/VNIE7MQpXSI/AAAAAAAAFXo/O8vdQSXGnl8/s1600/6.png"/></a>
    </div><!--homeblog7.blogspot.com widget ends-->

6- أحفظ القالب

7- التعديلات :

1- صفحتك على الفيس بوك 2- بروفايلك على تويتر 3- بروفايلك على جوجل بلس .... إلخ .

0 Comments:

رسالة تنبيه

يسعدنا تفاعلكم بالتعليق لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق :

أن لا تضع أي روابط خارجية

أي سؤال خارج محتوى التدوينة يرجى استخدام صفحة الدعم الفني

صفحة الدعم الفني

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

لإضافة كود حوله أولا بمحول الأكواد

انقرهنا لتحويل الكود

إرسال تعليق

Item Reviewed: كيفية إضافة النوافذ الاجتماعية على جانب مدونات بلوجر عائمة وبشكل إحترافي Description: كيفية إضافة النوافذ الاجتماعية على جانب مدونات بلوجر عائمة وبشكل إحترافي Rating: 5 Reviewed By: home blogger

آخر الأخبار

كيفية إضافة النوافذ الاجتماعية على جانب مدونات بلوجر عائمة وبشكل إحترافي

0 Comments:

إرسال تعليق

المشاركات الشائعة

أرشيف

التسميات

خدماتي في خمسات

مساحة إعلانية

المتابعون