App Description Widget For Blogger and WordPress

 Hello! Welcome to ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ. 

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="ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-z_HB5HeiO3uL5It1huVMWCl8gfG71IHllTUldGriIVnQwDcWzkUkox1qjvSJebe0cleYnA1Xb-kNL2icls18Uc5Jl7Mi5TkkN7WfQRF_tuHRDLZL1_OK2uiEItvAWD58oTalKlr63Wr0SzAtTX4IXmc8VzczmlTl9OLotGteaZ5nA7te8abQHTgUJi9r/w640-h640/Victor_Logo8_Tech_Ankur-removebg-preview.png" title="ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ" />

<!--[icon application end]-->

<div class="wc-apknm"><br /></div><div class="wc-apknm"><br /></div><div class="wc-apknm">ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ
</div> 

<div class="wc-apkvs">Version 1.0.5</div>

<div class="wc-apkpb">ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ(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 5: On Blogger Dashboard, click Pages and creat a new Page.

Step 6: 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 7: Now paste the following HTML code to thaat place.

 

Conclusion

This is all about making a Contact Form using Telegram Bot API. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in comment box.

Copyright ©
ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