Cara Membuat Halaman Link Partner di Blogger

Membuat Halaman Link Partner Responsive di Blogger - Hai sahabat blogger jumpa lagi dengan saya, sesuai dengan judul diatas tutorial kali ini akan membahas bagaimana cara Membuat Halaman Link Partner Responsive di Blogger Ala Blog Mas Tamvan. Buat kalian yang belum tahu, apa sih link partner itu?. Link Partner pada halaman blog merupakan media untuk saling bertukar link blog satu dengan yang lain atau yang sering kita sebut Backlink.

Terus apa sih manfaat utama dari bertukar link, manfaat yang paling utama yaitu dapat meningkatkan SERP. Selain bisa meningkatkan SERP, bertukar link juga bisa dapat menambah visitor pada blog itu sendiri. Buat yang penasaran dengan tampilan dari Link Partner ini, Silahkan kalian lihat demo link partner berikut.

Live Demo

Bila kalian yang berminat bertukar link dengan blog ini, caranya cukup mudah dengan cara contact us pada bagian footer blog ini. Sepertinya penjelasan tentang Link Partner sudah cukup, sekarang langsung saja kita praktekan bagaimana membuat Link Partnernya.

Berikut Cara Membuat Halaman Link Partner :

1. Pastikan sobat sudah masuk ke akun blogger anda jika belum, Loginlah terlebih dahulu.

2. Klik Menu Halaman / Laman.

3. Buatlah Halaman/laman baru dan beri judul sesuai keinginan anda, contoh "Partner Link".

4. Setelah itu copy kode dibawah ini, dan paste di kolom postingan dalam mode HTML, jangan mode Compose.

<!--CSS LINK PARTNER MAS TAMVAN-->
<style type="text/css">@import url("https://fonts.googleapis.com/css?family=Roboto");#link-partner{font-family:'Roboto',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:"liga" 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:'Roboto',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:'';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:'';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:'Roboto',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:'Roboto',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:'';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:'';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:'';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}}#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>

<!--HTML LINK PARTNER MAS TAMVAN-->
<div id='link-partner'>
  <ul class="link-partner-blogger">
    <li class="box-partner">
      <h3 class="title-partner" ><a id='linkBlog' title='Blog Mas Tamvan' href="https://mastamvan.blogspot.com">Blog Mas dsTamvan</a></h3>
      <div class="mas-tamvan"></div>
      <div class="deskripsi-partner">Kumpulan Tutorial Singkat Tentang Blogger, Tools Online Dan Tips Trik Lainnya</div>
    </li>
    <li class="box-partner">
      <h3 class="title-partner"><a id='linkblog' title='Blog Mas Tamvan' href="https://kilas-android.blogspot.com">Kilas Android</a></h3>
      <div class="mas-tamvan"></div>
      <div class="deskripsi-partner">Blog yang membahas Tutorial, Blogging, dan Game</div>
    </li>
    <li class="box-partner">
      <h3 class="title-partner"><a id='linkblog' title='Blog Mas Tamvan' href="MASUKAN LINK PARTNER DISINI">TITLE PARTNER</a></h3>
      <div class="mas-tamvan"></div>
      <div class="deskripsi-partner">DESKRIPSI BLOG PARTNER</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>

5. Jika kalian akan menambahkan link partner baru, kalian cukup menambahkan kode ini, tepat di bawah kode</ul>

<li class="box-partner">
      <h3 class="title-partner"><a id='linkblog' title='Blog Mas Tamvan' href="Masukan Link Partner Disini">Title Partner</a></h3>
      <div class="mas-tamvan"></div>
      <div class="deskripsi-partner">Deskripsi Blog Partner</div>
    </li>

6. Setelah semuanya selesai, kalian bisa save dan lihat hasilnya.

Pada kode diatas, ada beberapa bagian yang harus kalian ubah sesuai dengan Blog Partner kalian, antara lain;

• "Masukan Link Partner Disini", ubah sesuai Link  blog Partnermu.
• "Tittle Partner", ubah sesuai judul blog Partnermu.
• "Deskripsi Blog Partner", ubah sesuai deskripsi dari blog partnermu.

Share this post