اضافة رائعة وجميلة لمواقع التواصل على مدونات بلوجر
طريقة التركيب
ادخل الى لوحة التحكم
اذهب للقالب واختر تحرير 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">
<!-- Facebook -->
<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>
<!-- RSS -->
<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>
<!-- Twitter -->
<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>
<!-- Linkedin -->
<!-- Vimeo -->
<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><!-- Google Plus -->
<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>
<!-- Instagram -->
<!-- Sound Cloud -->
<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>
ليصلك جديد المدونة اضغط على انضم معنا اي استفسار اكتبة بالتعليقات
رَدد دَائِمَا "سبْحَانَك مَا أَحْلَمَك،، وْبِحَالِي مَا أَعْلَمَك،، وَعَلَى تَفْرِيْج هَمِّي مَا أُقَدَّرْك،، أنْت ثِقَتِي وَرَجَائِي،، فَاجْعَل حُسْن ظَنّي فِيْك جَزَائِي " سُبْحَان الْلَّه وَبِحَمْدِه سُبْحَان الْلَّه الْعَظِيْم
تحويل كودإخفاء محول الأكواد الإبتساماتإخفاء