Redirecting HTTP to HTTPS in Magento 2 for Bitnami AWS Stack

Recently while setting up a Magento 2 store on AWS using Bitnami's Magento Stack I ran into the problem of HTTPS redirection, while visiting the site with http:// it wouldn't redirect to the https:// version, even after searching for solutions on official docs, nothing worked, however I found a simple solution that did the trick.


This guide is for advanced users who are comfortable working with core configuration files and knows how to access, edit and save these files. If you are a general user and looking to achieve the results then I would recommend you to hire a professional who can help you do it.

Coming back to the problem, so the site was accessible from both the insecure (http://) and secure (https://) protocol independently, however we intended the behavior to be such that going to the insecure URL should redirect to the secure one - unfortunately for some reasons Magento 2 doesn't provide that option in the Admin's settings.

I had to dig very deeper and had to try with multiple .conf files to finally find the one that actually work, but before that's let get an overview of the situation.

Bitnami's Official Documentation Didn't Help

The official page where it documents how to force redirect HTTP to HTTPS didn't work. It instructs to edit the Apache virtual host configuration file at installdir/apache2/conf/bitnami/bitnami.conf (which is /opt/bitnami/apache2/conf/bitnami/bitnami.conf for Bitnami Magento stack)

In that file I added 

RewriteEngine On
  RewriteCond %{HTTPS} !=on
  RewriteRule ^/(.*) https://%{SERVER_NAME}/$1 [R,L]

And then restarted Apache server using:

sudo /opt/bitnami/ctlscript.sh restart apache

However, that didn't resolve the issue. One thing was obvious that it has to be one of the .conf or .htaccess files where I needed to add this. The next section will describe how.

The .conf file that worked

The official documentation contributed in confusion, however, after several attempts I found the right file to place that HTACCESS rule. 

It was: /opt/bitnami/apache2/conf/bitnami/httpd.conf

I used WinSCP to log-into SFTP and access the files easily and edit it

At the end of that file add this

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTPS} !=on
  RewriteRule ^/(.*) https://%{SERVER_NAME}/$1 [R,L]
</IfModule>

And save. Now use the command to restart the Apache server, now to test the site, do that in an Incognito window so you are not confused by cached pages.

This worked for me, and I hope it does for you as well, if you are facing an issue please do let me know in the comments. 

Add Happy New Year Message to your Blog 2018

The new year is hours away, why not celebrate the joy of the welcoming the year 2018 with the ones who visits your blog?

Let's put a smile on everyone's faces who visits your blog by wishing them a happy new year when they open your website up for the first time.


We've created a small set of photos that you can add to your Blogger blog using a few lines of HTML, CSS and JavaScript code, no coding knowledge required, you have have to know the basics of editing HTML templates. All you are going to do is basic copying-pasting.

The new year is just hours away so without wasting much time let's get on with the tutorial.

Before we begin, here's a quick demo of what you will be adding: Demo Hosted on JSBin

The code that you need

The new message is basically an image that is shown interactively using JavaScript and the way it is displayed using CSS as well. The entire code here is a mixture of HTML, CSS and JavaScript code.

Copy the code:

<div class="new-year-message" id="stramaxon_new_year_message"></div>
  <style>
    .new-year-message {
      display: none;
      opacity: 0;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      transition: .5s all ease-in-out;
      z-index: 99999;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      background-attachment: fixed;
      background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizdj3FJait56mKMFM_iTeNZYt4jfI4Cqyx9ZG4TtdS16zwaYVyJ96MoIeuuH9Mr5a-DCkabCQUPJPveTIjqfZ6qVrx7E0DMS1kgj0Vwn6lVHZB4ih_REe-icnX6lCPJj-PCTFPy91DjKeA/s1600/happy-new-year-3-t.jpg");
    }
  </style>
  
  <script>
    document.addEventListener("DOMContentLoaded", function(){
      var seconds = 5; // Number of seconds you want the message to be visible 
      var show = true;
      var message = document.getElementById("stramaxon_new_year_message");
      
      // Check if the message has been shown before
      if ( window.localStorage ) {
        if ( !localStorage.getItem("stramaxonNewYearMessage") ) {
          show = true;
        }
        else {
          show = false;
        }
      }
      
      // Show and click to close
      if ( show  ) {
        _fadeIn( message );
        
        setTimeout(function(){
          _fadeOut( message );
        }, seconds * 1000 );
        
        if ( window.localStorage ) {
          localStorage.setItem("stramaxonNewYearMessage", "shown")
        }
      }
      else {
        // don't show
      }
      message.addEventListener("click", function(){
        _fadeOut(this);
      });
    });
    
     function _fadeOut(el){
      el.style.opacity = 1;
      (function fade() {
        if ((el.style.opacity -= .1) < 0) {
          el.style.display = "none";
        } else {
          requestAnimationFrame(fade);
        }
      })();
    };
    
    function _fadeIn(el, display){
      el.style.opacity = 0;
      el.style.display = display || "block";
      (function fade() {
        var val = parseFloat(el.style.opacity);
        if (!((val += .1) > 1)) {
          el.style.opacity = val;
          requestAnimationFrame(fade);
        }
      })();
    };
    
  </script>

