How to Create App Details Widget in Blogger

Hello Guys, Welcome to Jago Blog. Today in this article I’m going to guide you step by step to Create App Details Widget in Blogger Website. So, follow the easy steps and learn more about how to create app details widget in the Blogger.

See the demo of App Details Widget before creating this.

https://unplug.jagotheme.com/2022/03/app-description-box.html

Steps to Add App Details Widget

You can add app details widget to blogger very easily. Just follow the two steps and the widget is added. We will add css code in first step and html code in second.

Step 1. Adding CSS Codes

Search for the code ]]></b:skin> on your theme and paste the following CSS Codes just above it.

.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

Now add the following HTML Codes where you want to add 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'/>
<!--[icon aplikasi and]-->
<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 &amp; Audio</div>

<a class='jago-button' href='#' target='_blank' rel='noopener noreferrer'>Download Now</a>
</div>

This is all about creating App Details Widget in Blogger Website. I hope this article is very helpful for you and you love it. Please share your feedback in comments.

Leave a Reply

Your email address will not be published. Required fields are marked *