How to integrate Mailmunch with Feedburner

I used to rely on Feedburner to deliver daily email digests to my subscribers. But their opt-in form is very limited in terms of design, and I couldn't find the right code to turn it into a popover that's responsive and non-invasive ('cos don't we all hate popups?).

Then I saw this pretty form from other blogs and immediately signed up to get one too.

I joined Mailmunch mainly because their form is pretty, responsive, and has flexible display options.

But just recently, I discovered that while I'm getting a bunch of email subscribers, I couldn't do anything with them. I couldn't send email blasts and updates. I can only stare at the list, and maybe manually add them to my Feedburner list. I wanted to sync the list to my Feedburner subscriber base so they could receive regular digests as well, but there is no straightforward option.

As of writing, Mailmunch doesn't have any option to integrate with Feedburner yet. But after googling about it, I stumbled upon this tutorial that shows you how to integrate the Feedburner opt-in form to the Mailmunch popover.

The result is successful!

Now, everyone who subscribes to this form will now be part of my Feedburner list. They will not appear in my Mailmunch list though, but they can finally receive blog updates to their email addresses. Yay!

If you want the same results, read on!

Prerequisites

1. Feedburner account with active Email Subscriptions

2. Mailmunch popover that is active on your blog/site

3. UNDERSTANDING that this is not an official integration, but more of a hack where you can use the Mailmunch popover to display your Feedburner opt-in form instead. In the future, we'd like the two to team up to provide this feature. But until that happens, this should serve as a good trick.

Steps

1. Login to Mailmunch and edit your form

2. Navigate to Fields and select Custom HTML under Choose Layout

3. Paste the following code into the HTML field, and make sure to replace YourFeedburnerID with... well, your Feedburner ID hehe

<form style="padding:3px;
             text-align:center;" 
      action="https://feedburner.google.com/fb/a/mailverify" 
      method="post" 
      target="popupwindow" 
      onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=YourFeedburnerID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
  <input type="text" 
         style="display: block;
                border: 1px solid #ccc;
                color: rgba(0,0,0,0.75);
                font-size: 14px;
                font-weight: normal;
                font-family: inherit;
                padding: 8px;
                height: 37px;
                width: 100%;
                margin-top:-10px;
                margin-bottom: 15px;" 
         name="email" 
         placeholder="Enter your email"/>
  <input type="hidden" value="YourFeedburnerID" name="uri"/>
  <input type="hidden" name="loc" value="en_US"/>
  <input type="submit" 
         style="min-width: 30%;
                padding: 10px 20px;
                margin: 0 auto;
                border: 0;
                -moz-border-radius: 3px;
                -webkit-border-radius: 3px;
                border-radius: 3px;
                font-weight: normal;
                display: block;
                width: auto;
                height: 55px;
                font-size: 14px;
                text-align: center;
                max-width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                color: #000000;
       background-color: #faae1e;"
         value="Subscribe" />
  <p style="font-size:12px; 
            color: #333;
            margin-top:10px;
            text-align:left">
    Delivered by <a href="https://feedburner.google.com" target="_blank">FeedBurner</a></br>
    Promise, no spam! You may unsubscribe anytime.
  </p>
</form>

<style type="text/css">
  .foot-note{
   display:none;
  }
  a:active, a:link{
   color:#d6464f;
   text-decoration: none;
  }
  a:hover{
   color: #368fe2;
  }
</style>

I have customized the code to reflect the original style of the Mailmunch opt-in form.

4. Save and publish, and you're done!

I hope this works for you as it did with me. If you have any questions, feel free to ask by commenting, I'll do my best to answer! :) If you want to see the form live: on the navigation bar above, hover on Follow, and click Subscribe, the form should appear. :D

[Tutorial] How to rotate photos in Blogger

Let me tell you, there is no easy way to do this. I was hoping it will come as an update from Blogger but I got tired of waiting. It should be a basic feature when uploading photos, but oh well.

Anyway, here you go:

After uploading a photo and finding that it's rotated at the wrong angle...

1. Open Picasa web albums
You should know that all your photo uploads at blogger are deposited here.

2. Open your blog directory
It should contain all the photos you've uploaded. By default, your folder is named after your blog. If you can't find it, maybe you can "View All". It should be there hehe

3. Find the photo you want to rotate
Since it's a recent photo, it could be all the way down. To make it easier, sort the album by date. How? Click on "Organize", then on the "Sort photos by..." dropdown list, select "date (newest first)". Then click Done.

4. Open the photo and "Edit in Google+"
When you open the photo at Picasa you may find that the rotate left/right icons are disabled. God knows why! What you have to do is click on "Action" and select "Edit in Google+". It will load a new window where, THANK GOD, the rotate buttons are finally enabled!

5. Rotate and go back to blogger :D
It will be saved automatically. Now you can go back to your blog post, select "Insert Image" and look for the photo you've just rotated under the "From this blog" tab. It's probably all the way down, bummer, I don't think there's a sort by feature for this! XD

That should be all! Hope this helps! :D