Better YouTube Support in Blogger

Blogger allows you to upload your own videos via the Blogger Post Editor. It also allows you to embed YouTube videos into your posts(by copy pasting the YouTube embed code into your post editor). Now Blogger has made this process even more simpler by providing a better interface for adding YouTube videos.

This YouTube integration is available only in the updated Post Editor. So if you are still using the old editor, it’s a good time for an upgrade.

This feature is currently available in the draft version of blogger. So, to test this new feature,you should login to your Draft Dashboard(http://draft.blogger.com) instead of the regular one(http://www.blogger.com)

Search for some video using some keywords, select the video and click the select button

Now you should see the video in your post Editor. You can continue editing the post using the WYSIWYG Editor and publish it. If you are trying to embed your own YouTube videos(The ones uploaded to YouTube by you), then you can use the “My YouTube videos” Tab.

Sharing a  video from YouTube.

YouTube has  got a Blogger Share Button which will enable you to quickly post the video onto your blog.This might be very useful when you suddenly stumble upon some interesting video and want to post it onto your blog.

If you have multiple blogs, select the appropriate one from the Popup Post Editor and you can quickly publish the video to your blog.

Read More

How to post large images in Blogger (Multiple Image Sizes in Blogger) ?

As you might already know, Blogger is integrated with Picasa and  all the images that you upload to Blogger automatically becomes a part of your Picasa account.Picasa has got 1 GB free Storage.So if your Picasa Account exceeds this 1 GB limit, you wont be able to post more images to your blog.(In that case you will have to buy additional Storage).

Each of your Blogs will be having a separate album in your Picasa Account. You can check it out at http://picasaweb.google.com  The visibility of these albums will be set to “Anyone With Link” and hence these albums won’t be publically visible to anyone.If you delete any of these images from Picasa, they will disappear from your blog as well. 

Images uploaded to picasa have some special properties which might come in handy for you. You can resize or crop these images so easily.

Resizing Images in Blogger / Picasa

The maximum width of a Picasa image is 1600px. If you upload images which have a bigger width, then picasa will automatically scale them to a width of 1600px maintaining the aspect ratio. Once you have uploaded an image to picasa/blogger, you can have multiple sizes of the image by altering the image url.

Example :https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja64cCl5JAaCXgDdl2w1T1MTD22_VsKRfBQmZ-JPImTG0kbTCuIMkphmtR-trnIroKafHNuE6BDITpLNFNKcRf4Ixp_Vz-HdXqPV6xHxaUhV44JZqB1OIbbVC5fKba2d9njFBUA9dUheg/ is an 1920x1020px image that I uploaded to picasa via blogger. It automatically got resized to  1600x900px

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja64cCl5JAaCXgDdl2w1T1MTD22_VsKRfBQmZ-JPImTG0kbTCuIMkphmtR-trnIroKafHNuE6BDITpLNFNKcRf4Ixp_Vz-HdXqPV6xHxaUhV44JZqB1OIbbVC5fKba2d9njFBUA9dUheg/s1600/1920.1080.jpg

This is the image url that I got in my blogger post Editor. You can get multiple sizes of the image by varying this bolded parameter. An image url with s1600 will have a maximum width of 1600px. Similarly an image urlhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja64cCl5JAaCXgDdl2w1T1MTD22_VsKRfBQmZ-JPImTG0kbTCuIMkphmtR-trnIroKafHNuE6BDITpLNFNKcRf4Ixp_Vz-HdXqPV6xHxaUhV44JZqB1OIbbVC5fKba2d9njFBUA9dUheg/s777/1920.1080.jpg will have  a maximum width of 777px. (Here as the actual image is larger than 777px, it will show a scaled pic with width 777px)

Here is another image that I uploaded

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7wd9GTfZ302_KPWZORUuoP8CSgCRLXrxKsyIpg65irOLt6PY5f8l572DEuuVIKJ8FS81Bj2AO7CqSwkZNeiESXcb_aua_FO3s-adJZFwVRLrjOnD1fpkUj7lL8hdCrpgc0eal4THhUyQ/  (actual size 126x131px)

Now lets try modifying the image url

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7wd9GTfZ302_KPWZORUuoP8CSgCRLXrxKsyIpg65irOLt6PY5f8l572DEuuVIKJ8FS81Bj2AO7CqSwkZNeiESXcb_aua_FO3s-adJZFwVRLrjOnD1fpkUj7lL8hdCrpgc0eal4THhUyQ/s777/christmas-bells-icon.png

Here the actual size of the image is less than 777 px and hence the original image will be shown without any scaling

Cropping images in Blogger / Picasa

Picasa can also provide you with Cropped images. You have to add a -c to the modifiable parameter to crop the image.
http://1.bp.blogspot.com/_u4gySN2ZgqE/TRoVyjWy22I/AAAAAAAABxA/s1600-c/zqjhDdXbITk/1920.1080.jpg
will provide you a cropped 1600x1600 px image
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7wd9GTfZ302_KPWZORUuoP8CSgCRLXrxKsyIpg65irOLt6PY5f8l572DEuuVIKJ8FS81Bj2AO7CqSwkZNeiESXcb_aua_FO3s-adJZFwVRLrjOnD1fpkUj7lL8hdCrpgc0eal4THhUyQ/s1600-c/christmas-bells-icon.png
will provide you with a cropped(Plus scaled) 1600x1600 px square image.
http://1.bp.blogspot.com/_u4gySN2ZgqE/TRoVyjWy22I/AAAAAAAABxA/s111-c/zqjhDdXbITk/1920.1080.jpg
will provide a  111x111px cropped version of the image
Remember 1600 is the maximum pixel size that you can use when modifying the image urls for cropping or resizing purposes.

-h parameter.
When adding images using the old Blogger Post Editor, you might have come across urls containing /s1600-h/ . These links will actually generate an HTML page where the image is embedded.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja64cCl5JAaCXgDdl2w1T1MTD22_VsKRfBQmZ-JPImTG0kbTCuIMkphmtR-trnIroKafHNuE6BDITpLNFNKcRf4Ixp_Vz-HdXqPV6xHxaUhV44JZqB1OIbbVC5fKba2d9njFBUA9dUheg/s200-h/1920.1080.jpg
is a link to an HTML page where the image is embedded(maximum width of the image is 200px)

Posting Big Images in Blogger

If you read everything posted above, then you should be able to manipulate the image links so that you get an image of an appropriate size. Refer These Screenshots  for posting large images onto Blogger. Click the image for a larger view.

New Post Editor

Old Post Editor

Read More

How To Add Related posts with thumbnail preview for WordPress and Blogger ?

Having a related posts section is very important for everyblog both in terms of traffic and seo . We have already a shared a method to add  related posts in Blogger by using a simple JavaScript hack . 

Linkwithin related post widget is somewhat similar to the above widget ,but it adds thumbnail previews from those related posts .Linkwithin related posts widget works with WordPress ,Blogger and Typepad .

Unlike as in first type of Blogger widget , Linkwithin plugin doesn’t add any seo enhancement to a blog . It just collects some images from the similarly labeled posts and list 3 of them along with anchor text . 

So if you are using Blogger , I advice you to use both Linkwithin and normal Related posts widget . 

You can see a demo in my blog .

Visit Linkwithin .

Installation is pretty much easy here .

Enter your email >blog address >select suitable blog platform and grab the widget code . 

Blogger users can make use of widget auto installation feature .Others includingWordPress will have to upload the plugin files to the corresponding directory and activate via plugin management .

Read More

Expandable posts in Blogger added by default

Blogger blogs were not with the functionality to add more section in blog post .

So this was leading to extra long posts on Blogger home pages , archives and labels . We earlier shared methods to add read more in Blogger using JavaScripts and some other hacks .

But theses were very hard to implement . Now as part of 10th anniversary of Blogger , the Blogger team announced a couple of new features which includes the option to add read more tag in Blogger blogs . This facility is available for users of  Blogger on draft .

How to add read more on Blogger .

Go to draft.blogger.com and from dashboard ,select the option Make Blogger in Draft my default dashboard .

Now go to create a new post .Over the tools , you will see a new option insert jump break. So whenever you need to add read more in Blogger just  click on this and publish the post . WordPress like expandable post summaries will be then added to the corresponding posts .

Read More

How to Add Google Buzz Button To Your Blogger Posts ?

Integrating Google Buzz Button in Blogger posts with some simple hacks is very easy now.

 

After introducing Google Buzz in global market now buzz have started to dominate the micro blogging arena and every blogger wants to Add Google Buzz Button in Blogger Blogs, With this service users can now share the stuffs with each other. Google have not provided any script for adding a social bookmarking button for your blog. So if you want to Add the Google buzz Button in your Blogspot posts then follow the steps given below here.

How to Add Google Buzz Button in Blogger Posts:

1: Login to Your Blogger Account.

2: On Your Dashboard, Click on Layout (see below shown picture for further assistance)

3:Now Click on HTML (see below shown picture for further assistance)

4: Now Check the box of Expand Widget Templates.

5: Now you can add the Google Buzz Button either at the end of the each post or below the title of the each post.

6: If you want to add the button at the end of each post then find this code in your template.

<data:post.body/>

Immediately After that Paste the code given below and Save your template and Done.

<div style='float:left;padding:2px;'><a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' rel='nofollow' title='buzz this'><img alt='buzz this' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA0-ADUcd2Jj-AuMZ_LldRpzN4_chFMA3NGht8LF0sYAmylOcuskAXBbHrRo-WbSTd2HWmsweoGO7GgCfLB1l40Eb9jIjpyivAiaLLsdA0dGzLFn8zCd10xzWAYcXUjtSSKWxGdA5reT-P/s400/Google+Buzz.png'/></a></div>

7: If you want to add the button at the below the title of each post then find this code in your template.

<div class='post-body' entry-content'>

and immediately below it, paste the following code and Save your template and Done.

<div style='float:right;padding:2px;'><a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' rel='nofollow' title='buzz this'><img alt='buzz this' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA0-ADUcd2Jj-AuMZ_LldRpzN4_chFMA3NGht8LF0sYAmylOcuskAXBbHrRo-WbSTd2HWmsweoGO7GgCfLB1l40Eb9jIjpyivAiaLLsdA0dGzLFn8zCd10xzWAYcXUjtSSKWxGdA5reT-P/s400/Google+Buzz.png'/></a></div>

If you have any trouble while implementing the code then comment below. Enjoy Buzzing

Read More

How To Disable Right Click In Blogger / Blogspot ?

Protect Your Content....

Many webmasters spend hours to create outstanding articles.And many newbies copy others work and publish in there blogs and websites.If you wish to protect your blog post or articles,here is a simple method of disabling the mouse right click in your blog post. 

This option is useful for the site and blog owners, who want to minimize the possibilities of the content direct copying to other posts.In this way you can protect your text, images links and etc.You can check this in real time action in my Computer Tips & Tricks blog. 

To setup this in your blog Copy the following code and paste it to your blog by adding a new page element. 

1. Go to Dashboard --> Layout --> Add Gadget --> HTML / JavaScript 

2. Copy(Ctrl+c) & Paste(Ctrl+v) the following code there . 

<script language="JavaScript"> <!-- //Disable right mouse click Script //By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive //For full source code, visit http://www.dynamicdrive.com var message="Function Disabled!"; /////////////////////////////////// function clickIE4(){ if (event.button==2){ alert(message); return false; } } function clickNS4(e){ if (document.layers||document.getElementById&&!document.all){ if (e.which==2||e.which==3){ alert(message); return false; } } } if (document.layers){ document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS4; } else if (document.all&&!document.getElementById){ document.onmousedown=clickIE4; } document.oncontextmenu=new Function("alert(message);return false") // --> </script>

3. Save the html/javascript and view you blog.

When you will try to do right click, a message will tell you that “Function disabled” , and if you want to change this words” Function Disabled” Then simply find it in code and replace it.

Read More