اليوم معنا أضافة جديدة وحصرية من مدونة عرب ديزاينر اليوم معى أضافة تابعنا على المواقع الاجتماعية
بشكل أحترافى وجديد ولن تجده كثيرا فهو حصرى وغير مألوف فقد كثرت الأضافات هذا الأيام
وخاصة من هذا النوع (التواصل الأجتماعى) وأصبحت كل الأضافات مألوفة للجميع
لذا عرضت عليكم هذا الأضافة لتضيف الى مدونتك لمسة من الجمال والرقى والانسيابية
كما ترون الأضافة جميلة وبسيطة
الأن.... مع شرح تركيب الأضافة
نذهب الى لوحة التحكم>> ثم التخطيط >> ثم أضافة أداة >> ثم HTML/Javasript
ونضع بها هذا الكود
<div class='socialnetwork'>
<ul>
<li class='fb'><a href='https://www.facebook.com/arbdis'>فيسبوك</a><p><span>9,250</span>معجـب</p></li>
<li class='tw'><a href='#'>تويتر</a><p><span>4,321</span>متـابع</p></li>
<li class='rss'><a href='#'>الخلاصات</a><p><span>1,587</span>مشتـرك</p></li>
</ul>
</div>
<style>
.socialnetwork {
background: #FF954C;
margin: 0px;
}
.socialnetwork ul {
padding: 10px;
overflow: hidden;
}
.socialnetwork li {
float: right;
width: 33.33%;
background: #F8F8F8;
text-align:center;
padding: 0;
transition:0.4s;
}
.socialnetwork a {
width: 100%;
text-align: center;
display: block;
text-indent: 9999em;
padding: 80px 0 0;
}
.socialnetwork li:hover {
transition:0.4s;
}
.socialnetwork .fb{background:#666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEireJCg3yrDhBkISQWjj9ZPYgEbanuo41nOVmj2FkoNPJSa8dpXpk13J1aFrQDHaEua9cSdI0-2oeere94yYvFaxxldEY0zL5laZh1gMuo4ZxNJ19Db-ZO4yoIFaKBEMzrk5b58BYCle1CQ/s1600/fb.png) no-repeat center 30%;}
.socialnetwork .fb:hover{background:#0C6DB4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEireJCg3yrDhBkISQWjj9ZPYgEbanuo41nOVmj2FkoNPJSa8dpXpk13J1aFrQDHaEua9cSdI0-2oeere94yYvFaxxldEY0zL5laZh1gMuo4ZxNJ19Db-ZO4yoIFaKBEMzrk5b58BYCle1CQ/s1600/fb.png) no-repeat center 30%;}
.socialnetwork .tw{background:#555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3g7tmJzaB47_oEJUTm5ktgRRny8EJI_eXi1wEL3zGqMpQHN37iW8-5N86Khn2902x08Fev8nOAC_POH_3JXsTlQKq2XWfwfo6k3G9aCBU9pyjo2DRn8HqN3OBwfNTXe44eLoiZcXO00AZ/s1600/twitter.png) no-repeat center 30%;}
.socialnetwork .tw:hover{background:#33b5e5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3g7tmJzaB47_oEJUTm5ktgRRny8EJI_eXi1wEL3zGqMpQHN37iW8-5N86Khn2902x08Fev8nOAC_POH_3JXsTlQKq2XWfwfo6k3G9aCBU9pyjo2DRn8HqN3OBwfNTXe44eLoiZcXO00AZ/s1600/twitter.png) no-repeat center 30%;}
.socialnetwork .rss{background:#444 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirUmNNSc5utLOA_BeQ4BEP9TpITbdmr-ue7odqMxPwaXa1Bd48TqzZAB2gIW9T1sbck9Z3QxYSpflnONWnpHz0DOxvAXy8eW4wzEf8cOhyksdH4tKnQwOQfN2Me8mS-q27MshG-n-iR2e2/s1600/rss.png) no-repeat center 30%;}
.socialnetwork .rss:hover{background:#ffbb33 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirUmNNSc5utLOA_BeQ4BEP9TpITbdmr-ue7odqMxPwaXa1Bd48TqzZAB2gIW9T1sbck9Z3QxYSpflnONWnpHz0DOxvAXy8eW4wzEf8cOhyksdH4tKnQwOQfN2Me8mS-q27MshG-n-iR2e2/s1600/rss.png) no-repeat center 30%;}
.socialnetwork span {
float: right;
text-align: center;
width: 100%;
font:bold 14px arial;
color:#fff;
padding:0 0 5px
}
.socialnetwork p {
padding:10px 0;
text-align:center;
font:normal 14px ges;
color:#fff;
background: rgba(50, 50, 50, 0.47);
}
ونضغط حفظ وهكذا تكون أضيفت الأضافة بنجاح والحمد لله ومبروك عليك الأضافة الجديدة لمدونتك
بالتوفيق:)
ليست هناك تعليقات:
إرسال تعليق