How to Generate Partner Pages [Blogger] Cool

This time Masrodi will show a minimum of insight to produce a partner page on our blog, where on this partner page we can strengthen our blog ties with other blog owners, this partner blog page is really valuable for us and certainly also valuable for blog owners. others without harming each other, so that on the blog partner page they can show information about blogs that are owned by lovers or who are really passionate about the world of blogging.

  will show off minimal insight to generate a partner page on a k blog How to generate a partner page [Blogger] Cool

The purpose of generating a partner blog page in particular is to generate a backlink that goes to the partner blog page that is connected to the link that was given before it was created, and will also include the authority domain value that we have gradually, so that in the authority domain we will get more value on the google search engine of course so that when we produce new posts it will easily rank in search engines, to produce this blog partner page is really easy, please follow the tutorial on how to easily generate partner pages on this blogger platform.

How to generate partner page on blog

The first thing we do is include css into the template that we have, so that it can be carried out in a well-planned manner.

  • Please open our blogger platform.
  • Choose one of the blogs to be paired with a partner page.
  • Please click the horizontal three line menu (hamburger menu)
  • Press theme and, on the left bar the theme page will appear.
  • please select the triangle down and click html to show the template instructions on the html mode
  • If the html mode theme window opens, please copy the css below and place it above the instructions ]]
