Hello sobat IcloudZer bagaimana dengan keadaan kamu sekarang ini, baik baik saja atau....ya mudah mudahan selalu dalma kondisi yang baik baik saja
Okay baiklah kali ini admin bakalan membuat sebuah artikel mengenai bagaiamana caranya membuat halaman partner dan sebenarnya apa itu halaman partner
Info: Oke bagi kamu yang sudah penasaran yuk langsung aja kita bahas bersama sama okay
Halaman Partner
Bang abang ganteng! Sebenarnya nih halaman partner itu apa sih? Oke neng biar a'a jelasin ya halaman partner adalah suatu halaman statis diblog yang berisikan atau menginformasikan informasi blog ataupun website lainnya didalam blog utama
Info: Partner kan didalam bahasa Indonesia nya berarti rekan, ya bisa dibilang rekan blog, benar kan, periksa aja dikamus, kalau salah, salahin kamusnya okay 🤨
Halaman Statis
Halaman partner biasa ditampilkan didalam halaman statis blog, dimana letak halaman statis blog di blogger? Halaman statis blog berada pada menu Halaman di blogger dan berbeda pada halaman postingan blog
Sebagi informasi: Sebenarnya Widget partner ini bisa kamu tampilkan didalam artikel atau postingan blog, termasuk sidebar blog, footer, dan sebagainya
Cara Pembuatan
Baiklah tanpa berlama-lama lagi admin bakalan menjabarkan mengenai Cara pembuatan halaman partner di blogger, okay
Kode CSS
Langkah pertama yang bisa kamu lakukan adalah menyalin kode CSS dibawah ini, kemudian tempelkan diatas kode ]]></b:skin>
/* Partner Page ~ by Icloudice.com */
ul.rah-partner{list-style:none;margin:0;padding:80px 0 0;position:relative}
ul.rah-partner:before{content:"";position:absolute;top:0;left:50%;transform:translateX(-39%);background:#f80000;width:8px;height:8px;border-radius:50%}
ul.rah-partner:after{content:"";position:absolute;top:0;bottom:0;left:50%;background:#f80000;width:2px;z-index:1}
li.rah-partner-wrap{background:#fefefe;border:5px solid #f80000;border-radius:5px;margin-bottom:50px;padding:20px;position: relative;z-index:2}
li.rah-partner-wrap:before{content:"";position:absolute;width:16px;height:16px;left:50%;transform:translateX(-45%);top:-11px;background:#fefefe;border:2px solid #f80000;border-radius:50%}
h3.title-rah-partner{border-bottom:2px solid #aaa;text-align:center;padding-bottom:10px;margin-bottom:20px}
h3.title-rah-partner a {text-decoration: none;}
li.rah-partner-wrap:hover .deskripsi-rah-partner .logo-rah-partner:before, li.partner-rah-wrap:hover .deskripsi-rah-partner {opacity: 1;left: 70px;}
.deskripsi-rah-partner{display:flex;margin-bottom: 25px;align-items: center;}
.deskripsi-rah-partner p{display:block;margin:0;text-align: justify;color: #212121;}
li.rah-partner-wrap:after{content:attr(data-tooltip);position:absolute;right:-1px;bottom:0;background: #f80000;color: #fefefe;padding: 0 10px;border-radius: 5px 0 0 0;font-size: 14px;}
li.rah-partner-wrap:hover::before {-webkit-animation: rah-geser 1.2s infinite;box-shadow: 0 0 0 0 rgba(90,153,212,0.5);left: 48.92%;}
li.rah-partner-wrap:hover .deskripsi-rah-partner@-webkit-keyframes rah-geser{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)}}Info: Kamu bisa menggunakan Tag <style>
Kode HTML
Langkah selanjutnya yang bisa kamu lakukan adalah menyalin kode HTML berikut ini, kemudian kamu bisa meletakkannya didalam menu Halaman
<div id="rah-partner">
<ul class="rah-partner">
<li class="rah-partner-wrap" data-tooltip="iCloudice.com">
<!-- your url and title blog-->
<h3 class="title-rah-partner">
<a href="https://icloudice.com">Icloudice.com</a></h3>
<!-- your url and title blog and -->
<!-- your description here -->
<div class="deskripsi-rah-partner">
<br />
<center>Deskripsi dari halaman partner anda disini, bla bla bla dan seterusnya</center>
</div>
<!-- your description and -->
</li>
<li class="rah-partner-wrap" data-tooltip="icloudive.com">
<!-- your url and title blog-->
<h3 class="title-rah-partner">
<a href="http://icloudice.com" rel="nofollow noopener">Icloudice.com</a></h3>
<!-- your url and title blog and -->
<!-- your description here -->
<div class="deskripsi-rah-partner">
<br />
<center>Deskripsi dari halaman partner anda disini, bla bla bla dan seterusnya</center>
</div>
<!-- Your description and -->
</li>
<! -- Tempelkan disini apabila anda ingin menambahkan partner -->
</ul>
</div>Info: Atau kamu bisa menggunakan mode Add Widget pada menu layout
Penjelasan Kode
Jika sekiranya kamu ingin menambahkan Partner baru, kamu bisa menggunakan kode seperti contoh dibawah ini
<li class="rah-partner-wrap" data-tooltip="icloudive.com">
<!-- your url and title blog-->
<h3 class="title-rah-partner">
<a href="http://icloudice.com" rel="nofollow noopener">Icloudice.com</a></h3>
<!-- your url and title blog and -->
<!-- your description here -->
<div class="deskripsi-rah-partner">
<br />
<center>Deskripsi dari halaman partner anda disini, bla bla bla dan seterusnya</center>
</div>
<!-- Your description and -->
</li>Info: Letakkan kode diatas sebelum tag <ul>
Contoh Tampilan
Sebagai pelengkapnya saya akan memberikan contoh tampilan dari halaman partnernya, berikut ini adalah contoh tampilannya
-
Icloudice.com
Deskripsi dari halaman partner anda disini, bla bla bla dan seterusnya -
Icloudice.com
Deskripsi dari halaman partner anda disini, bla bla bla dan seterusnya
Info: Bagaiamana sobat IcloudZer dengan tampilannya keren bukan 😁, menurut ane sih biasanya aja karena ane yang infokan, tetapi entah dengan kamu bagaimana kamu menilainya
Kesimpulan
Nah sobat jadi halaman partner tersebut bisa kamu gunakan sesuai keperluan kamu aja, jika kamunya kreatif meskipun kamu tidak membutuhkan halaman partner karena memang rekan kerja nge-blog nya tidak ada, kamu bisa loh mengkreasikan code dari halaman partner ini untuk membuat tampilan tampilan keren lainnya yang membuat blog kamu semakin menarik tentunya
Info: Jika kamunya masih bingung aja nih dengan pembahasan kita kali ini, silahkan berkomentar, saya dengan senang hati akan membalas komentar anda tersebut, jika malah nggak tau cara berkomentar, saya sudah memberikan tips dan cara berkomentar yang baik dan benar pada artikel saya yang lain okay, kamu bisa mempelajari cara berkomentar, salam perkodean