HOW TO ADD APP DESCRIPTION BOX IN BLOGGER FOR FREE AND EDITABLE BY EVERYONE ON ANY BLOGGER TEMPLATE


Widgets Description App

Please go to blogger > themes > edit html copy the css below and place it above the code ]]></b:skin> if it is done don't forget to click save.



DEMO

/* widget deskripsi aplikasi by Anand Nawal*/
.an-app-wrap{position:relative;color:#48525c;background-color:transparent;font-size:14px;}
.an-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}
.an-apknm{position:absolute;top:5px;left:120px;font-size:24px;font-weight:bold}
.an-apkvs,.an-apkpb{position:absolute;left:120px;top:40px}.an-apkpb{top:70px}
.an-apkvb,.anapkdtl,.an-apkvl{margin-top:20px;font-size:17px;font-weight:bold;border-bottom:1px solid #eceff1;padding-bottom:10px}.an-apkvl{border:0}
.anapkdtl{font-size:14px;font-weight:normal}.anapkdtl b{margin-right:50px}
.an-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)}.an-apk-btn:hover{opacity:.8}
ul.an-appv-str{list-style:none;margin:15px 0 5px -40px}
ul.an-appv-str li{width:50%;float:left;padding-left:5px;padding-right:5px;margin-bottom:10px}
ul.an-appv-str li .an-app-dtl{padding:5px 10px;border:1px solid #eceff1;border-radius:10px}
ul.an-appv-str li a .an-app-dtl>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:10px}
.an-typstr span{background:#f89000;text-align:center;display:inline-block;font-size:10px;color:#fff;border-radius:2px;min-width:32px;padding:0 5px}
.an-typstr span.blue-clr{background-color:#018dbc}ul.an-appv-str .an-apkdte{color:#48525c}
  
/* CSS darkmode ubah classnya jika berbeda atau hapus bagian ini*/
.darkMode .an-app-wrap{background-color:#1e1e1e;color:#fefefe}
.darkMode .an-apk-btn{color:#fefefe}
.darkMode ul.an-appv-str li .an-app-dtl,.darkMode .an-apkvb,.darkMode .anapkdtl{border-color:rgba(255,255,255,.1)}

How to use

please copy the html below and put it on the post page with HTML mode , the part I marked # please change it with your download link and the rest please adjust it yourself.

<div class='an-app-wrap'>
<!--[icon aplikasi]-->
<img src='https://lh3.googleusercontent.com/proxy/9R74mYvYwkneM2t8p1wt8x4YByjWGO2n0OMWJi_HzloXims1kQwUDq49pe135TnlPlsCy8EU2oE4DtCiwgYgES6fxhQyEuqDi25ALF9IXKdNytAGCUEa4pKuQviAh9BQz8D9JhPu' alt='Anand Nawal' title='Anand Nawal'/>
<!--[icon aplikasi and]-->
<div class='an-apknm'>Anand Nawal</div> 
<div class='an-apkvs'>Version</div>
<div class='an-apkpb'>Anand Nawal</div>
  
<div class='an-apkvb'>Versi Terbaru</div>
<div class='anapkdtl'><b>Pembaruan</b> 22 september 2021</div>
<div class='anapkdtl'><b>Kategori</b>Blog</div>

<!--[tombol dwonload]-->
<a class='an-apk-btn' href='#' target='_blank' rel='noopener noreferrer'>Dwonload Apk 9.5M</a>
<!--[tombol dwonload and]-->
 
<!--[versi lama start]-->
<div class='an-apkvl'>Versi Lama</div>
<ul class="an-appv-str">
<!--[versi lama 1]-->
<li>
<a class="an-appdw-link" href="#" rel="noopener noreferrer">
<div class="an-app-dtl">
<span class="an-appvs">1.0</span>
<span class="an-typstr">
<span>Apk</span></span>
<span class="an-apkdte">12 July 2021</span>
</div>
</a>
</li>
<!--[versi lama 1 and]-->
  
<!--[versi lama 2]-->
<li>
<a class="an-appdw-link" href="#" rel="noopener noreferrer">
<div class="an-app-dtl">
<span class="an-appvs">1.0.3</span>
<span class="an-typstr">
<span>Apk</span> <span class="blue-clr">Obb</span> </span>
<span class="an-apkdte">18 Agustus 2021</span>
</div>
</a>
</li>  
<!--[versi lama 2 and]-->
</ul>
<!--[versi lama and]-->   
</div>



ok so that's the application description widget that I can share this time, hopefully it's useful and thank you for visiting.