اضافة ايقونة شبكات التواصل الاجتماعي الى مدونة بلوجر الخاصة بك
بالوان مختلفة وجميلة
طريقة الاضافة اذهب الى
1- لوحة التحكم الرئيسية واضغط على القائمة المنسدلة
2- اضغط على التخطيط
3- اضغط اضافة اداة
4- نختار HTML/JavaScript
ثم نضع الكود الكود التالي
/*--------Social Sharing Widget bloggertrix.com ------*/
<style type="text/css">
.bloggertrix-social-widget {
width: 280px;
margin-top: -10px;
border:1px solid #000000;
}
.bloggertrix-social-widget ul {
margin: 0;
padding: 0;
}
.bloggertrix-social-widget ul li {
list-style:none;
padding: 0;
text-transform: none;
}
.bloggertrix-social-widget ul li a {
color: #fff;
display:block;
}
.bloggertrix-social-widget ul li a:hover {
color: #c9c9c9;
}
.bloggertrix-social-widget ul li .rss:hover {
background-color:#d86601;
border: 0px solid black;
color:#000000;
font-size:17px;
font-style: italic;
font-weight:bold;}
.bloggertrix-social-widget ul li .twitter:hover {
background-color:#0d8be1;
border: 0px solid black;
color:#000000;
font-size:17px;
font-style: italic;
font-weight:bold;}
.bloggertrix-social-widget ul li .facebook:hover {
background-color:#224ba1;
border: 0px solid black;
color:#000000;
font-size:17px;
font-style: italic;
font-weight:bold; }
.bloggertrix-social-widget ul li .stumbleupon:hover {
background-color:#198b09;
color:#000000;
font-size:17px;
font-style: italic;
font-weight:bold; }
.bloggertrix-social-widget ul li .rss {
background:
urlundefined"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvAOXyeew0YKuKcWoIHM_E5v63BNR1AHIg8cXoyxxy73i5UMG42ZbYdyqRmQLsA6bwkgyxSFuAQGP-WlyuO7nrfLaefKDmw86LtZi0b1aadhVKqAUsqoB8EAmHPPnulf_ZBDVThqrE1-3F/s1600/bloggertrix-Rss.png")
no-repeat scroll 2px center #F87E12;
background-size: 30px;
padding: 17.5px 45px;
}
.bloggertrix-social-widget ul li .twitter {
background:
urlundefined"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC488k63y35COw75zllicw9lmDTq-CyEAvu5eoXJb2bQkcT9YTIZQrCPp7vuRteO8Wh7iXz6R1z_TYxTKLX3exKyXf9fqlAzQ2pr-ieMZrvjgAiHqyOD36asZM0xsiK7zA3Lq3EO3x3FiG/s1600/bloggertrix-twitter.png")
no-repeat scroll 2px center #59a5d9;
background-size: 30px;
padding: 17.5px 45px;
}
.bloggertrix-social-widget ul li .facebook {
background:
urlundefined"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi29YFHH2cjWoN0E54v0vKNkYw9_9MBuWoI9-ie8K1UbMu_e_zdqm7Thz2wTUyu78KHMlcgADRXsAXnq2fjOkcCdBpW6xx5DkSlfLsDeFKXFZM7AEBwH8gmpMjYo1mCzZ4970VrQ3ZQWs-t/s1600/bloggertrix-facebook.png")
no-repeat scroll 2px center #3B5998;
background-size: 30px;
padding: 17.5px 45px;
}
.bloggertrix-social-widget ul li .stumbleupon {
background:
urlundefined"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie_tZ9CuCkWE-0qfNM_22t2oz7991iMgnFLvowDpsAs8M4qyiFnP75DEWZ-waoPJWeUH0289QvOTfAGL8J-3xsIo79Ep3uFrvtgqb67wcS8QV6H6jGJ_T0zRDTzWpBygtMmlzDKQtm0k0N/s1600/bloggertrix-stumbleupon.png")
no-repeat scroll 2px center #26a615;
background-size: 30px;
padding: 17.5px 45px;
}
</style>
<div class="bloggertrix-social-widget">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/الاسم الخاص بك">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/الاسم الخاص بك">Follow me on Twitter</a></li>
<li><a class="facebook" href="https://www.facebook.com/الاسم الخاص بك">Find me on Facebook</a></li>
<li><a rel="author" class="stumbleupon" href="http://www.stumbleupon.com/stumbler/soharox/">Stumble on Stumbleupon</a></li>
</ul>
</div>
استبدل كلمة ( الاسم الخاص بك ) بمعرف الصفحات الخاصة بك
