How to Install YouTube Responsive Videos on a Blog

The use of video properties in a blog article has become more widespread since YouTube launched the embed video feature. This feature allows us to display YouTube videos directly on our blog / website. The problem is the display of YouTube videos is not responsive even though the blog template that we use is responsive. For that we need to add some code so that YouTube videos become responsive on the blog. 

On this occasion I will explain two ways to install YouTube videos on a blog, as well as how to get YouTube video embed codes with Android phones, along with information regarding embed YouTube videos on the blog. 

The direct way
is to install the YouTube video embed code inside tag iframe. Despite usagetag iframein the post it is said to be less good in terms of SEO, according to SEO checker sites. However, this method has several advantages, including the following.

1. Embed YouTube videos faster
2. The cover image background of a YouTube video can appear as a thumbnail image, if the position is the first image of a post.

Installation

To create a responsive YouTube video on the blog, place the CSS code below right above the code ]]></b:skin>or </style>in your blog template. Or it could be in a post in HTML mode with a wrap tag style.

.embedded-video-large{background-color:#000;background-position:center;background-size:cover;cursor:pointer;display:inline-block; width: 400px; height: 230px; max-width:100%;overflow:hidden;position:relative}


.videoyoutube{text-align:center;margin:20px auto;width:80%;}


.video-responsive{position:relative;padding-bottom:56.25%;overflow:hidden;margin:8px}


.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}


@media screen and (max-width:400px){


.videoyoutube{width:100%}


}

How to install YouTube videos on blog posts

To install YouTube videos, use the code format below to call / display YouTube videos on the blog. Place the code in HTML mode, when you make an article / post.

<div class="videoyoutube">
<div class="video-responsive">
<iframe allowfullscreen="1" class="embedded-video-large" src="https://www.youtube.com/embed/KODE_ID_VIDEO?rel=0"></iframe>
</div>
</div>

Change the text KODE_ID_VIDEO with the YouTube video id code that you want to embed to display on the blog. 

Information:

• Its allowfullscreen="1"function code is to bring up the full screen / full screen button.
• The rel=0function code so that at the end of the video is not displayed related videos, usually there are 50 related videos and if clicked it will be played directly on YouTube, not on your blog.

Examples of responsive Youtube videos

How do you make YouTube videos look like they are on tv (make a monitor effect)? 

Add the css code below to the CSS set above.

.videoyoutube{background:linear-gradient(to bottom,#303030 0%,#202020);border:1px solid #404040;border-bottom:1px solid #303030;border-radius:5px;box-shadow:1px 30px 30px -26px #000000}

Using JavaScript

The javascript function here is to change the code in any tag that uses the specified class, to be tag iframe. So actually this is just to outsmart or just to avoid using tag iframeit directly in the post. Let me be more SEO "he said". However, this method also has several weaknesses, including the following. 

1. The resulting background image cannot appear as a thumbnail image. The reason is "still a mystery" ???
2. Loading vidoe content is longer because generally javascript is placed in the bottom body tag "loaded later".

Installation

Place the following CSS code above the code ]]></b:skin>or </style>. 

.videoyoutube{text-align:center;margin:20px auto;width:400px; max-width:80%;}


.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:8px}


.video-responsive iframe{position:absolute;top:0;left:0;width:400px;height:230px;max-width:100%; max-height:100%;border:0}


@media screen and (max-width:400px) {


.videoyoutube{max-width:100%}


}

Install the following javascript code above the code </body>.

<script type='text/javascript'>


//<![CDATA[


