أزرار المواقع الأجتماعية بشكلها الجديد

مرحبا بكم اصدقائي متابعين مدونة مدهش ويب الكرام بموضوع جديد وإضافة جديدة على المدونة وهي اضافة المواقع الاجتماعية بشكل جديد وإحترافي جدا  وبطريقك يمكنك متابعتنا ^_^ الاضافة مكونة من اهم المواقع مثل تويتر,جوجل بلس,فيسبوك,يوتيوب,خمسات وخدمة rss ايضا وهي اداة توضع في السايدبار وفيها تأثير هوفر إحترافي جدا  ^_^

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

1. ادخل المدونة
2. ثم التخطيط
3.  ثم اضافة اداة html/gavascript
4. وضع فيها الكود التالي

<ul class="th3geekweb3_nav">
<li><a class="th3geekweb3_navi" target="_blank" rel="nofollow" href="#" id="twitr">تويتر</a></li>
<li><a class="th3geekweb3_navi" target="_blank" rel="nofollow" href="#" id="ggl">جوجل بلس</a></li>
<li><a class="th3geekweb3_navi" target="_blank" rel="nofollow" #" id="face">فيس بوك</a></li>
</ul>
<ul class="th3geekweb3_nav">
<li><a class="th3geekweb3_navi" target="_blank" rel="nofollow" href="#" id="you">يوتيوب</a></li>
<li><a class="th3geekweb3_navi" target="_blank" rel="nofollow" href="#" id="khamsat">خمسات</a></li>
<li> <a class="th3geekweb3_navi" target="_blank" rel="nofollow" href="#" id="rss">خدمة rss</a></li>
</ul>
<style>
.th3geekweb3_nav {
float: left;
width: 300px;
}
ol, ul {
list-style: none;
}
.th3geekweb3_nav li {
float: right;
margin-left: 5px;
}
a#twitr {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat 24px -73px #0ED6CE;
}
a#twitr:hover {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat -60px -73px #ffffff;
}
a#ggl {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat 24px -235px #ED5029;
}
a#ggl:hover {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat -60px -235px #ffffff;
}
a#face {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat 28px -151px #5157DF;
}
a#face:hover {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat -60px -151px #ffffff;
}
a#you {
background: url('http://im54.gulfup.com/Ft99u.png') no-repeat 26px -397px #ff0000;
}
a#you:hover {
background: url('http://im54.gulfup.com/Ft99u.png') no-repeat -67px -397px #ffffff;
}
a#khamsat {
background: url('http://im54.gulfup.com/Ft99u.png') no-repeat 24px -318px #f2bb12;
}
a#khamsat:hover {
background: url('http://im54.gulfup.com/Ft99u.png') no-repeat -65px -318px #ffffff;
}
a#rss {
background: url('http://im54.gulfup.com/Ft99u.png') no-repeat 24px -480px #ff5a00;
}
a#rss:hover {
background: url('http://im54.gulfup.com/Ft99u.png') no-repeat -65px -480px #ffffff;
}
.th3geekweb3_nav li .hdr_navi:hover {
background-color: #ffffff;
color: #df517f;
}
a:hover, body a:hover  {
text-decoration: none;
}
a {
text-decoration: none;
}
.th3geekweb3_nav li .th3geekweb3_navi:hover {
-webkit-transform: scale(1.1);
 -ms-transform: scale(1.1);
 transform: scale(1.1);
 -webkit-transition: 0.4s;
 -moz-transition: 0.4s;
 -o-transition: 0.4s;
 -ms-transition: 0.4s;
 transition: 0.4s;
}
.th3geekweb3_nav li .th3geekweb3_navi {
display: block;
  height: 95px;
  width: 95px;
  background: url('img/big_ics.png') no-repeat -202px 33px #2ad0ff;
  color: #fff;
  font-family: goth;
  font-size: 14px;
  text-align: center;
  transition:all 600ms cubic-bezier(0.76, 2.35, 0.70, 4.74);
  -moz-transition: all 600ms ease;
  -o-transition: all 600ms ease;
  -ms-transition: all 600ms ease;
  padding-top: 60px;
}
@font-face {
 font-family: 'goth';
 src: url(//:) format('no404'), url('https://themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
}
</style>

والى هنا قد انتهى الموضوع لهذا الاسبوع ^_^
مصدر المشاركة مهووسين الويب