Add it to your blog

After you have copied the entire code, the next step is to add it to your blog to actually display the new year message on your blog. 

The easiest and safest method to add a new block of code on a Blogger blog is to add it using an HTML/JavaScript widget, follow the steps to add one to your blog:

1. Log-into your Blogger dashboard
2. On your blog's dashboard, go to the Layout section
3. In the sidebar or a footer section, you may see "Add a Gadget" link, click open it
4. In the list of gadgets you will find "HTML/JavaScript" to add it click on the plus icon next to it. 
5. You will now see a text-box under "Content", this is where you have to paste the copied code. Leave the "Title" field empty since we do not want the widget box to be apparently visible on the blog.
   
   
   
6. Hit "Save" and that's it. 

You have successfully added the code that was required to add a simple, fade-in fade-out new year message on your blogger blog. 

I want a different image

As promised we will be providing a set of images that you can use depending on your blog's style and your taste. It is fairly easy to change which image you want to show. 

1. In the code that you pasted in the HTML/JavaScript gadget, find the following line
   
   

   background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizdj3FJait56mKMFM_iTeNZYt4jfI4Cqyx9ZG4TtdS16zwaYVyJ96MoIeuuH9Mr5a-DCkabCQUPJPveTIjqfZ6qVrx7E0DMS1kgj0Vwn6lVHZB4ih_REe-icnX6lCPJj-PCTFPy91DjKeA/s1600/happy-new-year-3-t.jpg");

   
   
2. As the name suggests it tells the browser which image to load. The URL inside url() is the link to the image we are using. All you have to do is replace it with the URL of the image you would like to use. 

Here are the links to four different images that we prepared for you to use (right click on the link and copy link address):

1. Copy full-size image address (default)
   
   
   
2. Copy full-size image address
   
   
   
3. Copy full-size image address
   
   
   
4. Copy full-size image address
   
   
   

Why I don't see it?

If you added the codes properly and you still can't see the message then it can be for two reasons:

1. Either JavaScript is disabled in your browser. To fix it please look for ways to enable JavaScript in the browser you are using. 
2. In case you only were able to see it for the first time you loaded your blog and it doesn't show up after that, then it is not a problem, as the message is set to display only once for a person. You do not want to obstruct a reader's experience every time they visit a different page on your blog with the same message banner. If you just want to check how it looks then fire up a Incognito or Private browsing mode in your browser and load the blog. 

That's it. We hope you find this useful and also wish you a very happy new year! 

See you in 2018. 

New Year, A New Beginning for StramaXon and Me

I started this blog back in the year 2011 when I was still a young enthusiast who had a craze for creating, creating just about anything that he found to be useful for people, to share what he knew and to help and connect with people.


Over these years many things changed, the blog itself went through a lot of make-overs. The content however remained pretty much same in nature - to share the knowledge I have with you all.

Starting with Blogger, I stepped into even broader topics, like web design itself though I always wanted this blog to be only about one topic but I soon found out it was neither wise nor good for the blog itself.

Many tutorials were posted on this blog, everything about Blogger. In the past couple of years, I however failed to write much, a lot of things kept me occupied, academic and work related as well as personal reasons.

I was unable to do for most of the part during the last couple of years and that was to write blog posts here. Somewhere during that time I wanted to start writing blogs again but I was too busy on web development / designing work I had forgot what Blogger was (not in its literal sense!), to be able to write about something you had to be consistent in using that, finding out what needed to covered, but I was unable to do so and that resulted in many many months of no blog posts.

Though, that's the story of past, a new year is awaits. We all know new year's resolutions don't turn out to be great as always, though in this case my new resolution is about something that I love - to write blogs and help people, and this is what I am going to do in 2018 and so on.

Most of the subscribers and readers of the blogs came here for Blogger related topics, and I am going to continue with Blogger and I am sure you will also love the content on topics ranging from Blogger to App Development. If you are a reader of this blog you may know that my blog posts even related to coding are very simplified and aimed at non-coders and that's what it is going to be with the new categories on the blog.

I hope you find my blog useful and find something new to learn. A lot of new content is coming and with it a new look for StramaXon!

Wish you all a very happy new year in advance.


Deepak Kamat

Trouble Adding AdSense Code for Page-Level Ads? Learn how to fix it.

In order to add the Page-Level ads functionality from AdSense on your Blogger blog you are required to place a code that AdSense provides which is :

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"/>

Unfortunately if you have tried placing the code in your theme you may have run into this error that states:

Error parsing XML, line n, column n: Attribute name "async" associated with an element type "script" must be followed by the ' = ' character.

That's a bit annoying - What could be going wrong with the code that AdSense (a Google product) has provided is causing error on Blogger (another Google product).

The problem is highlighted in the error message itself "Attribute name "async" associated with an element type "script" must be followed by the ' = ' character."

Attribute name "async" in the code we got must be followed by a '=' character. But the code we got simply has <script async  ... />

So what can be done? Modify the code to be parsed by Blogger's theme parser correctly. Here's the code with a little change, we replaced async with async="async" to make the code a valid XHTML markup.

<script async="async" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Place this code in your Blogger theme code and save. It should work properly now.

Why do we have to use this "hack"?

This shouldn't even be considered as a hack. This is plainly a case where a valud HTML5 markup is not parsed as a valid XML / XHTML markup. 

Yes, our blogs are HTML5 in the end when it gets loaded on a web browser, but the code that runs in the background is XHTML, and the thing with XHTML is that it is very strict about the markup language. In HTML5 you can simply leave out a value from a attribute or leave an HTML element unclosed and it will still work. 

But XHTML won't. What's valid in XHTML is also valid in HTML5, so this don't need to be considered a hack or even a workaround. AdSense provides the code that is totally HTML5 compliant only it didn't anticipate the case where users may want to add the code to XHTML templates.

Will it have any impact on the way this code is supposed to work?

Other than having a few extra characters in the code you had to add, no. This change wouldn't affect anything how AdSense is supposed to work. We just made the code compliant with XHTML to be taken in by Blogger.

Inviting All Friends to Facebook Page at Once JavaScript Snippet

Facebook is a great tool for connecting with the World but one of the problem is that the population on Facebook is very big and so sometimes we feel the need of a "do all" function in most places such as inviting your friends on your new page.

It can be a hefty job clicking on thousands of "Invite" buttons one after one since Facebook doesn't give you an "Invite all" button. Same used to be true for Group requests but fortunately it now does, but as for Facebook page invites you still have to do the manual way.


In this tutorial we will be learning how to invite all friends to page on Facebook automatically. In the past on our blog we posted some similar codes for Facebook but as you know Facebook changes it design and structure so not all the old codes may still work.

This one is latest and is working (created in June 2017).

We will keep this short, there's only two step mainly, copy the code and paste it, but to perform it successfully we have to do more than just that.

Copy the JavaScript Code 

var btns = document.querySelectorAll("button");
var i = 0;

setInterval(function(){
    if ( btns[i].textContent == "Invite" ) {
        btns[i].click();
        console.log( i + " buttons clicked." );
    }
    i++;
}, 200);

Open Facebook on Desktop in Chrome / Mozilla Firefox or Safari

After you've open the Facebook website, navigate to your page and you will see the section where you can invite your friends from.

Click on "See All Friends" to make sure all your friends are loaded in the invite section so that when we run the code it invites all of them.  

In the browser open JavaScript Console and Paste the Code

Browsers have a JavaScript console where you can run JavaScript code from on the page, to open it on different browsers see the instructions :

• Google Chrome: CTRL+Shift+J (CMD for Mac) OR Right click on page > Inspect > Console tab
• Safari: Safari > Preferences, click Advanced, then select “Show Develop menu in menu bar.”. Now in the Safari Develop menu select "Show JavaScript Console"
• Firefox: CTRL+Shift+J (or CMD+Shift+J on a Mac) ORselect "Browser Console" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on OS X)

Paste the code in the input area in the Console section and then hit enter. 

That's it, the code will start running and will automatically invite all the friends to your Facebook page in no time. 

Does it have a limit?

There's no limit set by the code, it can invite any numbers of people in very less time but Facebook has a limit on how many friends you can invite to a page daily. Once it exceeds you won't be able to invite friends on the same day. 

We respect that and everyone should, Facebook knows that spamming would be a lot easier for people if it doesn't put such restrictions. 

Please do not use the code for spamming purposes, this tutorial is meant for the people who are genuinely inviting their friends on their page. There's no risk of getting blocked by using this method but we cannot be sure if it is abused, the system will detect. 

Why shouldn't I use an extension?

There are many extensions and add-on in browsers that lets you do the same but our recommendation is that you do not use those and the simple reasons are

1. You never know what the extension might be running in the background
2. Such extensions are known to go rogue and show pop-up ads in the future
3. Do you really need to install a forever running extension for a small task ?

Using the codes you know what you are running on your Facebook pages, because running scripts is very sensitive in browsers, scripts can be used to do a lot of harmful stuffs, so always double-check before running any extensions or scripts in your browser. 

I see an error

Don't worry, it happens, even a small typo can lead to an error. If you see any error commend down below with a screenshot so we can jump in to help you in that regard. 

Full Sized Background Image on Blogger with Blur Effect

In this short tutorial you will learn how to add an image as the background of your blog that stretches to all edges thus fills your entire blog's background portion.


Looking to add a nice effect to your blog by using beautiful pictures as background images? It is a great way to personalize a blog, depending on the color scheme of your blog and the feel that you want the blog to have can all be improved by using an image as the full background.



This tutorial will be guiding you through the process of setting a custom full size image on your Blogger blog with a few lines of CSS as well as showing a way to give it a blurred glass effect.

Here's a quick demo of what you are going to have on your blog by following the steps to add the CSS to your blog: Full Page Background Image Blurred Effect using CSS

Uploading the image

Whatever image you are going to use you have to upload it somewhere in its full size first. The best place to upload it is Blogger itself, it gives unlimited photo storage as well as fast servers from Google wouldn't ever slow your blog down. 

1. Open a draft post in your Blogger dashboard
2. Upload the image
3. When the image appears in the post area, right click on it and "Copy image address" or "Copy link address", the option might be different on different browsers.
4. Paste the copied URL that is the image's address in a Notepad / Textedit app. We may get something like this
   
   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyrajfadQBUo8BooKtb2RHwsSG3DsiDCrVtBHEkAVqP6zcdTmtcmXJ3XQiBo1B0WO6AaeyLOljOpRaaaabRAbD4Y0jnfBmq6pY9TZrb9z0v7pIaWucvuvajBbg2KiWedjLR5pDoqAC9xy2/s1600/photo-1434394673726-e8232a5903b4.jpg
5. Keep it with yourself, we will need this in the next step. 

The CSS Snippet

CSS is what makes it possible for us to add designs to our websites and blog. This one does the job for adding a full screen background.

