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

السلام عليكم ورحمة الله تعالى وبركاته سوف نتطرق في هذه التدوينة إلى كيفيةاضافة ايقونات تفاعلية لمواقع التواصل الاجتماعي مرفقة بالعداد  حيث أن هذه الإضافة تتميز بالمسة الاحترافية الجمالية .

ونحن نعلم بأن للمواقع الاجتماعية دور كبير في زيادة شعبية المدونات في وقت قصير،لذلك فمن المهم جداً استخدام هذه الاضافة  في مدونتك، وبما أن هذه الاضافة فيها لمسة جمالية احترافية تمكنك من جذب الزوار للإنضمام بسهولة إلى صفحات الشبكات الاجتماعية الخاصة بك.

اليوم أحضرنا لكم إضافة جد أنيقة وجذابة وهي عبارة عن أزرار الإشتراك بالمواقع الإجتماعية مرفقة بالعداد، حيث تحتوي على مجموعة من مواقع التواصل الاجتماعي .

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

1- ادخل إلى مدونتك ، اختر لوحة التحكم .

2- من لوحة التحكم اختر قالب ومن ثم اضغط على تحرير قالب HTML

3-ابحث عن هذا الوسم : ]]></b:skin> 

4- ضع الكود التالي فوقه .

 /* Social Media with counter by www.homeblog7.blogspot.com */
.list-unstyled {
  padding-left: 0;
  list-style: none;
  margin: 2px
}

.list-inline li {
  display: inline-block;
  padding-right: 5px;
  padding-left: 5px;
  margin-bottom: 10px
}

.HB-colored-social .fa,
.HB-social-icons .fa {
  font-size: 16px
}

.HB-colored-social .fa,
.HB-social-icons .fa {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out
}

.HB-colored-social .fa,
.HB-social-icons .fa {
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  color: #FFF;
  color: rgba(255, 255, 255, 0.8)
}

.HB-colored-social.icon-circle .fa,
.HB-social-icons.icon-circle .fa {
  border-radius: 50%
}

.HB-colored-social.icon-rounded .fa,
.HB-social-icons.icon-rounded .fa {
  border-radius: 2px
}

.HB-colored-social.icon-flat .fa,
.HB-social-icons.icon-flat .fa {
  border-radius: 0
}

.HB-colored-social .fa:hover,
.HB-colored-social .fa:active,
.HB-social-icons .fa:hover,
.HB-social-icons .fa:active {
  color: #FFF
}

.HB-colored-social.icon-zoom .fa:hover,
.HB-colored-social.icon-zoom .fa:active,
.HB-social-icons.icon-zoom .fa:hover,
.HB-social-icons.icon-zoom .fa:active,
.HB-social-sidebar li:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1)
}

.HB-colored-social.icon-rotate .fa:hover,
.HB-colored-social.icon-rotate .fa:active,
.HB-social-icons.icon-rotate .fa:hover,
.HB-social-icons.icon-rotate .fa:active {
  -webkit-transform: scale(1.1) rotate(360deg);
  -moz-transform: scale(1.1) rotate(360deg);
  -ms-transform: scale(1.1) rotate(360deg);
  -o-transform: scale(1.1) rotate(360deg);
  transform: scale(1.1) rotate(360deg)
}

.HB-colored-social .fa-dribbble,
.HB-social-icons .fa-dribbble:hover,
.HB-socialicons .HB-dribbble:hover .HB-sicon {
  background-color: #F46899
}


.HB-colored-social .fa-stumbleupon,
.HB-social-icons .fa-stumbleupon:hover,
.HB-socialicons .HB-stumbleupon:hover .HB-sicon {
  background-color: #eb4924
}

.HB-colored-social .fa-reddit,
.HB-social-icons .fa-reddit:hover {
  background-color: #5f99cf
}

.HB-colored-social .fa-facebook,
.HB-social-icons .fa-facebook:hover,
.HB-socialicons .bs-facebook:hover .HB-sicon {
  background-color: #3C599F
}

.HB-colored-social .fa-rss,
.HB-social-icons .fa-rss:hover,
.HB-socialicons .HB-rss:hover .HB-sicon {
  background-color: #f26522
}

.HB-colored-social .fa-flickr,
.HB-social-icons .fa-flickr:hover,
.HB-socialicons .HB-flickr:hover .HB-sicon {
  background-color: #d51007
}

.HB-colored-social .fa-flickr,
.HB-social-icons .fa-flickr:hover {
  background-color: #FF0084
}

.HB-colored-social .fa-instagram,
.HB-social-icons .fa-instagram:hover,
.HB-socialicons .HB-instagram:hover .HB-sicon {
  background-color: #685243
}

.HB-colored-social .fa-foursquare,
.HB-social-icons .fa-foursquare:hover,
.HB-socialicons .HB-foursquare:hover .HB-sicon {
  background-color: #0086BE
}

.HB-colored-social .fa-github,
.HB-social-icons .fa-github:hover,
.HB-socialicons .HB-github:hover .HB-sicon {
  background-color: #070709
}

