Cara Membuat Halaman Partner Blog Keren Mirip IDNXMUS
Sebenarnya terkait halaman partner ini sudah banyak tersebar di google dengan tampilan yang hampir mirip juga dengan yang digunakan oleh "Abdul Mustajab Iman Sani" admin dari IDNXMUS. Akan tetapi dari beberapa tutorial tersebut tidak menyertakan gambar sehingga tidak 100% mirip misalnya saja blog ShowDzgn salah satu partner blog saya ini dia juga sudah membuat tutorial tersebut namun tidak ada tampilan logonya.
Adapun IDNXMUS sendiri sebenarnya juga sudah pernah share membuat halaman partner seperti miliknya namun khusus untuk blog AMP. Jika blog anda AMP and bisa berkunjung ke artikel beliau tentang "Cara Membuat Halaman Partner Blog Valid AMP". Terus apakah untuk blog Non AMP bisa menggunakan halaman partner seperti milik IDNXMUS?, Jawabannya adalah bisa.
Dari eksperimen saya beberapa waktu lalu saya sudah merombak kode CSS dan HTML yang sebelumnya valid AMP agar juga bisa digunakan untuk blog Non AMP. Baiklah, jika anda tertarik membuat halaman partner keren ini anda bisa mengikuti langkah - langkahnya berikut ini:
Baca juga: cara membuat halaman partner keren seperti blog mastamvan
Pertama, login blogger. Jika sudah login menuju menu template/ tema dan pilih edit HTML
Kedua, cari kode </head> setelah itu letakkan kode berikut ini tepat diatas kode tersebut
<style>
/*<![CDATA[*/
/*---- Blog Partner ----*/
span.logo-azidblogger{text-align:center;display:block}
span.logo-azidblogger img{border:5px solid #fff;border-radius:50%;background:#fff;max-width:300px}
ul.blog-partner{list-style:none;margin:0;padding:80px 0 0;position:relative}
span.logo-azidblogger:hover img{-webkit-animation: pulse 1.2s infinite;
box-shadow: 0 0 0 0 rgba(90,153,212,0.5);}
ul.blog-partner:before{content:"";position:absolute;top:0;left:50%;transform:translateX(-39%);background:#00626b;width:8px;height:8px;border-radius:50%}
ul.blog-partner:after{content:"";position:absolute;top:0;bottom:0;left:50%;background:#00626b;width:2px;z-index:1}
li.partner-wrap{background:#FFF;border:2px solid #00626b;border-radius:5px;margin-bottom:-10px;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 #00626b;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 img{border-radius:50%;z-index: 1;}
span.logo-partner{margin-right:20px;position:relative;font-size:12px;max-width:75px;z-index:1}
span.logo-partner:before,span.logo-partner:after{position:absolute;white-space:nowrap;left:10px;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:20px;transition: all .6s ease;z-index:-1}
span.logo-partner:after{content:attr(data-tooltip);background:#3498db;color:#fff;top:50px;transition: all 1.2s ease;z-index:-1}
li.partner-wrap:hover .deskripsi-partner .logo-partner:before, li.partner-wrap:hover .deskripsi-partner .logo-partner:after {opacity: 1;left:30px;padding-left:50px}
.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: #00626b;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 img {transform: rotate(360deg);transition: all .8s ease;}
span.logo-partner img, span.logo-azidblogger 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%;}
}
/*Spoiler*/
.spoiler{text-align:center;margin:-25px 0 0}
.spoiler input[type=checkbox]:checked~label:after,.spoiler input[type=checkbox]~label:after{content:"\02013";position:absolute;font-size:18px;line-height:20px;top:50%;margin-top:-10px;text-align:right;right:15px}
.spoiler input[type=checkbox]~label:after{content:"\0002B"}
.spoiler .spoiler_title{display:inline;float:left;margin:3px 10px 0 0;padding:4px 0;font-size:16px;line-height:1}
.spoiler label{cursor:pointer;background:#00626b;color:#fff;margin:0;padding:8px 40px 8px 15px;outline:none;border-radius:5px;-moz-border-radius:5px;transition:all .3s ease-in-out;display:inline;font-size:14px;font-family:arial,san-serif;line-height:1.5em;font-weight:bold;position:relative}
.spoiler input{position:absolute;left:-999em;opacity:0}
.spoiler .content_box{width:100%;border:1px solid #444;background:#fff;height:auto;padding:6px 10px;margin:8px 0 0;overflow:hidden;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;display:none}
.spoiler .content_box .content{display:none}
.spoiler .content p{padding:0;margin:0;}
.spoiler .content p img{margin:4px 0 0;max-width:100%;height:auto}
.spoiler input[type=checkbox]:checked~.content_box .content{display:block;-webkit-animation:slide-down .3s ease-out;-moz-animation:slide-down .3s ease-out}
.spoiler input[type=checkbox]:checked~.content_box{display:block;text-align:justify}
@-webkit-keyframes slide-down{0%{opacity:0;-webkit-transform:translateY(-100%)}
100%{opacity:1;-webkit-transform:translateY(0)}
}
@-moz-keyframes slide-down{0%{opacity:0;-moz-transform:translateY(-100%)}
100%{opacity:1;-moz-transform:translateY(0)}
}
/*]]>*/
</style>
Ketiga, Save Template. Sampai disini anda sudah selesai editing halaman partner.
"Kode CSS tersebut sudah saya sertakan dengan kode spoiler agar anda juga bisa menggunakan spoiler seperti yang saya gunakan"
Namun belum bisa menampilkannya, untuk menampilkannya anda bisa mengikuti cara berikut:
Keempat, Menuju menu page static/ laman statik dan buat postingan baru.
Kelima, jangan lupa anda tulis terlebih dahulu "judul" partner agar linknya tidak berantakan dan tidak menjadi SEO lagi. Jika sudah pilih mode HTML bukan Compose dan latakkan kode berikut didalamnya.
<span class="logo-azidblogger"> <img alt="Kolom Ilmu" class="logo-azidblogger" height="300" src="https://cdn.staticaly.com/img/lh3.googleusercontent.com/-kNh9gVGQWN0/W4Ss-VOsZHI/AAAAAAAAAvI/2R8apdbxn6AID5nhsPx1lNqIoQtm2pU9ACLcBGAs/s1600/logo%2Bpendidikan.png" title="Kolom Ilmu" width="300"/> </span> <br /> <div class="spoiler"> <input type="checkbox" id="item-1"> <label for="item-1">Manfaat menjadi partner</label> <div class="content_box"> <div class="content"> <p>Untuk mendongkrak nilai DA/PA dan alexa bagi saya link partner adalah salah satu langkah awal selain jasa backlink oleh karena itu menjadi partner blog sangat saya rekomendasikan bagi anda yang ingin bekerja sama dalam membangun backlink.</p><br /> <p>Akan tetapi perlu anda ketahui, janganlah anda terpaku seberapa banyak partner pada blog anda akan karena bisa jadi dapat menurunkan nilai blog yang anda bangun sejak lama. Mengapa demikian?, anda perlu tahu bahwa link partner yang baik menurut pengalaman saya dari apa yang pernah saya baca adalah niche dan peringkat blog baik itu DA/PA.</p><br /> <p>Bangunlah kerja sama blog/ atau partner blog sesama blog lain dengan niche yang sama serta paling tidak memiliki nilai DA/PA tidak terlalu kecil dari pada blog anda.</p><br /> <blockquote>Secara umum saya merekomendasikan anda membangun partner blog untuk meningkatkan kinerja blog anda, akan tetapi dibalik itu semua yang paling berharga adalah kerja sama untuk mencari teman sesama blogger dan berbagi pengalaman</blockquote><br /> </div></div></div> <br /> <div class="spoiler"> <input type="checkbox" id="item-2"> <label for="item-2">syarat menjadi partner</label> <div class="content_box"> <div class="content"> <ul> <li>Usia Blog minimal <b>6</b> bulan.</li> <li>Memiliki nilai Domain Authority (<b>DA</b>) minimal <b>9</b>. <a href="https://websiteseochecker.com/bulk-check-page-authority/" title="Cek DA/PA Blog" rel="nofollow noopener" target="_blank">Cek</a></li> <li>Melakukan update artikel minimal <b>sekali</b> sebulan.</li> <li>Memiliki minimal <b>50</b> artikel di dalam blog.</li> <li>Blog tidak menyalahi aturan google.</li> </ul> </div></div></div> <br/> <br/> <div class="spoiler"> <input type="checkbox" id="item-3"> <label for="item-3">Cara menjadi partner</label> <div class="content_box"> <div class="content"> <p>Jika syarat telah terpenuhi, silahkan kontak saya via email ke alamat <b>zainuriazid@gmail.com</b> atau Whatsapp <b>089677337414</b> dengan subjek "<b>Blog Partner</b>". Jangan lupa, di dalam isi email sertakan Nama Admin, Nice Blog, Deskripsi Blog, Url Logo Blog.</p> </div></div></div> <br/> <div id="blog-partner"> <!-- awal kode parnter--> <ul class="blog-partner"> <li class="partner-wrap" data-tooltip="www.domainanda.com"> <br /> <h3 class="title-partner"><a href="#" rel="noopener" target="_blank">NAMA BLOG ANDA</a></h3> <div class="deskripsi-partner"><span class="logo-partner" id="NAMA BLOG ANDA" data-tooltip="AUTHOR"> <br /> <img alt="LOGO BLOG ANDA" class="logo-partner" height="75" src="https://cdn.staticaly.com/img/2.bp.blogspot.com/-It-oVVf9Cf0/XAu5iwhK1AI/AAAAAAAAESs/iGoLAczKBFMTW1FozfyphUFeFZiaD7kQACPcBGAYYCw/s122/logo-part.png" title="LOGO BLOG ANDA" width="75"/> <br /> </span> <br /> <p>Deskripsi blog anda</p> </div> </li> </ul> <!-- akhir kode partner--> </div>
Keenam, Klik Publikasikan.
Sampai disini anda sudah dapat membuat blog partner.
"Kode HTML ini sudah saya sertakan spoiler dan kata-kata terkait partner blog. Anda bisa menggantinya sesuai dengan keinginan"
Adapun untuk menambahkan kode partner anda cukup copas kode berikut ini
<!-- awal kode parnter--> <ul class="blog-partner"> <li class="partner-wrap" data-tooltip="www.domainanda.com"> <br /> <h3 class="title-partner"><a href="#" rel="noopener" target="_blank">NAMA BLOG ANDA</a></h3> <div class="deskripsi-partner"><span class="logo-partner" id="NAMA BLOG ANDA" data-tooltip="AUTHOR"> <br /> <img alt="LOGO BLOG ANDA" class="logo-partner" height="75" src="https://cdn.staticaly.com/img/2.bp.blogspot.com/-It-oVVf9Cf0/XAu5iwhK1AI/AAAAAAAAESs/iGoLAczKBFMTW1FozfyphUFeFZiaD7kQACPcBGAYYCw/s122/logo-part.png" title="LOGO BLOG ANDA" width="75"/> <br /> </span> <br /> <p>Deskripsi blog anda</p> </div> </li> </ul> <!-- akhir kode partner-->
Demikianlah artikel saya terkait membuat halaman partner keren mirip IDNXMUS unatuk Non AMP. Semoga artikel atau tutorial ini bermanfaat. Amin.
PERHATIAN:Jika anda ingin bertanya atau bantuan bisa kontak kami
contact atau 089677337414 - Terima kasih.
contact atau 089677337414 - Terima kasih.