السلام عليكم ومرحبا بكم في موضوع جديد على مدونة موسى للمعلوميات في هادا الموضوع سنشرح طريقة إضافة صناديق المتابعة الموجودة في قالب المحترف و الموجود في قالبي اصلا المهيم ننتقل للشرح لاتنسو تعليقاتكم وإستفساراتكم في الاسف والإعجاب بصفحتنا من الجانب لاتنسو الإشتراك بالقناة لدعمنا والفضل لكم ☺
- أول خطوة ندهب الى المدونة ثم قالب ، ثم تحرير HTML
- ثم نبحث عن الكود
- نضيف الكود التالي فوقه مباشرة
/*======================add social================*/ #social ul li{float:right; width:20%; padding:13px 0; padding-bottom:20px} #social ul li p{ display:block; padding:10px 15px; transition:0.4s; color:#fff; font-size:19px; text-align:center} #social ul li a{ display:block; background:#1f376c; padding:8px 0; transition:0.4s; width:100px; color:#fff; margin:0 auto; font-size:16px; text-align:center} li.fb{ background:#366299 !important} li.ggl{ background:#CB2027 !important} li.twt{ background:#4099FF !important} li.ytb{ background:#D1252A !important} li.inst{ background:#c08d64 !important} .p1{ background:#2F5686 !important} .p2{ background:#AF1A20 !important} .p3{ background:#3A8DEC !important} .p4{ background:#BB1E23 !important} .p5{ background:#c08541 !important} div#social{ overflow:hidden; margin:7px auto} #social li a:hover i{ -webkit-animation:rubberBand .8s 1; -moz-animation:rubberBand .8s 1; -o-animation:rubberBand .8s 1; animation:rubberBand .8s 1} #social i{ width:30px; height:30px; background:rgba(0,0,0,0.13); line-height:30px; border-radius:50%; margin-left:2px; font-size:14px} /* =====================كود تحريك الايقونات===================== */ .spinner .bounce1{-webkit-animation-delay:-.32s; animation-delay:-.32s}.spinner .bounce2{-webkit-animation-delay:-.16s; animation-delay:-.16s}@-webkit-keyframes bouncedelay{0%,80%,100%{-webkit-transform:scale(1.0)}40%{-webkit-transform:scale(0.4)}}@keyframes bouncedelay{0%,80%,100%{transform:scale(0.0); -webkit-transform:scale(1.0)}40%{transform:scale(1.0); -webkit-transform:scale(0.4)}}@-webkit-keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1); transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.15,0.9,1); transform:scale3d(1.15,0.9,1)}40%{-webkit-transform:scale3d(0.8,1.15,1); transform:scale3d(0.8,1.15,1)}50%{-webkit-transform:scale3d(1.15,0.85,1); transform:scale3d(1.15,0.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1); transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1); transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1); transform:scale3d(1,1,1)}}@keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1); transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.15,0.9,1); transform:scale3d(1.15,0.9,1)}40%{-webkit-transform:scale3d(0.8,1.15,1); transform:scale3d(0.8,1.15,1)}50%{-webkit-transform:scale3d(1.15,0.85,1); transform:scale3d(1.15,0.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1); transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1); transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1); transform:scale3d(1,1,1)}}.rubberBand{-webkit-animation:rubberBand .8s 1; -moz-animation:rubberBand .8s 1; -o-animation:rubberBand .8s 1; animation:rubberBand .8s 1}
ثاني خطوة عليك نسخ الكود التالي ووضع في اي مكان في القالب وستتطيع حتى وضعه داخل html javascript
- اخر كود لايجب وضعه داخل صندو ولدلك لكي لاتختفي بعض الاكواد
- id='social'>
- class
='fb'>إلتحق بصفحة موسى للمعلوميات على الفيسبوكclass='p1' href='http://fb.com/th9pro.com' target='_blank'>class='fa fa-facebook'> تابع- class
='ggl'>إنضم إلى عدد كبير من متابعي صفحتنا على جوجل بلسclass='p2' href='https://plus.google.com/+th9protkno' target='_blank'>class='fa fa-google-plus'> تابع- class
='twt'>غردو معنا في صفحتنا موسى للمعلوميات على التويترclass='p3' href='http://www.twitter.com/th9moussa' target='_blank'>class='fa fa-twitter'> تابع- class
='ytb'>إشتركو بقناتنا للمزيد من الشروحات والمقدمات المجانيةclass='p4' href='http://youtube.com/c/th9protkno' target='_blank'>class='fa fa-youtube-play'> تابع- class
='inst'>إشتركو معنا على إنتساغرام حيث العديد من المتابعينclass='p5' href='http://instagram.com/th9pro' target='_blank'>class='fa fa-instagram'> تابع
- واخيرا لاتنسو اي إستفسار او مساعدة انا هنا يمكنكم ترك تعليقاتكم وسيتم مساعدتكم
