Embed Webpages on Websites

There are times while blogging or writing online, when you feel the need for a tool which can let you embed or paste a website directly on your page. So, What should you do to embed a live webpage at a live URL on another blog or a website? 

The simplest code based solution is an iframe. developers at facebook have been using this technology since their inception. Question is, how do you use it?

An iframe is according to the professionals at w3schools.com is "An inline frame is used to embed another document within the current HTML document." Which simply means, using this code will allow you to embed a document into another website just like a YouTube video.

The feat is accomplished very simply using the following code.

<iframe frameborder="0" height="400"

src="http://www.codemakit.blogspot.in/2012/07/complete-website-review-with-report.html" width="100%"></iframe>

This code must be pasted on the html tab of a blogger dashboard.

The above code has the following effect on the page.

Thus, using an iframe, you can still browse the complete website through this window. Try a few links to check. However for spammers and Blackhat SEO players, the iframe will not help you to gain precious search engine points. The reason being, any text or code inside an iframe is never scrutinized by web crawlers or spider robots, The bot will look it as just another code with link in it.

But you must understand, as per Google's updates, Such techniques might not be useful for your everyday developer too.

This is how you,

Read More

Remove youtube logo from your embedded videos

For most control freaks who want their and only their website's name on their site, Here's a very simple but crude way of removing You-Tube Logos from your embedded videos.

For this feat, you can use a simple command to be inserted into the embed code.
i.e. modestbranding,

If this option of modest branding is kept as on or 1, you'll get modest branding and You-tube will not show its icon at the bottom right corner of your You-Tube player.

Embedding a youtube video player is very simply shown here in this image.

Initial code, Without changes

Here is the initial code, for the video below, which does not contain the modestbranding command,
Notice that the You-Tube logo is present at the bottom right of the player.

IFRAME code

<iframe width="420" height="315" src="http://www.youtube.com/embed/XYZ" frameborder="0" allowfullscreen></iframe>

OLD YOU-TUBE code

<object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/TT12tr2YQJ4?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/TT12tr2YQJ4?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>

  

Final code, With changes

Here is the Final code, for the video below, which contains the modestbranding command,
Notice that the You-Tube logo is missing at the bottom right of the player.

IFRAME code

<iframe width="420" height="315" src="http://www.youtube.com/embed/XYZ?modestbranding=1" frameborder="0" allowfullscreen></iframe>

NEW YOU-TUBE code
 
<object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/TT12tr2YQJ4?modestbranding=1version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/TT12tr2YQJ4?modestbranding=1version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>

So, Just insert the code after the '?' (question mark) and provide value as 1, 

This is how you

Read More

Create separate image slideshows in blogger

Though blogger has an inbuilt lightbox feature, but you can still opt for better looks, if you want.

Highslide JS is an image, media and gallery viewer written in JavaScript. Main advantages that highslide offeres are, No plugins like Flash or Java required, also Popup blockers are no problem since the content opens within the active browser window, after opening the image, the user can scroll further down or leave the page without closing it.

Highslide is highly compatible for various systems, here's a list.

For including Highslide in your blog,
Follow the steps bellow.
Go to dashboard and click on templates,
On the next screen you see, click on Customise.

find in the code header tag and paste this right above 

(replace the highlighted XXX with either www.your-domain.com or username.fileave.com)

Here is the code for including the feature.

<!-- Start Highslide code -->
<script src='http://XXX/highslide/highslide-full.js' type='text/javascript'/></script>
<link href='http://XXX/highslide/highslide.css' rel='stylesheet' type='text/css'/>
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="http://XXX/highslide/highslide-ie6.css" />
<![endif]-->
<script type='text/javascript'>
//<![CDATA[
hs.graphicsDir = 'http://XXX/highslide/graphics/';
hs.wrapperClassName = 'borderless';
hs.align = 'center';
hs.dimmingOpacity = 0.65;
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;

// close button
hs.registerOverlay({
    html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
    position: 'top right',
    fade: 2 // fading the semi-transparent overlay looks bad in IE
});

hs.isUnobtrusiveAnchor = function(el) {
    if (el.href && /\.(jpg|gif|png)$/.test(el.href) && !el.onclick) {
        el.className = 'highslide'; // for the zoom-in cursor
        el.title = 'Click to enlarge'; // for title
        return 'image';
    }
};
//]]>
</script>
<!-- End Highslide code -->





Once included

The final result is nice,

Clicking on the image will open a lightbox, so that you can view the images nicely

This is how, you can

Read More

Show Related Thumbnail posts under each Blog entry

You must have encountered many websites and blogs, which show related posts from their own blog at the end of their post or blog entry, This can be very well achieved using nice CSS and HTML codes, But there are always shortcuts.

Here is one named, Linkwithin.

Linkwithin is a small team based in New York City, Basically LinkWithin is a blog widget that appears under each post, linking to related stories from your blog archive.



The widget is very simple to install. Here are the steps

Go to LinkWithin

 

Great, now

 Go to the embedded form in the site.

Fill your details in the form and click Get Widget.

The blogger users will be redirected to the following page.

at add Widget

If you have a working knowledge of CSS and HTML 

then you may change the codes just as you like

 

Next you need to position the widget just bellow the body in layout for the best effect.

 

Click on save.

Just open your blog and you'll see the difference, just bellow the post.

Using LinkWithin

Now you can tell your friends, how to

 

Read More

How to Embed a working YouTube Widget

Several Times we see websites ladden with content and no place to keep it organised, So web developers found a solution of getting a widget/gadget.

What do you do when You have a YouTube page filled with videos that you want others to see but couldn't, just because it is too much work to embed videos one by one, going on changing them frequently so that it looks original when people visit it.

