الموقع معروض للبيع، اذا كنت ترغب بشرائه تواصل معنا. متابعة

إضافة زر التواصل عبر برنامج التليجرام في بلوجر بشكل جديد 2022

إضافة جديدة وبسيطة تستطيع من خلالها جعل زوار مدونتك يتواصلون معك بشكل مباشر عن طريق telegram، وهي إضافة زر التواصل عبر التليجرام في بلوجر بشكل جديد
إضافة زر التواصل عبر برنامج التليجرام في بلوجر بشكل جديد 2022
مرحبا بكم في موقع قوالب لونا، أحببت اليوم أن أقدم لكم إضافة جديدة وبسيطة تستطيع من خلالها جعل زوار مدونتك يتواصلون معك بشكل مباشر عن طريق telegram، وهي إضافة زر التواصل عبر التليجرام في بلوجر بشكل جديد أكثر احترافية، مصممة فقط بواسطة أكواد CSS, HTML

ما هو برنامج telegram ؟ 

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

خطوات الإضافة 

  1. انتقل الى منصة بلوجر 
  2. من القائمة الجانبية اختر التنسيق (صفحة التخطيط
  3. إضافة أداة جديدة html/javascript
  4. اختر شكل الإضافة التي ترغب بها 
  5. قم بنسخ الكود الموجود في صندوق الأكواد والصقه داخل الأداة واضغط حفظ. 

أشكال الإضافة

1- الشكل الأول 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css"/>
<div class="tooltipluna">
<a href="https://t.me/lunatemplates_bot" class="teleiconluna" target="_blank"><i class="fab fa-telegram lunafloat"><span class="tooltip">تابعنا عبر قناتنا في التليجرام</span></i></a>
<div>
<style>
.teleiconluna{position:fixed;width:60px;height:60px;bottom:40px;left:50px;background-color:#551A8B;color:#FFF;border-radius:50px;text-align:center;font-size:40px;box-shadow:2px 2px 3px #999;z-index:100}
.lunafloat{color:#FFF;margin-top:10px}
.tooltipluna{cursor:pointer;position:relative;display:inline-block}
.tooltip{opacity:0;z-index:99;width:140px;display:block;font-size:15px;font-weight:bold;padding:5px 10px;border-radius:3px;text-align:center;text-shadow:1px 1px 2px #111;background:#000000;border:1px solid rgba(34,34,34,0.9);box-shadow:0 0 3px rgba(0,0,0,0.5);-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;transition:all .2s ease-in-out;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;right:-55px;bottom:75px}
.tooltip:before,.tooltip:after{content:'';border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid rgba(51,51,51,0.9);position:absolute;bottom:-11px;left:43%}
.tooltipluna:hover .tooltip,a:hover .tooltip{color:#FFF;opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
</style>


2- الشكل الثاني

<svg style="display:none">
<defs>
<symbol id="telegramfill" viewBox="0 0 100 100">
<path d="M50 0c27.6 0 50 22.4 50 50s-22.4 50-50 50S0 77.6 0 50 22.4 0 50 0z" fill="#4eb7e6"></path><path d="M38.6 71c-1.7 0-1.4-.6-2-2.2l-5-16.3 30.7-19.2 3.6.9-3 8.1" fill="#c8daea"></path><path d="M38.6 71c1.3 0 1.9-.6 2.6-1.3 1.1-1.1 15.6-15.2 15.6-15.2L48 52.4l-8.2 5.2-1.1 13" fill="#a7c2d1"></path><path d="M39.5 57.8l20.9 15.5c2.4 1.3 4.1.6 4.7-2.2l8.5-40.2c.9-3.5-1.3-5.1-3.6-4.1L20 46.1c-3.4 1.4-3.4 3.3-.6 4.1l12.8 4L62 35.5c1.4-.9 2.7-.4 1.6.5" fill="#eff7fc"></path>
</symbol>
</defs>
</svg>
<div class="messanger telegram-luna is-active">
<span class="telegram-luna__new" aria-hidden="true" style="display:none">+179</span>
<a class="messanger__in" href="https://t.me/lunatemplates_bot" target="_blank" title="Join our Telegram channel">
<div class="messanger__thumbnail">
<svg class="telegram-luna__icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#telegramfill">
</use>
</svg>
</div>
<div class="messanger__desc">
<h6 class="messanger__title telegram-luna__title">
دعم مباشر عبر التليجرام
</h6>
</div>
</a>
</div>
<style>
@keyframes blink{50%{opacity:0}from{opacity:1}to{opacity:1}}
.messanger{background-color:#fff;border-radius:5px;bottom:20px;box-sizing:border-box;cursor:pointer;height:50px;padding:10px;opacity:0;padding:5px;pointer-events:none;position:fixed;right:20px;transition:all 0.2s;width:50px;z-index:999}
.messanger.is-active{opacity:1;pointer-events:auto}
.messanger:before{border-radius:5px;bottom:0;box-shadow:0 24px 24px rgba(14,10,50,0.25);content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}
.messanger:hover .messanger__desc{opacity:1;pointer-events:all}
.messanger__desc{-ms-flex-positive:1;-webkit-box-flex:1;flex-grow:1;margin-left:10px;opacity:0;pointer-events:none;transition:opacity 0.2s}
.messanger__in{-ms-flex-align:center;-webkit-box-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden;white-space:nowrap}
.messanger__text{color:#13244f;font-size:0.875rem}
.messanger__thumbnail{-ms-flex-item-align:baseline;align-self:baseline;height:40px;position:relative;width:40px}
.messanger__thumbnail:after{-webkit-animation:blink 2s infinite;animation:blink 2s infinite;background-color:#23e16f;border:2px solid #fff;border-radius:50%;bottom:0;content:"";height:8px;position:absolute;right:0;width:8px}
.telegram-luna:hover{width:292px}
.telegram-luna__icon{height:40px;width:40px}
.telegram-luna__title{color:#4ea8d1;font-size:0.875rem;font-size:0.75rem;text-transform:uppercase}
.messanger a{background:transparent;border:0;color:#231c57;font-size:100%;margin:0;outline:0;padding:0;text-decoration:none;vertical-align:baseline}
.messanger h6{background:transparent;border:0;font-size:100%;font-weight:400;margin:0;outline:0;padding:0;vertical-align:baseline}
</style>

وبذلك نكون قد انتهينا من إضافة اليوم، إذا واجهتك اي مشكلة في تركيب الإضافة لا تتردد في التواصل معنا عبر صفحة اتصل بنا أو حسابنا عبر تليجرام وسوف نقوم بحلها في أقرب وقت ممكن. 

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

إرسال تعليق

إمتداد ويب © 2021 - 2022