How to make an application description widget with html and css like the appstore on blogger, this widget is very suitable for download sites.
 |
| © Copyright 2023 Tecky AaryaN |
Everyone, on this occasion I will share an application description widget with HTML and CSS
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 to Create a App Description Widget
Step 1: First of all Login to your Blogger Dashboard
Step 2: Click on Theme Button.
Step 3: Click on Edit Html.
Step 4: Now search for ]]></b:skin> and paste the following CSS just ABOVE it.
/* 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&amp;amp;gt;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)}
How to use
Please copy the HTML below and place it on the post page in HTML mode, the part I marked '#' please change with your download link and the rest please adjust it yourself.
<div class="wc-app-wrap"> <!--[icon Application]--> <img alt="Tecky AaryaN" src="https://blogger.googleusercontent.com/img/a/AVvXsEhsw7PUP_5frj-mDVttDrduB9YN2e3b1OtO_UswtTwFc2dURIs_nY3qlZEkXNhwguwTEiWc1Fc_MsFP0mqoKOuFfiK0WxvV8dt5cUIi4lko3m_myOE_OhwXN9q4jQhALElk5aOpDIQqmhRfYA2FzhS1Rp0JUdHrxlFpwaY-qpMIUpZyfN6vHTWzJfd-jWQ=s1453" title="Tecky AaryaN" /> <!--[icon aplikasi and]--> <div class="wc-apknm"><br /></div><div class="wc-apknm"><br /></div><div class="wc-apknm">Tecky Aaryan</div> <div class="wc-apkvs">Version 1.0.5</div> <div class="wc-apkpb">Tecky AaryaN (Group)</div> <div class="wc-apkvb">New Version</div> <div class="wcapkdtl"><b>Update</b> 30 December 2023</div> <div class="wcapkdtl"><b>Category</b>Blog</div> <!--[tombol dwonload]--> <a class="wc-apk-btn" href="#" rel="noopener noreferrer" target="_blank">Dwonload Apk 9.5M</a> <!--[tombol dwonload and]--> <!--[versi lama start]--> <div class="wc-apkvl">Version Detail</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 2023</span> </div> </a> </li> <!--[versi lama 2 and]--> </ul> <!--[versi lama and]--> </div></div>
Step 1: On Blogger Dashboard, click Pages and creat a new Page.
Step 2: Then if you are doing this in page then In post editor view, click
icon at the bottom right of the title.Two options will appear: HTML view and Writing view, Select ' < > HTML View
Step 3: Now paste the following HTML code to thaat place.
To appreciate our works, consider keeping the credits in codes. We don't allow to rewrite this post in any manner. Don't copy this post, codes or any part from this article without Permission, it is strictly prohibited. If you do so, Legal Actions will be taken.
Copyright
