Add subscribe form to blog

Author: odinserj

_includes/blog/recent.html

@@ -1,32 +1,34 @@
-<h4>Recent Posts</h4>
-<div>
-{% for post in site.posts  %}
-    {% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
-    {% capture this_month %}{{ post.date | date: "%B" }}{% endcapture %}
-    {% capture next_year %}{{ post.previous.date | date: "%Y" }}{% endcapture %}
-    {% capture next_month %}{{ post.previous.date | date: "%B" }}{% endcapture %}
+<div class="bs-sidenav hidden-print">
+    <h4>Recent Posts</h4>
+    <div>
+    {% for post in site.posts  %}
+        {% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
+        {% capture this_month %}{{ post.date | date: "%B" }}{% endcapture %}
+        {% capture next_year %}{{ post.previous.date | date: "%Y" }}{% endcapture %}
+        {% capture next_month %}{{ post.previous.date | date: "%B" }}{% endcapture %}
 
-    {% if forloop.first %}
-    <h5 id="{{ this_year }}-{{ this_month }}-ref">{{ this_month }} {{this_year}}</h5>
-    <ul>
-    {% endif %}
+        {% if forloop.first %}
+        <h5 id="{{ this_year }}-{{ this_month }}-ref">{{ this_month }} {{this_year}}</h5>
+        <ul>
+        {% endif %}
 
-    <li><a href="{{ post.url }}">{{ post.title }}</a></li>
+        <li><a href="{{ post.url }}">{{ post.title }}</a></li>
 
-    {% if forloop.last %}
-    </ul>
-    {% else %}
-        {% if this_year != next_year %}
+        {% if forloop.last %}
         </ul>
-        <h5 id="{{ next_year }}-{{ next_month }}-ref">{{ next_month }} {{next_year}}</h5>
-        <ul>
-        {% else %}    
-            {% if this_month != next_month %}
+        {% else %}
+            {% if this_year != next_year %}
             </ul>
-            <h5 id="{{ this_year }}-{{ next_month }}-ref">{{ next_month }} {{next_year}}</h5>
+            <h5 id="{{ next_year }}-{{ next_month }}-ref">{{ next_month }} {{next_year}}</h5>
             <ul>
+            {% else %}    
+                {% if this_month != next_month %}
+                </ul>
+                <h5 id="{{ this_year }}-{{ next_month }}-ref">{{ next_month }} {{next_year}}</h5>
+                <ul>
+                {% endif %}
             {% endif %}
         {% endif %}
-    {% endif %}
-{% endfor %}
+    {% endfor %}
+    </div>
 </div>

_includes/blog/related.html

@@ -1,12 +1,14 @@
 {% if site.related_posts.size > 0 %}
-<h4>Related Posts</h4>
-<ul class="related-posts">
-  {% for post in site.related_posts limit:3 %}
-    <li>
-      <a href="{{ post.url }}">
-        {{ post.title }}
-      </a>
-    </li>
-  {% endfor %}
-</ul>
+<div class="bs-sidenav hidden-print">
+	<h4>Related Posts</h4>
+	<ul class="related-posts">
+	  {% for post in site.related_posts limit:3 %}
+	    <li>
+	      <a href="{{ post.url }}">
+	        {{ post.title }}
+	      </a>
+	    </li>
+	  {% endfor %}
+	</ul>
+</div>
 {% endif %}

_includes/blog/sidebar.html

@@ -1,4 +1,3 @@
-<div class="bs-sidenav hidden-print">
-	{% include blog/recent.html %}
-	{% include blog/related.html %}
-</div>
+{% include blog/related.html %}
+{% include blog/subscribe.html %}
+{% include blog/recent.html %}

_includes/blog/subscribe.html

@@ -0,0 +1,15 @@
+<div class="bs-sidenav hidden-print">
+	<!-- Begin MailChimp Signup Form -->
+	<h4>Subscribe to newsletter</h4>
+	<div>
+		<form action="//hangfire.us9.list-manage.com/subscribe/post?u=d2f4abd4cd4d3b1db1b06dc02&amp;id=5a8dbbc33b" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate style="padding:0;">
+			<label for="mce-EMAIL">Email Address</label>
+			<div class="input-group">
+	      		<input type="email" value="" name="EMAIL" class="required email form-control" id="mce-EMAIL">
+	      		<span class="input-group-btn">
+	        		<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-default">
+	      		</span>
+	    	</div>
+		</form>
+	</div>
+</div>

css/hangfire.css

@@ -65,7 +65,7 @@ footer {
     margin-bottom: 20px;
 }
 
-.bs-sidenav div {
+.bs-sidenav > div {
     margin: 5px 20px 7px;
     color: #888;
 }