Two Footer Sections Blog Title and Subscription Box For Blogger

Two Responsive Footer Sections with Subscription Form For Blogger

Today We are Sharing Full Width Footer Section With Blog Title And Email Subscription Form. This is a basic static Widget where you have to manually add the Blog Title and Subscription Details.

This widget also contains Social Media icons that links to your social pages like Facebook, Twitter, YouTube etc

Some of the important features we like to share are:

  1. This widget will transform your blog footer section and gives a beautiful look.
  2. Besides looking good this widget also poses a subscription form and blog title.
  3. This widget is responsive can fit any device.
  4. You can also customize the colours, icons, description etc
We have used some JavaScript to make this widget to append the body of the blog automatically. You just need to place the widget in the bottom section from your blog layout.

So Let start adding the widget it is very easy.

Adding The Widget For Blogger Users:

STEP 1: Log in to your Blogger account and Go to your Blogger Dashboard


Blogger Layout

STEP 2: In The Left Side Bar You will find Layout Section as highlighted in the image above Click on Layout.


Add a Gadget


STEP 3: Click On "Add a Gadget" As highlighted in the image above.



STEP 4: After Clicking on "Add a Gadget" Choose "HTML/JavaScript" from the list & as highlighted in the image above.

STEP 5:  Now Copy This Below Code And Paste it in The Empty Box of the "HTML/JavaScript" Section.

If you have already added JQuery and Oswald Font script in your blog then don't add this two scripts highlighted in red color.

Click on the code-box and press CTRL + A to select all and right click to copy or press CTRL + C To Copy.
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script>

<style>
    * {
        margin: 0px;
    }
    .ABT_Subs_Wrap {
        width: 100%;
        background: #070000;
        background: -webkit-linear-gradient(to right, #070000, #4C0001, #070000);
        background: linear-gradient(to right, #070000, #4C0001, #070000);
        font-family: 'Roboto Condensed', sans-serif;
        max-height: 300px;
        overflow: hidden;
    }
    .ABT_Subs_Wrap .ABT_Footer_Section {
        float: left;
        width: 50%;
        min-height: 300px;
    }
    .ABT_Site_Info {
        text-align: center;
    }
    .ABT_Site_Title {
        text-decoration: none;
        color: #fff;
        font-size: 35px!important;
        font-family: 'Roboto Condensed', sans-serif;
    }
    .ABT_Social_Buttons_Wrap .svg-inline--fa {
        display: inline-block;
        padding: 0px 5px;
    }
    .ABT_Social_Buttons_Wrap a {
        color: #fff;
    }
    .ABT_Social_Buttons_Wrap {
        font-size: 35px;
        color: #fff;
        margin: 20px 0px;
    }
    .ABT_Subscription_Form {
        margin-top: 80px;
    }
    .ABT_Subscription_Form form {
        width: 100%;
        max-width: 600px!important;
        color: white;
        margin-top: 30px;
    }
    .ABT_Subscription_Form p {
        color: #fff;
        max-width: 500px!important;
        position: relative;
        left: 0px;
        text-align: center;
        font-size: 18px;
    }
    .ABT_Subscription_Form #ABT_Feed_Email {
        border-radius: 2px;
        border: none!important;
        outline: none;
        background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVXMhPmsTfOFSyrBLh0U_qjSBJI8Eiz15mDUK25WMMgfODE0OugDKbDp6a8eOwXTOEwbYDeR-wYqtcRTpROK2RX7qcBAuRGjw9Iaf9fleIqWmYgtSy1kSZF1rYhdTtSvj1w9gl7WPUeTBQ/s1600/Email+Input+BG.png)no-repeat;
        background-position: 10px center;
        width: 55%;
        height: 40px;
        margin-right: 10px;
        font-size: 18px;
        color: #000;
        font-weight: 550;
        padding-left: 50px;
    }
    .ABT_Subscription_Form #ABT_Feed_Submit {
        border-radius: 2px;
        width: 35%;
        height: 40px;
        background: rgb(194, 22, 39);
        outline: none;
        border: none;
        color: white;
        font-size: 20px;
        font-weight: 550;
        cursor: pointer;
        display: inline-block;
        box-sizing: inherit;
    }
    .ABT_Footer_Section .ABT_Sub_head {
        font-weight: bold;
        font-size: 25px;
        text-shadow: 0px 0px 0.1 white;
        display: block;
        margin-bottom: 10px;
    }
    .ABT_Site_Info {
        margin: 100px auto;
    }
    .clear {
        clear: left
    }
    @media (max-width: 768px) {
        .ABT_Footer_Section {
            width: 100%!important;
            float: none!important;
        }
        .ABT_Subscription_Form p {
            margin: 0 auto;
        }
        .ABT_Subscription_Form {
            text-align: center!important;
            margin: 0px auto!important;
            width: 100%;
        }
        .ABT_Subscription_Form form {
            text-align: center!important;
            width: 100%;
            margin: 30px auto;
        }
        #ABT_Feed_Email {
            width: 99%!important;
            margin: 0 auto!important;
            border-radius: 5px;
            left: 0px;
            position: relative;
            padding-left: 50px
        }
        #ABT_Feed_Submit {
            width: 98%!important;
            margin: 0 auto!important;
            border-radius: 5px;
            top: 10px;
            left: 0px;
            position: relative;
        }
        .ABT_Site_Info {
            margin: 0px!important;
            padding-top: 50px;
        }
        .ABT_Subs_Wrap {
            max-height: none;
        }
    }
</style>
<div class="ABT_Subs_Wrap">
    <div class="ABT_Footer_Section ABT_Site_Info">
        <div class="ABT_Site_Title">
            <h3>All Blogger Tricks</h3>
        </div>
        <div class="ABT_Social_Buttons_Wrap">
            <span class="socialFollowButtons">
                 
                 <a href="#" rel='nofollow' target='_blank'><i class="fab fa-facebook"></i></a>
                 
              </span>
            <span class="socialFollowButtons">
                 
                  <a href="#" rel='nofollow' target='_blank'><i class="fab fa-twitter"></i></a>
                 
              </span>
            <span class="socialFollowButtons">
                 
                  <a href="#" rel='nofollow' target='_blank'><i class="fab fa-google-plus-g"></i></a>
                 
              </span>
            <span class="socialFollowButtons">
                 
                  <a href="#" ><i class="fas fa-rss"></i></a>
                 
              </span>  <span class="socialFollowButtons">
                 
                  <a href="#" rel='nofollow' target='_blank'><i class="fab fa-youtube"></i></a>
                 
              </span>
        </div>
    </div>
    <div class="ABT_Subscription_Form ABT_Footer_Section">
        <p id='ABT_Foot_Summ'><span class="ABT_Sub_head">Subscribe This Blog And Get Latest Updates</span>
            Enter your email address to subscribe to this blog and receive notifications of new posts by email.</p>
        <form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=AllBloggerTricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
            <input type="text" name="email" id='ABT_Feed_Email' placeholder='Please Enter Your Email' />
            <input type="hidden" value="AllBloggerTricks" name="uri" />
            <input type="hidden" name="loc" value="en_US" />
            <input type="submit" id='ABT_Feed_Submit' value="Subscribe" />
        </form>
    </div>
    <div class="clear"></div>
</div>

<script>
    var widget = document.querySelector(".ABT_Subs_Wrap");
    document.getElementsByTagName("body")[0].appendChild(widget);
</script>

Customization:

  • The Red Highlighted Text is responsible for Font Link, Font-awesome Script if you already included this style-sheet and script in your blog template then please don't add this both in your blog .
  • The Orange Highlighted Text is Responsible for The Title of your blog change this with yours.
  • The Light-blue Highlighted Text is Responsible For Social Media Pages Replace # with your links.

JavaScript Part:

  • The Light-green Highlighted Text is Responsible For The Feedburner Feed Address Name. Replace it with yours
  • The Dark-Blue Highlighted Text is Responsible For Javascript to add the widget at the end of the body which means footer if you want to place this widget at your preferred location then remove the blue lines of code..
STEP 6:  All Done Save the Gadget and Check it in your blog.

Adding in other static websites:

Just copy the main Block of code given above and paste it where ever you want the slider should appear. If you are facing problems then contact us we will help you.

Conclusion:

This is the basic footer section with the brand name and Subscription form we will update this widget and make it more dynamic that automatically takes the title and description and has more customizing options.  

And those who have added this widget successfully without any hurdles congrats to them. and if you want any styling or improvement notify us we will try to add it for you.

That's It Thanks For Following our Tutorial '' Responsive Footer Section with and Subscription Form For Blogger '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.

3 comments:

  1. Hello. I want this to be on a static page. How to do it?

    ReplyDelete
    Replies
    1. Just Copy the code and paste where ever you want the widget to appear. if you want this on a static page the open the page switch to html section and paste the code which you have copied from here.

      Delete