Create One Page Download Page On Blogger

Today in this article, I'll walk you through the fancy description box on the Blogger website, step by step. So, follow the simple steps and learn more about how to create a fancy description field on Blogger.

Create Stylish Description Box New Looking Premium Template Free Template Download Section Seprate On This Stylish Discription Box 

See a demo of the description field widget before creating it.

How do I create a description field in Blogger?

You have to use HTML and CSS code to add the description field. Here we explain some of the steps to add this widget. But keep in mind that if you make a mistake somewhere, this description field won't work as expected, so follow the instructions carefully.

Why I Add This Description Box On My Blog :

Because Its To Diffrent Types Of Seprate Box With Icon And Clickable Link On This Description Page.

HOW TO ADD ON BLOGGER :

• Step 1 : On the Blogger toolbar, click Topic.
• Step 2 : Click the down arrow icon ᐁ next to the customize button.
• Step 3 : Click Edit HTML, you will be redirected to the edit page.
• Step 4 : Now find the code ]]></b:skin> and paste the following CSS codes just above it.

  HTML CODE

  <!-- Description Box HTML Codes by Vlogger-Blogger -->
  <div class="asdesc"><b>Premium Version</b>
  <p>Your Text Here</p>
  
  <a class="asbutton outline" href="#"><svg class='line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g transform='translate(2.000000, 2.500000)'><path d='M0.7501,0.7499 L2.8301,1.1099 L3.7931,12.5829 C3.8701,13.5199 4.6531,14.2389 5.5931,14.2359094 L16.5021,14.2359094 C17.3991,14.2379 18.1601,13.5779 18.2871,12.6899 L19.2361,6.1319 C19.3421,5.3989 18.8331,4.7189 18.1011,4.6129 C18.0371,4.6039 3.1641,4.5989 3.1641,4.5989'></path><line x1='12.1251' y1='8.2948' x2='14.8981' y2='8.2948'></line><path d='M5.1544,17.7025 C5.4554,17.7025 5.6984,17.9465 5.6984,18.2465 C5.6984,18.5475 5.4554,18.7915 5.1544,18.7915 C4.8534,18.7915 4.6104,18.5475 4.6104,18.2465 C4.6104,17.9465 4.8534,17.7025 5.1544,17.7025 Z'></path><path d='M16.4347,17.7025 C16.7357,17.7025 16.9797,17.9465 16.9797,18.2465 C16.9797,18.5475 16.7357,18.7915 16.4347,18.7915 C16.1337,18.7915 15.8907,18.5475 15.8907,18.2465 C15.8907,17.9465 16.1337,17.7025 16.4347,17.7025 Z'></path></g></svg>&nbsp;  Buy Now </a>
   </div>
  
    <div class="asdesc"><b>Free Version</b>
  <p>Your Text Here</p>
  
  <a class="asbutton outline" href="#"><svg data-name="Design Convert" id="Design_Convert" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><defs></defs><title/><path class="cls-1" d="M50,52H14a7,7,0,0,1-7-7V41a1,1,0,0,1,2,0v4a5,5,0,0,0,5,5H50a5,5,0,0,0,5-5V41a1,1,0,0,1,2,0v4A7,7,0,0,1,50,52Z"/><path class="cls-1" d="M32,41a1,1,0,0,1-1-1V13a1,1,0,0,1,2,0V40A1,1,0,0,1,32,41Z"/><path class="cls-1" d="M32,42a1,1,0,0,1-.71-.29l-10-10a1,1,0,0,1,1.42-1.42L32,39.59l9.29-9.3a1,1,0,0,1,1.42,1.42l-10,10A1,1,0,0,1,32,42Z"/></svg>&nbsp;  Download </a>
   </div>

  CSS CODE

  /* Description Box CSS Codes by Vlogger-Blogger */ 
  .asdesc{position:relative;display:inline-block;width:320px;margin:0 3px 30px;padding:20px; border:1px solid #eceff1; font-size:14px;line-height:1.8em;border-radius:15px;} .asdesc h3, .asdesc h4, .asdesc b{font-size:13px;font-weight:400; margin:0;padding:2px 14px;background-color:#282828;border:1px solid #eceff1;border-radius:15px; position:absolute;top:-15.5px;left:20px;color:#fefefe;} 
  .drkM .asdesc b{background-color:#252526}
  .asbutton{display:inline-flex;align-items:center; margin:12px 12px 12px 0;padding:10px 15px;outline:0;border:2px; border-radius:50px;line-height:20px; color:#fefefe; background-color:#204ecf; font-size:13px;font-family:'Noto Sans', sans-serif; white-space:nowrap;overflow:hidden;max-width:100%}.asbutton.outline{color:inherit; background-color:transparent; border:1px solid #eceff1} .asbutton.outline:hover{border-color:#204ecf}

This Blogger Website Is Provide You Blogger Template Documentation And Widget And Theme Editting Documentation So Subscribe And Follow For Up To Date With New Post