7 Jan 2013

couch mode print story

Add Videos/Images in Blogger/Blogspot Comments


Maybe many of you have wondered if it is possible to post youtube videos and images into your blogger comments. Well, now it is! But first of all you should know that if you have blogger threaded comments activated, it won't work. So if you want to have this feature, you should remove blogger threaded comments firstly. Read here how to remove blogger threaded comments.

How to add videos/images in Blogger comments

Step 1. First log in to your Blogger account, go to Dashboard >> Design >> Edit HTML >> check the "Expand widget templates" box (make a backup)

Step 2. Find (CTRL + F) the following piece of code:

</body>

Step 3. Immediately above/before this code, paste the code below:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("multimedia");
theText = bodyText.innerHTML;
theText = theText.replace(/\[img\]/gi, "<div style='clear:both'></div><img style='float:left;margin:10px 0;border:1px solid #DDD;max-width:490px;background:#FFF;padding:4px' src='");
theText = theText.replace(/\[\/img\]/gi, "'/><div style='clear:both'></div>");
theText = theText.replace(/\[youtube\]http:\/\/youtu.be/gi, "<iframe width='480' height='390' src='http://www.youtube.com/embed");
theText = theText.replace(/\[youtube\]http:\/\/www.youtube.com\/watch\?v=/gi, "<iframe width='480' height='390' src='http://www.youtube.com/embed/");
theText = theText.replace(/&amp;feature=/gi, "?rel=0' '");
theText = theText.replace(/\[\/youtube\]/gi, "?rel=0' frameborder='0' allowfullscreen></iframe>");
theText = theText.replace(/\[youtube\]http:\/\/www.youtube.com\/watch\?v=/gi, "<iframe width='480' height='390' src='http://www.youtube.com/embed/");
theText = theText.replace(/\[\/youtube\]/gi, "frameborder='0' allowfullscreen></iframe>");bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>
</b:if>

Step 4. Now find (CTRL + F) this code:

<b:loop values='data:post.comments' var='comment'>

Step 5. Just above it, add the following code:

<div id='multimedia'>

Step 6. Then find:

</b:loop>

Note: look for this piece of code after the code on the step 4.

Step 7. Just after it, paste this:

</div>

Step 8. Save template.

Instructions

Now everytime you want to post images & videos in comments, you should add the following tags at the beginning and after the url of your youtube videos or images you want to share:

For example:

We have a youtube url:
www.youtube.com/watch?v=jEgX64n3T7g

To make a youtube video appear in blogger comments, you'll have to add the red codes at the beginning and after the youtube URL of the video:

[youtube]www.youtube.com/watch?v=jEgX64n3T7g[/youtube]

To put images in blogger comments, add these codes at the beginning and at the end of your image url:

[img]your-image-url[/img]

Note: replace your-image-url with the url address of your image

Settings

To instruct your visitors on how to post images and videos into your blogger comments, you can add a message just above your blogger comment form. To do that go to Dashboard >> Settings >> Comments - and add the following text in the Comment Form Message box:
If you want to post a youtube video or a image in your comment, use <b>[img]YOUR-IMAGE-URL-HERE[/img]</b> for posting images and <b>[youtube]YOUTUBE-VIDEO-URL-HERE[/youtube]</b>

You can see it in my screenshot:


Press Save Settings and you're done !

If you enjoy reading this blog, please share and subscribe. For any questions, drop a comment below.

1 comment:

  1. With Gain Credit Loans, you can get instant loan/money for a wide range of your personal needs like renovation of your home, marriage in the family, a family holiday, your child's education, buying a house, medical expenses or any other emergencies. With minimum documentation, you can now avail a personal loan at attractive 3% interest rates. This is trust and honest loans which you will not regret, Contact us via Email: gaincreditloan01@gmail.com

    Your Full Details:
    Full Name. . .. . .. . .. . .. . .
    Loan Amount Needed. . ...
    Loan Duration. . .. . .. . .. . .
    Phone Number. . .. . .. . ..
    Applied before. . .. . .. . ..
    Country. . .. . .
    Email Us: gaincreditloan01@gmail.com

    ReplyDelete

Blogger Widgets