How To Upload Songs (MP3 Files) On A Blogger Blog With Download Button

Discussion in 'Blogspot' started by Olayanju Kabir, May 28, 2017.

  1. Olayanju Kabir

    Olayanju Kabir Itz Kofem Staff Member

    Uploading downloadable mp3 or music files is not directly possible in the blogger platform, but using google sites, you can upload songs to a blogger blog with a download button for free without having to pay for extra hosting.

    IMG_20170528_062038_823.JPG With Google Sites, a BlogSpot music blogger can upload media files such mp3, songs etc. online for free and place them on a blog for downloading using plain links or download buttons. You can also accomplish this using dropbox.

    Steps Required
    These simple steps will guide you to uploading your songs to blogger and also offer them for download using download buttons.
    1. Create A Free Google Site Account
    2. Create A Music Forder
    3. Upload Files And Copy Link
    4. Add Download Button.

    Create Google Site Account

    Google site is a free hosting service created and managed by Google. You can upload mp3 files, video files, PDF, images and any other type of file you desire to save online.
    IMG_20170528_062413_637.jpg Visit www.sites.google.com using your Gmail account.

    Step 1
    On the homepage, click "CREATE" >> "In Classic Sites".

    Step 2
    Select "Bank template" >> Choose a name (e.g bloggingprinceMP3) >> Add site location (URL) >> Add Site Description. - No need to select a theme. >> Verify that you are human >> finally "Create".

    Create Music Forder
    A folder is a folder everywhere. It helps to organize your files in one place. If you are a blogger that want to upload videos, songs, and PDFs online then you should create different folders for each file type.
    [​IMG]
    Step 1
    On the blank page, Locate "Create Page" at the top. It has an icon that looks like a folder with a plus at the middle.

    Step 2
    Fill in the name and leave every other option as default. >> Hit Create.

    That is all for creating a google site with an option to upload Songs. Next is to start uploading your music files.

    Uploading Music Files

    On the new page, you will see an option to "ADD FILES" hit it and upload your music file from your computer.
    IMG_20170528_063316_198.jpg
    After uploading, locate the download icon next to the delete icon. Right click on it and "copy link address". To test it, paste the link in a browser and it will start downloading the music file immediately.

    Now paste the link in a notepad.

    What will I do with the link? - continue reading!.

    Add Music File With Download Button

    You can easily add the download link directly to your blogger post editor using plain links. But download buttons look better

    Adding Download Button CSS
    Go to Themes >> Edit HTML >> Using CTRL + F search for </head> and paste the below CSS code just above it. Save when done.

    Code:
    .BPdownloadbutton{display:inline-block;border-radius:4px;background-color:#000;border:none;color:#FFFFFF;text-align:center;font-size:28px;padding:20px;width:200px;transition:all 0.5s;cursor:pointer;margin:5px;vertical-align:middle;text-decoration:none}
    a.BPdownloadbutton{cursor:pointer;display:inline-block;position:relative;transition:0.5s}
    a.BPdownloadbutton:hover{padding:25px;box-shadow:0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19)}
    .Bpdownload{width:210px!important;height:84px!important;margin:0 auto!important;margin-top:10px;margin-bottom:10px}

    Read Also : How to force Blogger to show desktop view on mobile devices?

    Method 1 Of Adding File To Blogger
    Go to post editor, switch to HTML, paste the below code inside the box.

    Code:
    <div class="Bpdownload">
    <a class="BPdownloadbutton" href="MUSIC LINK" target="_blank">Download mp3</a>
    </div>
    Replace MUSIC LINK with the link you copied earlier. Publish the post and you should see it working.

    Method 2 Of Adding MP3 File To Blogger

    In your post editor, at the sidebar locate "Options" >> "Compose mode" >> Tick "Interpret typed HTML".
    IMG_20170528_063044_248.JPG
    Paste the below line of codes anywhere in the post body, and don't forget to replace MUSIC LINK with the link you copied earlier.

    Code:
    <div class="Bpdownload">
    <a class="BPdownloadbutton" href="MUSIC LINK" target="_blank">Download mp3</a>
    </div>
    What Next?
    Whenever you want to upload song files to blogger, go to www.sites.google.com and you would see your google site name shown>> after clicking, on the next page, select your folder >> You would see all your uploaded media files.

    Locate "Add File" click it and upload your songs.

    This is one of the easy ways to upload media files, music files, songs files or MP3 files to blogger with a download button. If you find it hard to understand, leave a feedback below.


    Sharing is caring!.
     

    Attached Files:

  2. Loading...


Share This Page