اضافة ارقام متجاوبة

السلام عليكم و رحمة الله

اليوم سنقدم لكم اضافة جميلة و رائعة تتمثل في ازرار التواصل الاجتماعي مع اظهار عدد المتابعبن في تلك المواقع

أولا نذهب للمدونة
نختار  قالب ثم تحرير 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>

في الاخير قم باستبدال الروابط بما يناسبك