Tutorial Membuat Halaman Link Blog Partner

Tutorial Membuat Halaman Link Blog Partner
Hasil gambar untuk cara membuat halaman partner blog
Apa sih tujuannya buat halaman Partner ?
Menurut saya itu penting, selain buat gaya gaya-an, kalian juga bisa saling tukar link, jadi bisa dapat backlink gratis.
Baik, langsung saja menuju topiknya.

Cara Membuat Halaman Partner Blog Valid AMP

Untuk membuat halaman partner untuk blog AMP kalian hanya membutuhkan HTML dan CSS, untuk itu, yang pertama yang harus kalian lakukan adalah masuk ke Dashboard Blog » Edit HTML.
Selanjutnya tambahkan kode CSS berikut ini tepat di bawah code <style amp-custom>.
/*---- Blog Partner ----*/ 
span.logo-idnxmus{text-align:center;display:block} 
span.logo-idnxmus amp-img{border:5px solid #413965;border-radius:50%;background:#413965} 
span.logo-idnxmus amp-img img{border-radius:50%} 
ul.blog-partner{list-style:none;margin:0;padding:80px 0 0;position:relative} 
ul.blog-partner:before{content:"";position:absolute;top:0;left:50%;transform:translateX(-39%);background:#0177FA;width:8px;height:8px;border-radius:50%} 
ul.blog-partner:after{content:"";position:absolute;top:0;bottom:0;left:50%;background:#0177FA;width:2px;z-index:1} 
li.partner-wrap{background:#FFF;border:2px solid #0177FA;border-radius:5px;margin-bottom:50px;padding:20px;position: relative;z-index:2} 
li.partner-wrap:before{content:"";position:absolute;width:16px;height:16px;left:50%;transform:translateX(-45%);top:-11px;background:#FFF;border:2px solid #0177FA;border-radius:50%} 
h3.title-partner{border-bottom:2px solid #aaa;text-align:center;padding-bottom:10px;margin-bottom:20px} 
h3.title-partner a {text-decoration: none;} 
span.logo-partner amp-img{border:5px solid #0177FA;border-radius:50%;background:#0177FA;z-index: 1;} 
span.logo-partner amp-img img{border-radius:50%} 
span.logo-partner{margin-right:20px;position:relative;font-size:12px} 
span.logo-partner:before,span.logo-partner:after{position:absolute;white-space:nowrap;left:60px;border-radius:0 5px 5px 0;padding:4px 10px 4px 20px;opacity:0;} 
span.logo-partner:before{content:attr(id);background:#21ef8b;color:#242038;top:15px;transition: all .6s ease;} 
span.logo-partner:after{content:attr(data-tooltip);background:#3498db;color:#fff;top:45px;transition: all 1.2s ease;} 
li.partner-wrap:hover .deskripsi-partner .logo-partner:before, li.partner-wrap:hover .deskripsi-partner .logo-partner:after {opacity: 1;left: 70px;} 
.deskripsi-partner{display:flex;margin-bottom: 25px;align-items: center;} 
.deskripsi-partner p{display:block;margin:0;text-align: justify;color: #212121;} 
li.partner-wrap:after{content:attr(data-tooltip);position:absolute;right:-1px;bottom:0;background: #0177FA;color: #FFF;padding: 0 10px;border-radius: 5px 0 0 0;font-size: 14px;} 
li.partner-wrap:hover::before {-webkit-animation: pulse 1.2s infinite;box-shadow: 0 0 0 0 rgba(90,153,212,0.5);left: 48.92%;} 
li.partner-wrap:hover .deskripsi-partner .logo-partner amp-img {transform: rotate(360deg);transition: all .8s ease;} 
span.logo-partner amp-img, span.logo-idnxmus amp-img {box-shadow:0 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0 rgba(0,0,0,0.14),0px 1px 10px 0 rgba(0,0,0,0.12);} 
@-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)}} 

@media screen and (max-width: 530px){ 
li.partner-wrap:hover::before {left: 47.4%;} 
.deskripsi-partner {display: block;} 
span.logo-partner {margin:0 auto;display: table;} 
li.partner-wrap:hover .deskripsi-partner .logo-partner:before, li.partner-wrap:hover .deskripsi-partner .logo-partner:after {left: 80%;} 
span.logo-partner:before, span.logo-partner:after {left: 60%;} 
}
Setelah itu klik simpan, untuk menyimpan perubahan.
Di lanjutkan, buatlah sebuah halaman baru dengan cara klik Halaman » Buat Halaman. Silahkan beri judul untuk halaman Partner kalian.
Oh iya, pada edit halaman ini, pilih mode HTML yah, bukan mode Compose.
Kemudian masukkan kode HTML berikut ini.
<span class="logo-idnxmus"> 
<amp-img alt="Nama Logo Blogmu" height="75" src="https://2.bp.blogspot.com/-fsWGnHF-HCw/XAu871EJmTI/AAAAAAAAES0/4fDhvQi7A6Afli3rY65zR0IM8A_ztxpPACLcBGAs/s1600/partner-idnxmus.png" title="Nama Logo Blogmu" width="75"></amp-img> 
</span> 

<div id="blog-partner"> 
<ul class="blog-partner"> 

<li class="partner-wrap" data-tooltip="www.blogpartnermu.com"> 
<h3 class="title-partner"><a href="https://www.blogpartnermu.com" title="Nama Blog Partnermu" rel="nofollow noopener" target="_blank">NAMA BLOG PARTNERMU</a></h3> 
<div class="deskripsi-partner"> 
<span class="logo-partner" id="Niche Blog Partnermu" data-tooltip="Nama Pemilik Blog Partner"> 
<amp-img alt="Nama Logo Partner" height="75" src="https://2.bp.blogspot.com/-It-oVVf9Cf0/XAu5iwhK1AI/AAAAAAAAESs/iGoLAczKBFMTW1FozfyphUFeFZiaD7kQACPcBGAYYCw/s1600/logo-part.png" title="Nama Logo Partner" width="75"></amp-img> 
</span> 
<p> 
Deskripsi Blog Partnermu 
</p> 
</div> 
</li> 

</ul> 
</div>
Pada HTML Code di atas, dapat di lihat ada beberapa yang saya berikan tanda highlight warna kuning, untuk menandakan code yang harus kalian sesuaikan atau ubah.
Silahkan ubah yang saya beri tanda sesuai keterangan yang tertera.
Untuk menambahkan Partner baru cukup menambahkan HTML Code berikut di atas tag </ul>
<li class="partner-wrap" data-tooltip="www.blogpartnermu.com"> 
<h3 class="title-partner"><a href="https://www.blogpartnermu.com" title="Nama Blog Partnermu" rel="nofollow noopener" target="_blank">NAMA BLOG PARTNERMU</a></h3> 
<div class="deskripsi-partner"> 
<span class="logo-partner" id="Niche Blog Partnermu" data-tooltip="Nama Pemilik Blog Partner"> 
<amp-img alt="Nama Logo Partner" height="75" src="https://2.bp.blogspot.com/-It-oVVf9Cf0/XAu5iwhK1AI/AAAAAAAAESs/iGoLAczKBFMTW1FozfyphUFeFZiaD7kQACPcBGAYYCw/s1600/logo-part.png" title="Nama Logo Partner" width="75"></amp-img> 
</span> 
<p> 
Deskripsi Blog Partnermu 
</p> 
</div> 
</li>
Silahkan ubah lagi yang saya beri tanda sesuai keterangan yang tertera.
Masih bingung ?
Tinggalkan komentar kalian di bawah, sebisa mungkin akan saya bantu untuk menjelaskan hal yang belum kalian mengerti.
TIPS DAN TRIK

NULIS ARTIKEL DIJOKIJENIUS DIBAYAR

  • ARTKEL YANG DITULIS ASLI BUATAN SENDIRI
  • JENIS ARTIKEL YANG DITULIS BELUM PASARAN
  • JUMLAH KATA DALAM ARTIKEL MINIMAL 700 KATA
  • SATU ARTIKEL KAMI HARGAI 10.000

1 Response to "Tutorial Membuat Halaman Link Blog Partner"

  1. ini contohnya seperti apak kak?? bisa di kasih demonya??

    ReplyDelete
Catatan Untuk Para Jejaker
  • Mohon Tinggalkan jejak sesuai dengan judul artikel.
  • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
  • Dilarang mencantumkan link aktif di komentar.
  • Komentar dengan link aktif akan otomatis dihapus
  • *Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel