الـسلام عـلـيكم ورحـمـة الله وبـــركــاتة .
اليوم اضافة تابعنا على مواقع التواصل الإجتماعي بشكل جديد
شـكل الإضافة :
لتركيب أتبع الخطوات الأتية .
- أدخل الى مدونتك على بلوجر
- أختار تخطيط
3. أظغط على إضافة أداة
4.أختار html/javascript
5. ثم ضع هذا الكود
<ul class="pro-ayoub_nav">
<li><a class="pro-ayoub_navi" target="_blank" rel="nofollow" href="#" id="twitr">تويتر</a></li>
<li><a class="pro-ayoub_navi" target="_blank" rel="nofollow" href="#" id="ggl">جوجل بلس</a></li>
<li><a class="pro-ayoub_navi" target="_blank" rel="nofollow" href="#" id="face">فيس بوك</a></li>
</ul>
<ul class="pro-ayoub_nav">
<li><a class="pro-ayoub_navi" target="_blank" rel="nofollow" href="#" id="you">يوتيوب</a></li>
<li><a class="pro-ayoub_navi" target="_blank" rel="nofollow" href="#" id="khamsat">خمسات</a></li>
<li>خدمة أرس <a class="pro-ayoub_navi" target="_blank" rel="nofollow" href="#" id="rss">rss</a></li>
</ul>
<style>
.pro-ayoub_nav {
float: left;
width: 300px;
}
ol, ul {
list-style: none;
}
.pro-ayoub_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;
}
.pro-ayoub_nav li .hdr_navi:hover {
background-color: #ffffff;
color: #df517f;
}
a:hover, body a:hover {
color: #df517f;
text-decoration: none;
}
a {
text-decoration: none;
}
.pro-ayoub_nav li .pro-ayoub_navi {
display: block;
height: 35px;
width: 95px;
background: url('img/big_ics.png') no-repeat -202px 33px #2ad0ff;
color: #fff;
font-family: goth;
font-size: 14px;
text-align: center;
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-o-transition: all 600ms ease;
-ms-transition: all 600ms ease;
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>
وقم بوضع رابط مواقع التواصل الإجتماعي خاصتك (مكان اللغة العربية مثل جوجل بلس..ألخ)
5. أظغط على حـفـظ
أرجو أن تكون الإضافة أعجبتكم .. تابعونا على مواقع التواصل الإجتماعي , وساعدونا بنشر موقعنا على الويب العربي !
المصدر : ارابيا ويب
18 تعليقات
مشكوووووووووووووررررررررررررر
ردحذفمشكور اخي الكريم
ردحذفمشكور اخي الكريم
ردحذفصندوق فيس بوك متنقل
ردحذفاخي ممكن تعطيني رابط لتحميل قالب مدونتك
ردحذفتفظل اخي الكريم http://rnohammed.blogspot.com/2015/05/Alafezl-absolutely-professional-template-blogger-2016.html
حذفthnks bro
ردحذفاخي الكريم اولا شكرا على هذه الاداة الجميلة> لكن اود ان اقوم بتصغير القياسات كيف يمكنني ذلك
ردحذفاخي ممكن شرح كيف اعدل على قالبك هذا لاني حملتو بس ماا اعرف كيف اعدل عليه ارجوك
ردحذفhttps://www.youtube.com/watch?v=f8Izkh7MyMc طريقة التعديل على القالب لاتنسى اشتراك للقناة
حذف(h) شكرا لك
ردحذفجزاك الله كل خير اخي جميلة جداً
ردحذفجزاك الله كل خير
ردحذفمشكرو اختي جزاكالله كل خير
ردحذفاين اضع موقع التواصل الاجتماعي الخاص بي
ردحذفجزاك الله خير أخي على الشرح المفيد والمختصر..
ردحذفشكرا
حذفهاذا رابط مدونتي
ردحذفارجوا منكم الاشتراك لانها جديدة
https://alhamed-lilma3lomiat.blogspot.com/
اضف تعليقأ مناسباً عن الموضوع .. ونرد عليكم في اقرب وقت ( تعليقك يسعدني :) )
Emoji