أزرار مواقع التواصل الإجتماعي D

1. لوحة تحكم بلوجر.
2. إضافة أداة.
3. javascript.
4. يمكنك المعاينه من هنا

• الشكل الأول

<div class="widget-content"> <style type="text/css"> /* Social sidebar */ #tuhfawebsrev{display:block;position:relative;margin:0 0 30px} #tuhfawebsrev ul{margin:0 0 0 -1%!important;padding:0;display:table;width:100%;list-style:none} #tuhfawebsrev ul a{color:#fff} #tuhfawebsrev ul li{margin:0;padding:0} #tuhfawebsrev ul li.social_btn{width:32.33%;display:inline-block;margin:0 0 0 1%!important;float:left;padding:0} #tuhfawebsrev ul li a.social_item{font-size:15px;color:#fff;display:block;text-align:center;margin:0 0 3.5px;padding:15px 0 0;list-style:none;transition:all .4s ease-out;} #tuhfawebsrev ul li a.social_item i{background:rgba(0,0,0,0.15);width:40px;height:40px;line-height:40px;border-radius:99em} #tuhfawebsrev ul li a.social_item.s_fb{background:#3F5B9B;} #tuhfawebsrev ul li a.social_item.s_tw{background:#1C97DE;} #tuhfawebsrev ul li a.social_item.s_gp{background:#c24538;} #tuhfawebsrev ul li a.social_item.s_ig{background:#8e605b;} #tuhfawebsrev ul li a.social_item.s_yt{background:#d12b19;} #tuhfawebsrev ul li a.social_item.s_le{background:#306eeb;} #tuhfawebsrev ul li.social_btn:hover .s_le,#tuhfawebsrev ul li.social_btn:hover .s_yt,#tuhfawebsrev ul li.social_btn:hover .s_ig,#tuhfawebsrev ul li.social_btn:hover .s_gp,#tuhfawebsrev ul li.social_btn:hover .s_tw,#tuhfawebsrev ul li.social_btn:hover .s_fb{transition:all .4s ease-out;opacity:.9} #tuhfawebsrev ul li a .sdesc{font-size:12px;display:inline-block;width:100%;padding:2px 0 4px;margin:15px 0 0;background:rgba(0,0,0,0.17);position:relative;bottom:0} </style> <div id='tuhfawebsrev'><ul> <li class='social_btn'><a class='social_item s_fb' href='#' itemprop='sameAs' rel='nofollow' target='_blank' title='فيسبوك'><i class='fa fa-facebook fa-fw social_icon'></i><span class='sdesc'>فيسبوك</span></a></li> <li class='social_btn'><a class='social_item s_gp' href='#' itemprop='sameAs' rel='nofollow' target='_blank' title='قوقل+'><i aria-hidden='true' class='fa fa-google-plus'></i><span class='sdesc'>قوقل+</span></a></li> <li class='social_btn'><a class='social_item s_tw' href='#' itemprop='sameAs' rel='nofollow' target='_blank' title='تويتر'><i class='fa fa-twitter fa-fw social_icon'></i><span class='sdesc'>تويتر</span></a></li> <li class='social_btn'><a class='social_item s_ig' href='#' itemprop='sameAs' rel='nofollow' target='_blank' title='Follow on Instagram'><i aria-hidden='true' class='fa fa-instagram'></i><span class='sdesc'>إنستقرام</span></a></li> <li class='social_btn'><a class='social_item s_le' href='#' itemprop='sameAs' rel='nofollow' target='_blank' title='لينكإن'><i aria-hidden='true' class='fa fa-linkedin'></i><span class='sdesc'>لينكدإن</span></a></li> <li class='social_btn'><a class='social_item s_yt' href='#' itemprop='sameAs' rel='nofollow' target='_blank' title='يوتيوب'><i aria-hidden='true' class='fa fa-youtube'></i><span class='sdesc'>يوتيوب</span></a></li> </ul></div> </div>

• الشكل الثاني 

<div class="widget-content"> <style type="text/css"> /* Social sidebar */ #tuhfawebsrev{display:block;position:relative;margin:0 0 30px} #tuhfawebsrev ul{margin:0 0 0 -1%!important;padding:0;display:table;width:100%;list-style:none} #tuhfawebsrev ul a{color:#fff} #tuhfawebsrev ul li{margin:0;padding:0} #tuhfawebsrev ul li.social_btn{width:32.33%;display:inline-block;margin:0 0 0 1%!important;float:left;padding:0} #tuhfawebsrev ul li a.social_item{font-size:15px;color:#888;display:block;text-align:center;margin:0 0 3.5px;padding:15px 0 0;list-style:none;transition:all .4s ease-out;background:#eee} #tuhfawebsrev ul li a.social_item i{width:40px;height:40px;line-height:32px;border-radius:99em;border:5px solid rgba(225,225,225,0.7);color:#fff} #tuhfawebsrev ul li a.social_item.s_fb i{background:#3F5B9B;} #tuhfawebsrev ul li a.social_item.s_tw i{background:#1C97DE;} #tuhfawebsrev ul li a.social_item.s_gp i{background:#c24538;} #tuhfawebsrev ul li a.social_item.s_ig i{background:#8e605b;} #tuhfawebsrev ul li a.social_item.s_yt i{background:#d12b19;} #tuhfawebsrev ul li a.social_item.s_le i{background:#306eeb;} #tuhfawebsrev ul li.social_btn:hover .s_le,#tuhfawebsrev ul li.social_btn:hover .s_yt,#tuhfawebsrev ul li.social_btn:hover .s_ig,#tuhfawebsrev ul li.social_btn:hover .s_gp,#tuhfawebsrev ul li.social_btn:hover .s_tw,#tuhfawebsrev ul li.social_btn:hover .s_fb{transition:all .4s ease-out;opacity:.9} #tuhfawebsrev ul li a .sdesc{font-size:12px;display:inline-block;width:100%;padding:2px 0 4px;margin:15px 0 0;background:rgba(0,0,0,0.17);position:relative;bottom:0} </style> <div id='tuhfawebsrev'><ul> <li class='social_btn'><a class='social_item s_fb' href='#' itemprop='sameAs' rel='nofollow' target='_blank' title='فيسبوك'><i class='fa fa-facebook fa-fw social_icon'></i><span class='sdesc'>فيسبوك</span></a></li> <li class='social_btn'><a class='social_item s_gp' href='#' itemprop='sameAs' rel='nofollow' target='_blank' title='قوقل+'><i aria-hidden='true' class='fa fa-google-plus'></i><span class='sdesc'>قوقل+</span></a></li> <li class='social_btn'><a class='social_item s_tw' href='#' itemprop='sameAs' rel='nofollow' target='_blank' title='تويتر'><i class='fa fa-twitter fa-fw social_icon'></i><span class='sdesc'>تويتر</span></a></li> <li class='social_btn'><a class='social_item s_ig' href='#' itemprop='sameAs' rel='nofollow' target='_blank' title='إنستقرام'><i aria-hidden='true' class='fa fa-instagram'></i><span class='sdesc'>إنستقرام</span></a></li> <li class='social_btn'><a class='social_item s_le' href='#' itemprop='sameAs' rel='nofollow' target='_blank' title='لينكدإن'><i aria-hidden='true' class='fa fa-linkedin'></i><span class='sdesc'>لينكدإن</span></a></li> <li class='social_btn'><a class='social_item s_yt' href='#' itemprop='sameAs' rel='nofollow' target='_blank' title='يوتيوب'><i aria-hidden='true' class='fa fa-youtube'></i><span class='sdesc'>يوتيوب</span></a></li> </ul></div> </div>