إضافة أزرار موقع التواصل الإجتماعي CSS فقط

إضافة أزرار موقع التواصل الإجتماعي CSS فقط

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

اقدم لكم إضافة جميلة ورائعم وهي إضافة أزرار مواقع التواصل الإجتماعي بشكل إحترافي و جميل

معاينة القائمة

كيفية إضافة الأداة الى مدونتك

اتجه الى قالب , تحرير HTML 

ابحث عن الوسم ]]></b:skin> وضع فوقه/قبله الوسم التالي

 #okeshare .iconz {
  background:#E3E3E3 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgubXnUNz1tYDS3k1bwpKJl8ZUQTXRsaiM9lF9mnw_4K_6y-jwy9wz8vIvqNw5DtuyHCjC6GjplEuY3aeO3Z2Kli25FLGJUv88tNqXYmMB2rasXXenvzoWc4TpGEva9BcD3wEeyrwcqe3w/s1600/okeshare.png') 0 0 no-repeat;
  -moz-border-radius:40px;
  -webkit-border-radius:40px;
  -o-border-radius:40px;
  border-radius:40px;
  display:block;
  color:#212121;
  float:none;
  height:48px;
  width:48px;
  line-height:48px;
  margin:10px auto 0;
  position:relative;
  text-shadow:0 1px 0 #FAFAFA;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
  -webkit-transition:width .25s ease-in-out;
  -ms-transition:width .25s ease-in-out;
  -moz-transition:width .25s ease-in-out;
  -o-transition:width .25s ease-in-out;
  transition:width .25s ease-in-out;
  -webkit-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
  -moz-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
  -o-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
  box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 1px 3px;
}

#okeshare a span {
  display:none;
}

#okeshare:hover a span {
  display:inline;
}

#okeshare a span {
  font-size:1.4em;
}

#okeshare:hover .iconz {
  width:250px;
}

#okeshare .fb {
  background-position:0 -384px;
}

#okeshare .twiter {
  background-position:0 -432px;
}

#okeshare .google {
  background-position:0 -480px;
}

#okeshare .pint {
  background-position:0 -528px;
}

#okeshare .linkedin {
  background-position:0 -576px;
}

#okeshare .devart {
  background-position:0 -624px;
}

#okeshare .ytube {
  background-position:0 -672px;
}

#okeshare .rss {
  background-position:0 -720px;
}

#okeshare .fb:hover {
  background-position:0 0;
  color:#0374DD;
}

#okeshare .twiter:hover {
  background-position:0 -48px;
  color:#00A1DF;
}

#okeshare .google:hover {
  background-position:0 -96px;
  color:#A70000;
}

#okeshare .pint:hover {
  background-position:0 -144px;
  color:#C00;
}

#okeshare .linkedin:hover {
  background-position:0 -192px;
  color:#005772;
}

#okeshare .devart:hover {
  background-position:0 -240px;
  color:#4C7A4A;
}

#okeshare .ytube:hover {
  background-position:0 -288px;
  color:#A00;
}

#okeshare .rss:hover {
  background-position:0 -336px;
  color:#EC5601;
} 

الأن اتجه الى تخطيط,إضافة أداة HTML/JavaScript

و الصق الوسم التالي فيها

 <div id="okeshare"><a href="#" title="Facebook" class="iconz fb"><span>Facebook</span></a>
</div>
<div id="okeshare"><a href="#" title="Twitter" class="iconz twiter"><span>Twitter</span></a>
</div>
<div id="okeshare"><a href="#" title="Google+" class="iconz google"><span>Google+</span></a>
</div>
<div id="okeshare"><a href="#" title="Pinterest" class="iconz pint"><span>Pinterest</span></a>
</div>
<div id="okeshare"><a href="#" title="LinkedIn" class="iconz linkedin"><span>LinkedIn</span></a>
</div>
<div id="okeshare"><a href="#" title="DeviantArt" class="iconz devart"><span>DeviantArt</span></a>
</div>
<div id="okeshare"><a href="#" title="Youtube" class="iconz ytube"><span>Youtube</span></a>
</div>
<div id="okeshare"><a href="#" title="RSS" class="iconz rss"><span>RSS</span></a>
</div>
 

استبدل # بالروابط
أرجو أن تكون الأداة قد أعجبتكم

في امان الله