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

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

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

<ul class="th3geekweb3_nav">
<li><a class="th3geekweb3_navi" target="_blank" rel="nofollow" href="http://twitter.com/almahmod2013" id="twitr">تويتر</a></li>
<li><a class="th3geekweb3_navi" target="_blank" rel="nofollow" href="http://plus.google.com/+omranalharirigeek" id="ggl">جوجل بلس</a></li>
<li><a class="th3geekweb3_navi" target="_blank" rel="nofollow" href="http://facebook.com/th3geekweb3" id="face">فيس بوك</a></li>
</ul>
<ul class="th3geekweb3_nav">
<li><a class="th3geekweb3_navi" target="_blank" rel="nofollow" href="http://youtube.com/user/aboyazanllm3lumat" id="you">يوتيوب</a></li>
<li><a class="th3geekweb3_navi" target="_blank" rel="nofollow" href="https://khamsat.com/user/omran-alhariri" id="khamsat">خمسات</a></li>
<li> <a class="th3geekweb3_navi" target="_blank" rel="nofollow" href="http://feeds.feedburner.com/th3geekweb3" 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>
والى هنا قد انتهى الموضوع لهذا الاسبوع ^_^

12 تعليقات على موضوع " أزرار المواقع الأجتماعية بشكلها الجديد v1 "

████ شروط التعليق ████
1- يجب على التعليق أن يكون بلا روابط إشهارية
2- أن يكون التعليق خاص بمحتوى التدوينة
3- لإضافة كود حوله أولاً بمحول الأكواد
4- لاستعمال خط عريض ضع الكود : <strong>النص هنا...</strong>
5- لاستعمال خط مائل ضع الكود : <em>النص هنا...</em>
6- لإضافة صورة ضعها بهذا الكود : <i rel="image"> ... رابط الصورة هنا ... </i>

الإبتسامات إخفاء