إضافة أزرار موقع التواصل الإجتماعي CSS فقط 2015 بشكل جذاب

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

[ اسم الكود ] : قإضافة أزرار موقع التواصل الإجتماعي CSS فقط 2015 بشكل جذاب
[ وصف الكود ] : يقوم بعمل قائمة بها التواصل الاجتماعي و تكون ثابتة
[ يتوافق مع اي اصدار ] : مع جميع الاصدارات
[ موقع مبرمج الكود ] : الاكسلانس الدولى

[ مثال مصور ]

[ طريقة التركيب ]

كيفية إضافة الأداة الى مدونتك
اتجه الى قالب , تحرير HTML
ابحث عن الوسم ]]></b:skin> وضع فوقه/قبله الوسم التالي

كود Css

 #okeshare .iconz {
  background:#E3E3E3 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_zQqDZFLr7uL-KMUl0QAajZwVJ4Gs1o1-HtJFJY5-oeyUkpcNCbou7Pk8rdjDqs_DkZM0xC9_xpKANN6ZQ9H518yaWYgYzNx3qUarXedxQ0oQwADq288GxTSJW5sbLtdq-j7IsCOx9Dc/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/**********
و الصق الوسم التالي فيها

 <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>