المتابعه عبر مواقع التواصل الإجتماعي B

1. أبحث عن b:skin
2. أضف قبله الكود ادناه
3. يمكنك معاينة الأيقونات من هنا

/* ============ SOCIAL MEDIA ============ */ .headerbottom{box-shadow:3px 5.196px 6px 0 rgba(0,0,0,0.024)}.socialmedia{padding:5px 0} .socialmedia ul { float: right; margin: 10px 27px; } .socialmedia ul li { float: right; display: block; padding: 7px 0; border-radius: 13px; margin-left: 4px; width: 283px; } .socialmedia ul li i { font-size: 24px; float: right; line-height: 60px; background: #00000021; border-top: 1px solid #0000002e; margin: 0 10px; border-bottom: 1px solid #ffffff6b; padding: 0px 21px; border-radius: 13px; } .socialmedia ul li a{color:#fff}.socialmedia ul li:last-child{margin:0} .socialmedia ul li.fb { background: -webkit-linear-gradient(top,#366299,#1b2a3e); } .socialmedia ul li.gplus { background: -webkit-linear-gradient(top,#dd4c3a,#84342b); } .socialmedia ul li.twitter { background: -webkit-linear-gradient(top,#4099FF,#285282); } .socialmedia ul li.instagram { background: -webkit-linear-gradient(top,#bf3ab5,#bd7b1d); } .socialmedia ul li p { font-size: 17px; line-height: 59px; font-weight: 500; font-family: treexil; } /* Layout ------------------------------ */ body#layout{margin:0;list-style-type:none;background:#EBEBEB}#layout #nav1 li,#nav1left li{list-style:none}#layout .logo{width:45%;float:right}#layout .bannertop{width:55%;float:left}#layout .socialmedia li{list-style:none}#layout .post-treexil{width:60%;float:right}#layout .sidebar-treexil{width:40%;float:left} @media screen and (max-width : 1280px) { /* CSS CODE HERE FOR DESKTOP ---*/ } @media (min-width: 992px) and (max-width: 1199px) { /* CSS CODE HERE FOR TABLETS ---*/ .menutop #nav1 li a,.menutop #nav1left li a{font-size:14px}.socialmedia ul li p{font-size:13px}.socialmedia ul li{width:24.68%}.index .post .post-title{margin-bottom:0}#navbar li a{line-height:63px;font-size:14px}.menutop li a.search-btn i{font-size:15px}.socialmedia ul li i{font-size:20px;line-height:35px}.th3-video .ytp-thumb .magp-img{height:170px}.treexil-post .recent-box:first-child{width:57.8%}.treexil-post .mag-bottom .psummary{font-size:13px}.treexil-post .post-title .magp-title{font-size:16px}.treexil-post .magp-date .post-date{font-size:13px}.treexil-post .postwriter .writer-p{font-size:13px}.th3-video .yt-content .yt-title .ytp-title{font-size:14px}#th3video .widget-title .title{font-size:16px}#th3video .widget-title .bttitle{font-size:12px}.morev a:after{font-size:13px}.morev a{font-size:14px;padding:0 15px}.jump-link a{font-size:14px;height:35px}.post-author a,.post-timestamp a{font-size:14px}.post-title a{font-size:14.7px}.jump-link a:hover:before{right:75px}.post-treexil{padding-left:10px}.jump-link a:hover{padding-left:25px}.post-thumb img{width:290px;height:225px}.post-snippet{font-size:12px}.post-share a{font-size:15px}.pagenavi span,.pagenavi a{line-height:40px;font-size:14px}.item-title a,.recent-n .n-content .n-title .na-title{font-size:12.8px}.popular-posts li:first-child .item-title a{font-size:14px}.popular-posts li:first-child .item-title{padding-bottom:15px}.item-thumbnail img,.recent-n .nep-thumb .magp-img{width:110px;height:90px}.th3-news .recent-n{padding:0}.sidebar .widget-title h2{font-size:14.7px}.first-follow p{font-size:12px}.follow-by-email-address{font-size:11px}.follow-by-email-submit{font-size:13px}.post-thumb{margin-left:5px}.th3-video .recent-yt .ytp-thumb a:before,.ytp-thumb a:after{font-size:45px}.logoabout span{font-size:13px;line-height:24px}.livecenter p{font-size:14px}.livetime h3{font-size:28px}.watchnow a{height:38px;font-size:15px}.copyright,.copyleft{font-size:14px}.btnfooter a{font-size:14px;height:37px}.contactemail .contacticon{font-size:15px}.contactemail .mailto{font-size:13px}.contactemail{right:-215px}.user-post .widget-title h2{font-size:14.7px}.rrmore a{font-size:15px}.user-post .widget-title h2:before,.PopularPosts .widget-title h2:before{font-size:18px}.logoabout{width:65%} } @media(max-width:992px){ .treexil-post .recent-box:first-child{width:57.4%;margin-left:11px}.treexil-post .post-title .magp-title{font-size:12px}.treexil-post .mag-bottom .psummary{font-size:11px;line-height:18px}.treexil-post .post-title .magp-title:before{width:7px;height:7px;margin-left:8px}.post-treexil{padding:0}#navbar li a{padding:0 15px;font-size:12px;line-height:51px}.menusite{height:54px}.magp-thumb img{height:195px}.treexil-post .recent-box:first-child .magp-thumb img{height:402px}.logo{text-align:center}.logo a,.logo img{display:inline-block!important}.headerwrapp{height:auto}.bannertop{margin: 0 0 20px 0;}.menutop li.search a{padding:0 11px;line-height:50px}.menusite .home{padding:0 8px;font-size:17px;line-height:51px}.socialmedia ul li i{font-size:17px;line-height:25px}.socialmedia ul li p{font-size:10px;line-height:18px}#navbar li a:after{height:2px}.treexil-post .magp-date .post-date,.treexil-post .postwriter .writer-p{font-size:11px}#th3video .widget-title .title{font-size:16px}#th3video .widget-title .bttitle{font-size:12px}.post-thumb{margin-left:10px}.menutop #nav1 li a{font-size:12px;line-height:50px}#navbar li a:after{bottom:-4px;height:4px}.menutop #nav1left li i{font-size:14px}.menutop{height:50px}.menutop #nav1left li a{font-size:13px;line-height:50px}.menutop li a.search-btn i{font-size:13px}.socialmedia ul li{width:24.5%}.sidebar-treexil{padding:0;margin:15px 0}.popular-posts li:first-child .item-thumbnail img{height:250px}.item-thumbnail img,.recent-n .nep-thumb .magp-img{width:100px;height:80px}.popular-posts li:first-child .item-title{padding-bottom:15px}.livecenter p{font-size:13px}.livetime h3{font-size:26px}.watchnow a{height:34px;font-size:14px}.logoabout span{font-size:13px;line-height:22px}.btnfooter a{height:30px;font-size:11px}.copyright,.copyleft{font-size:13px}.logoabout{width:65%} } @media screen and (max-width : 768px) { /* CSS CODE HERE FOR SMALL TABLETS ---*/ .selectnav{display:inline-block;font-family:treexil;margin:5px 10px;padding-left: 20px;}.close-btn{font-size:23px}#search-form-text{width:80%}.menutop{height:auto;padding:5px 0;}.menutop #nav1,.menusite #navbar,.episodeth3,.recentsp-treexil,.menutop li.search, #HTML1{float:right;display:none}#HTML8 {display:block;}#menutop{float:none}.headerwrapp{height:auto}.logo{float:none;text-align:center}.logo img{display:inline-block!important}.socialmedia ul li{width:100%;padding:5px 0}.socialmedia ul li i{font-size:21px;line-height:35px}.socialmedia ul li p{font-size:15px;line-height:28px}.post-thumb img{width:100%}.post-thumb{width:100%;margin-left:0}.post-title a{font-size:15.5px}.post-meta{font-size:14px}.post-snippet{font-size:12px;padding:0 15px}.post-info{padding:7px 15px}.jump-link a{height:35px;font-size:14px}.jump-link a:hover:before{right:80px}.sidebar-treexil{display:none}.pagenavi span,.pagenavi a{padding:0 13px;line-height:35px;font-size:14px;margin-bottom:10px}.container-treexil{margin-bottom:0}.footer-treexil{display:none}.post-treexil{padding:0}.post h3.post-title{font-size:14px} .item .post .post-body, .static_page .post .post-body { font-size: 19px; line-height: 27px; margin: 0 -7px; } .postshare a{display:inline-block;width:100%;text-align:center;font-size:14px;height:35px;margin-bottom:3px}.author-profile{text-align:center}.author-post img{margin:0 auto;float:none;margin-left:0;margin-bottom:3px}.name-au{font-size:15px}.bioauthor{font-size:13px}.postshare > span{margin-bottom:10px;font-size:15px}.related-posts p{font-size:15px}.socialmedia {display: none;} .menusite {display: none;}.item .container-treexil .container {padding: 0;} }

• يمكنك إضافة الكود كما تشاء في المكان الذي يظهر فيه الأيقونات

<!-- Social Media Button --> <div class='socialmedia'> <div class='container'> <ul> <li class='fb'><a href='http://www.facebook.com/tuh930m' target='_blank'><i class='fa fa-facebook-official'></i><p>تابعنا عبر فيسبوك</p></a></li> <li class='gplus'><a href='https://plus.google.com/u/0/105513605191654109138' target='_blank'><i class='fa fa-google-plus-square'></i><p>تابعنا عبر قوقل+</p></a></li> <li class='twitter'><a href='http://www.twitter.com/tuh930m' target='_blank'><i class='fa fa-twitter-square'></i><p>تابعنا عبر تويتر</p></a></li> <li class='instagram'><a href='http://www.instagram.com/tuh930m' target='_blank'><i class='fa fa-instagram'></i><p>تابعنا عبر إنستقرام</p></a></li> </ul> </div> </div>