Google Search

Cara Membuat Link Partner di Halaman Statis Keren Responsive


Cara Membuat Link Partner di Halaman Statis Keren Responsive
Cara Membuat Link Partner di Halaman Statis Keren Responsive


Berikut ini adalah Cara Membuat Link Partner di Halaman Statis Keren Responsive , yang saya kutip dari Blog Mas Tamvan. Sesuai dengan Permintaan sobat RISMAX, untuk membuat tutorial bagaimana Cara Membuat Link Partner di Halaman Statis , berikut ini adalah bahasannya :

1. Login ke Akun Blogger
2. Buat Sebuah Halaman Statis ( Bukan Postingan )
3. Buat Judul Halaman , misalnya " Partner " , " Link Partner ", " Daftar Partner ", dan sebagainya. Atur sesuai selera masing-masing.
4. Pada Halaman , Mulai Edit Tulisan di Tab " HTML" , bukan di " COMPOSE "
5. Salin Kode Berikut, dan letakkan di HTML Halaman Statis Sobat.

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

6. Kemudian Sisipkan Kode CSS berikut ini di template sobat.

  1. Login Ke akun Blogger
  2. Klik Tema atau Template
  3. Kemudian Klik Edit HTML 
  4. Cari kode </head>
  5. Tempelkan kode Berikut 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>


7. Kemudian Simpan Tema.


Perhatikan, Ubah Semua Tulisan pada kode no 5, yang berupa URL Blog 1, Judul Blog 1, Nama Blog 1, Deskripsi Blog 1, dan ada kode yang seperti ini 3 di dalam Script tersebut.
URL Blog 2, URL Blog 3, dan sebagainya. Ubah sesuai Selera sobat. Ubah nama Blog dengan Nama Partner yang akan di tampilkan.





Catatan :
  • Nama Penulis : Paris P. Sitanggang
  • Tanggal Di Posting : Rabu, 06 November 2019
  • Referensi : //https://mastamvan.blogspot.com/
  • Gambar : //www.rismax.id

Kategori :
TUTORIAL BLOG

1 Response to "Cara Membuat Link Partner di Halaman Statis Keren Responsive"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel