Thursday, July 6, 2017

How to add Scripts to a blog using Firebase

How to add Scripts to a blog using Firebase

2:49 AM Scripts , Snippets 0 Comments
I didn’t know about this one until I started looking for a way to make my blog a little bit interactive and less crowded. In order for me to do this, I needed a platform where I could host my scripts and then linked to the blog page.

So, let me give you the steps on how to do this. I may want to warn you because some of the scripts may work and some other will not work. I had to do little tricks on how to work with the scripts in order for it to function.

OK, I did not write the scripts I usually go to other websites that offer free CSS, JavaScript codes and just used them, make sure to keep their copyrights (if any) intact.

Probably you may need to know a little bit about coding in order to modify the script to your taste. Most of the time they tell you in the script what is needed to be changed.

PART 1 UPLOAD TO FIREBASE CONSOLE

STEP 1
  • Log in to firebase.com
  • Click the “Go to console” option


    • STEP 2
  • Click the “Add Project” option
  • A little pop window will appear then Named your project
  • Click “Create Project”
  • After you create your project it will appear on the same window, just click in the name
  • (optional) The "Import Google Project" gives you the option to Add a Firebase to a Google project.


    • STEP 3
  • Click “Storage”
  • Then you can upload your scripts by clicking on “Upload file”

    • Make sure that your scripts have the correct extension name.
    For example:
    =>.css (Cascading Style Sheets)
    =>.js (JavaScript)
    =>.txt (for notepad text)
    =>.pdf (Portable Document Format)
    =>.docx (Microsoft Word XML Format Document file)

    Also, make sure that after you upload your script is correctly build otherwise you may have to deleted and uploaded again. Every time you upload a script the system automatically will give you a new link to the script.

    But basically, this is it for the first part of the Firebase hosting scripts. One more thing after you upload the script click on the name and it will open a little window next to the script and then click on “file location” and copy the link. This link will be the one that you will need to use on the blog web page itself.

    PART 2 LINKING THE SCRIPT

    STEP 4
  • Copy the script from the website that has it for free and paste to Note Pad, after that copy and paste to your blog post. Make sure to name the script on the note pad with the extension that the script is already written.
  • Log into blogger
  • Write a post
  • Enter the script extension which will link the script on Firebase to your blog
  • Build the Html for the script grab the link from Firebase and include it in your Html link
  • This will be the Script at the top of the blog post that is needed to link the Script located on Firebase

    • EXAMPLE 1

    Copy Code

    In this picture you can see an example of the script link that is hosted on firebase.
    EXAMPLE 2


    Copy Code

    In this picture you can see the actual JavaScript used for the button below.

    Go over with your pointer and see it in action!

    Click to Enter! It's FREE!



    Beautfying blogs with more interactions and pretty applications ❤

    Until next do,

    Newer Article Berryloupe Juice Recipe Older Article Chandelier Earrings Tutorial
    By at
    Labels: ,

    No comments:

    Post a Comment

    Subscribe to: Post Comments (Atom)
    Copied!