Blogger: Show Subscribe Dialogue From A Custom Button

Show Subscribe Dialogue From A Custom Button In Blogger

The responsive themes in Blogger are good looking, but sometimes you want to modify parts of it to your liking. And depending on what you want to see, the modification can be easy to impossible.

Personally, I do not like the location of the subscribe button, so I had to write an HTML/Javascript gadget. I thought it was going to be difficult, but surprisingly it was very straightforward. So I decided to create this post and share the steps that I took.


WARNING! Before you modify the theme, make sure you already have a backup. If you don’t know how to create a backup, you can check my guide on  “How To Back Up And Restore Themes In Blogger?”      

Note: This method only works on the themes Contempo, Soho, Emporio, Notable, and Essential.


Step 1: From the dashboard click “Layout”

Show Subscribe Dialogue In Blogger Step 1


Step 2: Click “Add a Gadget”

Show Subscribe Dialogue In Blogger Step 2


Step 3: Click “HTML/JavaScript”

Show Subscribe Dialogue In Blogger Step 3


Step 4: Copy the snippet below and paste it into the “Content” area

<style>
  /*Custom button styling*/
  .custom-sub-button {
    background-color: #f44336;
    border: none;
    color: #ffffff;
    font-weight: bold;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    border-radius: 16px;
    display: flex;
    margin: auto;
  }

  /*Apply hover color*/
  .custom-sub-button:hover {
    background: #2691DC;
  }
</style>

<button class="custom-sub-button" onclick="showSubcribeDialogue()">Subscribed</button>

<script>
  function showSubcribeDialogue() {
    // Get the built-in subscribe button(s)
    var buttons = document.getElementsByClassName("subscribe-button");

    // Sometimes their are more than 1 subscribe button
    // But only one is active
    // So use loop to click the active one
    for (var i = 0; i < buttons.length; i++) {
      buttons[i].click();
    }
  }
</script>

Show Subscribe Dialogue In Blogger Step 4


Step 4.5 (Optional): If you want to hide the built-in subscribe button, you can copy the snippet below, and paste it above the “</style>” or paste it on the custom CSS of the “Theme Designer”

/*Hide the built-in subscribe button*/
.subscribe-section-container .subscribe-button {
  display: none;
}

Show Subscribe Dialogue In Blogger Step 4.5


Step 5: Click “Save”

Show Subscribe Dialogue In Blogger Step 5


Step 6: Make sure that the “Follow by Email gadget” is visible

Show Subscribe Dialogue In Blogger Step 6


Result: On your blog, you should see a red subscribe button that can show a subscribed dialogue when clicked.

Show Subscribe Dialogue In Blogger Result


-End


Social Media & Contact

Croben Facebook Page
Croben Twitter Page
Croben Youtube Page
Croben Instagram Page
Croben Contact Page

Comments