How to Embed Files and Videos Responsively into Blog or Website?

Today i'll teach you guys how to make your file embed code responsive. In my previous tutorial, i forgot to mention that if you embed your files using the default code provided by google drive, your files will not be responsive. In fact, default embed code from youtube, vimeo, daily motion or even map code from google maps are not responsive. As for now, only instagram, scribd (select 'autosize'), soundcloud, storify and twitter offer responsive embed codes, which means you just need to copy-paste the default embed code provided without changing anything.

What does responsive files/videos means?

Nowadays people used handy electronic devices such as smartphones and tablet more often than a laptop or computers (PC) to browse or even searching for information.Those devices come from a variety of screen sizes. It will be difficult to read something that has an improper aspect ratio (too big or too small). Responsive code play its role by automatically change the file/video width/size to perfectly fit any screen size. This is an important feature for eportfolio as it will encourage good reading and learning experiences. If you read my workshop post using ex: smartphone, you will realize that the embedded powerpoint width and size automatically fit the phone screen (even after you enable auto-rotate option).

Follow simple steps below to make the embed codes responsive:

Step 1. Get the file embed code | video get the URL

• for google drive u can refer: embed files from google drive into blogger tutorial

Step 2. Open embedresponsively.com > Select media source > Paste the code > Click Embed
            (If your embed code from google drive, select Generic iFrame as your media source)

Step 3. Copy the new generated embed code > Paste it into the HTML section of your blog post/page

How to customize?

You can only change the file height, as the code is responsive and it will automatically change the file width according the screen size. To alter the height, change the value of the highlighted code above (padding-bottom: 110%). The best size for pdf/word files = 130/140% and powerpoint = 77%.


Example of default vs responsive file/video:

** View this post using mobile phone/mobile view to see the differences


❖ Using Default Embed Code




❖ Using Responsive Embed Code (padding-bottom: 140%)

❖ Using Default YouTube Embed Code

 


❖ Using Responsive Embed Code

I think that's all for now.. to all my lovely Muslim readers, i wish you guys a blessed Ramadhan. 
May the spirit of this month illuminate the world and show us the way to peace and harmony ♥ 

Smile ^___^

Teaching Eportfolio Development Workshop

Workshop Slideshow

Today's im assisting my SV in teaching eportfolio development workshop. All of the participants are lecturers from various fields. I can see that most of them are really passion in learning new things which makes me feel very happy :)

Participants are having discussion in designing their teaching eportfolio

Participants presenting their teaching eportfolio at the end of the workshop

From my observation, people easily get scared when it comes to coding. It's not that hard actually if u're +ve & willing to learn. Once u know how to edit and implement the codes, u surely gonna love it ♡

To all the participants, feel free to email me at blurrydino@gmail.com if you guys have any questions regarding eportfolio development/codes ok. Till then:

Good Luck in experimenting your newly developed Eportfolio & Smile! ^_____^

Add Static Pages & Embed Files from Google Drive into Blogger

Blogger Static Pages allows us to create specific pages for our blog/eportfolio such as About Me, Curriculum Vitae, Contact & etc. on stand-alone pages that are linked from your blog. The static pages basically are the same post pages, but there are several things that make them different. One of the differences is that static pages don't apppear in the home page, don't have a label, and are not indexed as archive pages.

Follow simple steps below to create it:

Step 1. Go to Blogger Dashboard > select your blog > go to Pages and click on New Page.

Step 2. Type the title (not compulsory) and write the page's content.

Step 3. Before publishing it, click on Preview to see how it will appear on your blog.

Step 4. When you have finished the editing, click on Publish button. Then, click View. 

Step 5. You will be redirected to a new tab which is your new page. Copy the URL & paste it into 

             your drop down menu bars html coding and you're done!

Now you have owned the static page. If you want another static page, just repeat the steps above :)

Embed files from Google Drive

Next we will learn how to embed files from Google Drive into your blogger page/post. Fyi, all gmail users have google drive which comes with free 15GB storage! With this drive, you can store and share lots of online files such as PDF, words, power point, video and etc. So, if you want to embed your google drive files like the above picture, follow the steps below:

Step 1. Go to your Google Drive > Right-Click the file you want to embed and Choose Share

Step 2. Next click Advanced to your Google Drive > Click Change > Choose On - Public on the web 

           > Click Save and Done.

Step 3. Double Click file that you want to embed > Click on Pop-out

Step 4. You will be directed to a new tab, at the new page, choose More actions, click Embed item 

             and copy the code.

Step 5. Next go to your Blog > Choose posts/pages > Click New post/page > Choose HTML 

             and Paste the code.

Step 6. Click on Preview to see how it will appear on your blog and click Publish when you are done :)

P/s: You can also change the width and height of the embed file by changing its code value.

       (not necessary if you are using responsive embed code)

Embed code example:

<iframe src="https://docs.google.com/file/d/0B0lYSJVoAi5pMXc3Vmw5UDVFakE/preview" width="640" height="480"></iframe>

GOOD LUCK! ^___^