أداة التواصل الإجتماعي بشكل رائع | الشكل الأول

أداة التواصل الإجتماعي بشكل رائع | الشكل الأول - اداة احترافية بمعنى الكلمة بتأثيرات احترافة تحتوي الاداة على مجموعة من المواقع الاجتماعية تتكون المجموعة من (5) مواقع وهي الفيسيبوك و تويتر ويوتيوب و جوجل بلس وانستجرام بالاضافة الى خلاصة المدونة (rss) لاتحتاج لمجهود لاضافتها فقط كود html و كود التنسيق css 

للمعاينة إضغط هنا 

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

1. توجه للتخطيط وإختار إضافة اداة جافا سيكربت .

2. أضف بها الكود التالي :

<div id="socialcounter">
<ul class="social-counter">
<li class="social_item-wrapper"><a class="social_item social_facebook" href="#" rel="nofollow" target="_blank"><i class="fa fa-facebook social_icon"></i><span class="social_num">فيسبوك</span></a>
</li>
<li class="social_item-wrapper"><a class="social_item social_twitter" href="#" rel="nofollow" target="_blank"><i class="fa fa-twitter social_icon"></i><span class="social_num">تويتر</span></a>
</li>
<li class="social_item-wrapper"><a class="social_item social_youtube" href="#" rel="nofollow" target="_blank"><i class="fa fa-youtube social_icon"></i><span class="social_num">يوتيوب</span></a>
</li>
<li class="social_item-wrapper"><a class="social_item social_rss" href="#" rel="nofollow" target="_blank"><i class="fa fa-rss social_icon"></i><span class="social_num">الخلاصة</span></a>
</li>
<li class="social_item-wrapper"><a class="social_item social_google-plus" href="#" rel="nofollow" target="_blank"><i class="fa fa-google-plus social_icon"></i><span class="social_num">جوجل</span></a>
</li>
<li class="social_item-wrapper"><a class="social_item social_instagram" href="#" rel="nofollow" target="_blank"><i class="fa fa-instagram social_icon"></i><span class="social_num">انستجرام</span></a>
</li>
</ul>
</div>

3.ابحث عن الوسم <head/> لتضيف اعلاه كود التنسيق هذا :

<style>
#socialcounter{overflow:hidden;margin:0 0 20px 0}
#socialcounter ul{margin:0}
#socialcounter ul a{color:#fff}
#socialcounter ul li.social_item-wrapper{float:right;width:48%;text-align:center;margin:0 0 10px 4%;color:#fff}
#socialcounter ul li a.social_item{position:relative;display:block;opacity:.9;height:50px;line-height:50px;overflow:hidden}
#socialcounter ul li.social_item-wrapper:nth-child(2n+2){margin:0}
.social_icon{float:right;line-height:50px;width:41px;font-size:1.3rem}
#socialcounter ul li a.social_item.social_facebook{background:#3F5B9B}
.fa-facebook.social_icon{background:#2E4372}
#socialcounter ul li.social_item-wrapper:hover .fa-facebook.social_icon{background:#3F5B9B}
#socialcounter ul li.social_item-wrapper:hover .social_facebook{background:#2E4372}
#socialcounter ul li a.social_item.social_twitter{background:#1C97DE}
.fa-twitter.social_icon{background:#1571A5}
#socialcounter ul li.social_item-wrapper:hover .fa-twitter.social_icon{background:#1C97DE}
#socialcounter ul li.social_item-wrapper:hover .social_twitter{background:#1571A5}
#socialcounter ul li a.social_item.social_youtube{background:#E22020}
.fa-youtube.social_icon{background:#B31919}
#socialcounter ul li.social_item-wrapper:hover .fa-youtube.social_icon{background:#E22020}
#socialcounter ul li.social_item-wrapper:hover .social_youtube{background:#B31919}
#socialcounter ul li a.social_item.social_rss{background:#E86321}
.fa-rss.social_icon{background:#C2521B}
#socialcounter ul li.social_item-wrapper:hover .fa-rss.social_icon{background:#E86321}
#socialcounter ul li.social_item-wrapper:hover .social_rss{background:#C2521B}
#socialcounter ul li a.social_item.social_google-plus{background:#E82C2C}
.fa-google-plus.social_icon{background:#BF2424}
#socialcounter ul li.social_item-wrapper:hover .fa-google-plus.social_icon{background:#E82C2C}
#socialcounter ul li.social_item-wrapper:hover .social_google-plus{background:#BF2424}
#socialcounter ul li a.social_item.social_instagram{background:#8E714D}
.fa-instagram.social_icon{background:#6F583C}
#socialcounter ul li.social_item-wrapper:hover .fa-instagram.social_icon{background:#8E714D}
#socialcounter ul li.social_item-wrapper:hover .social_instagram{background:#6F583C}
#socialcounter ul li a.social_item.social_pinterest{background:#CA2027}
.fa-pinterest.social_icon{background:#AB1B21}
#socialcounter ul li.social_item-wrapper:hover .fa-pinterest.social_icon{background:#CA2027}
#socialcounter ul li.social_item-wrapper:hover social_pinterest{background:#AB1B21}
</style>

⬅ ملاحظة إذا لم تكن متوفر على كود الايقونات في قالبك أضف الكود التالي اعلى <head> 

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>