Cara Membuat Halaman Partner Link Responsive di Halaman Statis Blogger

Pada kesempatan kali ini saya akan memberikan tutorial bagaimana cara membuat halaman partner link di halaman blog, Tujuan dari halaman ini adalah menjalin kerja sama antar blogger dan membuat blog kita menjadi profesional , Jadi dengan kita membuat suatu halaman partner kepada sesama blogger tentu saja kita akan kedatangan visitor ke blog kita. Terutama, jika kita mempunyai suatu partner dengan blog yang visitornya lumayan sangat banyak maka secara tidak langsung nantinya visitor blog kita akan ikut berlimpah juga, Nah itulah kelebihan dari partner tersebut.


Selain itu, Fungsi dari partner link ini yakni untuk mempererat suatu tali persaudaraan dan persahabatan antar sesama blogger. tentu hal yang akan kita dapatkan adalah akan meningkatnya jumlah pengunjung yang berdatangan ke blog kita, dan blog kita akan terkesan profesional sebagaimana mestinya.

Contoh tampilan dalam halaman partner link ini sangat elegan dan pastinya responsive untuk semua jenis Niche dan jenis template.


Cara Membuat Halaman Partner Link Respons

1. Silahkan masuk ke dashboard blogger dengan login menggunakan akun Gmail kamu.



2. Masuk kemenu Halaman dan Buat Halaman Baru.
3. Selanjutnya silahkan pilih menu HTML ( bukan Compose )
4. Silahkan copy kode Script dibawah ini pastekan dihalaman HTML tadi, Bukan Compose.


<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>

<!--HTML LINK PARTNER-->
<br />
<div id="link-partner">
<ul class="link-partner-blogger">
<li class="box-partner">
<h3 class="title-partner">
<a href="https://www.showdzgn.com/" id="linkblog" title="Showdzgn">Show Design</a></h3>
<div class="mas-tamvan">
</div>
<div class="deskripsi-partner">
Show Design Tempatnya Berbagi Template dan Tutorial Blogger, SEO, Responsive, Gallery, jQuery, CSS, HTML, JavaScript, Widget, ...</div>
</li>
<li class="box-partner">
<h3 class="title-partner">
<a href="URL Blog" id="linkblog" title="Title blog">Nama Blog</a></h3>
<div class="mas-tamvan">
</div>
<div class="deskripsi-partner">
Diskripsi blog kamu disini</div>
</li>
</ul>
</div>
<!--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>

5. Setelah itu klick SIMPAN dan Selesai.

NB : Buat kamu pengunjung setia Show Design yang mau ikut partner dangan saya silahkan contact DISINI.

Apabila kamu ingin menambahkan yang baru silahkan copy kode berikut ini dan letakkan tepat diatas kode akhir </li>

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

Nah, begitu cara membuat halaman partner link apabila kamu memiliki kendala / error Koment di kolom komentar, atas perhatiannya kami ucapkan terima kasih. 
Tampilkan Komentar
Sembunyikan Komentar

0 Response to "Cara Membuat Halaman Partner Link Responsive di Halaman Statis Blogger"

Post a Comment

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar semua.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel