اضافة مواقع التواصل شكل احترافي

اضافة رائعة وجميلة لمواقع التواصل على مدونات بلوجر

طريقة التركيب

ادخل الى لوحة التحكم

اذهب للقالب واختر تحرير HTML

ابحث عن ]]></b:skin> بالضغط على CTRL+F

وضيف الكود التالي فوقة:

.sw-social-counter{clear: both; overflow: hidden; margin-bottom: -16px;} .sw-social-counter .sc-wrapper{margin: 0 -7px;} .sw-social-counter .sc-wrapper .sc-item{padding: 0 7px;float: right;margin-bottom: 22px;width: 28.8%;} .sw-social-counter .sc-wrapper .sc-item .sc-item-inner{text-align: center;} .sw-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon{display: block;background: #4968a9;margin: 0;padding: 12px 0;font-size: 24px;color: #fff;position: relative;transition: all 0.2s ease-out 0s;-webkit-transition: all 0.2s ease-out 0s;-ms-transition: all 0.2s ease-out 0s;} .sw-social-counter .sc-wrapper .sc-item .sc-item-inner a:hover .sc-icon{opacity: 0.9;} .sw-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon:after{content: "";border-top: 7px solid #4968a9;border-left: 7px solid transparent;border-right: 7px solid transparent;position: absolute;left: 50%;bottom: -6px;margin-left: -7px;} .sw-social-counter .sc-wrapper .sc-item .sc-item-inner a .like-count{color: #747474;padding: 6px;display: block;clear: both;border: 1px solid #EFEFEF;border-top:none;position: relative;letter-spacing: 0px;font-family: cursive;}.sw-social-counter .sc-wrapper .sc-item .sc-item-inner a:hover .like-count{color: #626060;}.sw-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-rss{background: #fd9f13;}.sw-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-rss:after{border-top-color: #fd9f13;} .sw-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-twitter{background: #24e0f1;}.sw-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-twitter:after{border-top-color: #24e0f1;}.sw-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-linkedin{background: #0097BD;}.sw-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-linkedin:after{border-top-color: #0097BD;}.sw-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-youtube{background: #ce322e;}.sw-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-youtube:after{border-top-color: #ce322e;}.sw-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-vimeo{background: #5BC8FF;min-height: 48px;}.sw-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-vimeo:after{border-top-color: #5BC8FF;}.sw-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-google-plus{background: #ec3939;}.sw-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-google-plus:after{border-top-color: #ec3939;}.sw-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-dribbble{background: #eb4c89;}.sw-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-dribbble:after{border-top-color: #eb4c89;}.sw-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-instagram{background: #2f689b;}.sw-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-instagram:after{border-top-color: #2f689b;} #Label1 ul li{list-style:none;width:48%;float:right;padding:0 2px 0 3px;position:relative;} #Label1 li a{position: relative;width: 80%;float: right;display: block;padding: 4px .3em .4em .6em;margin: 2px;background: transparent;border: 1px solid #E7E7E7; color: #444;text-decoration: none;text-shadow: 1px 1px rgba(255, 255, 255, 0.48);font-family:cursive;text-align: right;} #Label1 li:after{ content: "\f0da";font: 18px fontawesome;left: 22px;top: 9px;position: absolute;color: #0FD2AD;} #Label1 ul li span{background: #0FD2AD;float: left;border:1px solid #0BBB9A;border-right: 0;color: #fff;font-weight: 700;margin-left: -3px;font: 11px electrolize;height: 84%;width: 22px;text-align: center;line-height: 30px;position: absolute;margin-top: 1.9px;} #Label1 li a:hover {color: #0FD2AD;border: 1px solid #E4E4E4;} .item-title {text-align: right;}

ثم اذهب للتخطيط واختر اضافة اداة - HTML/JavaScript وضيف الكود التالي مع تغيير مايلزم

<div id="sw_social_count-2" class="sw-social-counter">
<div class="sc-wrapper clearfix">

<div class="fb-like-button sc-item">
<div class="sc-item-inner">
<a href="#" title="Facebook" target="_blank"><span class="fa fa-facebook sc-icon"></span>
<span class="like-count">1235</span>
</a></div></div>

<div class="rss-button sc-item">
<div class="sc-item-inner">
<a href="#" title="" target="_blank">
<span class="fa fa-rss sc-icon"></span>
<span class="like-count">إشترك</span>
</a></div></div>

<div class="twitter-like-button sc-item">
<div class="sc-item-inner">
<a href="#" title="" target="_blank">
<span class="fa fa-twitter sc-icon"></span>
<span class="like-count">739</span>
</a></div></div>


<div class="vimeo-linke-button sc-item ">
<div class="sc-item-inner">
<a href="#" title="" target="_blank">
<span class="fa fa-youtube sc-icon"></span><span class="like-count">83</span>
</a></div></div>
<div class="gplus-like-button sc-item">
<div class="sc-item-inner">
<a href="#" title="" target="_blank">
<span class="fa fa-google-plus sc-icon"></span>
<span class="like-count">76</span></a></div></div>


<div class="dribbble-like-button sc-item ">
<div class="sc-item-inner">
<a href="#" title="" target="_blank">
<span class="fa fa-dribbble sc-icon"></span><span class="like-count">9000</span>
</a></div></div></div></div>