.HB-colored-social .fa-google-plus,
.HB-social-icons .fa-google-plus:hover,
.HB-socialicons .HB-googleplus:hover .HB-sicon {
  background-color: #CF3D2E
}

.HB-colored-social .fa-instagram,
.HB-social-icons .fa-instagram:hover {
  background-color: #A1755C
}

.HB-colored-social .fa-linkedin,
.HB-social-icons .fa-linkedin:hover,
.HB-socialicons .HB-linkedin:hover .HB-sicon {
  background-color: #0085AE
}

.HB-colored-social .fa-pinterest,
.HB-social-icons .fa-pinterest:hover,
.HB-socialicons .HB-pinterest:hover .HB-sicon {
  background-color: #CC2127
}

.HB-colored-social .fa-twitter,
.HB-social-icons .fa-twitter:hover,
.HB-socialicons .HB-twitter:hover .HB-sicon {
  background-color: #32CCFE
}

.HB-colored-social .fa-vk,
.HB-social-icons .fa-vk:hover,
.HB-socialicons .HB-vk:hover .HB-sicon {
  background-color: #375474
}

.HB-colored-social .fa-soundcloud,
.HB-social-icons .fa-soundcloud:hover,
.HB-socialicons .HB-soundcloud:hover .HB-sicon {
  background-color: #FF4100
}

.HB-colored-social .fa-vine,
.HB-social-icons .fa-vine:hover,
.HB-socialicons .HB-vine:hover .HB-sicon {
  background-color: #35B57C
}


.HB-colored-social .fa-youtube,
.HB-social-icons .fa-youtube:hover,
.HB-socialicons .HB-youtube:hover .HB-sicon {
  background-color: #C52F30
}

.top-social ul li {
  margin: 0;
  padding: 0
}

div#socialicons-top {
  float: left
}

.top-social .list-unstyled {
  margin: 0
}

.HB-socialicons {
  text-align: center;
  overflow: auto;
  font-size: 22px;
  margin: 0 -8px
}

.HB-socialicons .HB-socialInner {
  position: relative;
  overflow: hidden;
  padding-left: 8px
}

.HB-socialicons .HB-social {
  float: left;
  width: 25%
}

.HB-socialicons .HB-sinn {
  padding-right: 8px
}

.HB-socialicons .HB-sinn:hover .HB-sicon {
  color: #fff
}

.HB-socialicons .HB-sicon {
  display: block;
  padding: 10px 0;
}

.HB-socialicons .HB-facebook .HB-sicon {
  color: #3B5998
}

.HB-socialicons .HB-googleplus .HB-sicon {
  color: #DD4B39
}

.HB-socialicons .HB-twitter .HB-sicon {
  color: #2AA9E0
}

.HB-socialicons .HB-instagram .HB-sicon {
  color: #685243
}

.HB-socialicons .HB-pinterest .HB-sicon {
  color: #CC2028
}

.HB-socialicons .HB-youtube .HB-sicon {
  color: #DE1829
}

.HB-socialicons .HB-vine .HB-sicon {
  color: #35B57C
}

.HB-socialicons .HB-soundcloud .HB-sicon {
  color: #FF4100
}

.HB-socialicons .HB-vk .bs-sicon {
  color: #45668e
}

.HB-socialicons .HB-foursquare .HB-sicon {
  color: #f94877
}

.HB-socialicons .HB-github .HB-sicon {
  color: #333333
}

.HB-socialicons .HB-dribbble .HB-sicon {
  color: #ea4c89
}

.HB-socialicons .HB-stumbleupon .HB-sicon {
  color: #eb4924
}

.HB-socialicons .HB-linkedin .HB-sicon {
  color: #0085AE
}

.HB-socialicons .HB-rss .HB-sicon {
  color: #f26522
}

.HB-socialicons .HB-flickr .HB-sicon {
  color: #FF0084
}

.HB-socialicons .HB-sicon {
  background: #F5F5F5;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease
}

.HB-socialicons .HB-scount {
  display: block;
  color: #FFFFFF;
  background: #007ABE;
  padding: 5px 0;
  position: relative;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600
}

.HB-socialicons .HB-scount:after {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(238, 238, 238, 0);
  border-bottom-color: #007ABE;
  border-width: 4px;
  margin-left: -4px
}

.HB-socialicons .HB-scount:hover {
  background: #222222;
} 

5- احفظ القالب

6- اذهب إلى تخطيط واختر إضافة أداة : HTML/JavaScript

7- ضع الكود التالي في صندوق الأداة ثم احفظ .

 <div class="HB-socialicons">