setTimeout(function(){$('.video-youtube').each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="1"></iframe>')})},5000);


//]]>


</script>

Make sure in your template there is any version of the jquery code. If you don't have one, please install the following jquery code above the code </body>. 

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

How to display YouTube videos on a blog

To call / show embed YouTube videos on blog articles, you can simply use the following code in HTML mode when creating articles / posts. 

<div class = "videoyoutube">
<div class = "video-responsive">
<div class = "video-youtube loader" data-src = "// www.youtube.com/embed/ KODE_ID_VIDEO ? rel = 0">
</ div>
</ div>
</ div>

Change the text KODE_ID_VIDEO with the YouTube video id code that you want to embed to display on the blog. 

Note: for code descriptions, and how to create monitor effects, you can use the same CSS code as in the first method above. 

How to get the YouTube video embed code via an Android phone

From some tutorials on how to make responsive YouTube videos, most of them use desktops as a media to get YouTube video embed codes. So when I practiced the tutorial, I found a problem because the device available was only an Android cellphone. But that doesn't hinder my intention, because I'm sure there must be an alternative way to achieve a goal, if we want to try. Here's how to get the embed code for a YouTube video.

1. Open the YouTube application on your Android phone / smartphone.
2. Look for the video that you want to take the embed code.
3. After meeting, click the three point button on the right side of the video.
4. Select / click Share , then on the new window pop-up click Copy link.
5. Paste / paste the url in the draft post, browser tab, or wherever you can. sample YouTube video url: https://youtu.be/ qLrWHuOQPOQ
6. Copy the last code from the url, usually a combination of upper and lower case letters. That is KOE_ID_VIDEO which you can use to install the embed YouTube video, in the format as described above.

Read More

Put the Title of the Post in front of the Blog Title to make it more SEO

Putting the title of the post / article is in front of the blog title on the Google search search results so that it is more SEO friendly, is one method / SEO tips that are usually done by most blog owners to improve the SERP position. Because the value of the article title is above the blog title in the eyes of the search engine. So if the target audience for the sampean blog is from the article title query, then this method is powerful enough to improve the SERP. On the other hand, for a very well-known website or blog whose ads often travel on TV or other mass media, I don't think this method needs to be applied. Because most visitors come from the query results of the blog name.

Most of the external templates, free or premium, usually have implemented this method, but there are still some templates that still put the blog title / name in front of the article title, especially the default template from Blogger. Where this will cause a long article title to be cut off on the search engine index results. Surely this is very detrimental right?

To change the post title in front of the blog name in the search engine index results, please follow the steps below:

1. Login to Blogger >> select blog >> click Template >> click edit html. 
2. Look for the code line as below

<title><data:blog.pageTitle/>
</title>

3. Delete the code, then replace it with the code below

<b:if cond='data:blog.pageType == &quot;index&quot;'>
      <title>
        <data:blog.pageTitle/>
      </title>
      <b:else/>
          <title>
            <data:blog.pageName/> ~ <data:blog.title/>
          </title>
</b:if>

4. Save the template

The ~ sign is the delimiter between the title of the article and the blog title in the search engine index results. Please change it according to your taste, with a sign | or >>.

Note: Changes to the search index results will not be immediately visible to old articles / posts, it can take 1 day or 1 week or more, to speed up changes can be by resending the article url (submit url / take as google). 

Also read the article How to delete blog widgets that cannot be deleted

So many tutorials on how to place the article title in front of the blog title. Sorry if there is something wrong in this paper. Hopefully useful and good luck.

Read More

How to Make a Back To Top Responsive Button

How to make / install a back to top responsive button with Awesome Fonts like  - What is the back to top button? surely, you already understand the meaning and usefulness of this feature on a blog. The existence of this one button is very necessary for blog visitors to return to the top page, especially if your blog has a very long article and added with many comments, of course this button will be very useful. Besides being able to enhance the appearance of the blog, installing the back to top button can also make your blog user friendly.

There are many ways to make or install the back to top button on the blog, but in this tutorial Bakul Oreg wants to share how to make the button back to top with Font Awesome. You can see an example on this blog (simple but cool hhhh)

The advantages of this method are lighter and responsive because the images that are loaded are not from an image url, but rather a letter (code) that represents an icon (image).

Please follow the steps below: 
First method

Login to Blogger >> select blog >> template >> edit html.

1. Install the Font Awesome bootstrapcdn code just above the code </ haed> (first check if the code already exists, if there is a step past this)

<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

2. Install the css code below, just above the code ]]></b:skin>or</style>

#back-to-top{background:#53bd84;color:#ffffff;padding:8px 10px;font-size:24px;border-radius:6px}

.back-to-top{position:fixed!important;position:absolute;bottom:20px;right:20px;z-index:999}

3. Install the code below, just above the code </body>

<div class='back-to-top'>
      <a href='#' id='back-to-top' title='back to top'>
        <i class='fa fa-chevron-up'/>
      </a>
</div>

    <script>
      $(window).scroll(function() {
        if($(this).scrollTop() &gt; 200) {
          $(&#39;#back-to-top&#39;).fadeIn();
            } else {
            $(&#39;#back-to-top&#39;).fadeOut();
            }
            });
          $(&#39;#back-to-top&#39;).hide().click(function() {
            $(&#39;html, body&#39;).animate({scrollTop:0}, 1000);
            return false;
            });
    </script>

After that, click the template preview to make sure all the codes are installed correctly. If buttonback to top appears in the lower right, that means you have successfully installed the button back to top.

4. Before saving, you should click Format template first, order code javascriptcan function properly, after a new formatted template click save template. 

Second way:

In this second way we will make it as widget back to top.

For steps 1 and 2 the same as in the first way, then click save template.

Next you click layout >> + add gatget (it's up to the sectionsidebar or footer) then click HTML/Javascript. Paste the code in step 3 above (don't forget to give the title temporarily). Then click save.

Note: 
If the Back To Top button appears immediately when the blog page is opened, that means in the template you don't have the following line of code:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

Please copy then paste the code just above the code </head> then click save and see the results, if the button Back To Top nothing and only appears when the page is scrooled then the button is installed Back To Tophas been perfect. 

For those of you who use the standard template from blogger you should use the second method, this button only appears on the web display, to appear on the mobile view, follow the steps below:

Login to Blogger >> select the blog >> template then click the gear icon under the mobile view, then select the special template, then click save.

The next step you click edit html, look for the widget code back to top (here is the use of giving a title to the widget that is to make it easier to search), after finding add the following code: mobile='yes'and don't forget to save the template.

Example:

<b:widget id='HTML6' locked='false' title='Back to top' type='HTML' visible='true'>

After adding the code it will be like this:

<b:widget id='HTML6' locked='false' title='Back to top' mobile='yes' type='HTML' visible='true'>

Read More