When it comes to adding an App box to your WordPress Website, you can easily achieve it using the famous WP-Appbox plugin. But What about Blogger? We will be showing you today how to add a stylish App Box widget or plugin to your Blogger blog.
Our Blogger stylish App Box widget is a pure CSS & HTML widget and won't slow down your website performance at all. Also, by using it, you will give your Blogger site a more professional look and WordPress-like feel.
Although this Blogger App Box or Appbox might not be automatic to use as the WordPress plugin, you won't have to do any serious modifications or coding in order to use it.
Blogger stylish App Box Widget/plugin
We got inspired by the WordPress App Box and crafted this widget. Current, we are using it on one of our websites where we share iPhone IPA files and news.
Below is a sample preview of how the Blogger App Box widget looks like.
Adding the App Box to your Blogger blog.
As we said earlier, this widget is pure CSS and HTML, so, to use it, you will need to add the CSS and HTML codes to your blog.
Adding the CSS code
Depending on you, you can either add the CSS code only on the post page in question or in your blog theme.
- To add the CSS code to your blog template, from your Blogger dashboard, go to Theme > Edit HTML.
- Now in your theme editor, search for the tag ]]></b:skin> and paste the CSS just before it. Alternatively, you can add it as a style inside the head section of your theme.
- Save your theme and exit.
And if you will like to put it only on the specific post page for fear that it might get deleted during your theme update or a change of template, proceed as follows:
- From the post editor, switch to HTML view
- Copy the code from below and past it in HTML view.
.itsappleos-appbox{
background-color: #f9f9f9;
border-radius: 8px;
border: 1px solid rgb(229, 229, 229);
box-shadow: rgba(0, 0, 0, 0.11) 0px 0px 8px 1px;
clear: both;
color: #545450;
font-family: "Open Sans", Arial; font-size: 16px; height: 114px;
line-height: 1;
margin: 16px 0px;
padding: 0px;
width: auto;
}
.appicon{
background: rgb(255, 255, 255);
border-bottom-color: initial;
border-bottom-left-radius: 6px;
border-bottom-style: initial;
border-image: initial;
border-left-color: initial;
border-left-style: initial;
border-right-color: rgb(229, 229, 229);
border-right-style: solid;
border-top-color: initial;
border-top-left-radius: 6px;
border-top-style: initial;
border-width: 0px 1px 0px 0px; box-sizing:
border-box; float: left;
height: 112px;
margin: 0px;
padding: 10px;
position: relative;
text-align: center;
width: 112px;
}
.icon-img{
border-radius: 6px; border: 0px; box-sizing: border-box; height: 92px; margin: auto; max-height: 92px; max-width: 92px; object-fit: cover; transition: all 0.5s ease 0s; width: 92px;
}
.applinks{
background-attachment: initial;
background-clip: initial;
background-color: white;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWKmuQEGXrTZGCl39AKDVKhXYjkH8wf3Qho3l-St_nbgKg7XtkAAkuC2IHnGqznY-zZhgjvzMQ08ilaR6wPThrU1qc0lewv2i-WadJ0SwnR4xoXbgGnHlUZB8dVcl4yK8PD7VnygriXJDk/s512/iaos512.png');
background-origin: initial;
background-position: center 7px !important;
background-repeat: no-repeat !important;
background-size: auto 42px !important;
border-bottom-color: initial;
border-bottom-right-radius: 6px;
border-bottom-style: initial;
border-image: initial;
border-left-color: rgb(229, 229, 229);
border-left-style: solid;
border-right-color: initial;
border-right-style: initial;
border-top-color: initial;
border-top-right-radius: 6px;
border-top-style: initial;
border-width: 0px 0px 0px 1px;
box-sizing: border-box;
float: right;
height: 112px;
margin: 0px;
padding: 0px;
position: relative;
text-align: center;
width: 92px;
}
.appbuttons{
border: 0px; bottom: 1px; box-sizing: border-box; margin: 0px; padding: 0px; position: absolute; width: 92px;
}
.appbuttons a{
background: rgb(241, 241, 241); border-radius: 3px; border: 0px; box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 3px 0px; box-sizing: border-box; color: #323232; cursor: pointer; display: block; font-size: 13px; margin: 8px 10px; overflow: hidden; padding: 3px 5px; text-decoration-line: none !important; text-overflow: ellipsis; transition: color 0.2s ease 0s, background-color 0s ease 0s; white-space: nowrap;
}
.app-status{
background: rgb(241, 241, 241); border-radius: 3px; border: 0px; box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 3px 0px; box-sizing: border-box; color: red; cursor: pointer; display: block; font-size: 13px; margin: 8px 10px; overflow: hidden; padding: 3px 5px; text-overflow: ellipsis; white-space: nowrap;
}
.appdetails{
border: 0px; box-sizing: border-box; line-height: 16px; margin: 0px; padding: 10px 0px 0px;font-size: 19px; font-weight: 600; hyphens: none; line-height: 19px; margin: 2px 0px 0px; overflow: hidden; padding: 6px 8px; text-overflow: ellipsis; white-space: nowrap;
}
.apptitle, .a{
background-color: transparent;
border: 0px;
box-sizing: border-box;
color: #545450;
margin: 0px;
padding: 0px;
text-decoration: none;
transition: color 0.2s ease 0s,
background-color 0s ease 0s;
}
.developer{
border: 0px; box-sizing: border-box; hyphens: none; margin: 0px; overflow: hidden; padding: 6px 8px; text-overflow: ellipsis; white-space: nowrap;
}
.dev-label, .dev-value, .app-rating, .theprice-label, .theprice-value{
border: 0px; box-sizing: border-box; margin: 0px; padding: 0px;
}
.theprice{
border: 0px; box-sizing: border-box; hyphens: none; margin: 0px; overflow: hidden; padding: 6px 8px; text-overflow: ellipsis; white-space: nowrap;
}
You will have to put the above CSS code inside the <style>... </style> tag if you are to add to your post page instead of the theme skin.
Also, in order to change the store icon, you will have to change the background image highlighted in red in the CSS code provided above.
The App Box widget HTML code
The HTML is the part of the APP Box widget that will display the contents. You will need to add the following code where you want the widget to display.
<div id="B-appbox">
<div class="itsappleos-appbox">
<div class="appicon">
<img alt="APP ALT" class="icon-img" data-lazy-loaded="1" src="APP ICON URL" />
</div>
<div class="applinks">
<div class="appbuttons">
<a href="APP LINK" target="_blank">Download</a><span class="app-status">APK</span>
</div>
</div>
<div class="appdetails">
<a class="apptitle" href="URL" target="_blank" title="APP NAME HERE">APP NAME HERE</a></div>
<div class="developer"><span class="dev-label">Developer: </span><span class="dev-value"><a href="APP DEV LINK" target="_blank">APP DEV</a></span>
</div>
<div class="theprice">
<span class="theprice-label">Price </span>
<span class="theprice-value">APP PRICE</span> <span class="app-rating"><i class="fa fa-star"></i> APP RATING VALUE</span>
</div>
</div>
Customize the widget as follows:
- Change "APP ALT" and "APP ICON URL" marked in blue to that of your app name and icon URL
- "APP LINK" marked red to the download link of the app.
- Change "APK" to IPA (for iPhone) or any other extension of your app.
- After the <div class="appdetails"> tag, change the URL to either that of the post or download URL.
- Change also the title text and URL link text. Note that the URL link text and title tag value are to be the same (the app name). The value is represented by the text "APP NAME HERE".
- Change "APP DEV LINK" and "APP DEV" to the link to the app developer and developer's name respectively.
- And finally, change "APP PRICE" and "APP RATING VALUE" to the price of the app and it's rating respectively
Congrats, you will have then successfully added the stylish Blogger App Box widget to your site.
Post a Comment (0)