Greetings everyone, and a warm welcome to Jago Theme! Today we’ll be crafting the ‘App Details Widget‘ for both Blogger and WordPress. This widget proves highly beneficial for websites dedicated to downloading Apps and Games APK files. We employ a combination of HTML and CSS codes in the creation process. To ensure its proper functionality, please meticulously follow each step provided.
What is Apps Details Widget?
An “App Details Widget” is a user interface element typically used on websites or blogs to display specific information about mobile applications (apps). This widget is designed to provide visitors with key details and data about an app, making it easier for them to understand what the app does and decide whether they want to download or learn more about it.
Common elements included in an App Details Widget might be:
- App Name: The name of the mobile application.
- App Icon: A small image representing the app.
- Description: A brief description or summary of the app’s features and purpose.
- Ratings and Reviews: User ratings and possibly snippets of reviews.
- Download Button: A button or link to download the app.
- Screenshots: Images showcasing the app’s user interface.
- Version Information: The current version of the app.
- Developer Information: Details about the app’s developer or publisher.
These widgets are often used by app review websites, blogs, or app stores to provide users with a quick overview of an app’s features and encourage downloads or further exploration. They can be customized in terms of design and content to suit the specific needs of the website or platform where they are used.
Make sure to check out the widget’s demo before you start crafting it.
Steps to Create App Details Widgets
Creating this widget involves a combination of HTML and CSS wizardry. To ensure it works like a charm, we’d appreciate it if you could carefully follow each step.
Step 1. Adding CSS Codes
Start by going to the CSS section within your theme and inputting the specified CSS codes. If you’re working with Blogger, access the Edit HTML section to include these CSS codes. In the case of WordPress, go to Theme Customization and paste these CSS codes in Additional CSS section.
.jago-app-wrap{position:relative;color:#08102b;background-color:transparent;font-size:14px}
.jago-app-wrap img{width:100px;border-radius:5px;background-color:transparent;padding:10px;border:1px solid #08102b;transition:transform .1s ease,box-shadow .1s ease}
.jago-app-wrap img:hover{transform:translate(-4px,-4px);box-shadow:4px 4px #08102b}
.jago-app-wrap img:hover{opacity:1;transition:transform .1s ease,box-shadow .1s ease}
.jago-apknm{position:absolute;top:5px;left:120px;font-size:24px;font-weight:bold}
.jago-apkvs,.jago-apkpb{position:absolute;left:120px;top:40px}
.jago-apkpb{top:70px}
.jago-apkvb,.jagoapkdtl,.jago-apkvl{margin-top:20px;font-size:17px;font-weight:bold;border-bottom:1px solid #08102b;padding-bottom:10px}
.jago-apkvl{border:0}
.jagoapkdtl{font-size:14px;font-weight:normal}
.jagoapkdtl b{margin-right:50px}
.jago-button{position:relative;display:flex;justify-content:center;align-items:center;width:calc(100% - 40px);margin:20px;padding:10px 25px;outline:0;border:1px solid #08102b;border-radius:2px;color:#08102b;background-color:#F6F6F6;font:1rem/1.5 'Noto Sans',sans-serif;;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .1s ease,box-shadow .1s ease}
.jago-button:hover{transform:translate(-4px,-4px);box-shadow:4px 4px #08102b}
.jago-button:hover{opacity:1;transition:transform .1s ease,box-shadow .1s ease}Step 2. Adding HTML Codes
Insert these HTML Codes where you intent to display the app details widget.
<div class='jago-app-wrap'>
<!--[icon]-->
<img src='https://play-lh.googleusercontent.com/UrY7BAZ-XfXGpfkeWg0zCCeo-7ras4DCoRalC_WXXWTK9q5b0Iw7B0YQMsVxZaNB7DM=s180-rw' alt='Spotify: Music and Podcasts' title='Spotify: Music and Podcasts'/>
<!--[app details]-->
<div class='jago-apknm'>Spotify</div>
<div class='jago-apkvs'>Version 8.7.10.1262</div>
<div class='jago-apkpb'>By Spotify AB</div>
<div class='jago-apkvb'>Details</div>
<div class='jagoapkdtl'><b>Updated</b> 09 March 2022</div>
<div class='jagoapkdtl'><b>Version</b> 8.7.10.1262</div>
<div class='jagoapkdtl'><b>Installs</b> 1,000,000,000+</div>
<div class='jagoapkdtl'><b>Category</b>Music & Audio</div>
<a class='jago-button' href='#' target='_blank' rel='noopener noreferrer'>Download Now</a>
</div> We believe you’ve successfully implemented this widget by adhering to step-by-step guide. However, should you encounter any obstacles, please make another attempt. If the issue persists, don’t hesitate to share your problem in the comments, and we’ll work diligently to resolve it.
