Responsive Video in Site and Blog

Responsive Video in Site and Blog

   February 13, 2015       Ariyal

---

Responsive in every web materials is the trend of current web world. I mean , in the context of web development, responsive site can be called fashion but it also has many advantages. Mobile friendly, user friendly, device friendly and browser friendly are its some advantages. But in order to make a perfect responsive site, your site should have all elements responsive like videos, photos etc. Hence embedding video also should be device friendly, then your site can be called fully responsive.

Now here I am just telling you to make an embedded video responsive. Lets see how we can make any embedded video responsive or device friendly. There is no much difficult to do this. You just follow the following steps. 

---

How to Make Responsive Youtube Embed Video?

---

Step 01: In the beginning, you embed any video whose code can be like 

<iframe width="560" height="315" src="https://www.youtube.com/embed/o2Tw-8rF8dI" frameborder="0" allowfullscreen></iframe>

Step 02:  Now add this code <div class="embed-video"> in the above code. Now code becomes like

<div class="embed-video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/o2Tw-8rF8dI" frameborder="0" allowfullscreen></iframe>
</div>

Step 03:  After adding a div, now just add the below code any where in the stylsheet

<style type="text/css">
    .embed-video {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .embed-video embed,embed-video object,embed-video iframe   {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
</style>

Note: When you go to add any embed video, you will do the same as step 01 and step 03 only. You do not need to repeat step 03. Thank you friends. Any problem, just comment.

Read More

How to Put Meta Keywords in Each Blogger Post

How to Put Meta Keywords in Each Blogger Post

   February 12, 2015       Ariyal

---

Meta tags or keywords are very significant SEO terms. To find your site’s rank better in search engine, you have to add meta tags or keywords in every page of the website. But when you want to put keywords in every blogger posts, you can’t because there is only meta description place in blogger. There you cannot find keywords adding space. So if you want to add meta tags or keywords also, you have to add some codes on your template. Meta tags are also as important as meta description. Meta tags help you to increase healthy and better traffic.

Note: Meta Keyword rule is deprecated in many search engines.

---

Process of adding meta tags in each blogger post:-

---

Suggestion: We always recommend you not to change any code of your template with keeping back up of your template.

Step 1. Log in into your blogger.
Step 2. Choose your one blog.
Step 3. Go to template>>edit html.
Step 4. And find the code <b:include data=’blog’ name=’all-head-content’/>
Step 5. Then paste the below codes below the above code.

<b:if cond='data:blog.url == "PAGE-URL"'>
<meta content='PAGE-DESCRIPTION' name='description'/>
<meta content='PAGE-KEYWORDS' name='keywords'/>
</b:if>

Step 6. Now you have to paste the above code every times when you posts.

Note: If you have 20 posts, you should copy and paste the above code 20 times too.

Step 7. Click on Save template button.

Note:-
1. write the url of your post in PAGE-URL.
2. Write meta description in PAGE-DESCRIPTION.
3. Write meta keyword in PAGE-KEYWORD.


Watch and follow the process of given video.

Read More

Blogger And Google Plus Comment System in Blogger Blog

Blogger And Google Plus Comment System in Blogger Blog

   February 06, 2015       Ariyal

---

Blogger has its own default commenting system and instead of it Google also offers google+ commenting system in the blogger blogs but many bloggers got this often difficult and not good because google+ comment system forces visitors to make google account to comment using google+ comment box. And it seems that this discouraged many visitors to comment constantly on the any blogger blog and among those visitors I am the one. If you get comment from the google+ comment box, then blogger never notify you. So that you can not respond to the visitors and this makes you unfriendly behavior with your visitors which can be a worst reason of decreasing of visitors on your blogs and sites.

The one and only way of solving this problem is adding of the both the commenting system: Blogger Default Commenting System and Google Plus Commenting System on your blog which can be a good for your blogger because if a visitor want to comment using google+ commenting, he/she can and if he/she want to comment using blogger default comment box then he/ she also can use them.

So your visitor will get 2 option either Blogger Default comment Box or Google+ comment box

---

How to Add Blogger And Google Plus Comment System in Blogger Blog With Toggle?

---

Here is the Step wise process to add this system on your blogger. Lets go through step by step.

Step 1: First of all login in your blogger account and the just go to the template option just press edit html and find the following code

<b:include data='post' name='post'/>

Step 02: Now copy the given code and paste it just after the above code.

b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>#comments, #gplus-comments-visibility {display:none;} .comments-icons {background: url(http://1.bp.blogspot.com/-w7tZjjrubgc/VNS0hbb-lKI/AAAAAAAACzw/K5hcqGRWYQg/s1600/gp.png) no-repeat; font-size: 20px; font-family: &quot;Arial Narrow&quot;,Arial,sans-serif; color: #555; font-weight: bold; padding: 10px 15px 0; height: 70px; } .comments-icons a img {vertical-align: middle;}</style>
<div class='comments-icons'>
Choose a Comment System: <a class='show-hide-comments' href='javascript:void();' onclick='$(&quot;#gplus-comments-visibility&quot;).slideToggle();$(&quot;#comments&quot;).hide();'><img class='gplus-icon' height='35' src='http://1.bp.blogspot.com/-i1zpfechOuY/VI763hqxlHI/AAAAAAAAAvs/dz4sWUQW-xU/s1600/google-plus-logo.png' width='35'/></a> OR <a class='show-hide-comments' href='javascript:void();' onclick='$(&quot;#comments&quot;).slideToggle();$(&quot;#gplus-comments-visibility&quot;).hide();'><img class='blogger-icon' height='35' src='http://3.bp.blogspot.com/-4N-YlJvoxdA/VI763udxlHI/AAAAAAAAAvw/0dY2Ys0zz2k/s1600/blogger-logo.png' width='36'/></a>
</div>
<div id='gplus-comments-visibility'>
<div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='630' expr:data-href='data:post.url'/>
</div>    
</b:if>

Step 03: Now save your template

Note: You have to add the following google api if it does not exist already on your template. And you can change the width of the comment box just changing the value of the data-width attribute.

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

Watch Demo 

Read More