السلام عليكم و رحمة الله
اليوم سنقدم لكم اضافة جميلة و رائعة تتمثل في ازرار التواصل الاجتماعي مع اظهار عدد المتابعبن في تلك المواقع
أولا نذهب للمدونة
نختار قالب ثم تحرير html
إبحث عن الكود التالي
</head>
قم بوضع الكود التالي فوقه
<link rel='stylesheet' id='tie-style-css' href='https://dl.dropboxusercontent.com/s/9tweqtainus0d7v/style.css' type='text/css' media='all' />
|
بعد اتمام المراحل السابقة قم بالدخول
تخطيط
إضافة أداة و اختر HTML/JavaScript
قم باختيار الاكواد بالاسفل التي تراها مناسبة لك
الشكل الاول
<div class="arqam-widget-counter arq-outer-frame arq-colored arq-col3 arq-dark">
<ul>
<li class="arq-facebook">
<a href="http://www.facebook.com/" target="_blank">
<i class="arqicon-facebook"></i>
<span>37,336</span>
<small>Fans</small>
</a>
</li>
<li class="arq-twitter">
<a href="http://twitter.com/" target="_blank">
<i class="arqicon-twitter"></i>
<span>2,829</span>
<small>Followers</small>
</a>
</li>
<li class="arq-google">
<a href="http://plus.google.com/" target="_blank">
<i class="arqicon-gplus"></i>
<span>24,868</span>
<small>Followers</small>
</a>
</li>
<li class="arq-youtube">
<a href="http://youtube.com/user/" target="_blank">
<i class="arqicon-youtube"></i>
<span>6,325</span>
<small>Subscribers</small>
</a>
</li>
<li class="arq-linkedin">
<a href="http://www.linkedin.com/groups/" target="_blank">
<i class="arqicon-linkedin"></i>
<span>37,249</span>
<small>Members</small>
</a>
</li>
<li class="arq-dribbble">
<a href="http://dribbble.com/" target="_blank">
<i class="arqicon-dribbble"></i>
<span>8,551</span>
<small>Followers</small>
</a>
</li>
<li class="arq-instagram">
<a href="http://instagram.com/" target="_blank">
<i class="arqicon-instagram-filled"></i>
<span>416</span>
<small>Followers</small>
</a>
</li>
<li class="arq-vimeo">
<a href="https://vimeo.com/channels/" target="_blank">
<i class="arqicon-vimeo"></i>
<span>1,153</span>
<small>Subscribers</small>
</a>
</li>
<li class="arq-soundcloud">
<a href="http://soundcloud.com/" target="_blank">
<i class="arqicon-soundcloud"></i>
<span>30,670</span>
<small>Followers</small>
</a>
</li>
<li class="arq-envato">
<a href="http://themeforest.net/user/" target="_blank">
<i class="arqicon-envato"></i>
<span>949</span>
<small>Followers</small>
</a>
</li>
<li class="arq-behance">
<a href="http://www.behance.net/" target="_blank">
<i class="arqicon-behance"></i>
<span>47,542</span>
<small>Followers</small>
</a>
</li>
<li class="arq-forrst">
<a href="http://forrst.com/people/" target="_blank">
<i class="arqicon-forrst"></i>
<span>89</span>
<small>Followers</small>
</a>
</li>
<li class="arq-delicious">
<a href="http://delicious.com/" target="_blank">
<i class="arqicon-delicious"></i>
<span>1,138</span>
<small>Followers</small>
</a>
</li>
<li class="arq-github">
<a href="https://github.com/" target="_blank">
<i class="arqicon-github-circled"></i>
<span>195</span>
<small>Followers</small>
</a>
</li>
<li class="arq-foursquare">
<a href="http://foursquare.com/" target="_blank">
<i class="arqicon-foursquare"></i>
<span>287</span>
<small>Friends</small>
</a>
</li>
<li class="arq-vk">
<a href="http://vk.com/" target="_blank">
<i class="arqicon-vk"></i>
<span>151k</span>
<small>Members</small>
</a>
</li>
<li class="arq-posts">
<a>
<i class="arqicon-posts"></i>
<span>3</span>
<small>Posts</small>
</a>
</li>
<li class="arq-comments">
<a>
<i class="arqicon-comments"></i>
<span>5</span>
<small>Comments</small>
</a>
</li>
<li class="arq-mailchimp">
<a href="http://eepurl.com/" target="_blank">
<i class="arqicon-mail-alt"></i>
<span>9</span>
<small>Subscribers</small>
</a>
</li>
</ul>
</div>
الشكل الثاني
<div class="arqam-widget-counter arq-outer-frame arq-colored arq-col2">
<ul>
<li class="arq-facebook">
<a href="http://www.facebook.com/" target="_blank">
<i class="arqicon-facebook"></i>
<span>37,336</span>
<small>Fans</small>
</a>
</li>
<li class="arq-twitter">
<a href="http://twitter.com/" target="_blank">
<i class="arqicon-twitter"></i>
<span>2,829</span>
<small>Followers</small>
</a>
</li>
<li class="arq-google">
<a href="http://plus.google.com/106192958286631454676" target="_blank">
<i class="arqicon-gplus"></i>
<span>24,868</span>
<small>Followers</small>
</a>
</li>
<li class="arq-youtube">
<a href="http://youtube.com/user/TEAMMESAI" target="_blank">
<i class="arqicon-youtube"></i>
<span>6,325</span>
<small>Subscribers</small>
</a>
</li>
<li class="arq-linkedin">
<a href="http://www.linkedin.com/groups/WordPress-154024" target="_blank">
<i class="arqicon-linkedin"></i>
<span>37,249</span>
<small>Members</small>
</a>
</li>
<li class="arq-dribbble">
<a href="http://dribbble.com/MVBen" target="_blank">
<i class="arqicon-dribbble"></i>
<span>8,551</span>
<small>Followers</small>
</a>
</li>
<li class="arq-instagram">
<a href="http://instagram.com/imo3aser" target="_blank">
<i class="arqicon-instagram-filled"></i>
<span>416</span>
<small>Followers</small>
</a>
</li>
<li class="arq-vimeo">
<a href="https://vimeo.com/channels/kidproof" target="_blank">
<i class="arqicon-vimeo"></i>
<span>1,153</span>
<small>Subscribers</small>
</a>
</li>
<li class="arq-soundcloud">
<a href="http://soundcloud.com/maherzain" target="_blank">
<i class="arqicon-soundcloud"></i>
<span>30,670</span>
<small>Followers</small>
</a>
</li>
<li class="arq-envato">
<a href="http://themeforest.net/user/mo3aser" target="_blank">
<i class="arqicon-envato"></i>
<span>949</span>
<small>Followers</small>
</a>
</li>
<li class="arq-behance">
<a href="http://www.behance.net/matiascorea" target="_blank">
<i class="arqicon-behance"></i>
<span>47,542</span>
<small>Followers</small>
</a>
</li>
<li class="arq-forrst">
<a href="http://forrst.com/people/Ranger" target="_blank">
<i class="arqicon-forrst"></i>
<span>89</span>
<small>Followers</small>
</a>
</li>
<li class="arq-delicious">
<a href="http://delicious.com/chriscoyier" target="_blank">
<i class="arqicon-delicious"></i>
<span>1,138</span>
<small>Followers</small>
</a>
</li>
<li class="arq-github">
<a href="https://github.com/tobeytailor" target="_blank">
<i class="arqicon-github-circled"></i>
<span>195</span>
<small>Followers</small>
</a>
</li>
<li class="arq-foursquare">
<a href="http://foursquare.com/mo3aser" target="_blank">
<i class="arqicon-foursquare"></i>
<span>287</span>
<small>Friends</small>
</a>
</li>
<li class="arq-vk">
<a href="http://vk.com/applevk" target="_blank">
<i class="arqicon-vk"></i>
<span>151k</span>
<small>Members</small>
</a>
</li>
<li class="arq-posts">
<a>
<i class="arqicon-posts"></i>
<span>3</span>
<small>Posts</small>
</a>
</li>
<li class="arq-comments">
<a>
<i class="arqicon-comments"></i>
<span>5</span>
<small>Comments</small>
</a>
</li>
<li class="arq-mailchimp">
<a href="http://eepurl.com/CXp8H" target="_blank">
<i class="arqicon-mail-alt"></i>
<span>9</span>
<small>Subscribers</small>
</a>
</li>
</ul>
</div>
الشكل الثالث
<div class="arqam-widget-counter arq-outer-frame arq-colored arq-col3">
<ul>
<li class="arq-facebook">
<a href="http://www.facebook.com/" target="_blank">
<i class="arqicon-facebook"></i>
<span>37,336</span>
<small>Fans</small>
</a>
</li>
<li class="arq-twitter">
<a href="http://twitter.com/" target="_blank">
<i class="arqicon-twitter"></i>
<span>2,829</span>
<small>Followers</small>
</a>
</li>
<li class="arq-google">
<a href="http://plus.google.com/106192958286631454676" target="_blank">
<i class="arqicon-gplus"></i>
<span>24,868</span>
<small>Followers</small>
</a>
</li>
<li class="arq-youtube">
<a href="http://youtube.com/user/TEAMMESAI" target="_blank">
<i class="arqicon-youtube"></i>
<span>6,325</span>
<small>Subscribers</small>
</a>
</li>
<li class="arq-linkedin">
<a href="http://www.linkedin.com/groups/WordPress-154024" target="_blank">
<i class="arqicon-linkedin"></i>
<span>37,249</span>
<small>Members</small>
</a>
</li>
<li class="arq-dribbble">
<a href="http://dribbble.com/MVBen" target="_blank">
<i class="arqicon-dribbble"></i>
<span>8,551</span>
<small>Followers</small>
</a>
</li>
<li class="arq-instagram">
<a href="http://instagram.com/imo3aser" target="_blank">
<i class="arqicon-instagram-filled"></i>
<span>416</span>
<small>Followers</small>
</a>
</li>
<li class="arq-vimeo">
<a href="https://vimeo.com/channels/kidproof" target="_blank">
<i class="arqicon-vimeo"></i>
<span>1,153</span>
<small>Subscribers</small>
</a>
</li>
<li class="arq-soundcloud">
<a href="http://soundcloud.com/maherzain" target="_blank">
<i class="arqicon-soundcloud"></i>
<span>30,670</span>
<small>Followers</small>
</a>
</li>
<li class="arq-envato">
<a href="http://themeforest.net/user/mo3aser" target="_blank">
<i class="arqicon-envato"></i>
<span>949</span>
<small>Followers</small>
</a>
</li>
<li class="arq-behance">
<a href="http://www.behance.net/matiascorea" target="_blank">
<i class="arqicon-behance"></i>
<span>47,542</span>
<small>Followers</small>
</a>
</li>
<li class="arq-forrst">
<a href="http://forrst.com/people/Ranger" target="_blank">
<i class="arqicon-forrst"></i>
<span>89</span>
<small>Followers</small>
</a>
</li>
<li class="arq-delicious">
<a href="http://delicious.com/chriscoyier" target="_blank">
<i class="arqicon-delicious"></i>
<span>1,138</span>
<small>Followers</small>
</a>
</li>
<li class="arq-github">
<a href="https://github.com/tobeytailor" target="_blank">
<i class="arqicon-github-circled"></i>
<span>195</span>
<small>Followers</small>
</a>
</li>
<li class="arq-foursquare">
<a href="http://foursquare.com/mo3aser" target="_blank">
<i class="arqicon-foursquare"></i>
<span>287</span>
<small>Friends</small>
</a>
</li>
<li class="arq-vk">
<a href="http://vk.com/applevk" target="_blank">
<i class="arqicon-vk"></i>
<span>151k</span>
<small>Members</small>
</a>
</li>
<li class="arq-posts">
<a>
<i class="arqicon-posts"></i>
<span>3</span>
<small>Posts</small>
</a>
</li>
<li class="arq-comments">
<a>
<i class="arqicon-comments"></i>
<span>5</span>
<small>Comments</small>
</a>
</li>
<li class="arq-mailchimp">
<a href="http://eepurl.com/CXp8H" target="_blank">
<i class="arqicon-mail-alt"></i>
<span>9</span>
<small>Subscribers</small>
</a>
</li>
</ul>
</div>
الشكل الرابع
<div class="arqam-widget-counter arq-flat arq-col2">
<ul>
<li class="arq-facebook">
<a href="http://www.facebook.com/" target="_blank">
<i class="arqicon-facebook"></i>
<span>37,336</span>
<small>Fans</small>
</a>
</li>
<li class="arq-twitter">
<a href="http://twitter.com/" target="_blank">
<i class="arqicon-twitter"></i>
<span>2,829</span>
<small>Followers</small>
</a>
</li>
<li class="arq-google">
<a href="http://plus.google.com/106192958286631454676" target="_blank">
<i class="arqicon-gplus"></i>
<span>24,868</span>
<small>Followers</small>
</a>
</li>
<li class="arq-youtube">
<a href="http://youtube.com/user/TEAMMESAI" target="_blank">
<i class="arqicon-youtube"></i>
<span>6,325</span>
<small>Subscribers</small>
</a>
</li>
<li class="arq-linkedin">
<a href="http://www.linkedin.com/groups/WordPress-154024" target="_blank">
<i class="arqicon-linkedin"></i>
<span>37,249</span>
<small>Members</small>
</a>
</li>
<li class="arq-dribbble">
<a href="http://dribbble.com/MVBen" target="_blank">
<i class="arqicon-dribbble"></i>
<span>8,551</span>
<small>Followers</small>
</a>
</li>
<li class="arq-instagram">
<a href="http://instagram.com/imo3aser" target="_blank">
<i class="arqicon-instagram-filled"></i>
<span>416</span>
<small>Followers</small>
</a>
</li>
<li class="arq-vimeo">
<a href="https://vimeo.com/channels/kidproof" target="_blank">
<i class="arqicon-vimeo"></i>
<span>1,153</span>
<small>Subscribers</small>
</a>
</li>
<li class="arq-soundcloud">
<a href="http://soundcloud.com/maherzain" target="_blank">
<i class="arqicon-soundcloud"></i>
<span>30,670</span>
<small>Followers</small>
</a>
</li>
<li class="arq-envato">
<a href="http://themeforest.net/user/mo3aser" target="_blank">
<i class="arqicon-envato"></i>
<span>949</span>
<small>Followers</small>
</a>
</li>
<li class="arq-behance">
<a href="http://www.behance.net/matiascorea" target="_blank">
<i class="arqicon-behance"></i>
<span>47,542</span>
<small>Followers</small>
</a>
</li>
<li class="arq-forrst">
<a href="http://forrst.com/people/Ranger" target="_blank">
<i class="arqicon-forrst"></i>
<span>89</span>
<small>Followers</small>
</a>
</li>
<li class="arq-delicious">
<a href="http://delicious.com/chriscoyier" target="_blank">
<i class="arqicon-delicious"></i>
<span>1,138</span>
<small>Followers</small>
</a>
</li>
<li class="arq-github">
<a href="https://github.com/tobeytailor" target="_blank">
<i class="arqicon-github-circled"></i>
<span>195</span>
<small>Followers</small>
</a>
</li>
<li class="arq-foursquare">
<a href="http://foursquare.com/mo3aser" target="_blank">
<i class="arqicon-foursquare"></i>
<span>287</span>
<small>Friends</small>
</a>
</li>
<li class="arq-vk">
<a href="http://vk.com/applevk" target="_blank">
<i class="arqicon-vk"></i>
<span>151k</span>
<small>Members</small>
</a>
</li>
<li class="arq-posts">
<a>
<i class="arqicon-posts"></i>
<span>3</span>
<small>Posts</small>
</a>
</li>
<li class="arq-comments">
<a>
<i class="arqicon-comments"></i>
<span>5</span>
<small>Comments</small>
</a>
</li>
<li class="arq-mailchimp">
<a href="http://eepurl.com/CXp8H" target="_blank">
<i class="arqicon-mail-alt"></i>
<span>9</span>
<small>Subscribers</small>
</a>
</li>
</ul>
</div>
يمكنكم حذف الشبكات التي لا تستعملونها عن طريق حذف الوسوم التي تبدأ ب li">
و تنتهي ب </li>
مثال حذف فايسبوك
<li class="arq-facebook">
<a href="http://www.facebook.com/" target="_blank">
<i class="arqicon-facebook"></i>
<span>37,336</span>
<small>Fans</small>
</a>
</li>
في الاخير قم باستبدال الروابط بما يناسبك