What is App Description Widget?
The App Description widget in Blogger is a valuable tool that allows bloggers to provide detailed descriptions of their applications or software directly on their Blogger websites. Similar to the app descriptions found in app stores like Google Play Store or Apple App Store, this widget serves as a concise summary of the features, functionalities, and benefits of the application.
With the App Description widget, bloggers can enhance the visibility and understanding of their applications among their website visitors. It enables them to highlight the key aspects of the app, such as its purpose, target audience, and unique selling points. By presenting this information in an easily accessible manner, bloggers can attract more users and generate interest in their applications.
The widget typically includes various elements, such as a catchy title, a brief introduction, feature highlights, screenshots, and download links. Bloggers can customize the widget's design to match their website's theme and layout, ensuring a seamless integration with their overall branding.
Through the App Description widget, bloggers can effectively market and promote their applications to their blog audience. It serves as a central hub of information about the app, providing visitors with a clear understanding of its capabilities and how it can benefit them. By providing detailed descriptions and showcasing the app's user interface through screenshots, the widget helps build trust and credibility, ultimately increasing the likelihood of downloads and user engagement.
Overall, the App Description widget in Blogger serves as a powerful tool for bloggers to showcase their applications, attract users, and create a compelling user experience on their websites, similar to the app descriptions found in popular app stores.
Tutorial: Widget App Description
Please go to blogger > themes > edit html copy the css below and paste it above the code ]]></b:skin> or above code </style>.
/* AP Widget Code By Muhammad SA. (sanvedesign.com) */
.app-icon,.app-name,.app.no-padding{position:relative}.app-box-name-heading,.app-icon,.app-name,.app.no-padding,.entry-block.entry-content.main-entry-content,h1.has-medium-font-size.no-margin,span,span.has-cyan-bluish-gray-color{-webkit-tap-highlight-color:transparent;box-sizing:inherit}.entry-block.entry-content.main-entry-content{-webkit-text-size-adjust:auto;margin-bottom:20px!important;margin-top:20px!important;margin:20px auto;max-width:750px}.app.no-padding{column-gap:15px;display:grid;grid-template-columns:90px calc(100% - 105px);grid-template-rows:90px;margin-bottom:15px;margin-top:0;padding:0;row-gap:15px;width:380.90625px}.app-icon{aspect-ratio:1/1;border-radius:15px;height:90px;width:90px}.app-name{align-self:center;width:275.90625px}h1.has-medium-font-size.no-margin{font-size:var(--wp--preset--font-size--medium)!important;line-height:25px;margin:0}span{font-weight:500}span.has-cyan-bluish-gray-color{color:var(--wp--preset--color--cyan-bluish-gray)!important;font-weight:400}span.has-small-font-size.has-cyan-bluish-gray-color.truncate{color:var(--wp--preset--color--cyan-bluish-gray)!important;-webkit-tap-highlight-color:transparent;box-sizing:inherit;display:block;font-size:var(--wp--preset--font-size--small)!important;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ApseI{margin:25px 0;overflow-y:hidden;overflow-x:scroll;position:relative;white-space:nowrap;width:100%}.ApseI>*{display:inline-block;margin-right:5px}.ApseI>*:last-child{margin-right:0}.ApseI img{max-height:310px;max-width:unset;width:auto}.ApseI.h250 img{max-height:250px}.ApseI.h200 img{max-height:200px}.ApseI.h150 img{max-height:150px}@media screen and (max-width:500px){.ApseI img{max-height:250px}}.ApdbSD{position:relative;display:flex;justify-content:center;align-items:center;text-align:center;margin:30px auto;padding:4px 25px;border-radius:30px;line-height:0px;color:#fefefe;background-color:#3940F5;font-size:14px;font-weight:bold;width:calc(100% - 40px)}.wc-apk-btn:hover{opacity:.8}
How to use
Please copy the html below and place it on the post page in HTML VIEW mode.
<!--[ 1280*720 Full Page Image ]-->
<div class="zmImg">
<img
width="1280"
height="720"
alt="_app_name"
class="full lazy loaded"
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-GAKzWKEZRF5edU21JtPYx6AnTMqYvk2AMmjA0D22L5wzaUMtUgbnClvRhHZOOhnPYVJ_X_AgDTPNH0USOfk_KF-3k0UZ6Xudc-nz50TBJcR7BpROrZ-jBE7kX0jwh9MQbxio9AHg66EdX9nIl6IqEHrFuwYTj4XE-E5qMqLjOKjuVWbe28EWmFgG/s1600/C37EF28D-E71E-48CB-8975-8F3931F1DB07.png"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-GAKzWKEZRF5edU21JtPYx6AnTMqYvk2AMmjA0D22L5wzaUMtUgbnClvRhHZOOhnPYVJ_X_AgDTPNH0USOfk_KF-3k0UZ6Xudc-nz50TBJcR7BpROrZ-jBE7kX0jwh9MQbxio9AHg66EdX9nIl6IqEHrFuwYTj4XE-E5qMqLjOKjuVWbe28EWmFgG/s1600/C37EF28D-E71E-48CB-8975-8F3931F1DB07.png"
onclick="return false"
lazied=""
/>
</div>
<!--[ App Icon Image ]-->
<div class="entry-block entry-content main-entry-content">
<div class="app no-padding">
<div class="app-icon">
<img
alt="_app_name"
decoding="async"
fetchpriority="high"
height="90"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrN2RHAjUO3WEnpx9PQIo3w7GNJSsRToPBD5CGWr8dO4uJBXhAXX68A8FQYXbgftj15iQukS52nvCjMoyUpNP4X1AZ0DwylMM5j1bnfiDi2M-IamjDmc26xFw8aErIrFZNhPlC8CEFFTno-IHrLQwQBe-3ZzbabBOnLN2BLo8M2CAfBVBGd2eph9v_/s1600/B0F39F85-FBC4-464E-8AA7-E163A8490E52.jpeg"
width="90"
/>
</div>
<div class="app-name">
<div class="app-box-name-heading">
<h1 class="has-medium-font-size no-margin">
<span>Sanve Design</span> <span
class="has-cyan-bluish-gray-color"
>APK + GAME (Premium Website) v1.0</span
>
</h1>
<span class="has-small-font-size has-cyan-bluish-gray-color truncate"
>Updated on <time datetime="2023-02-08T10:37:49+07:00"
>May 21, 2023</time
></span
>
</div>
</div>
</div>
</div>
<!--[ Google Ads Section ]-->
<div class="adB" data-text="Ads go here"></div>
<!--[ App & Game Download Link ]-->
<a class="ApdbSD"
href="https://firebasestorage.googleapis.com/v0/b/muhammad-sa.appspot.com/o/B8F3FBF0-6F6C-40EB-A764-3B9510A3E477.jpeg?alt=media&token=b6fa68b4-959e-4bbf-ab80-db70ae40b3b1"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<g>
<path d="M11,8a1,1,0,0,0-1,1V23a1,1,0,0,0,2,0V9A1,1,0,0,0,11,8Z"></path>
<path d="M7,12a1,1,0,0,0-1,1V23a1,1,0,0,0,2,0V13A1,1,0,0,0,7,12Z"></path>
<path d="M3,16a1,1,0,0,0-1,1v6a1,1,0,0,0,2,0V17A1,1,0,0,0,3,16Z"></path>
<path
d="M25,14h-.26A8.05,8.05,0,0,0,17,8H15a1,1,0,0,0-1,1V23a1,1,0,0,0,1,1H25a5,5,0,0,0,0-10Zm0,8H16V10h1a6,6,0,0,1,5.93,5.14,1,1,0,0,0,1,.86H25a3,3,0,0,1,0,6Z"
></path>
</g>
</svg>
<span>Download</span>
</a>
<br />
<!--[ App Information Table ]-->
<h10><b>APP INFO:</b></h10>
<div class="table">
<table style="min-width: 100%; white-space: nowrap;">
<thead></thead>
<tbody>
<tr>
<td>Name</td>
<td>Sanve Design</td>
</tr>
<tr>
<td>Package Name</td>
<td>com.sanvedesign</td>
</tr>
<tr>
<td>Publisher</td>
<td>Muhammad SA.</td>
</tr>
<tr>
<td>Category</td>
<td>Design</td>
</tr>
<tr>
<td>Version</td>
<td>1.0</td>
</tr>
<tr>
<td>Size</td>
<td>10MB</td>
</tr>
<tr>
<td>Price</td>
<td>Free</td>
</tr>
<tr>
<td>Requires</td>
<td>Android</td>
</tr>
<tr>
<td>Features</td>
<td>---</td>
</tr>
</tbody>
</table>
</div>
<br />
<!--[ App Screenshots ]-->
<h10><b>SCREENSHOT:</b></h10>
<div class="ApseI">
<div class="separator" style="clear: both;">
<a
href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibBKe6dqamhkf3V9ssuKqq3Et_pLd0c-DSxS6ESlrVcUDhRBFYsl8Gw_LyR-IxglO2OzDVLY8rbZp2duQrhS5ycJa04Va5dXE25c0B6HXcN5ZSY4aapb_BIaxppjy2rwuQD7FHHhQ1k1BppR-H95kfw15de8cARt6oNuc_NiRlOAaYs2rapGAq-ivw/s1600/EDFC3955-120E-4500-9FF1-232441CEC570.jpeg"
style="display: block; padding: 1em 0; text-align: center; "
><img
alt=""
border="0"
data-original-height="2208"
data-original-width="1242"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibBKe6dqamhkf3V9ssuKqq3Et_pLd0c-DSxS6ESlrVcUDhRBFYsl8Gw_LyR-IxglO2OzDVLY8rbZp2duQrhS5ycJa04Va5dXE25c0B6HXcN5ZSY4aapb_BIaxppjy2rwuQD7FHHhQ1k1BppR-H95kfw15de8cARt6oNuc_NiRlOAaYs2rapGAq-ivw/s1600/EDFC3955-120E-4500-9FF1-232441CEC570.jpeg"
/></a>
</div>
<div class="separator" style="clear: both;">
<a
href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZWdm8zvvImHzk6tSUGsjdNv8R8TQFdukhf7uFsbRzQlJ8u1R8Sn0k2TWLJGe0-U_1R6tQ-RMmoBaYO65w0ze1gAAu0asPFyg54ZZjRaOCd0v1L1-arb7dhF87906Ql2-i59Qf6ao2wDuR-qcWQkeS1ssa4fU-WwL5BgX6tJC5p5GuSRAmdNa1H-Mk/s1600/DBB5F6BA-8CFC-4179-BE61-F9064CACD1E1.jpeg"
style="display: block; padding: 1em 0; text-align: center; "
><img
alt=""
border="0"
data-original-height="2208"
data-original-width="1242"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZWdm8zvvImHzk6tSUGsjdNv8R8TQFdukhf7uFsbRzQlJ8u1R8Sn0k2TWLJGe0-U_1R6tQ-RMmoBaYO65w0ze1gAAu0asPFyg54ZZjRaOCd0v1L1-arb7dhF87906Ql2-i59Qf6ao2wDuR-qcWQkeS1ssa4fU-WwL5BgX6tJC5p5GuSRAmdNa1H-Mk/s1600/DBB5F6BA-8CFC-4179-BE61-F9064CACD1E1.jpeg"
/></a>
</div>
<div class="separator" style="clear: both;">
<a
href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpbvGm8XHraiLK-Fty-iaNi9bvB0apmxb1CcwJewIMVmVZgkYTPQ44X1lTGJ2dxzhr0z4qrVVho-gJ58N4c8PFRBxiLyTkpyBeaipMLW-2U9A9ZK3uDdfY0B9FiSjPRbXwpgPHq_m3GjSZQ2eAjeNlk_VHXXN2KjhqlxDm8KowXXU4XPZapZ3KkK7B/s1600/BC1E170B-27DE-42BD-A656-2D4E6938C93E.png"
style="display: block; padding: 1em 0; text-align: center; "
><img
alt=""
border="0"
data-original-height="1242"
data-original-width="2208"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpbvGm8XHraiLK-Fty-iaNi9bvB0apmxb1CcwJewIMVmVZgkYTPQ44X1lTGJ2dxzhr0z4qrVVho-gJ58N4c8PFRBxiLyTkpyBeaipMLW-2U9A9ZK3uDdfY0B9FiSjPRbXwpgPHq_m3GjSZQ2eAjeNlk_VHXXN2KjhqlxDm8KowXXU4XPZapZ3KkK7B/s1600/BC1E170B-27DE-42BD-A656-2D4E6938C93E.png"
/></a>
</div>
<div class="separator" style="clear: both;">
<a
href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg3DbYcdUxlVPI6qIUrG3zOCftaBSmRlQsRMjsLWoL7spsMOhHXojp706x287bDmp70Z7cY9Urf3k-8FH7idfFkHVpd48JnW3LpxEn2VKYyVdc2JwQncK0KJbkoAmrFTTS4g3o-_Fvk-3ctOHwzu2ZSAcrduv6jhcwYDf699tucK1Yqumlk_qgcQbW/s1600/EC69301F-8DCB-4985-A2B4-85228427EFA0.png"
style="display: block; padding: 1em 0; text-align: center; "
><img
alt=""
border="0"
data-original-height="1242"
data-original-width="2208"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg3DbYcdUxlVPI6qIUrG3zOCftaBSmRlQsRMjsLWoL7spsMOhHXojp706x287bDmp70Z7cY9Urf3k-8FH7idfFkHVpd48JnW3LpxEn2VKYyVdc2JwQncK0KJbkoAmrFTTS4g3o-_Fvk-3ctOHwzu2ZSAcrduv6jhcwYDf699tucK1Yqumlk_qgcQbW/s1600/EC69301F-8DCB-4985-A2B4-85228427EFA0.png"
/></a>
</div>
<div class="separator" style="clear: both;">
<a
href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKjP0s4FImkwTK5PT7op5gahZm6AWc2pxFVbdOyKi8h3TE2Y7nkVrij2cVpRCNpj_oY2Xk9euwFZAmgndmNFBQfJMUUDknuFdZDTcdMnnnr7HXf6j4t1o2ZxAbkJa6IhXwseOgidto-SUb90r2UyaLD_9xEVu7sjFELsaPkrWtMcwaOxD--lX1zWAx/s1600/571712B1-704C-469F-ADDD-B69528379E19.png"
style="display: block; padding: 1em 0; text-align: center; "
><img
alt=""
border="0"
data-original-height="1242"
data-original-width="2208"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKjP0s4FImkwTK5PT7op5gahZm6AWc2pxFVbdOyKi8h3TE2Y7nkVrij2cVpRCNpj_oY2Xk9euwFZAmgndmNFBQfJMUUDknuFdZDTcdMnnnr7HXf6j4t1o2ZxAbkJa6IhXwseOgidto-SUb90r2UyaLD_9xEVu7sjFELsaPkrWtMcwaOxD--lX1zWAx/s1600/571712B1-704C-469F-ADDD-B69528379E19.png"
/></a>
</div>
</div>
Conclusion
In this article, I have shared How to add app description widget with html and css like an appstore on bogger I hope you have liked it Please do share it with your friends and follow our blog for more.
Source By:
www.sanvedesign.com