How to create a Hastag Animation Preloader in Blogger

 Hello! Welcome to Tecky AaryaN. 

You are looking for App Description Widget For Blogger then this post is just for you.

App Description Widget

You can see the demo here⤵

   View Demo

Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.

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

Step 5: Now save

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 application end]-->

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

<!--[download button]-->

<a class="wc-apk-btn" href="#" rel="noopener noreferrer" target="_blank">Download Apk 9.5M</a>

<!--[download button end]-->

<!--[old version start]-->

<div class="wc-apkvl">Version Detail</div>

<ul class="wc-appv-str">

<!--[old version 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>

<!--[old version 1 end]-->

<!--[old version 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 August 2023</span>

</div>

</a>

</li>  

<!--[old version 2 end]-->

</ul>

<!--[old version end]-->   

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

TeckyAaryaN

Telegram

Go to Link