So, here is what you do, You find yourself, a nice cool gadget which is consisted in an iframe, where the visitors themselves have the opportunity to select what they like.

Here you will find how to find a nice gadget which can be embedded in your site. Though there are several widgets to be included in your website available at

http://www.widgetbox.com/widget/youtube

But when I tried, None of them seem to be working, 

So tried a Different approach. Google searched for Gadgets (YouTube Gadgets) instead of widgets, and Voila, here was it. So, mind what you search for in Google, after all it,still is a search engine, not a human like you.

  

Google through YouTube has released two different types of gadgets. The older version is a single Video version, where your different uploaded videos come and go on the same portion of the screen. The newer version has a grid of videos displayed along with a search bar.

1. Google modules, YouTube Gadget Single Video Version
2. Google Modules, YouTube Gadget Grid Version

The feat can also be performed with JQuery at

http://danhounshell.com/blog/add-a-youtube-widget-to-any-web-site-with-jquery/ 

However, It may or may not fit in your site.

Here is a video About how to embed a YouTube Gadget in Your Site.

Now you know,

Read More

Email subscription by Feedburner

FeedBurner is a RSS feed management provider launched in 2004. On June 3, 2007, FeedBurner was acquired by Google. A month later, MyBrand and TotalStats were made free to all users. On August 15, 2008, Google completed migration of FeedBurner into its group of services. 

Publishers who have completed migration will access FeedBurner via feedburner.google.com (Through a redirection)

Now the question comes how can you create an email subscription box on your site, such that end users canenter their email address and recieve updates from your site to their inbox ?

Assuming you have a feedburner account. Go to publicize menu from your dash board.

Now click on the email subscription link at the left of the page. Now you will have to allow for email subscription, ( i.e. activate) and you will be presented several options.like Delivery time options.

Then you will be presented the subscription management option. Here you may choose the language of your post delivery.

 

Finally an option for personalisation in your emails.

Finally you will be given the code.

 

You will also have a preview of how the post would look like in someones, Inbox.

 

Thats it. you're done.

Read More

Animated flash tag cloud

Most bloggers know how to Add Labels to their blogs. A new concept (not very new), tells you that you could arrange those labels into an animated flash sphere which rotates or revolves with the movement of your mouse, known as Flash based tag cloud or Blogumus.


Over three years ago Amanda from Blogger Buster ported the wordpress cumulus tag cloud to blogger, this flash based tag cloud was and perhaps still is the best tag looking tag cloud for blogger.

Unfortunately this tag cloud stopped functioning for over 6 months. After numerous comments and emails the tag cloud was still non functional.


But Now the tag cloud is functional and works perfectly fine on blogger.
Here you'll learn how to to install a flash tag cloud for blogger or blogspot
There are two ways to do this.

A. Either You find an online generator,

• like on http://www.flashxml.net/tag-cloud.html
• or http://www.way2blogging.org/2010/06/flash-animated-label-cloud-widget-for.html

B. Or you can do it in the old school way.

Go to your template editor and find out this code

<b:section class='sidebar' id='sidebar' preferred='yes'>

Now after you've got this code paste the following lines of code just bellow the above line

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>

&lt;object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" &gt;
&lt;param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" /&gt;
&lt;param name="bgcolor" value="#ffffff" /&gt;
&lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;
<b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
</b:loop>
&lt;/tags&gt;" /&gt;
&lt;p&gt;Blogumulus by &lt;a href='http://www.roytanck.com/'&gt;Roy Tanck&lt;/a&gt; and &lt;a href='http://www.bloggerbuster.com'&gt;Amanda Fazani&lt;/a&gt;&lt;/p&gt;
&lt;/object&gt;


</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

However it has been found that in certain templates the second code is not required. So experiment and enjoy.

This was all about

Article Number UAN#034CMKT

Read More

How to create a scroll box containing code in blogger

Many a times bloggers try to insert code in their blogs but end up consuming huge chunks of space in their post with codes. A better solution is to combine and confine them in a special text box.

First thing you have to know is that if you try to type the HTML as it is (example <br />), the browser will interpret that as an instruction to display what follows in a new line (line break) but not display the HTML.


There are three approaches to this.

1. > Remove < and > and replace them with '&lt' and '&gt' in the code you want to insert.

2. > Go to http://centricle.com/tools/html-entities/
       paste the HTML codes in between <em></em> and click "encode", then proceed as usual.

3. > Another better option is using codewiz at http://gens.codezwiz.com/

 Here is a sample of how it will look like after its done.

<div style="width: 395px; height: 400px; background-color: a0ffff;
color: 000000; font-family: arial; font-size: 12px; text-align: left; border: 0px solid 00000; overflow: auto; padding: 4px;"></div>

Article Number UAN#026CMKT

Read More

Tag Crowd for tags

The service, Tag Crowd Lets you create your own tag cloud from any text to visualize word frequency.

You have 3 different options for a text source here,
1.> General Text
2.>Webpage URL - mostly used by savvy webmasters
3> Upload a file - mostly *.txt

Also the following options are available

Language of text:

Ignore common words in this language

Maximum number of words to show?

25 - 100 is a good range

Minimum frequency?

Don't show infrequent words

Show frequencies?

Show word count next to each word

no
yes

Group similar words? (English only)

eg: learned, learns, learning -> learning

no
yes

Don't show these words:

Exclude unwanted words.

After the options are selected, just click on visualize and  presto! Your crowd is in front of you.

The output that, you'll get would look a bit like this,

Finally, for saving the file also you have 3 options

html embed, printable/full screen, pdf

 choose what you like and enjoy.

 Article Number UAN#013CMKT

Read More