Cara membuat halaman partner keren seperti di blog saya
pada kesempatan kali ini saya akan share terkait halaman partner. Halaman partner disini saya share tidak lain bagi anda yang ingin tampilannya keren seperti pada halaman partner blog saya. Sebenarnya terkait halaman partner ini sudah banyak tersebar di google dengan tampilan yang hampir mirip juga dengan yang saya digunakan, Akan tetapi dari beberapa tutorial tersebut tidak menyertakan gambar sehingga tidak 100% mirip.
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:
Pertama, login blogger. Jika sudah login menuju menu template/ tema dan pilih edit HTML
Kedua, cari kode </head> setelah itu letakan kode berikut ini tepat diatas kode tersebut
/*<![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:"2013";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:"002B"}
.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. 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.
<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.
Untuk menambahkan kode partner anda cukup copas kode berikut ini
Demikianlah artikel saya terkait membuat halaman partner keren seperti di blog saya untuk Non AMP. Semoga artikel atau tutorial ini bermanfaat.
Keren...
ReplyDeleteJadi pingin coba