Cara Membuat Halaman Tukar Link Partner Keren di Blog

Cara Membuat Halaman Tukar Link Partner Keren di Blog

Cara Membuat Halaman Tukar Link Partner Keren di Blog - Kali ini Bang Tutorial akan membagikan cara membuat laman tukar link atau yang biasanya di sebut link partner di blogger. Untuk tampilan halaman tukar link ini sangat responsive, mobile friendly, dan tepatnya, sangat keren. Di halaman link partner ini juga terdapat animasi pointer yang terjadi jika kursor menyentuh kotak tukar link ini.

Untuk melihat demo halaman tukar link partner ini silahkan cek punya Bang Tutorial sendiri, sekalian kalian semua bisa join di halaman partner saya, cek di Link Partner Bang Tutorial

Gimana ?? Keren bukan, langsung saja kita bikin Cara Membuat Halaman Link Partner di Blogger.

1. Pertama, Buka dashboard blogger sobat, lalu klik laman, dan buat laman baru.

Laman Link Partner

2. Selanjutnya klik bagian HTML, ( Bukan Compose ). buat judul laman terlebih dahulu agar linknya menjadi lebih bagus nantinya.

HTML link partner

3. Setelah itu, Copy Script Tukar Link Partner ini, dan pastekan di laman HTML tadi


<!--CSS LINK PARTNER BANG TUTORIAL-->
<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 BANG TUTORIAL-->
<div id="link-partner">
<ul class="link-partner-blogger">
<li class="box-partner">
<h3 class="title-partner">
<a href="http://www.bangtutorial.xyz/" id="linkblog" title="Blog Bang Tutorial">Bang Tutorial</a></h3>
<div class="mas-tamvan">
</div>
<div class="deskripsi-partner">
Kumpulan Tutorial Blogging, Meretas,
Phising, Dan Trick Lainnya</div>
</li>
<li class="box-partner">
<h3 class="title-partner">
<a href="Link Partner" id="linkBlog" target="_blank" title="Title Partner">Judul Partner</a></h3>
<div class="mas-tamvan">
</div>
<div class="deskripsi-partner">
Deskripsi Partner Mu</div>
</li>
</ul>
</div>

  <!--JS LINK PARTNER BANG TUTORIAL-->
<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>

Sesuaikan kode tersebut dengan blog milik sobat.

Setelah selesai membuat laman link partner tersebut silahkan klik publikasikan, dan jika ingin menambah partner masukan kode diatas.

Cukup sekian tutorial cara membuat halaman tukar link keren di blogger semoga bermanfaat bagi sobat semuanya, dan silahkan lihat tutorial tutorial lengkap lainnya di www.bangtutorial.xyz :)

Perhatian: Iklan Yang Tayang Di Situs Kami Sepenuhnya Diatur Oleh Pihak Google. Jadi Jika Ada Iklan Yang Menyinggung, Kalian Bisa Hubungi Admin Lewat formulir kontak situs ini untuk selanjutnya akan kami sampaikan ke pihak Google.
Buka Komentar

0 Response to "Cara Membuat Halaman Tukar Link Partner Keren di Blog"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Jasa Pembelajaran Top Up Diamond Mobile Legends Ilegal Murah
close