موجة عرب موجة عرب
سلايدرشو

آخر الأخبار

سلايدرشو
سلايدرشو
جاري التحميل ...

اضافة صناديق مواقع التواصل الشبيهة بموجة عرب | حصريا !!

السلام عليكم ورحمة الله تعالى وبركاته اليوم  نقدم لكم اضافة جميل لمدونتكم  من قسم اضافات بلوجر لموجة عرب اضافة حصرية من تصميمي الخاص وقد اعجب بها الكثير من الاخوان اليوم سوف تجدونها مجانا على موجة عرب مع طريقة التركيب :)





معاينة  الاضافة 


شرح التركيب | اتبع الخطوات بدقة


  1. تتجه للوحة  تحكم مدونتك ( بلوجر ) الاضافة ايضا تعمل على استضافات اخرى ليكن في العلم HTML + CSS
  2. تتجه نحو القالب ثم تحرير HTML (من الاحسن الاحتفاض بنسخة احتياطية من قالبك ) 
  3. تقوم بنسخ الاكواد التي هي امامك الان داخل الصندوق وتضعها فوق ]]></b:skin>

CSS الاضافة
#social {
margin-top: 90px;
}
#social ul {
margin: 0;
padding: 0;
list-style: none;
}
#social li {
display: table;
width: 19%;
height: 120px;
float: right;
margin-left: 0.5%;
margin-right: 0.5%;
position: relative;
box-shadow: 0 0 12px rgba(110, 143, 171, 0.38);
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
animation: sonarWarning 1.8s linear infinite;
}
#social li.fb {
background-color: #4c7dbb;
}
#social li.ggl {
background-color: #db2e35;
}
#social li.twt {
background-color: #00abf0;
}
#social li.ytb {
background-color: #98200e;
}
#social li.instagram {
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
#social .box {
color: #fff;
padding: 0 15px;
width: 100%;
text-decoration: none;
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 14px;
line-height: 25px;
}
#social .box:before {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: absolute;
font-size: 125px;
color: #fff;
opacity: 0.15;
top: 2px;
right: 0;
margin: 0;
z-index: 1;
}
#social li.fb .box:before {
content: "\f09a";
}
#social li.ggl .box:before {
content: "\f0d5";
}
#social li.twt .box:before {
content: "\f099";
}
#social li.ytb .box:before {
content: "\f167";
font-size: 115px;
}
#social li.instagram .box:before {
content: "\f16d";
}
#social li:hover {
margin-top: -5px;
box-shadow: rgba(0, 0, 0, 0.3) 0 16px 16px 0;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 16px 16px 0;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 16px 16px 0;
}

HTML الاضافة  ضعه في اي مكان تريد المهم داخل 

<div class='clear' id='social'>
<ul>
<li class='fb zoomIn'>
<div class='box'>

انضم لمعجبي صفحتنا على الفيسبوك

</div>
</li>
<li class='ggl zoomIn'>
<div class='box'>

انضم لمتابعينا على جوجل بلس

</div>
</li>
<li class='twt zoomIn'>
<div class='box'>

انضم لافضل المتابعين على تويتر

</div>
</li>
<li class='ytb zoomIn'>
<div class='box'>

اشترك مع جيشنا على اليوتوب

</div>
</li>
<li class='instagram zoomIn'>
<div class='box'>

انضم معنا على مؤسسة لينكيدان

</div>
</li>
</ul>
</div>

الى هنا اكون قد انتهيت من شرح هاده الاضافة البسيطة اراكم في مواضيع اخرى بادن الله | لاتنسى المشاركة مع اصدقائك  لتحفيزنا على الاستمرار :) 

عن الكاتب

USA magazine

التعليقات


اتصل بنا

إذا أعجبك محتوى مدونتنا نتمنى البقاء على تواصل دائم ، فقط قم بإدخال بريدك الإلكتروني للإشتراك في بريد المدونة السريع ليصلك جديد المدونة أولاً بأول ، كما يمكنك إرسال رساله بالضغط على الزر المجاور ...

المؤلفون

جميع الحقوق محفوظة

موجة عرب