اضافة ازرار المراسلة في مدونتك DEMO

من خلال هذا الاستعراض القصير ، سنتعلم كيفية إنشاء رابط إلى هاتف قابل للنقر عليه (نشط) ، وسننشئ أيضًا رابطًا نشطًا للبريد ولجميع برامج المراسلة الفورية

 

اضافة ازرار المراسلة في مدونتك DEMO

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

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

من خلال هذا الاستعراض القصير ، سنتعلم كيفية إنشاء رابط إلى هاتف قابل للنقر عليه (نشط) ، وسننشئ أيضًا رابطًا نشطًا للبريد ولجميع برامج المراسلة الفورية الشائعة: Viber و Skype و WhatsApp و Telegram و ICQ. سنقوم بتحليل كل واحد على حدة ، وفي النهاية سنجمع كل شيء في قالب واحد ونصنع التصميم بحيث يكون كل شيء جميلًا.

رابط الهاتف النشط على الموقع

لكي يعمل رقم الهاتف الموجود على الموقع كمكالمة نشطة عند النقر فوقه ، يلزمك كتابة قيمة tel في سمة href. حسنًا ، لن تختفي المكالمة على الفور ، ولكن ستظهر نافذة تسأل عن التطبيق الذي سيتم فتح الهاتف. في الواقع ، هذه علامة ارتباط عادية ، مما يعني أنه بدلاً من النص أو الرقم نفسه ، ربما تكون صورة وأيقونة وغير ذلك.

<a class="phone-but" href="tel:+12345678912">

= = = اتصل بنا</a>
<!-- مثال مع الصورة -->

<a class="phone-but"href="tel:+12345678912"><img src="img/phone.png" alt="رقم الهاتف"/></a>
 

رابط نشط لإرسال الرسائل عبر البريد الإلكتروني

الوضع مشابه هنا ، أي أن كل شيء يبقى كما هو ، لكننا نكتب قيمة مختلفة قليلاً في سمة الرابط. يؤدي النقر فوق هذا الارتباط إلى فتح نافذة نموذج يُطلب فيها تحديد تطبيق لفتح ارتباط mailto.

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

<a class="email-but" href="mailto:moypochta@gmail.com">  </a>

<a class="email-but" href="mailto:moypochta@gmail.com?subject=Thank you for the article&body=Hello! The article was useful for me"> راسلني </a>

 

رابط نشط لفايبر على الموقع

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

<a class="viber-but" href="viber://chat?number=%2B75555555559">راسلني بواسطة Viber </a>

 

رابط تيليجرام نشط للموقع

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

<a class="teleg-but" href="https://t.me/username">اكتب عن طريق Telegram </a>

 

رابط نشط إلى Skype على الموقع

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

<!--رابط الاتصال -->
<a class="skype-but" href="skype:username?call">اتصل علي Skype</a>
<!-- رابط الدردشة -->
<a class="skype-but" href="skype:username?chat">اكتب علي Skype</a>

 

رابط نشط إلى ICQ على الموقع

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

<a class="icq-but" href="icq:999999999">إضافة جهة اتصال ICQ </a>
 

اضافة جميع ازرار المراسلة في مدونتك DEMO

اولا:كود html

<div class="social-buttons">
  <a class="social-button skype-but" href="skype:username?chat">
  <i class="fa fa-skype" aria-hidden="true"></i>
    </a>
    <a class="social-button whats-but" href="https://api.whatsapp.com/send?phone=77788899965">
    <i class="fa fa-whatsapp"></i>
    </a>
    <a class="social-button teleg-but" href="https://t.me/username">
   <i class="fa fa-telegram" aria-hidden="true"></i>
    </a>
    <a class="social-button icq-but" href="icq:999999999">
    <i class="fa fa-asterisk" aria-hidden="true"></i>
    </a>
    <a class="social-button viber-but" href="viber://chat?number=%2B75555555559">
   <i class="fa fa-phone-square" aria-hidden="true"></i>
    </a>
    <a class="social-button email-but" href="mailto:moypochta@gmail.com?subject=Thank you for the article&body=Hi! >
  <Статья для меня была полезной"><i class="fa fa-envelope"></i>
   </a>
   <a class="social-button phone-but" href="tel:+12345678912_">
   <i class="fa fa-phone" aria-hidden="true"></i>
    </a>
</div>
 

ثانيا:كود css

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);

.social-buttons {
  height: 90px;

}

.social-button {
  display: inline-block;
  background-color: #fff;
  width: 50px;
  height: 50px;
  line-height: 50px;
  margin: 0 3px;
  text-align: center;
  position: relative;
  overflow: hidden;
  opacity: .99;
  border-radius: 28%;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);
  -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
  transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button:before {
  content: '';
  background-color: #000;
  width: 120%;
  height: 120%;
  position: absolute;
  top: 90%;
  left: -110%;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
  transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button .fa {
  font-size: 28px;
  vertical-align: middle;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
  transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}

.social-button.skype-but:before {
  background-color: #00A3E7;
}
.social-button.skype-but .fa {
  color: #00A3E7;
}

.social-button.whats-but:before {
  background-color: #4dc247;
}
.social-button.whats-but .fa {
  color: #4dc247;
}

.social-button.email-but:before {
  background-color: #ff6600;
}
.social-button.email-but .fa {
  color: #ff6600;
}

.social-button.phone-but:before {
  background-color: #000;
}
.social-button.phone-but .fa {
  color: #000;
}

.social-button.teleg-but:before {
  background-color: #31A9DD;
}
.social-button.teleg-but .fa {
  color: #31A9DD;
}

.social-button.icq-but:before {
  background-color: #24FF00;
}
.social-button.icq-but .fa {
  color: #24FF00;
}

.social-button.viber-but:before {
  background-color: #7B519C;
}
.social-button.viber-but .fa {
  color: #7B519C;
}

.social-button:focus:before, .social-button:hover:before {
  top: -10%;
  left: -10%;
}
.social-button:focus .fa, .social-button:hover .fa {
  color: #fff;
  -webkit-transform: scale(1);
          transform: scale(1);
}
 

معاينة الاكواد

معاينة الذهاب الي الموقع

إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا