Hello! Welcome to Tech Ankur, In today's article I am telling you how to add app post widget in blogger/website.
What is App Post Widget
The App Details widget in Blogger is a valuable tool that allows bloggers to provide a detailed description of their application or software directly on their Blogger websites. Similar to app descriptions found in app stores like Google Play Store or Apple App Store, this widget serves as a concise summary of an application's features, functionalities, and benefits.
With the App Details widget, bloggers can increase the visibility and understanding of their application among their website visitors. This enables them to highlight key aspects of the app, such as its purpose, target audience and unique selling point.
Curious to see what it looks like in action? Just click on the button below and be amazed by the impressive appearance of the download app post!
You can see the demo here⤵
Create App Post Widget on Blogger
Creating app posts on Blogger won't require any advanced coding skills or much knowledge about HTML, CSS or JavaScript because I've already designed it for you. Let's get started!
Important!Before we start adding the XML code, I recommend that you create a backup of your current theme. If a problem arises, you can always restore it later.
Step 1: First of all Login to your Blogger Dashboard.
Step 2: On Blogger Dashboard, click Theme.
Step 3: Click the arrow down icon next to 'customize' button.
Step 4: Click Edit HTML, you will be redirected to editing page.
Step 5: Now search the code ]]></b:skin> or /*]]>*/</style> and paste the following CSS Codes just above to it. Or you can paste it above <head/> tag by adding <style></style>
.angry-grid{display:grid;grid-template-rows:1fr 1fr 1fr 1fr 1fr 1fr;grid-template-columns:2fr 3fr;gap:4px;background-color:#f7f7f7;height:250px;width:100%;margin:50px 0;border:1px solid #353535;border-radius:10px;padding:0;box-shadow:0 5px 30px 0 rgba(0,0,0,.05);padding-top:50px}#apkName,#apkVer,#apkRate,#apkType{display:flex;float:left;justify-content:left;align-items:flex-end}#apkLogo{grid-row-start:1;grid-column-start:1;grid-row-end:6;grid-column-end:2;display:flex;align-items:center;justify-content:center}#apkLogo img{width:200px;height:200px;border-radius:10px;background-color:#fefefe;padding:10px;position:absolute;margin:0;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,.05)}#apkName{grid-row-start:1;grid-column-start:2;grid-row-end:2;grid-column-end:3;font-size:22px;font-weight:500;color:#000}#apkVer{grid-row-start:2;grid-column-start:2;grid-row-end:3;grid-column-end:3;font-size:16px;font-weight:500;color:#03875f}#apkRate{grid-row-start:3;grid-column-start:2;grid-row-end:4;grid-column-end:3;height:18px;font-size:14px;font-weight:900;color:#f89010}#apkRate span{color:#de3535;margin-left:5px}#apkRate img{height:10px;display:block;align-items:flex-start;justify-content:left;padding-right:5px}#apkType{grid-row-start:4;grid-column-start:2;grid-row-end:5;grid-column-end:3;height:14px;font-size:12px;font-weight:500;color:gray}.btnDown{display:flex;float:left;justify-content:left;width:calc(100% + 2px);position:relative}.btnDown > *{left:12px}.btnDown button{border:1px solid #de3535;border-radius:10px;margin:3px}.note.sc{background:#dffff0;color:#4d5c48}.note.sc::before{background:#51e65b}.drK .angry-grid{border:1px solid rgba(0,0,0,.05);background-color:#263545}.drK #apkName,.drK #apkType{color:#fffdfc}.drK #apkRate span{color:#f4b400}.drK #apkVer{color:#C92D1E}.drK .btnDown button{border:1px solid #f4b400}@media screen and (max-width:480px){.angry-grid{grid-template-columns:2fr 4fr;height:200px;padding-top:15px}#apkLogo{width:120px;height:100px;margin-right:0;border:hidden;border-radius:4px;display:flex;align-items:center;justify-content:center}#apkLogo img{width:100px;height:100px;display:flex;align-items:center;justify-content:center;padding:4px}#apkName{font-size:16.5px;letter-spacing:-1px}#apkVer{font-size:14px}#apkRate{font-size:12px;height:14px}#twtdlBtn{grid-row-start:5;grid-column-start:1;grid-row-end:6;grid-column-end:3;height:25px;padding-left:10px}.btnDown{margin-top:-10px}.btnDown > *{flex-grow:1;justify-content:center;width:calc(100% + 2px);border-radius:10px;left:12px}.btnDown > *:first-child{flex:0 1 60%}}@media screen and (max-width:360px){.angry-grid{grid-template-columns:2fr 3fr;height:200px;padding-top:8px}#apkLogo{width:110px;height:100px;margin-left:10px;border-radius:4px;display:flex;align-items:center;justify-content:center}#apkLogo img{width:100px;height:100px;border:1px solid #353535;display:flex;align-items:center;justify-content:center;padding:5px}#apkName{font-size:12pt;font-weight:500}#apkRate{font-size:8pt}#twtdlBtn{;grid-row-start:5;grid-column-start:1;grid-row-end:6;grid-column-end:3;margin-top:10px;height:30px}.btnDown{margin:-10px-3px}.btnDown > *{flex-grow:1;justify-content:center;width:calc(100% + 2px);border-radius:10px;left:12px}.btnDown > *:first-child{flex:0 1 70%}}.btnDlWrp{display:flex;justify-content:center;align-items:center}.separator.twtdlRator{position:relative;margin-bottom:-110px}.twtdlTitle{position:relative;z-index:2;padding:2px 5px;border:hidden;border-radius:30px 50px 0 0;background:rgb(255,255,255);background:linear-gradient(0deg,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 30%,rgba(255,255,255,0.9) 60%,rgba(255,255,255,0.55) 85%,rgba(255,255,255,0.2) 100%);text-shadow: 0px 4px 3px rgb(255 255 255 / 40%), 0px 8px 13px rgb(255 255 255 / 10%), 0px 18px 23px rgb(255 255 255 / 10%)}.drK .twtdlTitle{background:rgb(28,39,51);background:linear-gradient(0deg,rgba(28,39,51,1) 0%,rgba(28,39,51,1) 30%,rgba(28,39,51,0.9) 60%,rgba(28,39,51,0.55) 85%,rgba(28,39,51,0.2) 100%);text-shadow: 0px 4px 3px rgb(0 0 0 / 40%), 0px 8px 13px rgb(0 0 0 / 10%), 0px 18px 23px rgb(0 0 0 / 10%)}.twtdlTitle h2{font-size:1.5rem;margin-bottom:-15px!important}.twtdlTitle h2,.twtdlTitle p{line-height:1.2em!important;padding:0 12px!important}.twtdlApp{display:flex;flex-wrap:wrap;flex-direction:row;align-items:flex-start;justify-content:space-evenly;border-radius:20px;padding:10px 5px;margin:0;box-shadow:7px 7px 10px rgba(0,0,0,.06)}.twtdlApp .img{background:#fff;width:140px;height:140px;border:1px solid #353535;border-radius:15px;padding:5px;box-sizing:border-box;margin-bottom:20px}.twtdlApp .img img{border-radius:10px}.mod::after,.pro::after{content:'MOD';color:#fff;font-size:16px;font-weight:700;padding:2px 10px;background:#C92D1E;position:relative;bottom:145px;left:75px;border-radius:0 0 0 10px;box-shadow:-2px 5px 10px rgba(0,0,0,.05)}.pro::after{content:'PRO';padding:2px 13px}.twtdlSpec{list-style:none;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;font-size:inherit;margin:0;padding:0}.twtdlSpec > li{margin-bottom:4px}.twtdlApp.twtdlSpec > li svg{margin-right:10px;float:left}.twtdlSpec > li span:before{content:'';margin-right:10px;width:20px;height:20px;background-size:18px 18px;background-repeat:no-repeat;display:inline-flex;position:relative;top:6px}.twtdlSpec > li span:after{content:'' attr(itemprop);margin-right:10px;font-weight:700}.twttwtdlBtnW{display:block}.twttwtdlBtnW twtdlSpec{padding:0}.twtdlBtn{margin:10px 2px}.btn.btn-green,.btn.btn-blue{padding:5px 20px;width:100%;font-weight:500;opacity:0.9!important}.btn.btn-green:hover,.btn.btn-blue:hover{color:#de3535;border:2px solid #de3535;background:transparent}.btn.btn-green{background-color:#03875f;border:2px solid transparent;color:#fff}.btn.btn-blue{background-color:transparent;color:#03875f;border:2px solid #03875f}.btn,.ui-button{display:inline-block;padding:0.5rem 1rem;line-height:1.5rem;border-radius:1.5rem}.pub{font-size:12px;opacity:0.2}.pub svg{width:16px;height:16px;float:left;position:relative;top:5px;left:0;opacity:0.5}.drK .btn.btn-green:hover,.drK .btn.btn-blue:hover{color:#de3535;border:2px solid #de3535;background:rgba(0,0,0,.06)}.drK .mod::after,.drK .pro::after{background:#03875f}@media screen and (max-width:550px){.twtdlApp .img{width:120px;height:120px}.twtdlSpec > li{margin-bottom:0;font-size:14px}.twtdlSpec > li span:before{content:'';margin-right:10px;width:20px;height:20px;background-size:20px 20px;position:relative;top:4px}.twttwtdlBtnW{padding:5px;width:100%;display:block}.btn.btn-green,.btn.btn-blue{width:100%;padding:10px;text-align:center}.mod::after,.pro::after{top:-126px;left:56px}}@media screen and (max-width:360px){.twtdlApp .img{width:110px;height:110px}.twtdlSpec > li{margin-bottom:0;font-size:13px}.twtdlSpec{margin-top:-4px}.mod::after,.pro::after{top:-115px;left:45px}.twtdlSpec > li span:before{content:'';margin-right:6px;width:18px;height:18px;background-size:18px 18px;position:relative;top:4px}}
.icon.gp::before{background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='-0.788 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M16.538 15.668c2.844-1.561 4.999-2.751 5.185-2.843.594-.316 1.208-1.153 0-1.803-.39-.204-2.49-1.357-5.185-2.843l-3.735 3.772 3.735 3.717Z' fill='%23FFD900'/%3E%3Cpath d='M12.803 11.951.91 23.938c.28.036.595-.037.966-.242.78-.427 9.05-4.943 14.662-8.027l-3.735-3.718Z' fill='%23F43249'/%3E%3Cpath d='m12.803 11.951 3.735-3.753S2.713.653 1.876.207C1.561.02 1.208-.035.892.02l11.911 11.931Z' fill='%2300EE76'/%3E%3Cpath d='M12.803 11.951.892.02C.409.132 0 .559 0 1.433v21.092c0 .8.316 1.376.91 1.431l11.893-12.005Z' fill='%2300D3FF'/%3E%3C/svg%3E");position:relative;top:4px}.icon.apS::before{background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fefefe' fill-rule='evenodd' d='M15.3 3.832c.84-1.014 1.404-2.427 1.25-3.832-1.208.049-2.67.805-3.535 1.819-.777.898-1.457 2.335-1.273 3.712 1.346.105 2.722-.684 3.56-1.699m3.02 8.918c.034 3.632 3.186 4.841 3.22 4.857-.025.085-.502 1.722-1.66 3.413-1 1.462-2.038 2.919-3.674 2.949-1.607.029-2.123-.953-3.961-.953-1.836 0-2.41.923-3.932.982-1.578.06-2.78-1.581-3.79-3.037-2.06-2.98-3.635-8.42-1.52-12.092C4.054 7.045 5.932 5.89 7.97 5.861c1.55-.03 3.013 1.043 3.96 1.043.948 0 2.726-1.29 4.595-1.101.783.033 2.979.316 4.39 2.381-.114.07-2.621 1.53-2.594 4.566'/%3E%3C/svg%3E")}.icon.eye::before{background-image:url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath data-name='eye-Filled' d='M22.765 11.093c-1.397-2.318-4.517-6.218-9.772-6.218s-8.374 3.9-9.761 6.218a3.683 3.683 0 0 0 0 3.802c1.387 2.329 4.517 6.229 9.761 6.229s8.374-3.9 9.772-6.229A3.713 3.713 0 0 0 23.292 13a3.781 3.781 0 0 0-.527-1.907Zm-9.772 6.782A4.875 4.875 0 1 1 17.868 13a4.883 4.883 0 0 1-4.875 4.875Zm2.698-5.027a.715.715 0 0 1 .011.152 2.708 2.708 0 1 1-.975-2.08 1.101 1.101 0 0 0-.65.997A1.083 1.083 0 0 0 15.16 13a.981.981 0 0 0 .531-.152Z' style='fill:%2341416e'/%3E%3C/svg%3E")}.drK .icon.eye::before{background-image:url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath data-name='eye-Filled' d='M22.765 11.093c-1.397-2.318-4.517-6.218-9.772-6.218s-8.374 3.9-9.761 6.218a3.683 3.683 0 0 0 0 3.802c1.387 2.329 4.517 6.229 9.761 6.229s8.374-3.9 9.772-6.229A3.713 3.713 0 0 0 23.292 13a3.781 3.781 0 0 0-.527-1.907Zm-9.772 6.782A4.875 4.875 0 1 1 17.868 13a4.883 4.883 0 0 1-4.875 4.875Zm2.698-5.027a.715.715 0 0 1 .011.152 2.708 2.708 0 1 1-.975-2.08 1.101 1.101 0 0 0-.65.997A1.083 1.083 0 0 0 15.16 13a.981.981 0 0 0 .531-.152Z' style='fill:%23fefefe'/%3E%3C/svg%3E")}
.twtdlSpec > li:nth-child(1) > span:before{content:"";background-image:url("data:image/svg+xml,%3Csvg width='72' height='72' viewBox='0 0 72 72' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23B1CC33' fill-rule='evenodd' d='M20.653 28.06C11.303 33.396 5 43.462 5 55c0 .335.005.668.016 1h61.968c.01-.332.016-.665.016-1 0-11.537-6.303-21.603-15.653-26.94l4.853-8.406a2 2 0 0 0-3.464-2L47.743 26.3A30.912 30.912 0 0 0 36 24a30.91 30.91 0 0 0-11.743 2.301l-4.993-8.647a2 2 0 1 0-3.464 2l4.853 8.405Z' clip-rule='evenodd'/%3E%3Cpath d='m20.653 27.06.496.868a1 1 0 0 0 .37-1.369l-.866.5ZM5.016 55l-1 .032a1 1 0 0 0 1 .968v-1Zm61.968 0v1a1 1 0 0 0 1-.968l-1-.032ZM51.347 27.06l-.866-.5a1 1 0 0 0 .37 1.368l.496-.869Zm4.853-8.406.866.5-.866-.5Zm-.732-2.732.5-.867-.5.867Zm-2.732.732-.866-.5.866.5ZM47.743 25.3l-.379.926a1 1 0 0 0 1.245-.426l-.866-.5Zm-23.486 0-.866.5a1 1 0 0 0 1.245.426l-.379-.926Zm-4.993-8.647-.866.5.866-.5Zm-2.732-.732-.5-.867.5.867Zm-.732 2.732-.866.5.866-.5ZM6 54c0-11.164 6.098-20.905 15.149-26.072l-.992-1.737C10.508 31.7 4 42.089 4 54h2Zm.015.968C6.005 54.647 6 54.324 6 54H4c0 .345.005.69.016 1.032l2-.064ZM66.985 54H5.014v2h61.97v-2ZM66 54c0 .324-.005.647-.015.968l1.999.064c.01-.343.016-.687.016-1.032h-2ZM50.851 27.928C59.902 33.095 66 42.836 66 54h2c0-11.91-6.508-22.3-16.157-27.81l-.992 1.738Zm4.483-9.774-4.853 8.405 1.732 1 4.853-8.405-1.732-1Zm-.366-1.366a1 1 0 0 1 .366 1.366l1.732 1a3 3 0 0 0-1.098-4.098l-1 1.732Zm-1.366.366a1 1 0 0 1 1.366-.366l1-1.732a3 3 0 0 0-4.098 1.098l1.732 1ZM48.609 25.8l4.993-8.647-1.732-1-4.993 8.647 1.732 1ZM36 24c4.024 0 7.86.792 11.364 2.227l.758-1.85A31.91 31.91 0 0 0 36 22v2Zm-11.364 2.227A29.911 29.911 0 0 1 36 24v-2a31.91 31.91 0 0 0-12.122 2.376l.758 1.85Zm.487-1.426-4.993-8.647-1.732 1 4.993 8.647 1.732-1Zm-4.993-8.647a3 3 0 0 0-4.098-1.098l1 1.732a1 1 0 0 1 1.366.366l1.732-1Zm-4.098-1.098a3 3 0 0 0-1.098 4.098l1.732-1a1 1 0 0 1 .366-1.366l-1-1.732Zm-1.098 4.098 4.853 8.405 1.732-1-4.853-8.405-1.732 1Z'/%3E%3Ccircle cx='22.5' cy='42.5' r='2.5'/%3E%3Ccircle cx='49.5' cy='42.5' r='2.5'/%3E%3C/svg%3E")}.twtdlSpec > li:nth-child(2) > span:before{content:"";background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FE7A15' fill-rule='evenodd' d='M11.414.132a1.406 1.406 0 0 1 1.188 0l10.82 5.055a.421.421 0 0 1-.002.764l-10.905 5.017a1.215 1.215 0 0 1-1.016 0L.595 5.951a.42.42 0 0 1-.002-.764L11.413.132Zm12.009 11.526a.42.42 0 0 1-.003.764l-10.904 5.017a1.215 1.215 0 0 1-1.016 0L.595 12.422a.42.42 0 0 1-.002-.764l2.235-1.044a1.216 1.216 0 0 1 1.023-.003l7.649 3.52c.322.148.694.148 1.016 0l7.649-3.52a1.22 1.22 0 0 1 1.023.003l2.235 1.044Zm0 6.5a.42.42 0 0 1-.003.764l-10.904 5.017a1.215 1.215 0 0 1-1.016 0L.595 18.922a.42.42 0 0 1-.002-.764l2.235-1.044a1.216 1.216 0 0 1 1.023-.003l7.649 3.52c.322.148.694.148 1.016 0l7.649-3.52a1.22 1.22 0 0 1 1.023.003l2.235 1.044Z'/%3E%3C/svg%3E")}.twtdlSpec > li:nth-child(3) > span:before{content:"";background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='enable-background:new 0 0 392.598 392.598' xml:space='preserve' width='24' height='24'%3E%3Cpath style='fill:%23fff' d='M20.094 1.332H2.002A.667.667 0 0 0 1.334 2v19.997c0 .368.296.668.668.668h19.997a.667.667 0 0 0 .668-.668V3.905l-2.573-2.573z'/%3E%3Cpath style='fill:%2356ace0' d='M2.666 3.999v12.148h4.375c.368 0 .668.296.668.668a.667.667 0 0 1-.668.668H2.666v1.66h2.371c.368 0 .668.296.668.668s-.296.668-.668.668H2.76c.194.502.676.862 1.241.862h16.001c.735 0 1.332-.597 1.332-1.332V5.011c0-.356-.142-.696-.391-.945l-1.012-1.012a1.375 1.375 0 0 0-.644-.356v4.533a.667.667 0 0 1-.668.668H5.381a.667.667 0 0 1-.668-.668V2.664h-.712c-.735 0-1.335.6-1.335 1.335z'/%3E%3Cpath style='fill:%23194f82' d='M23.804 3.162 20.837.194A.67.67 0 0 0 20.362 0H2.002c-1.103 0-2 .897-2 2v19.997c0 1.107.897 2.004 2 2.004h19.997c1.103 0 2-.897 2-2V3.632a.676.676 0 0 0-.195-.47zM6.048 1.332h11.903v5.232H6.048V1.332zm16.618 20.664a.667.667 0 0 1-.668.668H2.002a.667.667 0 0 1-.668-.668V2c0-.368.296-.668.668-.668h2.715v5.904c0 .368.296.668.668.668H18.62a.667.667 0 0 0 .668-.668V1.332h.806l2.573 2.573-.001 18.091z'/%3E%3Cpath style='fill:%23ffc10d' d='M12 10.943a2.934 2.934 0 0 0-2.932 2.932A2.934 2.934 0 0 0 12 16.807c1.62 0 2.932-1.316 2.932-2.932S13.62 10.943 12 10.943zM6.048 1.332h11.904v5.232H6.048V1.332z'/%3E%3Cpath style='fill:%23194f82' d='M12 9.611a4.278 4.278 0 0 0-4.272 4.272A4.278 4.278 0 0 0 12 18.155c2.351 0 4.272-1.913 4.272-4.272S14.351 9.611 12 9.611zm0 7.204a2.934 2.934 0 0 1-2.932-2.932A2.934 2.934 0 0 1 12 10.951c1.62 0 2.932 1.316 2.932 2.932S13.62 16.815 12 16.815zm3.6-14.661a.667.667 0 0 0-.668.668v2.261c0 .368.296.668.668.668a.667.667 0 0 0 .668-.668V2.818a.663.663 0 0 0-.668-.664z'/%3E%3C/svg%3E")}.twtdlSpec > li:nth-child(4) > span:before{content:"";background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='enable-background:new 0 0 392.598 392.598' xml:space='preserve' width='24' height='24'%3E%3Cpath style='fill:%23fff' d='M21.336 20.653a.667.667 0 0 1-.668.668H3.339a.667.667 0 0 1-.668-.668V8.228H1.336v14.425h21.332V8.228h-1.332v12.425z'/%3E%3Cpath style='fill:%2356ace0' d='M20.495 5.343a.667.667 0 0 1-.668.668.667.667 0 0 1-.668-.668V3.675h-2.071v1.668a.667.667 0 0 1-.668.668.667.667 0 0 1-.668-.668V3.675H8.244v1.668c0 .368-.296.668-.668.668s-.668-.296-.668-.668V3.675H4.837v1.668a.667.667 0 0 1-.668.668.665.665 0 0 1-.668-.668V3.675H1.328v3.221H22.66V3.675h-2.174v1.668h.009z'/%3E%3Cpath style='fill:%23ffc10d' d='M4.537 13.65h-.533v6.339h16.001V8.228H4.003v1.423h1.866c.368 0 .668.296.668.668a.667.667 0 0 1-.668.668H4.003v1.328h.533a.667.667 0 1 1 .001 1.335z'/%3E%3Cpath style='fill:%23194f82' d='M23.336 2.343h-2.837V.676a.667.667 0 0 0-.668-.668.667.667 0 0 0-.668.668v1.668h-2.071V.676a.667.667 0 0 0-.668-.668.667.667 0 0 0-.668.668v1.668H8.244V.676c0-.368-.296-.668-.668-.668s-.668.296-.668.668v1.668H4.837V.676a.667.667 0 0 0-.668-.668.665.665 0 0 0-.668.668v1.668H.668A.666.666 0 0 0 0 3.011v20.313c0 .368.296.668.668.668h22.664a.667.667 0 0 0 .668-.668V3.011a.664.664 0 0 0-.664-.668zm-22 20.313V8.231h1.332v12.421c0 .368.296.668.668.668h17.333a.667.667 0 0 0 .668-.668V8.228h1.332v14.425H1.336v.003zm3.201-10.342h-.533v-1.332h1.865a.667.667 0 1 0 0-1.335H4.003V8.224h16.002v11.757H4.003V13.65h.533a.669.669 0 0 0 .001-1.336zm18.131-5.418H1.336V3.675H3.51v1.668c0 .368.296.668.668.668s.668-.296.668-.668V3.675h2.071v1.668c0 .368.296.668.668.668a.667.667 0 0 0 .668-.668V3.675h7.52v1.668c0 .368.296.668.668.668a.667.667 0 0 0 .668-.668V3.675h2.071v1.668c0 .368.296.668.668.668a.667.667 0 0 0 .668-.668V3.675h2.174v3.221h-.022z'/%3E%3Cpath style='fill:%23194f82' d='M9.117 11.879v5.019a.552.552 0 1 0 1.106 0v-5.58a.545.545 0 0 0-.541-.553h-.565a.552.552 0 0 0-.553.553.55.55 0 0 0 .553.561zm2.427 4.178h1.952v.842c0 .308.249.553.553.553a.554.554 0 0 0 .561-.553v-.842h.281a.552.552 0 0 0 .553-.553.56.56 0 0 0-.553-.561h-.281v-3.624a.554.554 0 0 0-.561-.553h-.281a.553.553 0 0 0-.486.296l-2.225 4.169c-.185.363.02.826.487.826zm1.952-3.028v1.913h-1.02l1.02-1.913z'/%3E%3C/svg%3E")}.note.sc::after{content:'\2713'}
Step 6: Save or Publish the html changes by clicking on this icon
How to use it?
Step 7: Then go to the post/page or place which you want to add App Post Widget
Step 8: Then if you are doing this in page/post 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 9: Now paste the following HTML code to that place
<!--[ Image App ]--> <div class="separator twtdlRator"> <img alt="Hay Day Android APK (Mod Version)" border="0" data-original-height="2304" data-original-width="4096" src="https://play-lh.googleusercontent.com/gUUwEehmhz1PGbDMODF7xflR7DlmFRwXpaftKOGdF_RY500_wFtHkrQwI1TnbUnA7A=w2560-h1440-rw"></div> <!--[ Title ]--> <div class='twtdlTitle'> <h2 class='twtdlTitle'>Download Hay Day APK</h2> <p>The most entertaining farm on Android</p> </div> <!--[ Apk Logo ]--> <div class="twtdlApp"> <div class='img mod'> <img class='fullN' style='border-radius:10px;' alt="PicsArt Pro Mod" itemprop="image" src="https://is4-ssl.mzstatic.com/image/thumb/Purple126/v4/4c/30/29/4c302963-8c11-26bf-c63e-6286eb984dd4/source/512x512bb.jpg"> </div> <!--[ Specifications ]--> <ul class="twtdlSpec"> <li> <span itemprop="OS"></span>Android 6.0+</li> <li> <span itemprop="Version"></span>1.53</li> <li> <span itemprop="File Size"></span>153 MB</li> <li> <span itemprop="Updated"></span>July 25, 2023</li> </ul> <!--[ Apk Download Btn ]--> <div class="twttwtdlBtnW"> <div class='twtdlBtn'> <a href='https://play.google.com/store/App/details?id=com.supercell.hayday&gl=US' rel='noreferer noopener' target='_blank'><button class='btn btn-green'><i class='icon gp'></i>Google Play</button></a> </div> <div class='twtdlBtn'> <button id='#twtdlBtnApk' class='btn btn-blue' href='#'><label for='checkPop'>Go to Download</label></button> </div> <!--[ Publisher ]--> <ul class='twtdlSpec sml'> <li style='margin-left:10px'><span itemprop="Publisher"></span>Supercell</li> </ul> </div> </div> <span><a name='more'></a></span>
Step 10: Then Save or Publish.
You can change the html text in the code box as you wish!
That's done!
Conclusion
In this article, I have shared How to Add App Details Widget with HTML and CSS on Play Store Like on Blogger, I hope you liked it please share it with your friends and for more information follow our blog.