/*---- Blog Partner ----*/ span.logo-masrodi { text-align: center; display: block } span.logo-masrodi amp-img { border: 5px solid #413965; border-radius: 50%; background: #413965 } span.logo-masrodi amp-img img { border-radius: 50% } ul.blog-partner { list-style: none; margin: 0; padding: 80px 0 0; position: relative } ul.blog-partner:before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-39%); background: #0177FA; width: 8px; height: 8px; border-radius: 50% } ul.blog-partner:after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; background: #0177FA; width: 2px; z-index: 1 } li.partner-wrap { background: #FFF; border: 2px solid #0177FA; border-radius: 5px; margin-bottom: 50px; padding: 20px; position: relative; z-index: 2 } li.partner-wrap:before { content: ""; position: absolute; width: 16px; height: 16px; left: 50%; transform: translateX(-45%); top: -11px; background: #FFF; border: 2px solid #0177FA; border-radius: 50% } h3.title-partner { border-bottom: 2px solid #aaa; text-align: center; padding-bottom: 10px; margin-bottom: 20px } h3.title-partner a { text-decoration: none } span.logo-partner amp-img { border: 5px solid #0177FA; border-radius: 50%; background: #0177FA; z-index: 1 } span.logo-partner amp-img img { border-radius: 50% } span.logo-partner { margin-right: 20px; position: relative; font-size: 12px } span.logo-partner:before, span.logo-partner:after { position: absolute; white-space: nowrap; left: 60px; border-radius: 0 5px 5px 0; padding: 4px 10px 4px 20px; opacity: 0 } span.logo-partner:before { content: attr(id); background: #21ef8b; color: #242038; top: 15px; transition: all .6s ease } span.logo-partner:after { content: attr(data-tooltip); background: #3498db; color: #fff; top: 45px; transition: all 1.2s ease } li.partner-wrap:hover .deskripsi-partner .logo-partner:before, li.partner-wrap:hover .deskripsi-partner .logo-partner:after { opacity: 1; left: 70px } .deskripsi-partner { display: flex; margin-bottom: 25px; align-items: center } .deskripsi-partner p { display: block; margin: 0; text-align: justify; color: #212121 } li.partner-wrap:after { content: attr(data-tooltip); position: absolute; right: -1px; bottom: 0; background: #0177FA; color: #FFF; padding: 0 10px; border-radius: 5px 0 0 0; font-size: 14px } li.partner-wrap:hover::before { -webkit-animation: pulse 1.2s infinite; box-shadow: 0 0 0 0 rgba(90, 153, 212, 0.5); left: 48.92% } li.partner-wrap:hover .deskripsi-partner .logo-partner amp-img { transform: rotate(360deg); transition: all .8s ease } span.logo-partner amp-img, span.logo-masrodi amp-img { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0 rgba(0, 0, 0, 0.14), 0px 1px 10px 0 rgba(0, 0, 0, 0.12) } @-webkit-keyframes pulse { 0% { -moz-transform: scale(0.9); -ms-transform: scale(0.9); -webkit-transform: scale(0.9); transform: scale(0.9) } 70% { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); box-shadow: 0 0 0 50px rgba(90, 153, 212, 0) } 100% { -moz-transform: scale(0.9); -ms-transform: scale(0.9); -webkit-transform: scale(0.9); transform: scale(0.9); box-shadow: 0 0 0 0 rgba(90, 153, 212, 0) } } @media screen and (max-width:530px) { li.partner-wrap:hover::before { left: 47.4% } .deskripsi-partner { display: block } span.logo-partner { margin: 0 auto; display: table } li.partner-wrap:hover .deskripsi-partner .logo-partner:before, li.partner-wrap:hover .deskripsi-partner .logo-partner:after { left: 80% } span.logo-partner:before, span.logo-partner:after { left: 60% } } 

Above only includes CSS instructions on the blog theme, next is how to generate a partner page on the blog, and the next step is to open a new page to generate a partner page which will later see a post about the blog partner page that we have and consist of your blog partners .

How to generate a blog partner page.

  • Open our own blog
  • Select page
  • Add page
  • Select html mode on page
  • Copy the script below
<span class="logo-masrodi">   <amp-img alt=" akan memamerkan minimal  wawasan untuk menghasilkan sebuah halaman partner di blog yang k Cara menghasilkan halaman partner [Blogger] Keren"background-color: red;">Nama Logo Blogmu" height="75" src="https://semogaawet.com/cara-menghasilkan-halaman-partner-blogger-keren/https://2.bp.blogspot.com/-JyrffrIGjTU/XnokcRCUJHI/AAAAAAAACAg/tUdXd1dBlDQ64x8M5EBLqgdeD2_P6oL7ACLcBGAsYHQ/s1600/poster3_22_213819.png" title="Cara menghasilkan halaman partner [Blogger] Keren"background-color: red;">Nama Logo Blogmu" width="75"></amp-img> </span>  <div id="blog-partner">   <ul class="blog-partner">     <li class="partner-wrap" data-tooltip="https://semogaawet.com/cara-menghasilkan-halaman-partner-blogger-keren/www.blogpartner.blogspot.com">       <h3 class="title-partner"><a href="https://semogaawet.com/cara-menghasilkan-halaman-partner-blogger-keren/https://www.blogpartner.blogspot.com" title="Cara menghasilkan halaman partner [Blogger] Keren"background-color: red;">Nama Blog Partner" rel="nofollow noopener" target="_blank">NAMA BLOG PARTNER</a></h3>       <div class="deskripsi-partner">         <span class="logo-partner" id="https://semogaawet.com/cara-menghasilkan-halaman-partner-blogger-keren/Niche Blog Partner" data-tooltip="https://semogaawet.com/cara-menghasilkan-halaman-partner-blogger-keren/Nama Pemilik Blog Partner">           <amp-img alt=" akan memamerkan minimal  wawasan untuk menghasilkan sebuah halaman partner di blog yang k Cara menghasilkan halaman partner [Blogger] Keren"background-color: red;">Nama Logo Partner" height="75" src="https://semogaawet.com/cara-menghasilkan-halaman-partner-blogger-keren/https://2.bp.blogspot.com/-It-oVVf9Cf0/XAu5iwhK1AI/AAAAAAAAESs/iGoLAczKBFMTW1FozfyphUFeFZiaD7kQACPcBGAYYCw/s1600/logo-part.png" title="Cara menghasilkan halaman partner [Blogger] Keren"background-color: red;">Nama Logo Partner" width="75"></amp-img>         </span>         <p>Deskripsi Blog Partner</p>       </div>     </li>   </ul> </div>   

We need to understand that what I marked in red above we need to change according to the needs that we need from our own partners.

To include a blog partner, please add the following script and place it above the tag

.

 <li class="partner-wrap" data-tooltip="https://semogaawet.com/cara-menghasilkan-halaman-partner-blogger-keren/www.blogpartner.blogspot.com">   <h3 class="title-partner"><a href="https://semogaawet.com/cara-menghasilkan-halaman-partner-blogger-keren/https://www.blogpartner.blogspot.com" title="Cara menghasilkan halaman partner [Blogger] Keren"background-color: red;">Nama Blog Partner" rel="nofollow noopener" target="_blank">NAMA BLOG PARTNER</a></h3>   <div class="deskripsi-partner">     <span class="logo-partner" id="https://semogaawet.com/cara-menghasilkan-halaman-partner-blogger-keren/Niche Blog Partner" data-tooltip="https://semogaawet.com/cara-menghasilkan-halaman-partner-blogger-keren/Nama Pemilik Blog Partner">       <amp-img alt=" akan memamerkan minimal  wawasan untuk menghasilkan sebuah halaman partner di blog yang k Cara menghasilkan halaman partner [Blogger] Keren"background-color: red;">Nama Logo Partner" height="75" src="https://semogaawet.com/cara-menghasilkan-halaman-partner-blogger-keren/https://2.bp.blogspot.com/-It-oVVf9Cf0/XAu5iwhK1AI/AAAAAAAAESs/iGoLAczKBFMTW1FozfyphUFeFZiaD7kQACPcBGAYYCw/s1600/logo-part.png" title="Cara menghasilkan halaman partner [Blogger] Keren"background-color: red;">Nama Logo Partner" width="75"></amp-img>     </span>   <p>Deskripsi Blog Partner</p>   </div> </li> 

The above is a good and cool way to generate a partner page on a blog, as a partner page pattern we can see on the partner page that I created on this masrodi blog.

Notes :

For the page with the image menu above is a valid method and the image will not appear on non amp blogs, for non amp pages we need to replace the image by removing the amp stroke on the img tag which I colored green, and then save it.

As a matter of consideration in producing the partner page above, please enter the Masrodi partner as a form of brotherhood in your partner page. Please enter the Masrodi code above the

instruction below the code.

 <li class="partner-wrap" data-tooltip="www.masrodi.com">   <h3 class="title-partner"><a href="https://www.masrodi.com" title="Cara menghasilkan halaman partner [Blogger] Keren" rel="nofollow noopener" target="_blank">Blog </a></h3>   <div class="deskripsi-partner">     <span class="logo-partner" id="Blogging dan teknologi" data-tooltip="Rudi Setiawan">       <amp-img alt=" akan memamerkan minimal  wawasan untuk menghasilkan sebuah halaman partner di blog yang k Cara menghasilkan halaman partner [Blogger] Keren" height="75" src="https://2.bp.blogspot.com/-JyrffrIGjTU/XnokcRCUJHI/AAAAAAAACAg/tUdXd1dBlDQ64x8M5EBLqgdeD2_P6oL7ACLcBGAsYHQ/s1600/poster3_22_213819.png" title="Cara menghasilkan halaman partner [Blogger] Keren" width="75"><img>     </span>   <p>Blog yang berisi dengan menyebarkan tutorial seputar dunia blogging dan teknologi serta banyak ilmu berharga yang sanggup di sanggup sesuai dengan pengalaman </p>   </div> </li> 

Hopefully the knowledge shared can be valuable for all of us.

Leave a Reply

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