Cara Membuat Halaman Partner Blog Responsive

Mungkin masih banyak Blogger yang belum tahu cara membuat halaman partner blog atau bahkan fungsinya sekalipun. Padahal, untuk ini bisa sangat bermanfaat bagi perkembangan blog apabila digunakan secara tepat.

Membuat halaman ini pun tergolong cukup mudah karena kita hanya membutuhkan halaman statis dan kode HTML serta CSS. Tidak perlu mengubah-ubah template blog yang membuat pusing dan rawan error.

Untuk kamu yang ingin tahu caranya, yuk simak dibagian selanjutnya dari artikel ini.

Daftar Isi

Manfaat Memiliki Halaman Partner Blog Cara Membuat Halaman Partner Blog Penutup

Manfaat Memiliki Halaman Partner Blog

Sedikit penjelasan untuk kamu yang belum tahu, apa yang akan ditampilkan pada halaman partner blog adalah tautan-tautan yang mengarah kepada blog yang menjadi 'rekan' kita.

 

Selain kamu bisa membangun relasi secara langsung dengan pemiliknya, disini kamu juga bisa membantu meningkatkan tingkat kepercayaan dari blog tersebut sehingga meningkat pula peluang blog tersebut bertengger di halaman pertama mesin pencari dengan memberikan backlink.

Lalu untungnya bagi kamu apa? Ya, kamu juga bisa minta timbal balik hal yang sama dari rekan mu itu.

 

Namun perlu dicatat bahwa kamu harus selektif dalam memilih partner karena cara ini bisa saja cenderung menghadirkan kerugian ketika digunakan secara tidak tepat. Hal yang harus kamu perhatikan dalam menentukkan partner antara lain,

• Spam Score
• Citation Flow dan Trust Flow
• Domain Authority
• dll.
  

Selain itu, memiliki partner blog juga dapat membuat mu saling mengunjungi atau yang dikenal juga sebagai blogwalking secara rutin. Ini bisa menjadi sarana untuk sharing pengetahuan serta mencari ide konten blog selanjutnya.

 

Baca Juga: Cara Membuat Halaman Kontak di Blogger

 

Cara Membuat Halaman Partner Blog

Sekarang mari kita masuk ke cara membuat halaman partner blog responsive. Kamu bisa mengikuti langkah-langkah berikut ini untuk membuatnya,

1. Buka dasbor Blogger
   
   
2. Pilih tab Halaman
   
   
3. Buat halaman baru
   
   
4. Pilih opsi menulis dengan HTML dan masukkan kode berikut ini,
   
   

   <div style="text-align: justify;"><style type="text/css">
   /* CSS Partner Blog */
   .partner-box{font-size:14px;line-height:1.5em;padding:15px 18px 20px;border-radius:12px;background-color:#fefefe;box-shadow:0 6px 18px 0 rgba(9,32,76,.035)}
   .partner-box:hover{background-color:#efefef;}
   .partner-box:not(:last-child){margin-bottom:15px}
   .partner-box .title-partner p{margin-top:0;font-size:20px;color:#FF1744}
   .partner-box .title-partner p:hover{color:#F4D03F}
   .partner-box li:not(:last-child){margin-bottom:10px}
   .partner-box li{display:flex;align-items:flex-start}
   .partner-box li a{display:inline-block;color:#161617}
   .partner-box.start .title-partner p{font-size:20px;margin-bottom:12px}
   .partner-box.start .description p{margin:0}
   .partner-box.start .description a{color:#505050}
   .partner-box.start .description a span{display:inline-block;color:#767676;font-size:10px}
   .partner-box.start .description a span:after{content:'\00b7';margin:0 8px 0 5px}
   .partner-box.start .category a{display:inline-block;color:#767676;font-size:12px;padding-top:20px}
   </style>
   
   <!--Partner Satu-->
   <div class="partner-box start">
     <a class="title-partner" href=https://www.gubukpintar.com" target="_blank" title="Gubuk Pintar">
       <p>Gubuk Pintar</p>
     </a>
     <div class="description">
       <a title="Nama Pemilik &amp; Deskripsi Blog Gubuk Pintar">
         <span>Erick </span>Blog yang membagikan solusi dan informasi seputar dunia teknologi informasi yang 
   meliputi Android, Tips Blogging, Game, Komputer, Media Sosial dan Internet.</a>
     </div>
     <div class="category">
     <a title="Topik Blog Gubuk Pintar"><b>Topik :</b> Teknologi</a>
     </div>
   </div>
   
   <!--Partner Dua-->
   <div class="partner-box start">
     <a class="title-partner" href=https://www.namablogmu.com" target="_blank" title="Nama Blog Mu">
       <p>Nama Blog Mu</p>
     </a>
     <div class="description">
       <a title="Nama Pemilik &amp; Deskripsi Blog">
         <span>Erick </span>Tuliskan deskripsi blog mu.</a>
     </div>
     <div class="category">
     <a title="Topik Blog"><b>Topik :</b> Tuliskan topik blog mu.</a>
     </div>
   </div>

   
   
5. Publikasikan halaman

Apabila kode telah terpasang dengan baik, maka selanjutnya kamu bisa menyesuaikannya dengan kebutuhan mu. Contoh dari penggunaan kode diatas dapat kamu lihat di halaman partner blogwalking Gubuk Pintar.

Demo

 

Penutup

Seperti itulah cara membuat halaman partner blog di Blogger yang responsive. Cara ini dipastikan tidak akan membuat loading blog mu menjadi lambat sehingga aman untuk digunakan. 

 

Selain itu, kamu kini juga sudah siap untuk memanfaatkannya dalam membangun relasi dengan Blogger lain dan berkembang bersama.

***

Apabila memiliki pertanyaan seputar artikel Cara Membuat Halaman Partner Blog Responsive di Blogger, silahkan tulis dikolom komentar ya.

Bila artikel ini bermanfaat, bantu Gubuk Pintar menyebarkan manfaatnya dengan membagikan artikel ini ke sosial media mu melalui tombol share di bawah ini. Terimakasih orang baik!

Baca juga: