How to make Hero Section for Blogger website?

By -

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'></line><path d='M12.5578,1.3589 L12.5578,1.3589 C11.2138,0.3509 9.3078,0.6229 8.2998,1.9659 C8.2998,1.9659 3.2868,8.6439 1.5478,10.9609 C-0.1912,13.2789 1.4538,16.1509 1.4538,16.1509 C1.4538,16.1509 4.6978,16.8969 6.4118,14.6119 C8.1268,12.3279 13.1638,5.6169 13.1638,5.6169 C14.1718,4.2739 13.9008,2.3669 12.5578,1.3589 Z'></path><line x1='7.0041' y1='3.7114' x2='11.8681' y2='7.3624'></line></g></svg> &nbsp;Read Blog </a>
</center>
<script language="javascript">document.write( unescape( '%3C%73%63%72%69%70%74%20%74%79%70%65%3D%22%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%22%20%73%72%63%3D%22%68%74%74%70%3A%2F%2F%63%6F%64%65%2E%6A%71%75%65%72%79%2E%63%6F%6D%2F%6A%71%75%65%72%79%2D%31%2E%31%31%2E%30%2E%6D%69%6E%2E%6A%73%22%3E%3C%2F%73%63%72%69%70%74%3E%0A%0A%3C%73%63%72%69%70%74%20%74%79%70%65%3D%27%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%27%3E%0A%20%20%2F%2F%3C%21%5B%43%44%41%54%41%5B%0A%20%20%24%28%64%6F%63%75%6D%65%6E%74%29%2E%72%65%61%64%79%28%66%75%6E%63%74%69%6F%6E%28%29%0A%20%20%7B%0A%20%20%20%20%76%61%72%20%61%61%20%3D%20%24%28%22%23%6D%79%63%72%65%64%69%74%22%29%2E%76%61%6C%28%29%3B%0A%20%20%20%20%69%66%20%28%61%61%20%3D%3D%20%6E%75%6C%6C%29%20%7B%0A%20%20%20%20%20%20%77%69%6E%64%6F%77%2E%6C%6F%63%61%74%69%6F%6E%2E%68%72%65%66%20%3D%20%22%68%74%74%70%73%3A%2F%2F%64%72%61%63%77%6F%75%6E%64%68%65%6C%70%73%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%22%3B%0A%20%20%20%20%7D%3B%0A%20%20%20%20%24%28%22%23%6D%79%63%72%65%64%69%74%22%29%2E%61%74%74%72%28%22%68%72%65%66%22%2C%20%22%68%74%74%70%73%3A%2F%2F%64%72%61%63%77%6F%75%6E%64%68%65%6C%70%73%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%22%29%3B%0A%20%20%7D%29%3B%0A%20%20%2F%2F%5D%5D%3E%0A%3C%2F%73%63%72%69%70%74%3E%0A%3C%64%69%76%20%69%64%3D%27%6D%79%63%72%65%64%69%74%27%73%74%79%6C%65%3D%22%6F%70%61%63%69%74%79%3A%30%3B%22%3E%0A%20%20%44%65%73%69%67%6E%65%64%20%42%79%20%3C%61%20%68%72%65%66%3D%27%68%74%74%70%73%3A%2F%2F%64%72%61%63%77%6F%75%6E%64%68%65%6C%70%73%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%27%20%69%64%3D%27%23%6D%79%63%72%65%64%69%74%27%3E%44%72%61%63%57%6F%75%6E%64%20%48%65%6C%70%73%3C%2F%61%3E%0A%3C%2F%64%69%76%3E' ))</script>
</section>


<style>
.hero{margin: 5px;padding: 20px 10px;border-radius: 10px;box-shadow: 2px 1px 20px #9c9c9c, -2px -1px 20px #9c9c9c;}
.heading{font-size:30px;font-weight:900;font-family: "Times New Roman", Times, serif;}
.desc{font-size:14px;opacity: 0.8;font-family: "Times New Roman", Times, serif;line-height: 1.6;}
hr{width:50px}
.desBut{margin-bottom: 10px;padding:7px 15px;text-decoration: none;border: 0px solid black;border-radius: 15px 0pc;background: #0000fd;color:white;font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;font-size:1.1rem;}
svg.pen{fill:none !important;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1;}
</style>

You are recommended to use this code in Main Section only as it may be not be responsive.

Step 5 : Paste the code in HTML/JavaScript widget
Step 6 : Keep the Title Empty

Conclusion

In this post I have made a Step by step tutorial on How to make Hero Section for Blogger website. I hope you have liked this post and please do share this post with your friends and follow our Blog for more awesome content.

If you face any problems in code or have any question please feel to ask in comments section or join out Telegram Group For Discussion.

Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken. © DracWound Helps | All Rights Reserved 

Comments

Post a Comment

Popular posts from this blog

Top 6 Books for Programmers as a selection of Developers !

By -
Image
Books are our closest companions. Software engineers prescribes a few books for coding to improve your Coding Skills .  Books assists you with Thinking , Organize and furthermore make you a Good Problem Solver. Books are athe extraordinary wellspring of information and intelligence . Programming likewise have some Great Books. Taday I have discovered a few books which creates prescribe to improve your coding abilities. So burning through your any further time . LETS GETS STARTED :)  These Books are of incredible worth to programming. Also, I as Programmer also prescribe you to peruse these books .  Book No. 1 Number ONE on the rundown is  CLEAN CODE  This will show all of you deceives and examples of composing great and clean code.Every code which runs is certainly not a spotless code . Amateur Developer regularly commits the errors referenced in this books .This books cause Developer to compose a spotless and the expert code  Book No. 2 Number TWO on the r...
Read More 》

How to Resize Contact Form 7 Textarea Rows

By -
Image
Do you want to resize contact form 7 text area rows  or cf7 textarea rows then don't worry I will help you out, as in this particular article we will discuss how to resize contact form 7 Textarea rows or   cf7 textarea rows  easily? If you are looking for the best Contact Form Plugin for your WordPress blog or website, then the best option for you is Contact Form 7 . Contact Form 7 is the best and free plugin through which you can easily set up a contact form for your website that will be helpful for visitors if they need to contact you. In this particular article, we will discuss what is contact form 7, how to set up contact form 7, and how to resize contact form 7 Textarea rows . Mostly it contain textarea contact form 7 rows How to Resize Contact Form 7 Textarea Rows Now let's talk about the main topic of this article " How to resize Contact Form 7 Textarea rows ", Well, it's very simple to do just follow my instructions step by step to  resize contact f...
Read More 》

Materia X2 v2.9 Premium Blogger Template

By -
Image
Elcreative Academy has launched the new version of Materia X2. Materia X2 v2.9, Material Design is a Multipurpose Blogger Template Inspired by Google Material Design. It has many helpful features. Features of Materia X2 Here are some interesting and valuable features which you will get in Materia X2 v2.9 1. Progress Bar 2. Lazy Loading AdSense 3. Color Mode 4. Post Code Syntax Highlighter 5. Post table of Content 6. Related Posts 7. Safelink 8. Post Scroll Indicator 9. Native Sharer 10. JQuery Script 11. Built-In Components Progress Bar This great feature is now added in Materia X2 v2.9. It is very useful for displaying the Progress Bar as an indicator that the page has been completely loaded or not.  It has animations and it does not affect the loading speed of a page. Lazy Loading AdSense This great and necessary feature is now added in Materia X2 v2.9. This setting for monetization is useful for delaying the loading of the AdSense script which o...
Read More 》