<div class="HB-socialInner">
  <!--Facebook-->
    <div class="HB-social">
  <div class="HB-facebook HB-sinn">
      <a href='#' target='_blank' tibse="Facebook">
      <span class="HB-sicon"><i class="fa fa-facebook"></i></span>
      <span class="HB-scount">3.1K</span>
      </a>
      </div>
      </div>
  <!--Google Plus-->
    <div class="HB-social">
  <div class="HB-googleplus HB-sinn">
      <a href='#' target='_blank' tibse="Google Plus">
      <span class="HB-sicon"><i class="fa fa-google-plus"></i></span>
      <span class="HB-scount">2K</span>
      </a>
    </div>
    </div>
  <!--Twitter-->
  <div class="HB-social">
  <div class="HB-twitter HB-sinn">
      <a href='#' target='_blank' tibse="Twitter">
      <span class="HB-sicon"><i class="fa fa-twitter"></i></span>
      <span class="HB-scount">1.4K</span>
      </a>
    </div>
    </div>
  <!--Instagram-->
  <div class="HB-social">
  <div class="HB-instagram HB-sinn">
      <a href='#' target='_blank' tibse="Instagram">
      <span class="HB-sicon"><i class="fa fa-instagram"></i></span>
      <span class="HB-scount">2K</span>
      </a>
    </div>
    </div>
  <!--Pinterest-->
  <div class="HB-social">
  <div class="HB-pinterest bs-sinn">
      <a href='#' target='_blank' tibse="Pinterest">
      <span class="HB-sicon"><i class="fa fa-pinterest"></i></span>
      <span class="HB-scount">4.5K</span>
      </a>
    </div>
    </div>
  <!--Youtube-->
  <div class="HB-social">
  <div class="HB-youtube HB-sinn">
      <a href='#' target='_blank' tibse="YouTube">
      <span class="HB-sicon"><i class="fa fa-youtube"></i></span>
      <span class="HB-scount">2.8K</span>
      </a>
    </div>
    </div>
  <!--Vine-->
  <div class="HB-social">
  <div class="HB-vine HB-sinn">
      <a href='#' target='_blank' tibse="Vine">
      <span class="HB-sicon"><i class="fa fa-vine"></i></span>
      <span class="HB-scount">3.3K</span>
      </a>
    </div>
    </div>
  <!--SoundCloud-->
  <div class="HB-social">
  <div class="HB-soundcloud HB-sinn">
      <a href='#' target='_blank' tibse="SoundCloud">
      <span class="HB-sicon"><i class="fa fa-soundcloud"></i></span>
      <span class="HB-scount">3.9K</span>
      </a>
    </div>
    </div>
    
      <!--VK-->
      <div class="HB-social">
  <div class="HB-vk HB-sinn">
      <a href='#' target='_blank' tibse="VK">
      <span class="HB-sicon"><i class="fa fa-vk"></i></span>
      <span class="HB-scount">3.9K</span>
      </a>
    </div>
    </div>
      <!---->
      <div class="HB-social">
  <div class="HB-foursquare HB-sinn">
      <a href='#' target='_blank' tibse="Foursquare">
      <span class="HB-sicon"><i class="fa fa-foursquare"></i></span>
      <span class="HB-scount">3.9K</span>
      </a>
    </div>
    </div>
      <!--GitHub-->
      <div class="HB-social">
  <div class="HB-github HB-sinn">
      <a href='#' target='_blank' tibse="GitHub">
      <span class="HB-sicon"><i class="fa fa-github"></i></span>
      <span class="HB-scount">3.9K</span>
      </a>
    </div>
    </div>
      <!--Dribbble-->
      <div class="HB-social">
  <div class="HB-dribbble HB-sinn">
      <a href='#' target='_blank' tibse="Dribbble">
      <span class="HB-sicon"><i class="fa fa-dribbble"></i></span>
      <span class="HB-scount">3.9K</span>
      </a>
    </div>
    </div>
    
     <!--Stumbleupon-->
      <div class="HB-social">
  <div class="HB-stumbleupon HB-sinn">
      <a href='#' target='_blank' tibse="Stumbleupon">
      <span class="HB-sicon"><i class="fa fa-stumbleupon"></i></span>
      <span class="HB-scount">3.4K</span>
      </a>
    </div>
    </div>

     <!--Linkedin-->
      <div class="HB-social">
  <div class="HB-linkedin HB-sinn">
      <a href='#' target='_blank' tibse="Linkedin">
      <span class="HB-sicon"><i class="fa fa-linkedin"></i></span>
      <span class="HB-scount">1.5K</span>
      </a>
    </div>
    </div>

     <!--Rss-->
      <div class="HB-social">
  <div class="HB-rss HB-sinn">
      <a href='#' target='_blank' tibse="Rss">
      <span class="HB-sicon"><i class="fa fa-rss"></i></span>
      <span class="HB-scount">1.9K</span>
      </a>
    </div>
    </div>

     <!--Flickr-->
      <div class="HB-social">
  <div class="HB-flickr HB-sinn">
      <a href='#' target='_blank' tibse="flickr">
      <span class="HB-sicon"><i class="fa fa-flickr"></i></span>
      <span class="HB-scount">2.9K</span>
      </a>
    </div>
    </div>

    </div>
</div>
</div> 

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest