How To Make App Description widget for Blogger

Hello all on this occasion I will share an application description widget with html and css.

This widget was regulated by Spidey which was sent to my email, the sketch has also been drawn by him below.

For those of you who want to regulate the tutorial, you can comment on one of my articles or forums or you can also join the whatsapp group, if it's interesting I will make it in the future.

You can also custom design by sending a sketch in the form of an image like Spidey did because it was quite helpful so I didn't think too much about the design.

This application description widget is perfect for those of you who have download sites such as sharing applications or templates etc.

for the demo, please click the button below, ok for those of you who want to try it, let's see how.

DEMO

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.

/* widget deskripsi aplikasi by Blogger Store*/
    .bs-app-wrap{position:relative;color:#48525c;background-color:transparent;font-size:14px;}
    .bs-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}
    .bs-apknm{position:absolute;top:5px;left:120px;font-size:24px;font-weight:bold}
    .bs-apkvs,.bs-apkpb{position:absolute;left:120px;top:40px}.bs-apkpb{top:70px}
    .bs-apkvb,.bsapkdtl,.bs-apkvl{margin-top:20px;font-size:17px;font-weight:bold;border-bottom:1px solid #eceff1;padding-bottom:10px}.bs-apkvl{border:0}
    .bsapkdtl{font-size:14px;font-weight:normal}.bsapkdtl b{margin-right:50px}
    .bs-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)}.bs-apk-btn:hover{opacity:.8}
    ul.bs-appv-str{list-style:none;margin:15px 0 5px -40px}
    ul.bs-appv-str li{width:50%;float:left;padding-left:5px;padding-right:5px;margin-bottom:10px}
    ul.bs-appv-str li .bs-app-dtl{padding:5px 10px;border:1px solid #eceff1;border-radius:10px}
    ul.bs-appv-str li a .bs-app-dtl>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:10px}
    .bs-typstr span{background:#f89000;text-align:center;display:inline-block;font-size:10px;color:#fff;border-radius:2px;min-width:32px;padding:0 5px}
    .bs-typstr span.blue-clr{background-color:#018dbc}ul.bs-appv-str .bs-apkdte{color:#48525c}
      
    /* CSS darkmode ubah classnya jika berbeda atau hapus bagian ini*/
    .darkMode .bs-app-wrap{background-color:#1e1e1e;color:#fefefe}
    .darkMode .bs-apk-btn{color:#fefefe}
    .darkMode ul.bs-appv-str li .bs-app-dtl,.darkMode .bs-apkvb,.darkMode .bsapkdtl{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='bs-app-wrap'>
    <!--[icon aplikasi]-->
    <img src='https://play-lh.googleusercontent.com/0x-5LpQbEzhHXMMrWyynSl-w_DjVYIrniUhPlCHcwGTLKGJexm6wr9lpNPuFslNL7w=s180-rw' alt='Blogger |Store' title='Blogger |Store'/>
    <!--[icon aplikasi and]-->
    <div class='bs-apknm'>Blogger |Store</div> 
    <div class='bs-apkvs'>Versi 1.0.5</div>
    <div class='bs-apkpb'>Oleh Blogger |Store Grup</div>
      
    <div class='bs-apkvb'>Versi Terbaru</div>
    <div class='bsapkdtl'><b>Pembaruan</b> 22 september 2021</div>
    <div class='bsapkdtl'><b>Kategori</b>Blog</div>
    
    <!--[tombol dwonload]-->
    <a class='bs-apk-btn' href='#' target='_blank' rel='noopener noreferrer'>Dwonload Apk 9.5M</a>
    <!--[tombol dwonload and]-->
     
    <!--[versi lama start]-->
    <div class='bs-apkvl'>Versi Lama</div>
    <ul class="bs-appv-str">
    <!--[versi lama 1]-->
    <li>
    <a class="bs-appdw-link" href="#" rel="noopener noreferrer">
    <div class="bs-app-dtl">
    <span class="bs-appvs">1.0</span>
    <span class="bs-typstr">
    <span>Apk</span></span>
    <span class="bs-apkdte">12 July 2021</span>
    </div>
    </a>
    </li>
    <!--[versi lama 1 and]-->
      
    <!--[versi lama 2]-->
    <li>
    <a class="bs-appdw-link" href="#" rel="noopener noreferrer">
    <div class="bs-app-dtl">
    <span class="bs-appvs">1.0.3</span>
    <span class="bs-typstr">
    <span>Apk</span> <span class="blue-clr">Obb</span> </span>
    <span class="bs-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 thanks for visiting.

How To Make App Description widget for Blogger