U3F1ZWV6ZTgwNzczMjc0MDNfQWN0aXZhdGlvbjkxNTA0OTc4MjA3
recent
أخبار ساخنة

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








إضافة رائعة جدا لمدونات البلوجر

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

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


طريقة التركيب


نذهب الى المظهر و نبحث عن الوسم ]]></b:skin> و نضع الكود التالي فوقه



/* Online Support */ .closebox{background:#fff;border:1px solid #eaeaea;position:absolute;top:-110px;right:-15px;cursor:pointer;font-size:18px;font-weight:700;color:#333;border-radius:100%;width:26px;z-index:9999;transition:background-color .3s ease 0s;transition:all .5s ease-in-out;transition-delay:.1s} .closebox:hover{color:#ffe700;border:1px solid #ffe700} ul,li{list-style-type:none;list-style-position:inside;margin:0;padding:0} i[class^="icon-"]{display:inline-block;text-align:center} .icon-icon-phone{background-image:url(https://3.bp.blogspot.com/-Iurp8lgL-tk/WkXZDEJch4I/AAAAAAAAFdg/D2riO4gzJT4EE2a8cAvneRtigtY2DxAmwCLcBGAs/s1600/call-phone.png);background-size:100%;width:24px;height:24px;margin-left:-4px} .icon-icon-chat{background-image:url(https://3.bp.blogspot.com/-agNTEhbOzD0/WkXZC0-yTSI/AAAAAAAAFdc/3SHDjhZ-XXMNfYDmTX3yajN1Uj_djBlmQCLcBGAs/s1600/messenger.png);background-size:100%;width:20px;height:20px} .icon-icon-zalo{background-image:url(https://2.bp.blogspot.com/-IL-s_NEy_xQ/WkXZC9QoKbI/AAAAAAAAFdY/Eha-8Dopjfo-O3-nJKQb75C8RSIhh26jgCLcBGAs/s1600/zalo.png);background-size:100%;width:18px;height:18px;border-radius:5px} .widget.widget_why_choose_us_widget{padding:15px;background-color:#f0f0f0;border-radius:5px} @media only screen and (max-width:768px){.online-support.online-support-product-details{bottom:32px}} @media only screen{.online-support{display:block;position:fixed;left:150px;bottom:20px;z-index:999}.online-support .btn--support{font-size:16px;padding:5px 16px;border:0;background:#d51e29;color:#fff;display:none;-webkit-border-radius:6px 6px 0 0;-moz-border-radius:6px 6px 0 0;border-radius:6px 6px 0 0}.online-support .btn--support:active,.online-support .btn--support:hover,.online-support .btn--support:focus{font-size:16px;border:0}.online-support .dropup.force-open>.dropdown-2-menu{display:block!important}.online-support .dropup>.dropdown-2-menu{}.online-support .dropup>.dropdown-2-menu.dropdown-2-menu-right{left:auto!important;right:0!important}.online-support .dropdown-2-menu li{position:relative}.online-support .dropdown-2-menu li>a:hover,.online-support .dropdown-2-menu li>a:focus,.online-support .dropdown-2-submenu:hover>a{background:#ffe700}.online-support .dropdown-2-menu li a{padding:3px 10px 3px 10px;text-align:left;min-height:18px;line-height:18px;font-size:13px}.online-support .dropdown-2-menu li a i{vertical-align:middle;margin-right:8px}.online-support li.dropdown-2-submenu li a{padding-right:10px}.online-support .dropdown-2-submenu>a:after{display:none}.online-support .dropdown-2-submenu .dropdown-2-menu{right:0!important;top:auto!important;bottom:100%!important;left:auto!important;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.dropdown-2-submenu{position:relative}.dropdown-2-submenu>.dropdown-2-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.dropdown-2-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#ccc;margin-top:5px;margin-right:-10px}.dropdown-2-submenu:hover>a:after{border-left-color:#555}.dropdown-2-submenu.pull-left,.dropdown-2-submenu.pull-right{float:none}.dropdown-2-submenu.pull-left>.dropdown-2-menu{left:auto;right:0;bottom:100%;margin-left:10px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}} .dropdown-2-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:140px;padding:5px 0;margin:2px 0 0;list-style:none;background-color:#fff;border:1px solid #ccc;border:1px solid rgba(0,0,0,.2);*border-right-width:2px;*border-bottom-width:2px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box} .dropdown-2-menu.pull-right{right:0;left:auto} .dropdown-2-menu .divider{*width:100%;height:1px;margin:9px 1px;*margin:-5px 0 5px;overflow:hidden;background-color:#e5e5e5;border-bottom:1px solid #fff} .dropdown-2-menu li>a{display:block;padding:3px 20px;clear:both;font-weight:normal;line-height:20px;color:#333;white-space:nowrap} .dropdown-2-menu li>a:hover,.dropdown-2-menu li>a:focus,.dropdown-2-submenu:hover>a{color:#fff;text-decoration:none;background-color:#0081c2;background-image:-moz-linear-gradient(top,#08c,#0077b3);background-image:-webkit-gradient(linear,0 0,0 100%,from(#08c),to(#0077b3));background-image:-webkit-linear-gradient(top,#08c,#0077b3);background-image:-o-linear-gradient(top,#08c,#0077b3);background-image:linear-gradient(to bottom,#08c,#0077b3);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc',endColorstr='#ff0077b3',GradientType=0)} .dropdown-2-menu .active>a,.dropdown-2-menu .active>a:hover{color:#fff;text-decoration:none;background-color:#0081c2;background-image:-moz-linear-gradient(top,#08c,#0077b3);background-image:-webkit-gradient(linear,0 0,0 100%,from(#08c),to(#0077b3));background-image:-webkit-linear-gradient(top,#08c,#0077b3);background-image:-o-linear-gradient(top,#08c,#0077b3);background-image:linear-gradient(to bottom,#08c,#0077b3);background-repeat:repeat-x;outline:0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc',endColorstr='#ff0077b3',GradientType=0)} .dropdown-2-menu .disabled>a,.dropdown-2-menu .disabled>a:hover{color:#999} .dropdown-2-menu .disabled>a:hover{text-decoration:none;cursor:default;background-color:transparent;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)} .open{*z-index:1000} .open>.dropdown-2-menu{display:block} .pull-right>.dropdown-2-menu{right:0;left:auto} .dropup .caret,.navbar-fixed-bottom .dropdown-2 .caret{border-top:0;border-bottom:4px solid #000;content:""} .dropup .dropdown-2-menu,.navbar-fixed-bottom .dropdown-2 .dropdown-2-menu{top:auto;bottom:100%;margin-bottom:1px} .dropdown-2-submenu{position:relative} .dropdown-2-submenu>.dropdown-2-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px} .dropdown-2-submenu:hover>.dropdown-2-menu{display:block} .dropup .dropdown-2-submenu>.dropdown-2-menu{top:auto;bottom:0;margin-top:0;margin-bottom:-2px;-webkit-border-radius:5px 5px 5px 0;-moz-border-radius:5px 5px 5px 0;border-radius:5px 5px 5px 0} .dropdown-2-submenu>a:after{display:block;float:right;width:0;height:0;margin-top:5px;margin-right:-10px;border-color:transparent;border-left-color:#ccc;border-style:solid;border-width:5px 0 5px 5px;content:" "} .dropdown-2-submenu:hover>a:after{border-left-color:#fff} .dropdown-2-submenu.pull-left{float:none} .dropdown-2-submenu.pull-left>.dropdown-2-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px} .dropdown-2 .dropdown-2-menu .nav-header{padding-right:20px;padding-left:20px} body.single-product .online-support{bottom:32px!important}




ثم نبحث عن </body> و نضع الكود التالي فوقه



<!-- Online support --> <div class="online-support" id="support-box"> <input class='closebox' onclick='document.getElementById(&#39;support-box&#39;).style.display=&#39;none&#39;;' title='Đóng' type='button' value='×'/> <div class="dropup force-open"><a class="btn btn--support" data-toggle="dropdown-2">Hỗ trợ trực tuyến</a> <ul class="dropdown-2-menu dropdown-2-menu-right dropdown-2--support"> <li><a href="tel:0123887890"><i class="icon-icon-phone"></i> GỌI HOTLINE</a></li> <li><a href="//m.me/iristipsblog" target="_blank" rel="noopener"><i class="icon-icon-chat"></i> INBOX FB</a></li> <li><a href="//zalo.me/01238888890" target="_blank" rel="noopener"><i class="icon-icon-zalo"></i> CHAT ZALO</a></li> </ul> </div> </div>



التعديلات



قم بتغير ارقام الهاتف بالتي تريد و يمكنك تغير الايقونة


و مبروك الاضافة
الاسمبريد إلكترونيرسالة