Buy Plus UI v2.5! Demo Buy Now!

Creating Simple Contact Frame for Blogger

So hello viewers how are you. I hope you are doing good. Welcome to Tech Aadi

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.

Creating Simple Contact Frame for Blogger

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

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

Creating Simple Contact Frame for Blogger

Step 1: Login to your Blogger dashboard.

Step 2: Go to Layout section.

Step 3: Click on Add a Gadget. A popup box will appear.

Step 4: Now Click on HTML/JavaScript.

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


Facebook: Sadab Ali
Whatsapp: 123456789
Phone: 123456789
Payment: Bank, Phonepe, Momo, GooglePay, card + 35% fee,...

<link rel="stylesheet" href="//"/>
  .techaadi-contacts.techaadi-contacts-info {
    border: 2px dashed #17a2b8;
    background: #eef9fa;
    border-radius: 10px!important;
  .techaadi-contacts {
    color: #222222;
    overflow: hidden;
    position: relative;
    margin: 10px 0!important;
    padding: 15px;
    line-height: 26px!important;
    word-break: break-word;
  .techaadi-contacts svg {
    height: 15px;
    margin-right: 10px;
    display: flex;
  .techaadi-contacts i {
    margin-right: 10px;
<p class="techaadi-contacts techaadi-contacts-info">
  <i class="fab fa-facebook-square"></i><b>Facebook: </b><a href="" rel="nofollow" target="_blank">Sadab Ali</a><br />
  <i class="fas fa-sms"></i><b>Whatsapp: </b><a href="" 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="" target="_blank"></a><br />
  <i class="fas fa-sack-dollar"></i><b>Payment: </b> Bank, Phonepe, Momo, GooglePay, card + 35% fee,...

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

Step 7: Now click on save button.

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


So i hope you like this post. If you like this post Creating Simple Contact Frame for Blogger please do comment below. Do Follow our blog  for more post like this.


Read also :

Rate this article

Getting Info...

About Post Author

Cookies Consent

This website uses cookies to ensure you get the best experience on our website.

Cookies Policy

We employ the use of cookies. By accessing Plus UI, you agreed to use cookies in agreement with the Plus UI's Privacy Policy.

Most interactive websites use cookies to let us retrieve the user’s details for each visit. Cookies are used by our website to enable the functionality of certain areas to make it easier for people visiting our website. Some of our affiliate/advertising partners may also use cookies.