Posts

Showing posts from January, 2022

How to make Hero Section for Blogger website?

Image
In today's tutorial we have shared the tutorial for making HERO SECTION in Blogger Website.  Demo Let's see the demo Demo How to make Hero Section for Blogger Website? Step 1 : Login to your Blogger Dashboard Step 2 : Go to Layouts  Step 3 : Add a HTML/JavaScript Widget Step 4 : Copy the code given below <section class="hero"> <center><p class="heading">Welcome To DracWound Helps</p><p class="desc"> <b> DracWound Helps:</b> A place where you can find Blogging Templates, Plugins, Widgets codes, Tips and Tricks and many more thing absolutely for free.</p><hr /> <a class="desBut button"> <svg class="pen" xmlns='http://www.w3.org/2000/svg' class='line' viewbox='0 0 24 24'><g transform='translate(3.500000, 3.500000)'><line x1='9.8352' y1='16.0078' x2='16.2122' y2='16.0078'><

How to make Responsive Profile Card in Blogger

Image
You might have thought to make your About Us page more beautiful and professional. But you could not make it.  So have might have left your about us page as it is filled with unfruitful texts and heading. So today we have shared with your the tutorial for making a professional and beautiful Profile Card which you can put in your about us page also.  Features  Gives a professional look to your profiles/ about page Neat and Clean design Responsive and mobile friendly Simple and easy to customise UI is very smooth Demo Let's see the demo Demo How to Make Stylish Profile Card in Blogger? Step 1 : Login to your Blogger Dashboard.  Step 2 : Go to pages Step 3 : Make a New page and name it as you wish and switch to Edit HTML mode Step 4 : Copy all the code given below <style> @import url('https://fonts.googleapis.com/css2?family=Merriweather&display=swap');.fontMerri{font-family:'Merriweather',s

How To Make a Stylish Neumorphism Profile Card UI Design

Image
Making your About Page very clean, catchy, professional is very hectic task. Today we have share a tutorial of making a professional Profile Card for your About Us page.  Features : Clean UI Design Neumorphism Design Responsive and Mobile Friendly Easy to Customise Demo : Let's see the demo Demo How to make a Stylish Neumorphism Profile Card? Step 1 :  Login to your Blogger Dashboard. Step 2 :  Go to Themes. Step 3 :  Take a backup of your theme once. Step 4 :  Then go to Pages Step 5 :  Create a New Page. Step 6 :  Give the page its desired title. Step 7 :  Now copy the code from below. <!--Neumorphism Profile Card UI code by DracWound Helps--> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" /> <div class="wrapper"> <div class="img-a

Countdown Timer Script for Blogger

Image
Countdown Timer is very useful to attractive customers to generate leads for your blog or affiliates in a limited time.  Demo 90% Off on Blogger Themes ends in 00 Days 00 Hours 00 Minutes 00 Seconds Join Now How to add Countdown Timer? Step 1 : Go to your Blogger Dashboard. Step 2 : Go to Layout Step 3 : Add Html/Javascript widget This will not work in Sidebars so place the code in Main Content Area Step 4 : Paste the code given below in the widget Join us Now <style> .sectiontimer{padding:10px 0;border-radius:10px;box-shadow:2px 1px 20px #9c9c9c,-2px -1px 20px #9c9c9c;} .countdown-container{width:100%;display:flex;align-items:center;justify-content:center;} .sqBox{color:#000;width:100px;height:60px;padding:10px 5px 5px 5px;background-color:#efefef;border-radius:10px;margin:10px;font-family:'Franklin Gothic Medium','Arial Narrow',Arial,sans-serif;} .colFlex{display:flex;flex