Cara Membuat Widget Deskripsi Aplikasi

Hallo semua pada kesempatan kali ini saya akan membagikan tutorial cara membuat widget deskripsi aplikasi mengunakan html dan css layaknya appstore diblogger.

Widget deskripsi aplikasi ini cocok banget Bagi kalian yang mempunyai situs download seperti membagikan aplikasi, template dan lain-lain.

Untuk demonya kalian bisa langsung klik tombol dibawah ini.

DEMO Klik Sini

Sebelum ke tutorial nya alangkah baiknya kalian back up dulu template nya. bagi kalian yang ingin mencoba membuatnya mari simak tutorialnya sampai selesai.

Widget Deskripsi Aplikasi

Buka dashboard blogger pilih > Tema > Edit Html Kemudian salin css dibawah ini dan letakkan diatas kode ]]></b:skin> kalau sudah tinggal simpan.

/* widget deskripsi aplikasi by wendy code*/
.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)}

Cara Pemasangan

Kemudian salin kode html dibawah ini dan pastekan dihalaman postingan dengan Mode Html dan bagian yang saya tandai # silahkan diubah dengan link download kalian atau link demo kalian.

<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>

Jadi itulah cara membuat widget deskripsi aplikasi.sekian dulu artikel yang bisa saya bagikan hari ini semoga bermanfaat.

Baca juga