عزيزى القارئ. لقد اتيت لكم اليوم بأضافة احترافية من تصميم وتكويد مدونه العبقرى للمعلوميات الا وهى اضافة مواقع التواصل الاجتماعى بطريقة احترافية دعونا نرى معاينة!
بعدما رأينا المعاينة نذهب الى التركيب:اذهب الى > التخطيط > اضافة اداة > html > ونضيف هذا الكود -
<div id='social_networks'> <ul><!--Social Icons Started Started--> <li class='sorting-01 facebook'><a href='#'><i class='fa fa-facebook fa-2x'/><span class='inv'>Facebook</span></a></li> <!--Replase With Facebook URL--> <li class='sorting-02 twitter'><a href='#'><i class='fa fa-twitter fa-2x'/><span class='inv'>twitter</span></a></li> <!--Replase With Twitter URL--> <li class='sorting-03 googleplus'><a href='#'><i class='fa fa-google-plus fa-2x'/><span class='inv'>googleplus</span></a></li> <!--Replase With Google Plus URL--> <li class='sorting-06 linkedin'><a href='#'><i class='fa fa-linkedin fa-2x'/><span class='inv'>linkedin</span></a></li> <!--Replase With Linked In URL--> <li class='sorting-04 youtube'><a href='#'><i class='fa fa-youtube fa-2x'/><span class='inv'>youtube</span></a></li> <!--Replase With Youtube URL--> </ul><!--Social Icons Started End--> </div> <Style> #social_networks{width:100%;display:block;margin:0 auto;text-align:center;} #social_networks ul {list-style:none;} #social_networks{text-align:center;display:block;margin:0 auto;padding-bottom:15px;margin-bottom:15px;} #social_networks ul {display:block;height:36px;margin:0 auto;list-style:none;color:#fff;transition:All 0.2s ease;} #social_networks li{text-align:center;display:inline-block;margin:0 auto;margin-right:2px;margin-left:2px;width:48px;height:48px;opacity:0.9;transition:All 0.2s ease;} #social_networks li:hover{opacity:0.9;} #social_networks li a{display:inline-block;width:48px;height:48px;line-height:48px;padding-top:5px;padding-bottom:5px;color:#fff;} #social_networks li a:hover{background:transparent;color:#f35d5c;box-shadow:none;} #social_networks li a span{display:none;visibility:hidden;} #social_networks li.facebook,#social_networks li.twitter,#social_networks li.youtube,#social_networks li.googleplus,#social_networks li.linkedin{text-align:center;background:#f35d5c;color:#fff;} #social_networks li.facebook:hover,#social_networks li.twitter:hover,#social_networks li.youtube:hover,#social_networks li.googleplus:hover,#social_networks li.linkedin:hover{background:#4b3f57;color:#fff;} #social_networks li.facebook .fa.fa-facebook,#social_networks li.twitter .fa.fa-twitter,#social_networks li.youtube .fa.fa-youtube,#social_networks li.googleplus .fa.fa-google-plus,#social_networks li.linkedin .fa.fa-linkedin{color:#fff;} </Style>
التعليقات:
b-( b-( b-(
إرسال تعليق