All About Blogging

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.

---

How to Make Responsive Youtube Embed Video?

---

<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.

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.

---

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.

Friends, here I say you just submitting into directories can not be affective. It will be affective when your site or blog successfully registered into the high page rank directories. I already told you that directory submission is one of the best trick to increase quality backlinks and this can increase your high traffic. By the way, there are 2 types of directory submission services available in the web and they are automated submission and manual submission.

And on the based on the price there are also two types of directory submission, one is free directory submission and another is paid directory. Free submission is very good but it will be approved after long time and it also can be rejected but paid is approved fast and it is less chance of dissapproved your listing.

Which blogs and sites are Approved:-

• A complete site.
• Good looking in the design and fast sites and blogs
• English Language sites are preferable.
• If you choose right category of your site while listing on any directory.

Which Blogs and Sites are Dissapproved:-

• If a site are under construction or not has not been completed.
• If your site has been already listed in the directory.
• If your site is not in the english language.
• If your site has copied content.
• If your site is a social sites.

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyb8XZPlEm9ANwN4Q9nQxdd8HNiT5RRTmOkpfD4dUT75la5wf-1jBkzLhTWbgMWue_LyLUNZ0K88PR9N5uXq1eNnRWLQwwX9Hm6DpsCIPc_XHb9vefI3tfbf0Jb-eHL_t2ecmjLHfjkgQ/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1eSDZjU87GUWYmPv7cKvo5WK8BGHZv26e3-y06ZXgfxCqXhyphenhyphen5MUFiogDlQguNKznKosBDXALtHmHhHD2Ch4WLFqyD3DM6wOQjORtXv9_SYo_tuQ3oUMWNlwyq-fSZxSm_oFyBuWVCb0iw/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyhpMsjRcHBkQrBVXBqVlBYUFMCMnE_vbfnonm-jdJff8-bs5fEoNy_Vg12jQEGIGbbF1c3-T0kH7afoTPZwzO-O3ry9fK1oL7fTGmwEByS3DZF6X1HlVmAartmFM7iSOfoRY70XYdvsFR/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'/>