How to Add Partner Sites Widget in Blogger

Hello Everyone, on this occasion I will share How to Add Partner Sites Widget in Blogger. Partner blogs, also known as partner blogs or partner blogs, are a collaboration between partner blogs and other blogs that usually have their own goals or interests.

Examples like increasing domain authority (DA) and page authority (PA), yes, although not so important. But it’s not bad, you can get free backlinks.

Apart from increasing the DA PA of the blog, the blog partner page can also increase the blog’s position in Google search results and other search engines.

What is a Blog Partner ?

The Blog Partner or also known as Partner Blog is a collaboration between fellow blogs and other blogs which usually have their own goals or interests.

The purpose of creating a partner blog page is also definitely different, whether it’s to exchange links (link exchange), get free backlinks, build relationships, or just style.

What is Benefits of Creating Blog Partner Widget ?

As I said above, there are many benefits to creating a partner blog page:

  • Increase Domain Authority (DA) and Page Authority (PA) blogs.
  • Linking to many other blogs.
  • Introduce your blog to new visitors to other blogs.
  • Increase the blog’s position in Google search results and other search engines.

How to Add Partner Sites Widget in Blogger :-

Step 1 :- First Go To Blogger.Com.
Step 2 :- Then Login Your Account.
Step 3 :- Then Click on Theme Menu.
Step 4 :- After Click on Edit Html.
Step 5 :- Then Paste The Given Css Code Above The </head> Tag.

Style 1

.stm-blogFriends li{margin:0;padding:0;line-height:normal;display:block;float:left;text-align:left;width:50%}
.stm-blogFriends a{text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block; margin: 0 8px 8px 0; padding: 7px 15px; font: 400 13px 'Noto Sans', sans-serif; -webkit-transition: .3s; letter-spacing: -.35px; -moz-transition: .3s; -o-transition: .3s; color: inherit; border: 1px solid rgb(230,230,230);border-radius: 6px}
.stm-blogFriends a:hover{border-color: #6200ee;}

Style 2

<style type="text/css">
/* Friend Sites Widget */
.friendLink{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;position:relative;width:calc(100% + 10px);left:-5px;right:-5px;font-size:13px;}
.friendLink li{width:calc(50% - 10px);margin:0 5px 10px;}
.friendLink a{background:#f6f6f6;display:block;color:inherit;width:100%;padding:8px 10px;border-radius:4px;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.friendLink a:hover{color:#6200ee;}
/* Dark Mode Css */
.drK .friendLink a{background:rgba(0,0,0,.15);color:inherit;}
.drK .friendLink a:hover{color:#8775f5;}
.friendsRules{margin:0;padding:0;line-height:normal;display:block;float:left;background-color:#f6f6f6;font-size:13px;margin-top:-1px;margin:0 0 8px 0;padding:7px 10px;border-radius:6px;}
.drK .friendsRules{background-color:rgba(0,0,0,.15);}

Note :- Change This Color Code According To You Need.

Step 6 :- Then Don’t Forget to Click on Save Theme.
Step 7 :- Then Go To Blogger Layout.
Step 8 :- Then Click on Add a Gadget.
Step 9 :- Then Select The Html / JavaScript.
Step 10 :- Then Paste The Given Html Code.

Style 1

<div id='stm-blogFriends'>
<div class='stm-blogFriends'>
<li><a title='First Site Title' href='First Site Url'>First Site Title</a></li>
<li><a title='2nd Site Title' href='2nd Site Url'>2nd Site Title</a></li>
<li><a title='3rd Site Title' href='3rd Site Url'>3rd Site Title</a></li>
<li><a title='4th Site Title' href='4th Site Url'>4th  Site Title</a></li>

Style 2

<div id='friend-link'>
<div class='friendLink'>
<li><a href='#' target='_blank' title='Site Name 1'>Site Name 1</a></li>
<li><a href='#' target='_blank' title='Site Name 2'>Site Name 2</a></li>
<li><a href='#' target='_blank' title='Site Name 3'>Site Name 3</a></li>
<li><a href='#' target='_blank' title='Site Name 4'>Site Name 4</a></li>
<li><a href='#' target='_blank' title='Site Name 5'>Site Name 5</a></li>
<li><a href='#' target='_blank' title='Site Name 6'>Site Name 6</a></li>
<li style='width:100%'><a href='/p/partner-sites.html' style='display:block;text-align:center' target='_blank' title='Submit Your Blogs/Website'><i class='fad fa-hands-helping rung'></i> Submit Your Blogs/Website</a></li>
<div class='friendsRules'>We Will Remove Links to Blogs/Websites that Violate The General Policy and Regulations Policy.</div>
Step 11 :- Then Don’t Forget to Click on Save.

Conclusion :-

In this post I have explained How to Add Partner Sites Widget in Blogger. I Hope this tutorial can be useful for you. Thank You for Visiting Our Website.

Refrence :


Leave a Reply

Your email address will not be published. Required fields are marked *