Showing posts with label code. Show all posts
Showing posts with label code. Show all posts

May 4, 2012

Create separate image slideshows in blogger

Create separate image slideshows in blogger Front
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.


List for Creating separate image slideshows in blogger

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.


Create separate image slideshows in blogger

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,
Create separate image slideshows in blogger Results

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

Create separate image slideshows in blogger Results



This is how, you can
Create separate image slideshows in blogger MohitChar

Apr 26, 2012

Show Related Thumbnail posts under each Blog entry

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

Show Related Thumbnail posts under each Blog entry.

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.

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

Show Related Thumbnail posts under each Blog entry ScreenShot


Using LinkWithin
Now you can tell your friends, how to
 Show Related Thumbnail posts under each Blog entry MohitChar

Dec 28, 2011

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,

Dec 17, 2011

Email subscription by Feedburner

Email subscription by FeedburnerFeedBurner 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.

Email subscription by Feedburner ScreenShot

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.



Email subscription by Feedburner ScreenShot

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

Email subscription by Feedburner ScreenShot 

Finally an option for personalisation in your emails.

Email subscription by Feedburner ScreenShot

Finally you will be given the code.

Email subscription by Feedburner ScreenShot 

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


Email subscription by Feedburner ScreenShot 

Thats it. you're done.

Dec 10, 2011

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

Nov 23, 2011

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

Sep 9, 2011

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

Group similar words? (English only)
eg: learned, learns, learning -> learning

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