Codepelajar – merupakan widget yang menunjukkan kelebihan dan kekurangan aplikasi dengan pemberian CSS yang baik, widget ini dapat disajikan dalam blog yang mengusung artikel tentang sebuah aplikasi atau software yang ingin diunduh oleh para pengunjung.
Widget ini sangat ringan dan dapat dijejerkan dengan postingan, yang memvuat widget ini menarik adalah sangat responsiv bagi perangkat manapun dan tentu tidak merukan bagian artikelnya.
Cara Membuat Widget Deskripsi Aplikasi
Silahkan buka blogspot > themes > edit html copy css di bawah ini dan paste di atas kode ]]></b:skin> atau di atas </style>
/* widget deskripsi aplikasi by codepelajar*/
.wc-app-wrap{position:relative;color:#48525c;background-color:transparent;font-size:14px;}
.wc-app-wrap img{width:100px;border-radius:10px;background-color:#fefefe;box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%);padding:10px;border:1px solid #eceff1}
.wc-apknm{position:absolute;top:5px;left:120px;font-size:24px;font-weight:bold}
.wc-apkvs,.wc-apkpb{position:absolute;left:120px;top:40px}.wc-apkpb{top:70px}
.wc-apkvb,.wcapkdtl,.wc-apkvl{margin-top:20px;font-size:17px;font-weight:bold;border-bottom:1px solid #eceff1;padding-bottom:10px}.wc-apkvl{border:0}
.wcapkdtl{font-size:14px;font-weight:normal}.wcapkdtl b{margin-right:50px}
.wc-apk-btn{position:relative;display:flex;justify-content:center;align-items:center;text-align:center;margin:30px auto;padding:10px 25px;border-radius:30px;line-height:20px;color:#fefefe;background-color:#f89000;font-size:14px;font-weight:bold;width:calc(100% - 40px)}.wc-apk-btn:hover{opacity:.8}
ul.wc-appv-str{list-style:none;margin:15px 0 5px -40px}
ul.wc-appv-str li{width:50%;float:left;padding-left:5px;padding-right:5px;margin-bottom:10px}
ul.wc-appv-str li .wc-app-dtl{padding:5px 10px;border:1px solid #eceff1;border-radius:10px}
ul.wc-appv-str li a .wc-app-dtl>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:10px}
.wc-typstr span{background:#f89000;text-align:center;display:inline-block;font-size:10px;color:#fff;border-radius:2px;min-width:32px;padding:0 5px}
.wc-typstr span.blue-clr{background-color:#018dbc}ul.wc-appv-str .wc-apkdte{color:#48525c}
/* CSS darkmode ubah classnya jika berbeda atau hapus bagian ini*/
.darkMode .wc-app-wrap{background-color:#1e1e1e;color:#fefefe}
.darkMode .wc-apk-btn{color:#fefefe}
.darkMode ul.wc-appv-str li .wc-app-dtl,.darkMode .wc-apkvb,.darkMode .wcapkdtl{border-color:rgba(255,255,255,.1)}
Untuk menggunakannya silahkan salin kode di bawah ini dan tempatkan di postingan dalam mode HTML
<div class='wc-app-wrap'>
<!--[icon aplikasi]-->
<img src='https://play-lh.googleusercontent.com/0x-5LpQbEzhHXMMrWyynSl-w_DjVYIrniUhPlCHcwGTLKGJexm6wr9lpNPuFslNL7w=s180-rw' alt='wendy code' title='wendy code'/>
<!--[icon aplikasi and]-->
<div class='wc-apknm'>Wendy Code</div>
<div class='wc-apkvs'>Versi 1.0.5</div>
<div class='wc-apkpb'>Oleh Wendy Code Grup</div>
<div class='wc-apkvb'>Versi Terbaru</div>
<div class='wcapkdtl'><b>Pembaruan</b> 22 september 2021</div>
<div class='wcapkdtl'><b>Kategori</b>Blog</div>
<!--[tombol dwonload]-->
<a class='wc-apk-btn' href='#' target='_blank' rel='noopener noreferrer'>Dwonload Apk 9.5M</a>
<!--[tombol dwonload and]-->
<!--[versi lama start]-->
<div class='wc-apkvl'>Versi Lama</div>
<ul class="wc-appv-str">
<!--[versi lama 1]-->
<li>
<a class="wc-appdw-link" href="#" rel="noopener noreferrer">
<div class="wc-app-dtl">
<span class="wc-appvs">1.0</span>
<span class="wc-typstr">
<span>Apk</span></span>
<span class="wc-apkdte">12 July 2021</span>
</div>
</a>
</li>
<!--[versi lama 1 and]-->
<!--[versi lama 2]-->
<li>
<a class="wc-appdw-link" href="#" rel="noopener noreferrer">
<div class="wc-app-dtl">
<span class="wc-appvs">1.0.3</span>
<span class="wc-typstr">
<span>Apk</span> <span class="blue-clr">Obb</span> </span>
<span class="wc-apkdte">18 Agustus 2021</span>
</div>
</a>
</li>
<!--[versi lama 2 and]-->
</ul>
<!--[versi lama and]-->
</div>
Edit bagian yang sudah Codepelajar tandai dengan tulisan
Oke mungkin segitu saja tutorial untuk kali ini semoga bermanfaat dan dapat di optimasikan pada blog anda agar lebih menarik.
