Skip to main content
MANGAIP BLOG

follow us

Cara Membuat Halaman Partner Blog Responsive



Mangaip, memiliki partner adalah suatu keuntungan bagi kedua belah pihak. Selain menjaga silaturahmi, bisa juga mendapatkan teman atau rekan yang baru. Maka dengan membuat halaman partner blog diharapkan visitor dan kualitas blog semakin meningkat.

Halaman partner blog ini merupakan salah satu cara untuk saling tukar link, atau bisa dikatakan juga dengan Backlink. Dengan bertukar link, kualitas konten semakin naik seperti nilai DA (Domain Authority) dan PA (Page Authority) suatu blog.

Lalu bagaimana cara membuat halaman partner di blog yang responsive? Silahkan bagi sobat yang berminat untuk memasangnya pada blog, terapkan langkah-langkah dibawah ini.

MEMBUAT HALAMAN PARTNER BLOG RESPONSIVE

1. Silahkan masuk pada akun Blogger kalian. Kemudian masuk ke Tema dan Edit HTML
2. Letakan kode dibawah ini tepat sebelum kode ]]></b:skin> atau </style>

<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:50%}#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>
3. Cari kode </body> lalu letakan kembali kode ini tepat sebelumnya

<!--JS LINK PARTNER-->
<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>
4. Simpan Tema
5. Kemudian pilih menu Halaman terus pilih Halaman Baru terus masuk Mode HTML pastekan kode dibawah ini.

<!--HTML LINK PARTNER--> 
<br />
<div id="link-partner">
<ul class="link-partner-blogger">
<li class="box-partner">
<h3 class="title-partner">
<a href="https://inwepo.co/" id="linkblog" title="Inwepo">Inwepo</a></h3>
<div class="mas-tamvan">
</div>
<div class="deskripsi-partner">
Tempat Belajar dan berbagi Tutorial </div>
</li>
<li class="box-partner">
<h3 class="title-partner">
<a href="URL Blog Partner" id="linkblog" title="Title blog">Nama Blog</a></h3>
<div class="mas-tamvan">
</div>
<div class="deskripsi-partner">
Diskripsi blog partner kamu disini</div>
</li>
</ul>
</div>
6. Silahkan ganti URL dan Deskripsinya dengan partner kamu. Kemudian Publish
7. Apabila kamu ingin menambahkan partner, cukup menambahkan kode dibawah ini tepat diatas kode </li>

<li class="box-partner">
<h3 class="title-partner">
<a href="URL Blog Partner" id="linkblog" title="Title blog">Nama Blog</a></h3>
<div class="mas-tamvan">
</div>
<div class="deskripsi-partner">
Diskripsi blog partner kamu disini</div>
</li>
8. Selesai

Itulah tutorial Cara Membuat Halaman Partner Blog Responsive. Semoga bermanfaat dan selamat mencoba.

You Might Also Like:

Comment Policy: Mohon untuk menuliskan komentar Anda yang sesuai dengan topik postingan artikel ini. Apabila terdapat tautan, tidak akan ditampilkan sebelum disetujui.
Buka Komentar