Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Halaman Link Partner Blogger Keren (Responsif)

Cara Membuat dan Memasang Halaman Link Partner di Blog


Partner secara harfiah adalah suatu bentuk dari sistem kerjasama yang dilakukan oleh dua orang atau lebih. Partner secara sederhana dapat diartikan sebagai teman kerja.

Biasanya partner baru akan tercipta ketika antara pihak satu dan pihak yang lain mencapai titik deal atau tujuan dari adanya kerjasama tersebut. Semua pihak yang terlibat dalam partner bertujuan demi mendapat sebuah keuntungan (feedback).

Partner tidak hanya berlaku di dunia nyata saja tetapi  juga berlaku dalam dunia Blogger. Sistem partner dalam dunia Blogger kurang lebih juga sama dengan partner yang ada pada dunia nyata.

Namun dalam konteks Blogging kita dapat mengartikan partner sebagai teman kerja yang membangun serta mempunyai tujuan yang sama antara dua pihak atau lebih.


Pemilihan patner blog yang tepat dapat memberikan dampak positif diantara keduanya. Salah satunya yang berkaitan dengan visitor. Misalnya blog A berpartner dengan blog B.

Baca Juga: Cara Membuat Tombol Berlangganan (Subscribe) Keren di Blogger

Lalu mungkin saja suatu saat nanti blog A mendapatkan kunjungan yang berlimpah maka blog A tersebut juga secara langsung akan merekomendasikan kepada visitor agar mereka juga mengunjungi partnernya yaitu blog B.

Kita bisa melihat diantara keduanya saling diuntungkan dari adanya sistem partner atau kerjasama tersebut. Keduanya sama-sama mendapatkan pengunjung (visitor) karena keduanya saling merekomendasikan situs satu sama lain.

Lebih dari itu dengan saling menautkan link antara blog kita dengan blog partner maka akan menciptakan suatu backlink yang akan berdampak positif pada perkembangan blog masing-masing.

Dengan membuat halaman partner di blog maka peluang blog untuk menjadi populer juga akan meningkat baik di mata mesin pencari maupun pengunjung. Maka tak heran beberapa situs besar yang populer dalam perjalanan karirnya selalu disupport oleh partnernya.

Cara Mudah Memasang Halaman  Link Partner di Blog

Tahap 1

1. Login ke akun Blogger masing-masing.

2. Buat satu halaman baru dengan  judul “partner”. Judul ini sifatnya kondisional dan terserah kalian saja untuk memebrikan nama.

3. Masuk ke mode HTML (bukan compose)

4. Lalu salin dan tempel kode di bawah ini. Ingat letakkan pada mode HTML (bukan compose)

<!--HTML LINK PARTNER MAS TAMVAN--> <!-- RISMAX.ID -->
<div id="link-partner">
<ul class="link-partner-blogger">
<li class="box-partner">       <h3 class="title-partner">
<a href="URL BLOG 1" id="linkblog" title="Judul Blog 1">Nama Blog 1</a></h3>
<div class="mas-tamvan">
</div>
<div class="deskripsi-partner">
Deskripsi Blog 1</div>    
</li>

<li class="box-partner">       <h3 class="title-partner">
<a href="URL Blog 2" id="linkblog" title="Judul Blog 2">Nama Blog 2</a></h3>
<div class="mas-tamvan">
</div>
<div class="deskripsi-partner">
Deskripsi Blog 2</div>
</li>
<li class="box-partner">       <h3 class="title-partner">
<a href="URL BLOG 3" id="linkblog" title="Judul Blog 3">Nama Blog 3</a></h3>
<div class="mas-tamvan">
</div>
<div class="deskripsi-partner">
Deskripsi Blog 3</div>
</li>
</ul>
</div>

<!--JS LINK PARTNER MAS TAMVAN--> 
<script type="text/javascript">
//<![CDATA[
function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js",document.body.appendChild(d)}function downloadJSAtOnload2(){var d=document.createElement("script");d.src="https://rawgit.com/mastamvan/backup/master/link-partner.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload,window.addEventListener?window.addEventListener("load",downloadJSAtOnload2,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload2):window.onload=downloadJSAtOnload2;
//]]>
</script>

Tahap 2

Selanjutnya tambahkan kode CSS berikut pada template yang kalian gunakan.

1. Login ke akun Blogger

2. Pergi ke bagian Tema atau Template

