Forms

الاسم

بريد إلكتروني *

رسالة *

اضافة صندوق الاشتراك لمواقع التواصل الاجتماعي بشكل إحترافي #5

Author Img
عبدو تكنولوجي

 

اضافة صندوق الاشتراك بالمواقع التواصل الاجتماعي بشكل إحتراف

السلام عليكم ومرحبا بكم في مدونة عبدو تكنولوجي

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




شرح التركيب



كود الذي يوضع فوق ال /head


<b:defaultmarkup type='LinkList'>
    <b:includable id='main'>
        <b:include cond='data:title != &quot;Abdoutech_gadget&quot;' name='widget-title' />
        <b:include name='content' />
    </b:includable>
    <b:includable id='content'>
        <div class='widget-content'>
            <b:class cond='data:title == &quot;Abdoutech_gadget&quot;' name='social-media-list' />
            <b:if cond='data:title == &quot;Abdoutech_gadget&quot;'>
                <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


املئ الفرغات هكذا



قد تُعجبك هذه المشاركات

تعليقات

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع