مرحبا اعزائي الزوار والمتابعين في موقعنا بلوجر اكاديمي كما عودناكم علي كل ما هو جديد وما تريدونه من اضافات اليوم قد اتيت لكم بكيفيه اضافه زر مراسله الماسنجر للدعم الفني في مدونتك او موقعك علي منصه بلوجرفي الجانب
في موقعك كما هو موجود في موقعي بلوجر اكاديمي
- مميزات الاضافه
- الاضافه بتقنيه svg الاحترافيه
- الزر بتقنيه الماتريال ديزاين
- الزر سهل التعديل
- كيفيه تركيب الاضافه
- كل ما عليك ايها الزائر الكريم هو التوجه الي لوحه التحكم الخاصه بك في منصه بلوجر ثم تتوجه الي المظهر ثم تختار تعديل html ثم تقوم بالضغط علي ctrl+f وسوف يظهر لك مربع البحث قم بالضغط عليه ثم قم بكتابه body ثم بعد ذلك تقوم بوضع الكود شتجدون رابطه في اخر المقال
- كيفيه التعديل علي الاضافه
- كل ما هو عليك بعد ان قمنا بتركيب الاضافه التوجه الي الكود ثم ستجد الروابط التاليه وكل ما عليك هو ان تقوم بتغييرها ببياناتك الخاصه
الاكواد
m.me/bloggeracadmey
هذا هو الكود الاول سوف تجده في الاضافه ثم ستقوم بازاله "[Bloggeracadmey]" وتقوم بوضع الرابط الخاص بك وان لم تعرفه يجب عليك ان تمتلك صفحه خاصه بك علي الفيسبوك ثم التوجه اليها ثم سوف تري المعرف الخاص بك تحت اسم الصفحه الخاصه بك كما
هو. موضح في الصوره
Facebook.com/bloggeracadmey
هذا هو الكود الثاني سوف تجده في الاضافه مكررا ثم ستقوم بازاله "[Bloggeracadmey]" وتقوم بوضع الرابط الخاص بك وان لم تعرفه يجب عليك ان تمتلك صفحه خاصه بك علي الفيسبوك ثم التوجه اليها ثم سوف تري المعرف الخاص بك تحت اسم الصفحه الخاصه بك كما
هو. موضح في الصوره
الكود
الكود
<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>
فى الأخير إذا اعجبك الموضوع لا تنسى ترك تعليق تحفيزى و الإشتراك
إنتظر قليلا حتى يظهر الرابط
5 sec
لكود رائع اخي عز الدين وهو رائع جدا ومتوافق مع جميع القوالب ما عدا سكويز وسيوبلس
ردحذف