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

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

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

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimO2_hhVUq8GeLTjFf6KbqDmiE1RrUBo1iXnZD50El5N9v7qSeGtKhz0m31LgvBKn9vs7dNL36mN9cuIw2GXStC6QHyx2PaUC9Ey7zsApjWqYqlfFt9X5AHAnjieTYRozFxIhVgQZUoWiO/s1600/1.png
    "/></a>

    <a href="https://twitter.com/ بروفايلك على تويتر" title="Get Update by Twitter" target="_blank" rel="nofollow">
    <img class="ks-wiggle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpOLCFmYC8FLpGjIUx3ug_n95Yr-V26dk3YCjUmfmWtRt4wRmYdfB-gAzMvFr_mr4jx7anMzSIa5v-rIsgf8r0ZLPZg8gH5_5G1tSfyCvWeVAJrtvn35owGwykeDF6zc9XYi8kiLG0Y3KT/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9q82RUXbrEPZfIyAY5pVthdsHzwNgW0edHZbJMBBpto2qzj1WhcVMzOuj0UYwwAwpa4I7Bbs-yEzYQ4JfHM6KYoEljNQPFfeVth7MgO2JO-b62FJrzNQTWt9-NAioz5GuuWyYtQEOaTIQ/s1600/3.png"/></a>

    <a href="http://pinterest.com/بروفايلك على " title="Get Update by Pinterest" target="_blank" rel="nofollow">
    <img class="ks-wiggle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxOJvI_CSf-uw38tFyCpu_fLqKooZJ1dWW0sis3oj8QvDZa2SFWNQnhs0uLfzgrMHRCn4dMTK2L2jxBScy9D5v57fypCFC0mf9GDc_3Y3AWtURRz3LIMu1PtUBrAdqzRYJyYLES94SxY-W/s1600/4.png"/></a>

    <a href="http://linkedin.com/برفايلك على لينكيد" title="Get Update by LinkedIn" target="_blank" rel="nofollow">
    <img class="ks-wiggle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFgI3sRru15sORemjj0ZMfZuHWX2nu-pZRc1QzBY4_oNKrNzB6KiRdX4rcOjb34erWr9tA6hznm9W0ayEi66OIzzjYzdZN-igfUWej-5iDw8o0GzzkKNXQeY2GywBBpwQw7eH8cIlZXEsD/s1600/5.png"/></a>

    <a href="http://feeds.feedburner.com/أي دي فيد مدونتك"  title="Get Update by Email" target="_blank" rel="nofollow">
    <img class="ks-wiggle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi49jSVev9WWDoKu157Q7NI33-qcaay2ll07KX-ecMfC2v2JZB1naqV7dGz6xbEzXg5BnIjUkY8xmrd2rSIsAuIf2lZnuW8LJJeg-y0iktQpaprLOl9pbO0PCV21Rg9ne_8MMalHQwCyZ6c/s1600/6.png"/></a>
    </div><!--homeblog7.blogspot.com widget ends-->