How to add Details Box in blogger, details box code for blogger.

0 Yogendra Patel 6:33 AM

You can use this details box for providing information of your contents to users for better experience and taking there attendance this details Box is attractive and looking beautiful witch make your content good and attractive to users.

How to Apply:-

it's easy to use just copy this Html and CSS code given below then go to your post were you want to provide some information to users and paste,

if You want to use this details Box in multiple Post then you can paste CSS code in blogger Theme - Edit HTML section for easily access in multiple post by using HTML code , whenever you apply CSS code in in theme-Edit HTML section, remove <style>and </style> tag and paste CSS Code above "]]></b:skin>"

then paste Html code in your post, and write information unders <span> section.

HTML Code

 
     <!-----Details Box Html code------>

<div class="Details-Box">

<span><b>Name :</b>flowers</span>

<span><b>Size :</b>2MB</span>

<span><b>Release :</b> 09 October 2024</span>

<span><b>Country :</b>India</span>

<span><b>Downloads:</b> 2354</span>

<span><b>Tagline:</b>Beutiful flowers</span>

<span><b>Rate:</b> PG-13</span>

<span><b>Language:</b> English, Hindi</span>

</div>

CSS Code

     <!-------Details Box CSS Code------->

<style>

.abc{}

.Details-Box {
    float: left;
    margin: 1rem 0;
    background: #e3ffc6;
    position: relative;
    display: block;
    padding: 1.88rem;
    border-radius: 0.19rem;
    color: #0E0E1B;
    line-height: 1.63rem;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.Details-Box span {
     display: block;
     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

</style>

        