3. Kemudian klik Edit HTML

Tempel kode di bawah ini tepat di atas kode </head>

<style type='text/css'>@import url(&quot;https://fonts.googleapis.com/css?family=Roboto&quot;);#link-partner{font-family:&#39;Roboto&#39;,sans-serif!important;letter-spacing:0;font-weight:400;font-style:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:&quot;liga&quot; on;color:#686868;font-size:15px;line-height:1.4;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;box-sizing:border-box;min-height:100%}#link-partner *,#link-partner *:before,#link-partner *:after{box-sizing:inherit}#link-partner .link-partner-blogger{font-family:&#39;Roboto&#39;,sans-serif!important;padding:16px 0;margin:0;list-style:none;position:relative}@media (max-width:767px){#link-partner .link-partner-blogger{padding:32px 0}}#link-partner .link-partner-blogger:before{content:&#39;&#39;;position:absolute;top:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:#0177FA;width:8px;height:8px;border-radius:50%}#link-partner .link-partner-blogger:after{content:&#39;&#39;;position:absolute;top:0;bottom:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:#0177FA;width:2px}#link-partner .link-partner-blogger .box-partner{position:relative;padding:32px 0;z-index:2;visibility:hidden}@media (max-width:767px){#link-partner .link-partner-blogger .box-partner{font-family:&#39;Roboto&#39;,sans-serif!important;text-align:center;background:#fff;border-radius:3px;padding:16px;border:2px solid #0177FA}#link-partner .link-partner-blogger .box-partner:first-child{margin-top:16px}#link-partner .link-partner-blogger .box-partner + *{margin-top:32px}}@media (min-width:768px){#link-partner .link-partner-blogger .box-partner{font-family:&#39;Roboto&#39;,sans-serif!important;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}#link-partner .link-partner-blogger .box-partner:before{opacity:0!importantant}}#link-partner .link-partner-blogger .box-partner:hover #link-partner .link-partner-blogger .box-partner .mas-tamvan:before{background:#0177FA}#link-partner .link-partner-blogger .box-partner:last-child:after{content:&#39;&#39;;position:absolute;bottom:-16px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:#0177FA;width:8px;height:8px;border-radius:50%;visibility:visible}@media (max-width:767px){#link-partner .link-partner-blogger .box-partner:last-child:after{bottom:-40px}}#link-partner .link-partner-blogger .box-partner a{color:#686868;text-decoration:none}#link-partner .link-partner-blogger .box-partner .mas-tamvan{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #0177FA;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;position:relative;z-index:1}#link-partner .link-partner-blogger .box-partner .mas-tamvan:before{content:&#39;&#39;;position:absolute;top:0;right:0;bottom:0;left:0;background:#fff;border-radius:50%;-webkit-transition:background 0.3s cubic-bezier(0.175,0.885,0.32,1.275);transition:background 0.3s cubic-bezier(0.175,0.885,0.32,1.275);z-index:1}@media (min-width:768px){#link-partner .link-partner-blogger .box-partner .mas-tamvan:after{content:&#39;&#39;;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:32px;height:2px;background:rgba(1,119,250,0.25);z-index:-1}}@media (max-width:767px){#link-partner .link-partner-blogger .box-partner .mas-tamvan{position:absolute;top:0;left: 50% !important;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}}#link-partner .link-partner-blogger .box-partner .title-partner{margin:0}@media (min-width:768px){#link-partner .link-partner-blogger .box-partner .title-partner{margin:0 32px 0 0;text-align:right;width:400px}}@media (min-width:768px){#link-partner .link-partner-blogger .box-partner .deskripsi-partner{color:#a8a8a8;margin:0 0 0 32px;width:400px;font-family:&#39;Raleway&#39;, Arial, sans-serif;}}#link-partner .link-partner-blogger .box-partner:hover .mas-tamvan:before{-webkit-animation:pulse 1.5s infinite;box-shadow:0 0 0 0 rgba(90,153,212,0.5)}@-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)}}</style>

4. Terakhir Simpan Tema

Catatan: Ubah semua url blog, judul blog, nama blog, deskripsi blog sesuai dengan nama blog partner kalian ya!

Sekian tutorial singkat tentang cara membuat dan memasang halaman link partner di blog. Semoga bermanfaat dan jangan lupa share informasi ini pada yang lain. Terimakasih.