html, body {
    background: url('IMAGE-URL-HERE') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Copy the CSS code and paste it in another Notepad / Textedit window.

In this code, replace IMAGE-URL-HERE with the image URL we got in the last step.

html, body {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyrajfadQBUo8BooKtb2RHwsSG3DsiDCrVtBHEkAVqP6zcdTmtcmXJ3XQiBo1B0WO6AaeyLOljOpRaaaabRAbD4Y0jnfBmq6pY9TZrb9z0v7pIaWucvuvajBbg2KiWedjLR5pDoqAC9xy2/s1600/photo-1434394673726-e8232a5903b4.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

I've done it, what now? Now that you have placed your image's URL in the code we are ready to make it appear on the blog. but before that please do take a backup of your existing blog theme.

1. Log-into your Blogger Dashboard
2. Go to the Theme   section
3. Click on "Customize" 
4. In the Theme Designer go to Advanced > Add CSS
5. Paste the CSS snippet into the text area on the theme designer page and click on Apply to Blog on the top right

Open your blog to see the updated background image. Right now you wouldn't see the blur effect, we will see how to do that in the next step.

Let's give it a blurred effect

We assume you are still in the Advanced > Add CSS page in the Theme designer from the last step. A small change in the URL of the image is required to get the blurred effect - that is to reduce the size of the image. Yes, the smaller the image the more blurry it will be. So that's our general idea, instead of using a photo editor app to make the original image blurry we use a small version of the original image.

Let's suppose your code is this, the URL of your image is of course different than the one in the following one.

html, body {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyrajfadQBUo8BooKtb2RHwsSG3DsiDCrVtBHEkAVqP6zcdTmtcmXJ3XQiBo1B0WO6AaeyLOljOpRaaaabRAbD4Y0jnfBmq6pY9TZrb9z0v7pIaWucvuvajBbg2KiWedjLR5pDoqAC9xy2/s1600/photo-1434394673726-e8232a5903b4.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

In the URL of your image, which may look something similar to this:

https://3.bp.blogspot.com/..............ynOTNfQCKgB/s1600/photo-1434394673726-e8232a5903b4.jpg

Change the number with the s prefixed to it to something smaller.

https://3.bp.blogspot.com/..............ynOTNfQCKgB/s32/photo-1434394673726-e8232a5903b4.jpg

s32 means the CSS code will load a version of the image that is only 32 pixels wide, so when a small image stretches from edge to edge on a screen it becomes blurry and gives the perfect effect we want.

You can change the value to whatever you like to adjust the level of blurriness of your background image. Change that small part in the code and again click on Apply to Blog to update the CSS code and make it go live on your blog.

Help Needed?

On some third-party themes and even the original themes provided by Blogger the code may not work properly due to some other CSS setting that may be overriding it. If you are unable to get it working then please share your blog URL in the comments down below along with the code that you are using as it is. We would be glad to jump in to help.

Full Blog Posts on Notable Theme's Homepage in Blogger Blogs

In the new themes the page break in post editor is just for the name as the themes auto-truncates the posts and shows snippets and a preview thumbnails only on the homepage. Page break / Jump break is good only for feeds now.

There is no setting to make the theme show full posts on the home, index and archive pages and that is why we feel the need of writing this tutorial.


Previously on StramaXon we published a tutorial to show how it was done on Contempo theme, this tutorial will guide you through the steps to achieve the same with Notable theme, so if you are a Notable Theme user in Blogger then follow the steps given below to get your blog posts to show up as full.

Important: As with all of our tutorials where we are supposed to touch the theme code it is highly recommended that you take a backup of your current Blogger theme.

Video walk-through. 

We've prepared a video tutorial of the same so you can watch it and follow the steps with more ease. 

Link to the video tutorial.

Editing the XML / HTML Code in Theme

1. Open a new tab in the browser and Log-into your Blogger Dashboard
2. Go to the Theme   section
3. Click on "Edit HTML"
4. When the Theme code editor opens, focus into the code editor and hit CTRL + F / CMD + F to open the in-page search
5. Look for the following line of code|
   
   

   <b:include cond='data:this.postDisplay.showSnippet ?: true' data='post' name='postBodySnippet'/>

   
   
6. Upon searching you will get the result like this,
   
   
   
   
7.  Copy the following HTML / XML markup
   
   

   <b:if cond='data:widget.type != &quot;PopularPosts&quot;'>
     <div class='post-body-container'>
     <b:include data='post' name='postBody'/>
     <div class='post-sidebar invisible'>
       <b:with value='data:widget.instanceId + &quot;-normalpostsidebar-&quot; + data:post.id' var='sharingId'>
         <b:include cond='data:post.shareUrl' data='{ shareButtonClass: &quot;post-share-buttons-top&quot;, overridden: true }' name='maybeAddShareButtons'/>
       </b:with>
       <b:if cond='data:post.labels and !data:post.labels.empty and data:this.allBylineItems.labels'>
         <div class='post-labels-sidebar'>
           <h3><data:messages.labels/></h3>
           <b:include data='post' name='postLabels'/>
         </div>
       </b:if>
     </div>
   </div>
     <b:else/>
    <b:include cond='data:this.postDisplay.showSnippet ?: true' data='post' name='postBodySnippet'/>
   </b:if>
   
   

8. Go back to the theme editor where we previously found the line of code from step 5. Replace that line of code with the code you just copied. This is what it the XML code should look like when you have replaced it.
   
   
   
9. Now click on "Save theme" to save the changes and go to your blog to see the change. The posts should now appear full on all the pages. 

You may have noticed that the "Read More" button is still there even though the post shows up full, it's because the Jump link is added by another code that we didn't touch yet and it isn't even necessary, we will be using CSS to simply hide the links.

CSS to hide the Jump Link

This CSS snippet should hide the "Read more" links from the posts on home, archive and index pages.

.widget.Blog .jump-link {
    display: none;
}

Here's a complete guide with screenshots on adding CSS in Blogger blogs

1. Log-into your Blogger Dashboard
2. Go to the Theme   section
3. Click on "Customize" 
4. In the Theme Designer go to Advanced > Add CSS
5. Paste the CSS snippet into the text area on the theme designer page and click on "Apply to Blog" on the top right

Refresh your blog to see the changes live on your blog.

Showing full blog posts on other new themes

The same can be done on other themes and here are the links for the tutorial to do it on other new Blogger theme(s)

• Show Full Blog Posts in Homepage of Contempo Theme in Blogger