اليوم سوف نتعرف على إضافة مهمة لكل مدونة إلا وهي إضافة النوافذ الاجتماعية على جانب مدونات بلوجر عائمة وبشكل إحترافي مع التأثير .
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*/
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/AVvXsEiiWzvOWS5Z8uahbHU9Xi0-_hKdr10JatQPDP2sdCLuG0rjpUk4sduhSiqr_uIYz8VOHvs2AOqgmGy_bmp0bhSJ1dQUKzinN2jJtKUchloGrakxNmN8UaOvSjzSw7Vppm6s7HUQYHmlM5AJ/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/AVvXsEgcLBu-iq79uzQM4wsMnFQOpi_fk23ItY_hXXYyZf0djcEA9NoVrWSDXjjSAPydM67Kh9bYtwYmxGdKCqxspB8p82zeM6HCl-Gos4eml_zz61SOSQt95M7GrcZDKhPt-dsRpqcwcFLLg5lv/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/AVvXsEgXIAtd4cIMgRjTSSVbPo4LQkDMoucnQ6Vlblq_Lnxn1yQbR7qLwQS3pff_YJNYtR8gSR9jVmsHgqLADpQPcjGoTO9sHoOMba-a1nTXzhFxHwV5iMkeneNWvnoJiOHOgJky0rU6g6w0ULND/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/AVvXsEjiX_YL-Hx8mEj780587N0YLMlqGWTX6c5Z8prwVL0xrSMPpO6b1rsxdxTIU-bzXwc_2j0KdPto98kBev-2RiceRi3HSCKFv6_sttLIG_zEErjh4o1U7PO1tFK2FBG11DOSSGVtTrK3cfQ7/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/AVvXsEg0uskcbmqp7BIn1Bt5ZJbxdCGBuYtAnAFEYWBGHzu_3JS4sYm5YxzAW3T4Wr02FFiiHMsb3RM_VILRS4v9nUWUMKFYdGdHJ7CVwttJm2HmO7adXMxn_ALlq1jkegaBbPYg4kkbEnowC0n9/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/AVvXsEgsKMO57Upx9U59r2_3tRXCW_RQNSxYMhsDEyVXHscEVpSowJNge5WJuKr5lOOLwh4rGustbMuLir1PDIY2TqX22HFn6l64dBce-3qz_G3IElh8w3nAC83HghMx195xosLOInlRrdakWGAU/s1600/6.png"/></a>
</div><!--homeblog7.blogspot.com widget ends-->
7- التعديلات :
1- صفحتك على الفيس بوك 2- بروفايلك على تويتر 3- بروفايلك على جوجل بلس .... إلخ .
0 Comments:
إرسال تعليق