How To Creating Simple Contact Frame for Blogger Site

Simple Contact Frame

Let's Do a Demo Here...!

View Demo

Step 1: First of all Login to your Blogger Dashboard.

Step 2: On your  Blogger Dashboard, Click 'Theme'. 

Step 3: Click on the arrow down Icon next to 'Customize' Button.

Step 4: Click on Edit HTML, you will be redirected to Theme Editing Page.

Step 5: Copy the below Codes(Css, HTML) and paste it in the content section and leave the title blank.

So today we are going to discuss about Creating Simple Contact Frame for Blogger. This code will give you very good look for your blog about us widget.

So follow the below steps to install this on your blog.

Error! Before following below steps kindly do backup your blog template for any kind of errror and easy restoration.

Facebook: Abdullah Coded
Whatsapp: 123456789
Phone: 123456789
Gmail: contacts.abdullahcodxd@gmail.com
Payment: Bank, Phonepe, Momo, GooglePay, card + 35% fee,...

<link rel="stylesheet" href="//cdn.leanhduc.pro.vn/font-awesome/pro-5.15.3/css/all.css"/>
<style>
  .abdullahcoded-contacts.abdullahcoded-contacts-info {
    border: 2px dashed #17a2b8;
    background: #eef9fa;
    border-radius: 10px!important;
  }
  .abdullahcoded-contacts {
    color: #222222;
    overflow: hidden;
    position: relative;
    margin: 10px 0!important;
    padding: 15px;
    line-height: 26px!important;
    word-break: break-word;
  }
  .abdullahcoded-contacts svg {
    height: 15px;
    margin-right: 10px;
    display: flex;
  }
  .abdullahcoded-contacts i {
    margin-right: 10px;
  }
</style>

<p class="abdullahcoded-contacts abdullahcoded-contacts-info">
  <i class="fab fa-facebook-square"></i><b>Facebook: </b><a href="https://www.facebook.com/sadabali.1819/" rel="nofollow" target="_blank">Sadab Ali</a><br />
  <i class="fas fa-sms"></i><b>Whatsapp: </b><a href="https://whatsapp.me/12345" target="_blank">123456789</a><br />
  <i class="fas fa-phone-alt"></i><b>Phone: </b><a href="tel:123456789" target="_blank">123456789</a><br />
  <i class="fas fa-envelope"></i><b>Gmail: </b><a href="mailto:contacts.abdullahcodxd@gmail.com" target="_blank">contacts.abdullahcodxd@gmail.com</a><br />
  <i class="fas fa-sack-dollar"></i><b>Payment: </b> Bank, Phonepe, Momo, GooglePay, card + 35% fee,...
</p>

Step 6: Edit the Marked part as per your requirements.

Step 7: Now click on save button.

Success! Now I hope after applying all codes you have successfully installed this code on blog. If you got any error kindly do contact us.

Conclusion

This is all about making a Contact Form using Telegram Bot API. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in comment box.

Copyright ©

ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