أضافة أداة الماسنجر لمدونتك بلوجر لتواصل الزوار معك

تركيب أداة الماسنجر على بلوجر ، لتسهل علــى الزائر التواصل او الاتصال بك مباشرة على صفحتك الفيسبوك ، تابع معي الشرح ، ...

الأداة رائعة بشكلها الجميل ، حتما ستعجبك .

مميزات الأضافة :

1. شكل جميل و جذاب .
2. زر الاعجاب بصفحتك .
3. صندوق المرسالة الخاص بماسجر بصفحتك .
4. زر لأغلاق النافذة .
5. تصميم خفيف و مناسب لجميل القوالب .

معاينة الأضافة :

لمعاينة الأضافة تجدها يسار المدونة .

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

 1 / قم بالذهاب الى تحرير القالب : ثم ابحث عن : </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; right: 0; background: rgba(0, 0, 0, 0.05); display: none; } .ctrlq.fb-close { position: absolute; right: 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/ZATOU.INFORMATIC/' data-show-facepile='false' data-small-header='true' data-tabs='messages' data-width='360'> <blockquote cite='https://www.facebook.com/ZATOU.INFORMATIC/' class='fb-xfbml-parse-ignore'> </blockquote> </div> <div id='fb-root'></div> </div> <a class='ctrlq fb-button' href='https://m.me/ZATOU.INFORMATIC' 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>

التعديلات في الكود :

2 / قم بتعديل كل ماهو بالون الأزرق في الكود بــ رابط صفحتك على فيسبوك .
3 / قم بتغير الي بالون الأخضر بمعرف صفحتك .

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

-------------------------------------------

لا تسى مشاركة الموضوع
-------------------------------------------
( اذا واجهتك مشاكل اتركها كتعليق. )

------------------------------------------

أقسام الموضوع :

فيسبوك تويتر جوجل + لينكدن واتساب

فـريـق عـمـل الموقع :

زاتو للمعلوميات ، هو موقع يقدم ، شروحات ، برامج ، العاب ، أخبار ، و الكثير ... يعمل عليه فريق عمل مكون من ثلاث أشخاص يقدمون كل ماهو مفيد و جديد بأبسط الطرق ، هدفهم أثراء المحتوى العربي و تصحيح كل ماهو مخطأ . أشترك في الموقع لتتوصل بكل ماهو جديد مباشرة على بريدك الألكتروني . حـصـريـا أكـثـر من 3 ثلاث مـواضيتع متعـلـقـة بـ الألعاب يوميا ...