السلام عليكم ومرحبا بكم في مدونة عبدو تكنولوجي
اقدم لكم شكل جديد لصندوق التواصل الاجتماعي الشكل الخامس يمكنكم البحث في المدونة على الاشكال الاخرى من هنا
شرح التركيب
كود الذي يوضع فوق ال /head
<b:defaultmarkup type='LinkList'> <b:includable id='main'> <b:include cond='data:title != "Abdoutech_gadget"' name='widget-title' /> <b:include name='content' /> </b:includable> <b:includable id='content'> <div class='widget-content'> <b:class cond='data:title == "Abdoutech_gadget"' name='social-media-list' /> <b:if cond='data:title == "Abdoutech_gadget"'> <b:loop values='data:links' var='link'> <a expr:data-name='data:link.name' expr:href='data:link.target' rel='noopener' target='_blank' /> </b:loop> <b:else /> <ul> <b:loop values='data:links' var='link'> <li><a expr:href='data:link.target'> <data:link.name /> </a></li> </b:loop> </ul> </b:if> </div> </b:includable> </b:defaultmarkup> <style type='text/css'> /*<![CDATA[*/ .social-media-list{margin:0;padding:0} .social-media-list a{display:block;width:100%;color:#fff;text-transform:uppercase;border:1px solid #e4e7ed;border-radius:4px;min-height:65px;position:relative;overflow:hidden;background-clip:padding-box;padding:20px 86px 18px 52px;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} .social-media-list a:not(:last-child){margin-bottom:10px} .social-media-list a.facebook{background-color:#4d6baa} .social-media-list a.twitter{background-color:#3fcef2} .social-media-list a.youtube{background-color:#d90303} .social-media-list a.instagram{background-color:#9d54aa} .social-media-list a.facebook:hover{background-color:#5c78b5} .social-media-list a.twitter:hover{background-color:#57d4f4} .social-media-list a.youtube:hover{background-color:#e41010} .social-media-list a.instagram:hover{background-color:#a765b3} .social-media-list a .social-icon{display:block;position:absolute;right:0;top:0;bottom:0;width:68px;background-color:rgba(0,0,0,0.1);text-align:center;font-size:18px} .social-media-list a.facebook .social-icon{background-color:#43609c} .social-media-list a .social-icon .icon{width:20px;height:20px;line-height:20px;text-align:center;display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);fill:currentColor} .social-media-list a .social-title{font-size:13px;margin:0;line-height:1.2em;color:#fff;margin-bottom:5px;letter-spacing:-0.02em} .social-media-list a .social-count{display:block;font-size:10px;line-height:1.2em;color:#fff;font-weight:700} .social-media-list a .add{display:block;position:absolute;width:26px;height:26px;border-radius:50%;border:2px solid #fff;left:23px;top:50%;margin-top:-13px} .social-media-list a .add:before,.social-media-list a .add:after{content:"";display:block;position:absolute;background-color:#fff;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition:-webkit-transform 0.2s ease-in-out;transition:-webkit-transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out,-webkit-transform 0.2s ease-in-out} .social-media-list a .add:before{width:8px;height:2px} .social-media-list a .add:after{width:2px;height:8px} .social-media-list a:hover .add:before,.social-media-list a:hover .add:after{-webkit-transform:translate(-50%,-50%) rotate(-90deg);transform:translate(-50%,-50%) rotate(-90deg)} /*]]>*/ </style>
كود الذي يوضع فوق ال <body>
<!-- Svg Data --> <svg style='display:none'> <defs> <symbol id='icon-twitter' viewBox='0 0 32 32'> <path d='M32 7.075c-1.175 0.525-2.444 0.875-3.769 1.031 1.356-0.813 2.394-2.1 2.887-3.631-1.269 0.75-2.675 1.3-4.169 1.594-1.2-1.275-2.906-2.069-4.794-2.069-3.625 0-6.563 2.938-6.563 6.563 0 0.512 0.056 1.012 0.169 1.494-5.456-0.275-10.294-2.888-13.531-6.862-0.563 0.969-0.887 2.1-0.887 3.3 0 2.275 1.156 4.287 2.919 5.463-1.075-0.031-2.087-0.331-2.975-0.819 0 0.025 0 0.056 0 0.081 0 3.181 2.263 5.838 5.269 6.437-0.55 0.15-1.131 0.231-1.731 0.231-0.425 0-0.831-0.044-1.237-0.119 0.838 2.606 3.263 4.506 6.131 4.563-2.25 1.762-5.075 2.813-8.156 2.813-0.531 0-1.050-0.031-1.569-0.094 2.913 1.869 6.362 2.95 10.069 2.95 12.075 0 18.681-10.006 18.681-18.681 0-0.287-0.006-0.569-0.019-0.85 1.281-0.919 2.394-2.075 3.275-3.394z' /> </symbol> <symbol id='icon-facebook' viewBox='0 0 32 32'> <path d='M19 6h5v-6h-5c-3.86 0-7 3.14-7 7v3h-4v6h4v16h6v-16h5l1-6h-6v-3c0-0.542 0.458-1 1-1z'> </path> </symbol> <symbol id='icon-youtube' viewBox='0 0 32 32'> <path d='M31.681 9.6c0 0-0.313-2.206-1.275-3.175-1.219-1.275-2.581-1.281-3.206-1.356-4.475-0.325-11.194-0.325-11.194-0.325h-0.012c0 0-6.719 0-11.194 0.325-0.625 0.075-1.987 0.081-3.206 1.356-0.963 0.969-1.269 3.175-1.269 3.175s-0.319 2.588-0.319 5.181v2.425c0 2.587 0.319 5.181 0.319 5.181s0.313 2.206 1.269 3.175c1.219 1.275 2.819 1.231 3.531 1.369 2.563 0.244 10.881 0.319 10.881 0.319s6.725-0.012 11.2-0.331c0.625-0.075 1.988-0.081 3.206-1.356 0.962-0.969 1.275-3.175 1.275-3.175s0.319-2.587 0.319-5.181v-2.425c-0.006-2.588-0.325-5.181-0.325-5.181zM12.694 20.15v-8.994l8.644 4.513-8.644 4.481z'> </path> </symbol> <symbol id='icon-instagram' viewBox='0 0 32 32'> <path d='M16 2.881c4.275 0 4.781 0.019 6.462 0.094 1.563 0.069 2.406 0.331 2.969 0.55 0.744 0.288 1.281 0.638 1.837 1.194 0.563 0.563 0.906 1.094 1.2 1.838 0.219 0.563 0.481 1.412 0.55 2.969 0.075 1.688 0.094 2.194 0.094 6.463s-0.019 4.781-0.094 6.463c-0.069 1.563-0.331 2.406-0.55 2.969-0.288 0.744-0.637 1.281-1.194 1.837-0.563 0.563-1.094 0.906-1.837 1.2-0.563 0.219-1.413 0.481-2.969 0.55-1.688 0.075-2.194 0.094-6.463 0.094s-4.781-0.019-6.463-0.094c-1.563-0.069-2.406-0.331-2.969-0.55-0.744-0.288-1.281-0.637-1.838-1.194-0.563-0.563-0.906-1.094-1.2-1.837-0.219-0.563-0.481-1.413-0.55-2.969-0.075-1.688-0.094-2.194-0.094-6.463s0.019-4.781 0.094-6.463c0.069-1.563 0.331-2.406 0.55-2.969 0.288-0.744 0.638-1.281 1.194-1.838 0.563-0.563 1.094-0.906 1.838-1.2 0.563-0.219 1.412-0.481 2.969-0.55 1.681-0.075 2.188-0.094 6.463-0.094zM16 0c-4.344 0-4.887 0.019-6.594 0.094-1.7 0.075-2.869 0.35-3.881 0.744-1.056 0.412-1.95 0.956-2.837 1.85-0.894 0.888-1.438 1.781-1.85 2.831-0.394 1.019-0.669 2.181-0.744 3.881-0.075 1.713-0.094 2.256-0.094 6.6s0.019 4.887 0.094 6.594c0.075 1.7 0.35 2.869 0.744 3.881 0.413 1.056 0.956 1.95 1.85 2.837 0.887 0.887 1.781 1.438 2.831 1.844 1.019 0.394 2.181 0.669 3.881 0.744 1.706 0.075 2.25 0.094 6.594 0.094s4.888-0.019 6.594-0.094c1.7-0.075 2.869-0.35 3.881-0.744 1.050-0.406 1.944-0.956 2.831-1.844s1.438-1.781 1.844-2.831c0.394-1.019 0.669-2.181 0.744-3.881 0.075-1.706 0.094-2.25 0.094-6.594s-0.019-4.887-0.094-6.594c-0.075-1.7-0.35-2.869-0.744-3.881-0.394-1.063-0.938-1.956-1.831-2.844-0.887-0.887-1.781-1.438-2.831-1.844-1.019-0.394-2.181-0.669-3.881-0.744-1.712-0.081-2.256-0.1-6.6-0.1v0z' /> <path d='M16 7.781c-4.537 0-8.219 3.681-8.219 8.219s3.681 8.219 8.219 8.219 8.219-3.681 8.219-8.219c0-4.537-3.681-8.219-8.219-8.219zM16 21.331c-2.944 0-5.331-2.387-5.331-5.331s2.387-5.331 5.331-5.331c2.944 0 5.331 2.387 5.331 5.331s-2.387 5.331-5.331 5.331z' /> <path d='M26.462 7.456c0 1.060-0.859 1.919-1.919 1.919s-1.919-0.859-1.919-1.919c0-1.060 0.859-1.919 1.919-1.919s1.919 0.859 1.919 1.919z' /> </symbol> </defs> </svg> <!-- End Svg Data -->
كود الذي يوضع فوق ال /body
<script type='text/javascript'> //<![CDATA[ const title_gadget = "Follow Us on "; $(".social-media-list a").each(function(){var a=$(this),b=a.attr("data-name").split("/")[0],c=a.attr("data-name").split("/")[1],d=title_gadget;a.addClass(b).html("<span class='social-icon'><svg class='icon icon-"+b+"'><use xlink:href='#icon-"+b+"' /></svg></span><h6 class='social-title'>"+d+b+"</h6><span class='social-count'>"+c+"</span><span class='add'></span>")});//]]> </script>
إذهب الى التخطيط واضف Linklist
ضع في العنوان كلمة Abdoutech_gadget
املئ الفرغات هكذا
تعليقات