اضافه اداه التواصل الاجتماعي بطريقه رائعه وباشكال مختلفه

للمعاينه

الكود

style type="text/css">

#buttonbg {width: 260px;margin: 10px 20px;padding: 0;}

#buttonbg li {cursor: pointer;height: 48px;position: relative;list-style-type: none;  }

#buttonbg .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkU40B_LFs-ttpZWBAPh-uji8pIHW1b4KF4wqB1Ezg_I9LCAPfm0TrHfG6vDSyNCBaFTzIuVvCkjojE7CWcZkXJe0hhsUo38UM-XSXvZuodI_TOsse5B8VHqy1tpvQcx-u2HPa24geCcs/s1600/blsocial12.png') 0 0 no-repeat;

background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block;

color: #141414;float: none;height: 48px;line-height: 48px;

;

-webkit-transition: width .25s ease-in-out, background-color .25s 

margin: 5px 0;position: relative;text-align: left;text-indent: 90px;

text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 

5ease-in-out;

-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;

-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;

;

-o-box-shadow: rgba(0,0,0, .28) 0 2px 3px;

box-shadow: rgba(0, 0, 0,

transition: width .25s ease-in-out, background-color .25s ease-in-out;

-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;

-moz-box-shadow: rgba(0,0,0, .28) 0 2px 3p

x .28) 0 2px 3px;

text-decoration: none;}

#buttonbg span:hover {visibility: hidden;}

#buttonbg span {display: block;top: 15px;position: absolute;left: 90px;}

#buttonbg .icon {color: #fafafa;overflow: hidden;}

color: rgba(167, 0, 0, .42); background-position: 0 -478px;}

#buttonbg .pint {backgroun

#buttonbg .fb {background-color: rgba(45,118,185, .42); background-position: 0 -382px;}

#buttonbg .twit {background-color: rgba(0, 161, 223, .42); background-position: 0 -430px;}

#buttonbg .google {background

-d-color: rgba(204, 0, 0, .42);background-position: 0 -526px;}

#buttonbg .linked {background-color: rgba(0, 87, 114, .42);  background-position: 0 -574px;}

#buttonbg .deviant {background-color: rgba(76, 122, 74, .42); background-position: 0 -622px;}

kground-color: #d91e76; }

#buttonbg li:hover .fb {background-color: #2d76b9;background-po

#buttonbg .ytube {background-color: rgba(170, 0, 0, .42); background-position: 0 -670px;}

#buttonbg .rss {background-color: rgba(255,109, 0, .42); background-position: 0 -718px;}

#buttonbg li:hover .icon {width: 250px; }

#buttonbg li:hover .icon {ba

csition: 0 2px;}

#buttonbg li:hover .twit {background-color: #00A1DF; background-position: 0 -46px; }

#buttonbg li:hover .google {background-color: #A70000;background-position: 0 -94px;}

#buttonbg li:hover .pint {background-color: #C00;background-position: 0 -142px; }

hover .rss {background-color: #EC5601;background-position: 0 -334px; }

#buttonbg .ico

#buttonbg li:hover .linked {background-color: #005772;background-position: 0 -190px;}

#buttonbg li:hover .deviant {background-color: #4C7A4A;background-position: 0 -238px;}

#buttonbg li:hover .ytube {background-color: #A00;background-position: 0 -286px; }

#buttonbg li

:n:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}

</style>

<ul id="buttonbg">

تابعنا علي الفايس بوك" class="icon fb">Like us on Facebook</a><span>Like us on Facebook</span></li>

<li ><a href=

"

li ><a href="تابعنا علي التويتر" class="icon twit" >Follow us on Twitter</a><span>Follow us on Twitter</span></li>

<

li ><a href="تابعنا علي جوجل بلس" class="icon google" >Follow us on Google+</a><span>Follow us on Google+</span></li>

<

li ><a href="تابعنا علي البنترست" class="icon pint">Follow us on Pinterest</a><span>Follow us on Pinterest</span></li>

<

li ><a href="Link Linkedin Anda" class="icon linked" >Follow us on LinkedIn</a><span>Follow us on LinkedIn</span></li>

<

li ><a href="Link Deviant Art Anda" class="icon deviant" >Follow us on DeviantArt</a><span>Follow us on DeviantArt</span></li>

<

li ><a href="تابعنا علي اليوتيوب" class="icon ytube">Follow us on Youtube</a><span>Follow us on Youtube</span></li>

<

li ><a href="تابعنا علي RSS" class="icon rss" >Subscribe via RSS</a><span>Subscribe via RSS</span></li>

<

/ul>

<

الشكل الثاني 

 اضافة كرة المشاركة المتمددة

اذهب الى تعديل القالب 

ثم 

ابحث عن الكود التالي 

</head>

ثم الصق الكود التالي فوقه 

<script type="text/javascript" src="http://w.sharethis.com/gallery/shareegg/shareegg.js"></script> <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script> <script type="text/javascript">stLight.options({publisher: "bea50586-2b9f-448d-947a-01385f28e305", onhover:false});</script> <link media="screen" type="text/css" rel="stylesheet" href="http://w.sharethis.com/gallery/shareegg/shareegg.css"></link>

ثم ابحث عن الكود التالي

</body>

ثم الصق الكود التالي فوقه

<div style='position: fixed; bottom: 2%; left: 2%;'><div id='shareThisOrnament' class='shareEgg'></div> <script type='text/javascript'>stlib.shareEgg.createEgg('shareThisOrnament', ['facebook','twitter','googleplus','pinterest','stumbleupon','linkedin','email','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'holiday'});</script> </div>

اتمني ان تنال اعجابكم  تقلبوا تحياتي