اضافة اداة التواصل بطريقة رائعة وخيالية

السلام عليكم ورحمة الله وبركاته 
اعزائي متابعي مدونة تكنولوجيا المعلومات . اليوم جئت لكم بإضافة مهمة وجميله لمدونات بلوجر
اضافة اليوم مهمة لكل مدونة وهي اداة التواصل الاجتماعي فيس بوك وتويتر وجوجل بلس 

صورة من اداة التواصل الاجتماعي

لمشاهدة الاداة موجودة علي المدونة 
انضم الينا لتحصل علي كل جديد
طريقة تركيب الاداة سهلة وبسيطة 
اذهب الي لوحة التحكم واختر تخطيط واضافة اداة واختار اضافة HTML/Javascript

وضع الكود بعد التعديل علية

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

<style type="text/css"> 
.container { 
  margin: 0px auto; 
  width: 270px; 
  text-align: center; 
  float: center; 
} 
.btn-sbm { 
  display: inline-block; 
  vertical-align: top; 
  position: relative; 
  margin: 0 5px; 
  padding-top: 40px; 
  width: 75px; 
  font-weight: bold; 
  text-align: center; 
  text-decoration: none; 
  border-radius: 8px; 
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); 
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); 
} 
.btn-sbm:active { 
  margin-top: 3px; 
} 
.btn-sbm:active .btn-sbm-action { 
  padding-bottom: 3px; 
  -webkit-box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.15); 
  box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.15); 
} 
.btn-sbm:active .btn-sbm-action:after { 
  bottom: 3px; 
} 
.btn-sbm-count { 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  line-height: 40px; 
  font-size: 20px; 
  letter-spacing: -1px; 
  color: #555; 
  text-shadow: 0 1px white; 
  background: #e6eff5; 
  border-width: 1px 1px 0; 
  border-style: solid; 
  border-color: #c5c5c5 #bbb; 
  border-radius: 8px 8px 0 0; 
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%); 
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%); 
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%); 
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 0%, transparent 40%); 
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07); 
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07); 
} 
.btn-sbm-count:before, .btn-sbm-count:after { 
  content: ''; 
  position: absolute; 
  top: 100%; 
  left: 50%; 
  margin-left: -6px; 
  border: 6px solid transparent; 
  border-top-color: #e6eff5; 
} 
.btn-sbm-count:before { 
  margin-left: -7px; 
  margin-top: 1px; 
  border-width: 7px; 
  border-top-color: rgba(0, 0, 0, 0.07); 
} 
.btn-sbm-action { 
  display: block; 
  position: relative; 
  line-height: 32px; 
  padding: 2px 0 6px; 
  font-size: 18px; 
  color: white; 
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); 
  border: solid rgba(0, 0, 0, 0.18); 
  border-width: 0 1px; 
  border-radius: 0 0 8px 8px; 
} 
.btn-sbm-action:after { 
  content: ''; 
  position: absolute; 
  top: 0; 
  bottom: 6px; 
  left: 0; 
  right: 0; 
  border-radius: 0 0 6px 6px; 
  -webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25); 
  box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25); 
} 
.btn-sbm-tweet { 
  background: #83cfe8; 
  background-image: -webkit-linear-gradient(top, #83cfe8, #6ebbd4); 
  background-image: -moz-linear-gradient(top, #83cfe8, #6ebbd4); 
  background-image: -o-linear-gradient(top, #83cfe8, #6ebbd4); 
  background-image: linear-gradient(to bottom, #83cfe8, #6ebbd4); 
  -webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15); 
  box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15); 
} 
.btn-sbm-tweet:after { 
  -webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5); 
  box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5); 
} 
.btn-sbm-tweet + .btn-sbm-count { 
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04); 
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04); 
} 
.btn-sbm-like { 
  background: #6480bd; 
  background-image: -webkit-linear-gradient(top, #6480bd, #3c5894); 
  background-image: -moz-linear-gradient(top, #6480bd, #3c5894); 
  background-image: -o-linear-gradient(top, #6480bd, #3c5894); 
  background-image: linear-gradient(to bottom, #6480bd, #3c5894); 
  -webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2); 
  box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2); 
} 
.btn-sbm-plus { 
  background: #626262; 
  background-image: -webkit-linear-gradient(top, #626262, #404040); 
  background-image: -moz-linear-gradient(top, #626262, #404040); 
  background-image: -o-linear-gradient(top, #626262, #404040); 
  background-image: linear-gradient(to bottom, #626262, #404040); 
  -webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3); 
  box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3); 
} 
</style> 
<br/> 
<div class="container"> 
     <a href=https://twitter.com/https://twitter.com/hamdystar101 rel="nofollow" target="_blank"rel="author"  title="تابعنا عبر التويتر" class="btn-sbm"> 
      <span class="btn-sbm-action btn-sbm-tweet">تويتر</span>
      <span class="btn-sbm-count">104+</span> 
    </a> 
    <a href=https://www.facebook.com/3gyptnews rel="nofollow" target="_blank" title="صفحتنا على الفايسبوك" class="btn-sbm"> 
      <span class="btn-sbm-action btn-sbm-like">فايسبوك</span> 
      <span class="btn-sbm-count">180+</span> 
    </a> 
    <a href="https://plus.google.com/105435059962119899780/posts?utm_source=chrome_ntp_icon&utm_medium=chrome_app&utm_campaign=chrome" class="btn-sbm" target="_blank" rel="author" title="تابعنا على جوجل+"> 
      <span class="btn-sbm-action btn-sbm-plus">جوجل+</span>
      <span class="btn-sbm-count">120+</span> 
    </a><br/> 
</div>

انضم الينا لتحصل علي كل جديد
ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
للتعديل علي الكود عدل علي كل ماهو باللون الاحمر واللي اللقاء في اضافات جديدة ان شاء الله