How to Add App Detail in Blogger-Like WordPress

You might have heard about the Google Play Store and how you can download apps for free. But when it comes to blogging, you're probably wondering how to add app details on blogger. So I decided to make some blogger widgets just like many WordPress plugins designed for this purpose.

What are App Details in Blogger? (Widget App Description For Blogger)

How to Add App Detail in Blogger.

Adding app details to a blogger is a simple process that you can use to add app details to a blogger, including app icon, author detail, app version, category, and download button. However, some might have a hard time inserting the details because they are not any plugins that come in blogger like WordPress, but today I provide you a responsive code to add app details in blogger with easy steps.

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

Features of Widgets App Description

• Responsive Code
• 100% Working for Blogger
• APK logo
• Apk File Name
• Apk Version
• Apk Category
• Download Buton
• Apk Author
You may want to read these posts:
• Apmody v1.5 Blogger Template 202(Apps Store)
• How to Create Purchase Box Widget on Blogger 2022?
• How To Create A Pricing Table in Blogger 2022?

How to add app details on blogger?

Today, we will share with you a full guide on how to add app details on blogger. To show how easy it is, follow the below step;

Add APK Detail in Blogger

First Step

• Go to Blogger Dashboard
• Click Theme Option and Edit HTML
• Copy Below CSS Code and Past it above ]]></b:skin>
• Click To Save

/* widget app description by btoolsbox*/
.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)}
  

Second Step

• Goto Blogger Post where you want to add
• Switch To HTML
• Copy Below HTML Code and paste it into your post
• Finally, click to publish your post.

  <div class='wc-app-wrap'>
<!--[icon aplikasi]-->
<img src='https://play-lh.googleusercontent.com/0x-5LpQbEzhHXMMrWyynSl-w_DjVYIrniUhPlCHcwGTLKGJexm6wr9lpNPuFslNL7w=s180-rw' alt='wendy code' title='wendy code'/>
<!--[icon aplikasi and]-->
<div class='wc-apknm'>Wendy Code</div> 
<div class='wc-apkvs'>Versi 1.0.5</div>
<div class='wc-apkpb'>Oleh Wendy Code Grup</div> 
<div class='wc-apkvb'>Versi Terbaru</div>
<div class='wcapkdtl'><b>Pembaruan</b> 22 september 2021</div>
<div class='wcapkdtl'><b>Kategori</b>Blog</div>
<!--[tombol dwonload]-->
<a class='wc-apk-btn' href='#' target='_blank' rel='noopener noreferrer'>Dwonload Apk 9.5M</a>
<!--[tombol dwonload and]--> 
<!--[versi lama start]-->
<div class='wc-apkvl'>Versi Lama</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 2021</span>
</div>
</a>
</li>  
<!--[versi lama 2 and]-->
</ul>
<!--[versi lama and]-->   
</div>
  

Don't forget to add your app details in the red color. I also marked #. Please change it with your download link, and for the rest, please adjust it yourself.

At Final

You can change the title as per your need. All you need to do is put a name and click on publish. Now you will see that the app details are added to the blogger's blog post.

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

I hope this information will help you guys.