Hello Guys, Welcome to TrickPk. Today in this article I will guide you step by step in the Stylish Description Box with Buttons on the Blogger Website. So, follow these simple steps and learn more about how to create a style box on Blogger.
Check out the Description Box widget demo before creating it.
How to Create a Description Box on Blogger?
You must use HTML and CSS code to add a description box. Below we describe some steps to add to this widget or code to our blog. But keep in mind that if you make a mistake somewhere in below steps then the description box will not work properly, so follow the steps carefully.
How To Create Description Box With Buttons
Step 1. In the Blogger Dashboard, click Theme.
Step 2. Click the down arrow icon next to the 'custom' button.
Step 3. Click Edit HTML, you will be directed to the edit page.
Step 4. Now search the code ]]></b:skin> and paste the following CSS Codes just above to it.
/* Description Box Button CSS Codes by TrickPk */
.TrickPk_des{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;} .TrickPk_desh3, .TrickPk_desh4, .TrickPk_des 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 .TrickPk_desb{background-color:#252526}
.TrickPk_btn{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:&amp;#39;Noto Sans&amp;#39;, sans-serif; white-space:nowrap;overflow:hidden;max-width:100%}.TrickPk_btn.outline{color:inherit; background-color:transparent; border:1px solid #eceff1} .TrickPk_btn.outline:hover{border-color:#204ecf}Step 5. Save your theme by clicking save icon.
Step 6. Now paste the following HTML code in post/page where you want to add description Box.
<!-- Description Box HTML Codes by TrickPk -->
<div class="TrickPk_des"><b>Premium Version</b>
<p>Your Text Here</p>
<a class="TrickPk_btn 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> Buy Now </a>
</div>
<div class="TrickPk_des"><b>Free Version</b>
<p>Your Text Here</p>
<a class="TrickPk_btn 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> Download </a>
</div>If the code does not work or you’ve faced any error/problem then please download the source code files from the given download button.
Finally Outcomes:
This is all about how to create Description Box in Blogger. I hope you won't have trouble making this widget. If you find this article useful, then share it and stay tuned to our blog to find some great tutorials.
Copyright © TrickPk