إضافة زر ماسنجر إلى موقعك على بلوجر بشكل مميز

السلام عليكم احبتى متابعي مدونة مستر نت سعيد جداً اليوم بعد غياب طويل عنكم و لكن ليس بإرداتى والان دعونا ندخل فى موضوعنا العديد من المواقع دائماً ما تسعى لوسيلة للتواصل بينها وبين عملائها او زوارها و الأغلبية يلجأون لاداة خارجية تابعة لموقع ما ولكن فى هذا الشرح سوف نشرج لكم كيف تضيف زر الماسنجر فى صورة نافذة منبثقة للتواصل مع عملائك او زوارك بدون الحاجة إلى جهة خارجية او طرف فرسائل زوارك سوف تثلك على صفحتك على فيس بوك 

بم تتمتاز الإضافة ؟

1.  بانها مكونة من ايقونة SVG على شكل Messrnger 
2.  صندوق المراسلة الخاص بماسنجر 
3. زر للإعجاب بصفحتك 
4. زر لإغلاق النافذة و زر ايضاً لفتح النافذة
5. هذا كل شىْ إلى جانب الشكل العصرى و التصميم الفلاتى الخاص بشكل ايقونة Messenger 

صور من الإضافة 

هل انت متحمس لتجربة الإضـــافة ؟؟

;كل ما عليك فعله هو التوجه للوحة تحكم بلوجر من هنا ومن ثم تحرير Html إبحث عن الوسم </body> وضع الكود التالى فوقه

<style> .fb-livechat { display: none; } .ctrlq.fb-button { z-index: 9; background: #0084ff; width: 60px; height: 60px; text-align: center; position: fixed; bottom: 24px; right: 24px; border: 0; outline: none; border-radius: 60px; -webkit-border-radius: 60px; -moz-border-radius: 60px; -ms-border-radius: 60px; -o-border-radius: 60px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06), 0 2px 32px rgba(0, 0, 0, 0.16); -webkit-transition: box-shadow 200ms ease; transition: box-shadow 200ms ease; cursor: pointer; background-size: 80%; background-repeat: no-repeat; background-position: center; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyOCAxMjgiIGhlaWdodD0iMTI4cHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB3aWR0aD0iMTI4cHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxyZWN0IGZpbGw9IiMwMDg0RkYiIGhlaWdodD0iMTI4IiB3aWR0aD0iMTI4Ii8+PC9nPjxwYXRoIGQ9Ik02NCwxNy41MzFjLTI1LjQwNSwwLTQ2LDE5LjI1OS00Niw0My4wMTVjMCwxMy41MTUsNi42NjUsMjUuNTc0LDE3LjA4OSwzMy40NnYxNi40NjIgIGwxNS42OTgtOC43MDdjNC4xODYsMS4xNzEsOC42MjEsMS44LDEzLjIxMywxLjhjMjUuNDA1LDAsNDYtMTkuMjU4LDQ2LTQzLjAxNUMxMTAsMzYuNzksODkuNDA1LDE3LjUzMSw2NCwxNy41MzF6IE02OC44NDUsNzUuMjE0ICBMNTYuOTQ3LDYyLjg1NUwzNC4wMzUsNzUuNTI0bDI1LjEyLTI2LjY1N2wxMS44OTgsMTIuMzU5bDIyLjkxLTEyLjY3TDY4Ljg0NSw3NS4yMTR6IiBmaWxsPSIjRkZGRkZGIiBpZD0iQnViYmxlX1NoYXBlIi8+PC9zdmc+"); transition: all .2s ease-in-out; } .ctrlq.fb-button:focus, .ctrlq.fb-button:hover { transform: scale(1.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09), 0 4px 40px rgba(0, 0, 0, 0.24); } .fb-widget { background: #fff; z-index: 9; position: fixed; width: 360px; height: 398px; overflow: hidden; display: none; opacity: 0; bottom: 0; right: 24px; border-radius: 6px; -o-border-radius: 6px; -webkit-border-radius: 6px; box-shadow: 0 5px 40px rgba(0, 0, 0, 0.16); -webkit-box-shadow: 0 5px 40px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 5px 40px rgba(0, 0, 0, 0.16); -o-box-shadow: 0 5px 40px rgba(0, 0, 0, 0.16); } .ctrlq.fb-overlay { z-index: 0; position: fixed; height: 100vh; width: 100vw; -webkit-transition: opacity .4s, visibility .4s; transition: opacity .4s, visibility .4s; top: 0; left: 0; background: rgba(0, 0, 0, 0.05); display: none; } .ctrlq.fb-close { position: absolute; left: 10px; z-index: 4; padding: 0 6px; background: #365899; font-weight: bold; font-size: 11px; color: #fff; cursor: pointer; margin: 8px; border-radius: 3px; } .ctrlq.fb-close::after { content: 'X'; font-family: cursive; } h1 { font-weight: 300; } </style> <div class='fb-livechat'> <div class='ctrlq fb-overlay'></div> <div class='fb-widget'> <div class='ctrlq fb-close'></div> <div class='fb-page' data-height='400' data-hide-cover='true' data-href='https://www.facebook.com/Mrnet2017/' data-show-facepile='false' data-small-header='true' data-tabs='messages' data-width='360'> <blockquote cite='https://www.facebook.com/Mrnet2017/' class='fb-xfbml-parse-ignore'> </blockquote> </div> <div id='fb-root'></div> </div> <a class='ctrlq fb-button' href='https://m.me/Mrnet2017' title='Send us a message on Facebook'></a> </div> <script> $(document).ready(function() { var $fb = { delay: 125, overlay: $(".fb-overlay"), widget: $(".fb-widget"), button: $(".fb-button") }; setTimeout(function() { $("div.fb-livechat").fadeIn(); }, $fb.delay * 8); $(".ctrlq").on('click', function(e) { e.preventDefault(); if ($fb.overlay.is(":visible")) { $fb.overlay.fadeOut($fb.delay); $fb.widget.stop().animate({ bottom: 0, opacity: 0 }, $fb.delay * 2, function() { $(this).hide('slow'); $fb.button.show(); }); } else { $fb.button.fadeOut('medium', function() { $fb.widget.stop().show().animate({ bottom: "30px", opacity: 1 }, $fb.delay * 2); $fb.overlay.fadeIn($fb.delay); }); } }); }); </script>

فى الأخير إذا اعجبك الموضوع لا تنسى ترك تعليق تحفيزى و الإشتراك فى  أعضاء المدونة 
دمتم فى امان الله 😃