Hello, friends. Today I will be writing a post on how to add responsive youtube videos and also twitter tweets to blogger posts. At some point in blogging, we may come to an extent where adding some videos to our blog, seem necessary and professional. So I will be showing us how to add static YouTube videos to Blogspot blogs and also make them responsive (Fit into any screen size).
Following the popular demand of a few of my blogger friends, including Paul Divine who blog's at WorldStar99 I have decided to hold on with the chrome Inspect Tool series for a while and quickly offer a few more posts including how to add CSS to blogger blogs.
How To Add Responsive YouTube Video
YouTube being one of the largest video hosting sites, one would love to make good use of it by uploading his own videos or simply embedding someone else's video. The beauty of YouTube is it lets you easily add videos to another platform, by either sharing or embedding but here on this tutorial we will focus on 'Embedding'.
Demo Video
Step 1
Visit youtube.com and select any video you wish to add to your blog post. As for me, I have selected 'Darey - Pray For Me ft. Soweto Gospel Choir [Official Video]' since it's one of my favourite songs.
Step 2
Scroll down a bit on the page, until you find Add to share. Once you find them, clink on share for more options.
You should now see a new layout with Share, Embed, and Email, with share buttons and video URL below. Clink on the Embed message in the list and wait for a new layout of codes below it.
The code is an HTML code which will appear highlighted (blue). Now simply copy the code and head to your blog post or you can also paste it into a notepad.
Step 3
Go to blogger dashboard and create a new post. On the left where you have Labels, Schedule, Permalink and others, simply clink on Options. Watch out for the below menu with "Reader comments, Compose Mode and Line Breaks".
On the compose mode, select 'Interpret typed HTML' and clink on done at the bottom. This will allow your YouTube Video to show within the post.
Step 4
Now paste the code we earlier copied from YouTube and paste it anywhere in the blog post. It should look simply to the picture below. and make the following modifications to make it responsive.
Make YouTube Videos Responsive
Generally, YouTube provides you with static video widget that is set to '560px' now if you do not make it responsive, it will appear too small on laptop devices, and appear too big on a mobile device.
In other to make YouTube Videos flexible, we need to change the assigned 560px and change it to 100%. Just as the code below was changed by me, simply replace the '560' on your copy code from YouTube and replace it with 100%.
Now preview your blog and you should a responsive video that fits well into any device.
Add Twitter Tweets To Blogger Post
Adding twitter tweets to blogger blog, is quite easy and professional. Visitors feel more comfortable to believe what you post if you provide a tweet referring to it. Assuming your post is about a man claiming the tree with his head, people would love to see a tweet or Instagram post that points to it.
Demo Tweet
Omagbemi invites Oshoala, others to camp https://t.co/LnYPbLP4uX— The Punch Newspapers (@MobilePunch) October 11, 2016
Step 1
Visit your twitter page and locate any post you wish to embed on your blog post. Once found, continue with the following modification
Step 2
Below the tweet, you should find 4 buttons (Reply, Retweet, Like, and More). The more option is with the 3 dots so simply clink on it.
A menu will come up at the bottom with more options (Share via direct message, Copy link to tweet etc) in that same menu, you should find an option with "Embed Tweet". Once found clink on it.
Step 3
After clicking, a new box should pop up, with some codes and an option to "Include media" at the bottom. If you wish to show only post without photos, link or videos untick the option but if you want the video and photos to show, leave the option ticked.
A preview of how the post will look will also be shown at the bottom of the code. So simply copy the highlighted code and paste it in a notepad.
Step 4
Create a post in your blog and locate the Post Settings, among the list check out for Options once found clink on it for more menus. In the next menu you will see with an option to 'Show HTML literally' and 'Interpret typed HTML'. Simply tick the Interpret typed HTML option.
Step 5
Paste the copied twitter code into any section of your blog post. preview your post and it should be showing.
0 Response to "Add Responsive YouTube Video And Twitter Tweets To Blogger Blog"
Posting Komentar