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

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

مرحبا بكم اصدقائي متابعين مدونة مدهش ويب الكرام بموضوع جديد وإضافة جديدة على المدونة وهي اضافة المواقع الاجتماعية بشكل جديد وإحترافي جدا  وبطريقك يمكنك متابعتنا ^_^ الاضافة مكونة من اهم المواقع مثل تويتر,جوجل بلس,فيسبوك,يوتيوب,خمسات وخدمة 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>

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

• غرد تغريدة
• شاركه
• شاركه
• شاركه
• شاركه

معلومات عن التدوينة

التعليقات : 0 الكاتب : Unknown 12:48 ص اضافات بلوجر المشاهدات :

379

للإبلاغ عن رابط معطوب اضغط هنا