اضافة ازرار مواقع التواصل الاجتماعي بشكل مميز

أولا نتوجهة الى مظهر المنتدى > التومبلايتات و القوالب > إدارة عامة

ثم نقوم بالنقر للتعديل على قالب index_box

ثم نقوم بإضافة الكود التالي أسفل التومبلات 

الكود:

<div class="clearbreak"></div>
<div id="jsn-social-icons">
<ul>
<li class="facebook">
<a href="https://www.facebook.com/" title="Facebook" target="_blank">
Facebook</a>
</li>
<li class="twitter">
<a href="https://twitter.com" title="Twitter" target="_blank">
Twitter</a>  
</li>
<li class="googleplus">
<a href="https://accounts.google.com" title="googleplus" target="_blank">
googleplus</a>
</li>
<li class="youtube">
<a href="http://www.youtube.com" title="YouTube" target="_blank">
YouTube</a>
</li>
</ul>
</div>


يمكنك التعديل على روابط الصفحات من الكود اعلاه 

ثم نتوجهة الى الوان > ورقة تصميم CSS

الكود:


#jsn-social-icons {
 text-align: center;
}

#jsn-social-icons ul {
 display: inline-block;
 margin: 0 auto;
}
#jsn-social-icons ul li {
 display: inline-block;
 list-style: none;
 margin-left: 3px;
 background-color: #fff;
 padding: 3px;
 border: 3px solid #dadada;
 border-radius: 100%;
 -moz-border-radius: 100%;
 -webkit-border-radius: 100%;
}
#jsn-social-icons ul li:first-child {
 margin-left: 0;
}
#jsn-social-icons ul li:hover {
 border-color: #aaa;
}
#jsn-social-icons ul li a {
 display: block;
 text-indent: -999em;
 background-image: url(http://store1.up-00.com/2016-02/145495321070611.png);
 background-repeat: no-repeat;
 width: 59px;
 height: 59px;
 transition: all 0.2s ease;
 -moz-transition: all 0.2s ease;
 -webkit-transition: all 0.2s ease;
 -o-transition: all 0.2s ease;
 opacity: 0.4;
 border-radius: 100%;
 -moz-border-radius: 100%;
 -webkit-border-radius: 100%;
}
#jsn-social-icons ul li:hover a,
#jsn-social-icons ul li a:hover {
 opacity: 1;
 background-color: transparent;

}
#jsn-social-icons ul li.facebook:hover a {
 background-position: 0 0;
}
#jsn-social-icons ul li.facebook a {
 background-position: 0 -59px;
}
#jsn-social-icons ul li.twitter:hover a {
 background-position: -177px 0;
}
#jsn-social-icons ul li.twitter a {
 background-position: -177px -59px;
}
#jsn-social-icons ul li.youtube:hover a {
 background-position: -59px 0;
}
#jsn-social-icons ul li.youtube a {
 background-position: -59px -59px;
}
#jsn-social-icons ul li.googleplus:hover a {
 background-position: -118px 0;
}
#jsn-social-icons ul li.googleplus a {
 background-position: -118px -59px;
}
#jsn-social-icons ul li.pinterest:hover a {
 background-position: -472px 0;
}
#jsn-social-icons ul li.pinterest a {
 background-position: -472px -59px;
}
#jsn-social-icons ul li.myspace:hover a {
 background-position: -590px 0;
}
#jsn-social-icons ul li.myspace a {
 background-position: -590px -59px;
}
#jsn-social-icons ul li.flickr:hover a {
 background-position: -413px 0;
}
#jsn-social-icons ul li.flickr a {
 background-position: -413px -59px;
}
#jsn-social-icons ul li.dribble:hover a {
 background-position: -295px 0;
}
#jsn-social-icons ul li.dribble a {
 background-position: -295px -59px;
}
#jsn-social-icons ul li.stumbleupon:hover a {
 background-position: -649px 0;
}
#jsn-social-icons ul li.stumbleupon a {
 background-position: -649px -59px;
}
#jsn-social-icons ul li.yahoo:hover a {
 background-position: -354px 0;
}
#jsn-social-icons ul li.yahoo a {
 background-position: -354px -59px;
}
#jsn-social-icons ul li.skype:hover a {
 background-position: -531px 0;
}
#jsn-social-icons ul li.skype a {
 background-position: -531px -59px;
}
#jsn-social-icons ul li.rss:hover a {
 background-position: -236px 0;
}
#jsn-social-icons ul li.rss a {
 background-position: -236px -59px;
}
#jsn-social-icons ul li.linkedin a:hover {
 background-position: -708px 0;
}
#jsn-social-icons ul li.linkedin a {
 background-position: -708px -59px;

ملاحظة الرابط اسفله هو رابط الايقونات قم بحفظها على جهازك في حال تم حذفها من الموقع وارفع وعدل على الرابط في ورقة تصميم CSS

الكود:

http://store1.up-00.com/2016-02/145495321070611.png

واخيرا شكرا :)