راسلنا من خلال النمودج التالي :

الاسم

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

رسالة *

أكتب ما تود البحث عنـه .....

إعلان
إعلان

آخر الأخبار

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








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

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

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


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


نذهب الى المظهر و نبحث عن الوسم ]]></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>



التعديلات



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


و مبروك الاضافة

hala teck
الكاتب : MAHER

مدون عربي صاحب مدونة هلا تك يهتم بكل جديد بعالم التقنية و المعلومات

شارك الموضوع
تعليقات
إعلان