Sunday 30 June 2013

Absolute vs Relative Paths

Absolute vs. Relative Paths

One of the most common things newcomers to Web page creation get confused about is linking to other pages, including CSS files, and referencing images. At the root of the confusion are absolute and relative paths.

Absolute and Relative Paths

An absolute path refers to a file on the Internet using its full URL, e.g. "http://www.uvsc.edu/disted/php/webct/itr/index.php"
A relative path assumes that the file is on the current server, e.g. "php/webct/itr/index.php".

Exploring Relative Paths

Let's look at this in greater detail by examining a hyperlink. We saw hyperlinks in the last lesson, though we didn't really explore how they work. First, we're going to assume that we have a number of folders and files set up for our Web site, such as can be seen here:

If I'm working on the home page, which is "index.html" right at the top, I might write the following hyperlink:

<a href="contact.html">Contact Us</a>

Here we have "contact.html" as the target page I am linking to while "Contact Us" is what the current page displays as the clickable hyperlink. Stop and think: Is this a relative or absolute path?

Answer: relative path. By simply referencing the page's name I am assuming that the "contact.html" file is the exact same folder as the current page. However, if we were to look at the address bar after the "contact.html" page were loaded, it wouldn't just show "contact.html"; it would show the full path, something like: "http://www.yourmomscards.com/contact.html"
Let's say we have a folder called "products" on our Web site: "http://www.yourmomscards.com". Inside the "products" folder we have a file called "lotrtcg.html". The full URL of this page would be "http://www.yourmomscards.com/products/lotrtcg.html".
If I'm working on the home page, "http://www.yourmomscards.com/index.html", how can I use a relative path to link to the "lotrtcg.html" web page? We first have to point into the right folder, then point to the page itself:

<a href="products/lotrtcg.html">Lord of the Rings TCG</a>

Let's say in this "lotrtcg.html" file, we have the following link:

<a href="wowtcg.html">World of Warcraft TCG</a>

If someone clicked that, where do you think it would take them in the site?
It would take them to "http://www.yourmomscards.com/products/wowtcg.html"—assuming that page exists!
Now imagine that you want to link back to the home page of your Web site ("http://www.yourmomscards.com/index.html") from the "wowtcg.html" page. How would you reference that page using relative paths? Well, we have to jump back down out of the "products" folder first, and we do that with "../"

To get more complicated, what if we need to go from "http://www.yourmomscards.com/products/wowtcg.html" to "http://www.yourmomscards.com/events/tournies.html"?

<a href="../events/tournies.html">Upcoming Tournaments</a>

"../" tells the browser to go back a directory, and "events/" directs the browser into the "events" folder before opening the "tournies.html" page.
The "../" is very important in this link because it tells the server to go back a directory, and THEN look for the "events" folder. If you didn't do this, and just used

<a href="events/tournies.html">Upcoming Tournaments</a>

you would have told the browser to try to find "http://www.yourmomscards.com/products/events/tournies.html", which doesn't exist!
By the way, if you needed to go back two directories, you would use "../../" and so on, and so on.

Exploring Absolute Paths

Absolute paths tell the browser precisely where to go. Consider this:

<a href="http://www.fictionals.com/stories/stories.html">Read Stories</a>

It doesn't matter where the browser currently is because you've given them the entire URL, spelling out precisely what Web server, folder, and page to open up.
While this is easier to use and understand, it's not good practice on your own Web site. For one thing, using relative paths allows you to construct your site offline and fully test it before uploading it. If you were to use absolute paths you would have to change your code before uploading it in order to get it to work. This would also be the case if you ever had to move your site or if you changed domain names.

Saturday 29 June 2013

Google now redirects Picasa Web Albums to Google+ Photos | Internet & Media - CNET News

It's another nail in the coffin for Picasa Web Albums as its URL now brings users to their photo albums on Google+.

by Lance Whitney

March 5, 2013 7:21 AM PST

Picasa Web Albums is still alive and kicking, though its URL now directs you to Google+.

(Credit: Screenshot by Lance Whitney/CNET)

Google is once again trying hard to convince users of Picasa Web Albums to jump over to Google+ Photos.

The URL http://picasaweb.google.com no longer brings you to Picasa Web Albums but instead redirects you to Google+ Photos. As described by the Google Operating System Blog, which is unaffiliated with Google, you have to enter the URL https://picasaweb.google.com/lh/myphotos?noredirect=1 to sneak back into Picasa Web Albums.

You only need to enter that URL once, though. After you use it the first time, Google sets a cookie that turns off the redirection. So you can then go back to using http://picasaweb.google.com to access your Picasa photo album page.

Google has been touting Google+ as the "new home" for your photo albums. The search giant has already replaced Picasa Web with Google+ Photos in the navigation bar and has been redirecting individual photo albums to the Google+ interface, according to the Google Operating System Blog.
Picasa's days have seemed numbered for a while.

Last April, Google disabled the Picasa Web Album Uploader for the Mac and the Picasa Web Albums Plugin for iPhoto. It also put a halt to any future updates for Picasa for Linux. No new features have been added to Picasa Web Albums in general in quite some time.

Meanwhile, Google has been striving to improve the photo features in Google+. Last summer, it added new options that let you view another person's photo albums as a slideshow and download those albums to your computer.

But Picasa Web Albums still packs more photo features than does Google+. So Google may be keeping Picasa alive just long enough for it to bulk up Google+ Photos.

Topics:: Google,; Consumer content
Tags:: Google+,; Picasa Web Albums,; Google

Lance Whitney

Journalist, software trainer, and Web developer Lance Whitney writes columns and reviews for CNET, Computer Shopper, Microsoft TechNet, and other technology sites. His first book, "Windows 8 Five Minutes at a Time," was published by Wiley & Sons in November 2012.

Stop Picasa Links from Redirecting to Google+

How to Stop Picasa Links from Redirecting to Google+

By George Maschke | Published: 19 March 2012

If you use Google’s Picasa service to share photographs (as I do) and also use Google+, you may be troubled to discover that Google is redirecting links to your Picasa albums to its Google+ social networking service. I find this a dubious business practice that violates Google’s motto, “Don’t Be Evil.” It’s evil because:

Picasa users are not informed that their Picasa links will be redirected to Google+;
Those without Google accounts cannot download photos at full resolution from privately shared albums on Google+;
Google appears to be hijacking users’ Picasa links to promote its Google+ service.

Now, I do like Google+ (you’ll find me thereÂ here), but when I share a link to one of my Picasa albums, I don’t want my friends to be redirected to Google+. Fortunately, there is a solution: add “?noredirect=1″ to the URL. For example, this is the link to my public Picasa albums:

https://picasaweb.google.com/116790950801070160641

Clicking on that link redirects you to my albums on Google+. But the following modified link will not be redirected:

https://picasaweb.google.com/116790950801070160641?noredirect=1

If the link you want to share already includes parameters after a question mark (as will links to privately shared albums), then simply add “&noredirect=1″ to those parameters.

But we shouldn’t have to manually edit Picasa URLs to prevent them from being automatically redirected. Google should fix this by ceasing automatic redirects and offering Picasa users who so desire the option of sharing albums via Google+.

Be Sociable, Share!

Thursday 27 June 2013

blogger tips: Change Header Size In Blogger

Monday, 8 April 2013

We can increase or decrease header size in blogger blog.It is easy to adjust size of your blog header in blogger.

fallow below steps to change header size in blogger blog

step 1 : go to blogger dashboard

step 2 : click on template

step 3 : click on edit HTML and tick expand widget templates

step 4 : and find below code

/* Header
----------------------------------------------- */
.header-left{
display: inline-block;
height: 30px;
width: 300px;
float: left;
}
.header-right {
display:inline-block;
float:right;
}

and change height and width px value to resize blogger header.if you want increase blogger header increase px value or to decrease blogger header size decrease px value

step 5 : click on save template

Hide blog title and description from header on blogger - blogger tips

blogger tips: hide blog title and description from header on blogger

Wednesday, 10 April 2013

hide blog title and description from header on blogger

How to hide blog title and description from header on blogger:

We can delete or hide blog title and description from blogger blog header.With out adding any CSS code we can easily delete blog title and description from blogger header.

fallow below steps to hide blog title and description from blogger header

step 1 : go to blogger dashboard

step 2 : click on template

step 3 : click on edit template and tick expand widget templates box

step 4 :
To Delete blog title
search for below code

.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: 0 0 $(title.shadow.spread) #000000;

and add display:none; after above code to delete blog title.

To Delete blog description
search for below code

.Header .description {
font: $(description.font);
color: $(description.text.color);

and add display:none; after above code to delete blog description

step 5 : click on save template.

Wednesday 19 June 2013

How Web Designers can Transition into Coding

By Jake Rocheleau, 17 June, 2013 & filed under Design

Getting started as a web designer requires weeks or even months of practice and dedication. There are so many unique aspects in designing graphics for the web, you may often feel out of place. But one step towards feeling more comfortable as a designer is to advance your own development skills.

Having the ability to design PSDs and then code the design into a site layout is a huge benefit. You won’t need to rely on another web developer to work out your HTML5/CSS3. Plus right after designing a website layout in Photoshop you’ll be able to bring that work to life. It’s truly a skillset that requires time – but ultimately it will improve your knowledge and control on the web.

Do Some Initial Research

This first step is crucial for building a foundation as a web developer. I recommend hitting Google and searching for articles related to HTML5 web development. You should learn how to read HTML documents and understand the different tags, attributes, and general structure for pages.
Even if you spend time looking at other designs, you’ll gain a sense of ambition for your own work. Developers are often happy to share their code as open source for other developers to learn from. And with websites all the HTML/CSS is right there accessable from any web browser.

If you are already at a point where you understand HTML tags then you’ll be ahead of the curve. This initial research is just to get yourself familiar with setting up a document and how to structure a page layout. This is the easiest step because it doesn’t require any coding work – just some patience to go through and look into areas where you’re confused.

Practice Projects

Obviously the next step in making your transition is to create practice websites. This is an excellent time to combine both your design skills with practicing new development techniques. Try creating a simple webpage layout in Photoshop and then coding this into HTML5 markup.
You could use one of many online code IDEs such as jsfiddle or cloud9. With these webapps you won’t need to use desktop software as a development suite. Although if you are more comfortable building locally there are plenty of free open-source apps to choose from. But in my opinion creating practice websites online is much easier if you don’t mind having the code hosted elsewhere. It grants you the ability to demo the website right from within your browser window.

Working on a MacBook developing JSFiddle

By jumping into coding your own practice layouts you’ll learn some of the common beginner mistakes. A lot of these have to do with CSS positioning such as floats, multi-column layouts, and relative/absolute positioning. There are also lots of browser quirks to deal with between Gecko, Webkit, and Internet Explorer. But the only way to learn about these issues is through trial and error.

Finding Support

When you inevitably run into a wall that you just can’t solve there is no reason to stress yourself out. There will be plenty of times when you run into problems with CSS or even frontend JavaScript and no matter how long you stare at the code, you aren’t finding solutions. I have to recommend joining the greatest support community Stack Overflow.
You can search through existing questions if you think your problem is fairly common. Instead of using their default search you could alternatively punch keywords into Google and limit results to the StackOverflow.com domain. I’ve solved countless issues through the community and you can meet some really intelligent people along the way.

But even if you can’t find the direct answer to your question there’s always the option of posting a new help thread. Members of Stack gain points and reputation as they answer questions and get upvotes. There is incentive for skilled developers to help out newcomers because they’re gaining a stronger hold in the community – plus they’re helping solve related problems! Everybody wins and it’s a great community for newer web developers. There is also the newer Graphic Design Exchange which can answer questions about web graphics, backgrounds, patterns, and other Adobe Photoshop/Illustrator stuff.

Grinding and Pushing Forward

After the first few practice projects you’ll likely run into enough issues to learn from. After you’ve gained some solid techniques to quickly finish sample projects then you should set your sights on full website layouts. These could be static HTML or you could even move into CMS themes such as WordPress or Drupal. But note these often require a small handle on PHP, so understand that theming is not for the faint of heart.
With a combination of design & development techniques you’ll want to eventually focus in one area. Designers tend to spend a lot more time in graphics software such as Adobe Fireworks and Photoshop. If this is where your true interest lies then stick with it! Having the frontend dev skills to code your layouts is just one of the benefits to learning HTML5/CSS3.

ColdFusion CFMX Flex Web Developers Conference 2006 Bethesda

But if you really enjoy the development aspect it may be a chance to move into more convoluted languages. JavaScript/jQuery is the most heavily supported scripting language across all modern browsers. I would have to recommend this as the next step up from creating static HTML/CSS web pages. However it’s not even in the same level as HTML markup or CSS styles, so be warned it’ll be tough to get started.
However I can think of plenty great frontend user interface developers who also cater towards designing killer web graphics. There’s no reason a person can’t possess both sets of skills and do their job perfectly. It just requires some dedication and a lot of hard work. But even after a few months’ time you should be in a much stronger position as a web designer and developer.

Final Thoughts

I hope this article can get you thinking about a few ways to improve your development skills. Starting with a background in Photoshop it may be daunting to move into frontend dev languages. But it’s a useful skillset to not be relying on others for support.
The best way to get started is by going through tutorials online related to HTML5 and CSS3 web development. It will not come to you overnight, but with enough practice you’ll be churning out layouts quicker than you can design them. And as you practice on more layouts you’ll begin to feel a lot more confident with your work quality. If you have any questions or related advice feel free to share with us in the post discussion area below.

Author: Jake Rocheleau

Jake is a digital researcher and writer on many popular design magazines. He frequently writes on topics including web design, user experience, mobile apps, and project management. You can find him all throughout Google and tweeting @jakerocheleau. Connect with Jake on google+

Monday 17 June 2013

How To Embed And Display RSS Feeds On Any Web Page: Best RSS-To-HTML Publishing Tools

Best RSS-To-HTML Publishing Tools Comparison Table

Best RSS-To-HTML Publishing Tools

Grazr

Grazr is a free tool that allows you to embed and display RSS feeds onto any web page or social media sites. Grazr creates a customizable JavaScript-based widget with RSS feeds URLs you copy and paste into the dedicated editor. You can also drag&drop feeds and update your widget very easily. OPML files importing is fully supported.

http://www.grazr.com/

Bitty Browser

Bitty is a free embeddable browser that allows you to have a navigable window inside your own web site or any social media site. Bitty can display web sites, RSS feeds, podcasts, and more. If you want Bitty to display a RSS feed of your choice, just paste the URL (OPML files are also supported) inside the browser and then embed the code wherever you like. You can also customize some limited options on how the browser will be shown on web pages.

http://www.bitty.com/

Feedroll Pro

Feedroll Pro is a web-based service you can use to build, display, and embed RSS feeds onto your web pages or social media sites. Just register to the site and purchase the service (first month is free) for $14.95/month. Feedroll Pro creates a JavaScript widget with RSS feeds (OPML importing is supported) and then provides you with a piece of code you can customize and embed wherever you like.

http://www.feedrollpro.com/

Feedroll RSS Viewer

Feedroll RSS Viewer is a free tool to create, embed and display a feed onto your web site or social media sites. Feedroll uses a customizable JavaScript-based widget to publish RSS feeds. OPML importing is not supported, and you can just select among a fixed range of news feeds, but not displaying a feed of your choice.

http://www.feedroll.com/rssviewer/

Feedo Style

Feedo Style is a web-based tool to create a widget out of an RSS feed. Once you input a single RSS feed of your choice, a JavaScript widget will be created and you can embed it on your blog or preferred social media site. If you want extensive customization features or have Feedo Style manage multiple feeds, you can purchase one of the advanced pricing plans, starting at $4.99/month. OPML importing never possible.

http://www.feedostyle.com/

Google Gadget Builder

Google Gadget Builder is a free tool that allows you to create a gadget that will displayed on iGoogle homepages. You can freely customize your gadget to display RSS feeds and then also promote and monetize it via AdWords. No OPML importing features. Embedding is limiting to iGoogle homepages, so personal web pages or social media sites are excluded.

http://tinyurl.com/cx9h7s

Google Dynamic Feed Control Wizard

Google provides a free service to embed a dynamic feed control on your web page and let your users see customized views of the feeds. You can freely customize the way the dynamic feed control should be displayed, and then simply copy and paste the Ajax-based code onto your web site or iGoogle homepage. No OPML importing feature or social media integration features supported.

http://tinyurl.com/3jemrf

Blidgets

Blidgets are free JavaScript widgets that display the content of an RSS feed, and can be embedded on any web page or social media site. Widgets can be completely customized. OPML importing not available. If you need advanced features like the video playing facility or display tabs inside your widget, you can upgrade to Blidget Pro for $3.99/widget.

http://docs.widgetbox.com/developers/blidget/

Feed Informer

Feed Informer is a powerful tool to embed and display RSS feeds in any web page. Free to use, Feed Informer provides you with a customized feed digest in HTML, PHP, Flash, JavaScript, ASP, or JPG and PDF files. Social media integration is fully supported, as well as the possibility to import multiple feeds at once using an OPML file.

http://feed.informer.com/

WebRSS

WebRSS is a free tool that allows you to display a RSS feed on your web site. RSS can be converted to HTML, PHP, ASP, or JavaScript widgets and easily customized to match the look and feel of the web site. Embedding on social media is not supported, and OPML files cannot be imported into WebRSS.

http://www.webrss.com/

Optimal Widget Generator

Optimal Widget Generator is a very essential tool to build a widget that displays a RSS feed of your choice, and embed it on any web page. Completely free to use, Optimal Widget Generator can customize only the dimension of your widget but not the appearance. Widget can be embedded using IFRAME tag. OPML file importing is fully supported, but social media integration is not possible.

http://optimalbrowser.com/widgetwiz.php

Yourminis

Yourminis provides a free, web-based tool to create a Flash widget out of a single RSS feed. You can then embed the widget on any web page or social media site copying and pasting a piece of code. You can freely customize appearance and dimensions of your widget, but not importing an OPML file.

http://tinyurl.com/5jfvaz

FeedForAll

FeedForAll is a software available for Mac and Pc that lets you create, edit, and syndicate RSS feeds and podcast right from your machine. RSS feeds are displayed in HTML format and are easily customizable and embeddable on any web page or social media. OPML importing is not supported. FeedForAll costs $34.95 for a single license on both platforms.

http://www.feedforall.com/free-php-script.htm

CaRP Evolution

CaRP is a PHP script that lets you generate RSS feeds for your web page. CaRP comes in two different versions: LE (basic) and Evolution (enhanced). The LE version allows no control on the appearance of your feeds, while the Evolution version comes with sixteen free bonus plugins to let you customize your RSS-generating experience: auto-update feeds, add images, embed videos, select which part of the text you want to show, sort your feeds, and much more. CaRP LE is free and CaRP Evolution is priced at $47. Registration required for both.

http://www.geckotribe.com/rss/carp/

RSS2HTML

RSS2HTML is a free tool that allows you to publish a RSS feed on your web site. Just customize the JavaScript widget RSS2HTML will create for you, paste the URL of a RSS feed of your choice, and then copy the code to your web pages. Embedding on social media sites or importing OPML files are not supported.

http://www.rss2html.com/

RSSinclude

RSSinclude is a free tool from RSS-Info.com that allows you to create a widget and display the content of a RSS feed inside it. Widget can be embedded with JavaScript code, PHP code or using an IFRAME tag on any web site or social media. OPML importing facility is not available but feed customization is supported.

http://www.rss-info.com/en_rssinclude-simple.html

Free RSS to HTML PHP Script

The free RSS to HTML PHP script is a tool from FeedForAll that allows you to embed a RSS feed inside a web page or social media site for viewing with a regular browser. The advantage of such solution is having pure, auto-updating HTML code which is indexed by search engines. Installation instructions included in the .ZIP file available for free download.

http://www.feedforall.com/free-php-script.htm

Shyftr

Shyftr is a brand new RSS-to-HTML tool that allows you to create, embed and display a RSS feed on a web page through a JavaScript-based widget. The widget is fully customizable and brandabale. Shyftr lets you also merge multiple RSS feeds into a customized one, which you can later syndicate or embed on your web site. OPML importing and social media integration are unsupported for the time being.

http://www.shyftr.com/

Link: http://www.masternewmedia.org/how-to-embed-and-display-rss-feeds-on-any-web-page-best-rss-to-html-publishing-tools/#ixzz2WTZqtBDw

Sunday 16 June 2013

RW - attribute link and resource link function - example from RWExtras

RWExtras : Simpler webdev, one stack at a time…

Using the prettyP Photo Gallery couldn't be easier as it's just drag and drop. To learn how to use it, just review the first video on the Easy Galleries page.

However, you can only drag and drop images therefore, for other content, such as videos, external websites, inline content, etc. we'll need a different stack: prettyP Any Gallery. To use it effectively, this stack requires a basic understanding of the Add Link feature in RapidWeaver.

To use the prettyP Any Gallery stack, please check the second video on the Easy Galleries page to see how it's done. As you can see, you select the default text "Add link to content here" and click on the Add Link icon at the top of the screen. You'll get a window like this one:

Here, you need to fill out 2 areas:

The location of your content (input box in front of the highlighted URL drop down list) and
The Value of the 'title' which becomes the description that you'll see at the bottom of the lightbox.

However, if you click on the URL drop down list highlighted in the previous screenshot, you get this 3 options: URL (default), Page and Resource.

The URL option is used to link to images located on a server. URLs look like this: http://rwextras.com/media_files/img7.jpg. Hold this thought as we'll see more examples of URLs very shortly...

The Page option does not apply to prettyPhoto.

However, the 'Resource' option is very important because it allows you to easily link directly to any content added to the Resources.

To use it, just select the appropriate Resource from the list that will appear on the right of the black triangle, then add a 'Value' to the 'title' attribute, which will become the description at the bottom of the lightbox, and you're done. No manual links to set up.

However, to add other types of content, such as videos, external websites, inline content, etc., we can't avoid having to add some basic code to the URL input box.
The table below provides typical links to different types of content.

As you can see, in most cases, the code is just a URL followed by settings for width and height to allow prettyPhoto to properly size the lightbox…

Content

URL

Inline Content

#inline

Then, add a hidden div with your content anywhere on the page following this pattern (notice that the URL above, following the # sign, and the div's 'id' must match…):

<div id="inline" style="display: none;">



Lorem  ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim  veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea  commodo consequat.</div>

External Website

http://realmacsoftware.com?iframe=true&width=900

&height=500

YouTube Video

http://www.youtube.com/watch?v=LUOvAQkLfRE &width=420&height=315

Vimeo Video

http://vimeo.com/1431195?width=600&height=338

Quicktime Video

http://rwextras.com/media_files/afternoon.mov

?width=300&height=360

QTVR Video

http://rwextras.com/media_files/street360.mov

?width=400&height=300

FLV, MP4, M4V Video

http://rwextras.com/media_files/fringex.mp4

?width=640&height=352

Flash Content

http://rwextras.com/media_files/tangramone.swf

?iframe=true&width=400&height=300

Google Docs

http://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf

&embedded=true&iframe=true&width=1000&height=500

Google Maps

#map

Then, add a hidden div like this anywhere on the page with the HTML code provided by Google Maps inside of it (notice that the URL above, following the # sign, and the div's 'id' must match…):

<div id="map" style="display:none;">

Paste here "HTML to embed in website" (from Google Maps website)

</div>

For those of you technically inclined, who prefer NOT to use the 2 complementary stacks, the table below provides full details to set up links either fully manually or using RapidWeaver's Add Link feature.

Content

Live example

Code

Single Image

Link text here

<a href="http://rwextras.com/media_files/pic1.jpg" title="Single image" rel="prettyPhoto">Link text here</a>

Image Gallery

Link text here

Requires 2 parts:
Part 1- Link to first image in the gallery:
<a href="http://rwextras.com/media_files/pic1.jpg" title="Image 1" rel="prettyPhoto[gal]">Link text here</a>

Part 2- Hidden div with links to remaining images in the gallery:

<div style="display:none;">

<a href="http://rwextras.com/media_files/pic2.jpg" title="Image 2" rel="prettyPhoto[gal]"></a> <a href="http://rwextras.com/media_files/pic3.jpg" title="Image 3" rel="prettyPhoto[gal]"></a> <a href="http://rwextras.com/media_files/pic4.jpg" title="Image 4" rel="prettyPhoto[gal]"></a> 

</div>

Inline Content

Link text here

Requires 2 parts:
Part 1- Link to the hidden div included in Part 2 below:

<a href="#inline" title="Inline Content" 

rel="prettyPhoto">Link text here</a>

Part 2- Hidden div with content (notice that the 'href' above, following the # sign, and the div's 'id' must match…):

<div id="inline" style="display: none;">



Lorem  ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim  veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea  commodo consequat. Duis aute irure dolor in reprehenderit in voluptate  velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint  occaecat cupidatat non proident, sunt in culpa qui officia deserunt  mollit anim id est laborum.

</div>

External Website

Link text here

<a href="http://realmacsoftware.com?iframe=true &width=900&height=500" title="External Website" rel="prettyPhoto">Link text here</a>

YouTube Video

Link text here

<a href="http://www.youtube.com/watch?v=LUOvAQkLfRE &width=420&height=315" title="YouTube video" rel="prettyPhoto">Link text here</a>

Vimeo Video

Link text here

<a href="http://vimeo.com/1431195

?width=600&height=338" title="Vimeo Video" rel="prettyPhoto">Link text here</a>

Quicktime Video

Link text here

<a href="http://rwextras.com/media_files/

afternoon.mov?width=300&height=360" title="Quicktime Video" rel="prettyPhoto">Link text here</a>

QTVR Video

Link text here

Very large file, might take a while to load...

<a href="http://rwextras.com/media_files/

street360.mov?width=400&height=300" title="QTVR Video" rel="prettyPhoto">Link text here</a>

FLV, MP4, M4V Video

Link text here

<a href="http://rwextras.com/media_files/fringex.mp4

?width=640&height=352" title="MP4 Video" rel="prettyPhoto">Link text here</a>

Flash Content

Link text here

<a href="http://rwextras.com/media_files/

tangramone.swf?iframe=true&width=400&height=300" title="Flash Content" rel="prettyPhoto">Link text here</a>

Google Docs

Link text here

<a href="http://docs.google.com/gview

?url=http://infolab.stanford.edu/pub/papers

/google.pdf&embedded=true&iframe=true&width=1000&height=500" title="Google Docs" rel="prettyPhoto">Link text here</a>

Google Maps

Link text here

Requires 2 parts:
Part 1- Trigger:
<a href="#map" title="Google Map" rel="prettyPhoto">Link text here</a>

Part 2- HTML Code from Google Maps (notice that the 'href' above, following the # sign, and the div's 'id' must match…):

<div id="map" style="display:none;">

Paste HTML to embed in website (from Google Maps website)

</div>

In RapidWeaver, links can be added using 2 methods:

Manual links (as described above using <a> tags
Add Link command

The image below shows how manual links relate to links created using the Add Link method:

The 'href' attribute becomes the URL
The 'title' attribute is entered in the Custom Attributes area
The 'rel' attribute is added and entered in the Custom Attributes area
The link text is the text (or thumbnail…) to which Add Link is applied

If you decide to use the Add Link method with prettyPhoto (without the help of the complementary stack), please refer to this information to adapt the examples described in the table above.

Setting links & attributes in RapidWeaver 5 - Beginner’s Guide

RapidWeaver 5 Beginner’s Guide > RapidWeaver 5 Beginner’s Guide > Links : Safari Books Online

Links

Whether you link to other pages on your site or to other external websites, it goes without saying that you are going to want to add links to your web pages. RapidWeaver makes this very easy. You don't need to touch any code at all.
Simply highlight the text or image that you want to link and click on the Set Link button that we saw earlier in this chapter. You will notice a new window has appeared where we can enter in our link information.

Linking to a URL or e-mail

The default drop-down option is set to URL. To link to an external page, simply type or paste in the URL of the page that you want to link to. The URL must begin with either http:// or https:// in order for the link to function properly.
If you want the link to simply start a new e-mail to a particular address, simply type or paste the e-mail address in the same location where you would have typed in the URL. You will want to leave the drop-down option set to URL. I should advise you that this may cause you to receive unwanted SPAM e-mail as anyone can send an e-mail directly from your website.

You can add a default subject, body, or other attributes to the e-mail that will be created when your link is clicked. To do this, simply add the attributes to the end of the e-mail address as if it were URL parameters. The values will have to be URL encoded. For example, you will need to replace all your spaces with %20. The following entry will add the subject "This is the subject" and a body of "This is the body" to the e-mail:
someone@example.com?subject=This%20is%20the%20subject&body=This%20is%20th e%20body
For more information on other options available head over to http://www.mailto.co.uk/ .

Linking to an internal page or resource

If you want to add a link to a page or resource that already exists within your project file, simply navigate to the page or resource from the page drop-down menu that defaults to URL.

When you use the drop-down menu to link to your internal pages, RapidWeaver will always maintain those links even if we rename or change attributes for our pages within our project file. If we were to instead type the URL to the published pages, RapidWeaver would not maintain that link for us if we were to change any of the attributes on the linked page. For example, if the page or folder name of the page we linked to was changed, RapidWeaver would only change links to that page if actually referenced the page instead of using a URL.

Opening in a new window

If you want the link to open in a new window or tab when it's clicked, make sure that you check the Open in New Window setting.

If I am linking to an external website, I tend to always open those links in a new window. This means that the user does not leave my website and can come back to where they were extremely easily. If the link was opened in the same window, then the user would have to search through their browser history in order to get back to the page on my site.

Custom attributes

For all you tech geeks out there, you can add all the custom attributes that you want to link. This could be useful for many things such as launching a lightbox.

The following is a list of common attributes that can be added into a link:

rel: Specifies the relationship between the current document and the linked document. This attribute is commonly used to trigger JavaScript actions as well.
class: Specifies a class name for custom CSS styling or to trigger a JavaScript action.
ID: This is the unique ID for the element. This is commonly used to trigger JavaScript actions or custom CSS as well.
tabindex: Specifies the tab order of an element.
title: The information entered here will be displayed in a tooltip when a user's mouse hovers over the link.
onclick: Custom JavaScript to run when the link is clicked.

Removing links

It's very simple to remove a link. Simply highlight the link with your mouse and click on the Remove Link button on the bottom toolbar. You can also select the link text and choose Clear Formatting from the Format menu.

Saturday 15 June 2013

Blogger Static Home Page: Home Page

An example of how to configure a static home page on Blogger

Home Page

Welcome to my home page! Creating a static home page on Blogger is very easy to do. Just a simple redirect will allow you to be setup correctly. Since the static home page is really a redirect, you should consider the implications of this technique with the option of going to your blog posts. To read more about how Google indexes and shows a Blogger static page in its results read this post - How Blogger Static Pages Display in Google Results

The scrolling image you see above is the menucool javascript widget that you can add to your blog. See my tutorial by clicking on the link above.

Remember, if you don't want to manage a static page you can always have a fixed section at the top of your blog using the layout editor and have the blog entries start below it.

Embed videos and playlists - YouTube Help

YouTube Live Streaming Guide

Embed videos and playlists

Add YouTube videos and playlists to a website or blog by embedding it.
Here’s how to embed a video:

Click the Share link under the video.
Click the Embed link.
Copy the code provided in the expanded box.
Paste the code into your blog or website.

Here’s how to embed a playlist:

Click Playlists on the left side of your YouTube page
Click the playlist title you'd like to embed.
Click the Share link.
Click the Embed link.
Copy the embed code that appears in the menu below.
Paste the code into your website or blog.

Embedding options

Use HTTPS Enable Privacy-enhanced mode Use old embed code Make an embedded video automatically play Start an embedded video at a certain time Add captions to an embedded video Disable embedding

Using YouTube Channels with FeedWind | FeedWind Blog

How to use YouTube channel RSS in FeedWind

Just as with many other sites where new content is continuously published, YouTube channels are available as RSS feeds and FeedWind can cater for them and display them all. This will allow you to publish one or more YouTube feeds through a widget on your website. For general use the process is really simple. Find the channels you want and if you intend to get an RSS feed from multiple YouTube channels you can use multiple feeds aggregated.

YouTube is organized much like many other places that offer continuously updating content. In their case they use “channels” which are organized just like TV channels, by topic, genres age group – the main difference being that a YouTube channel can be started and run by anyone as they are free and not subject to broadcasters fees etc. that TV stations must adhere to. This has made YouTube into the world’s largest broadcaster so anyone looking to find suitable content to feed into their site should look no further.

Content from YouTube is also royalty free as long as it is used within the scope of the YouTube terms and conditions which actually affect the publisher a lot more that those looking to use the content. This makes YouTube an ideal source for material for any website – there are 8 years of content uploaded every day to YouTube – a staggering amount of content.

Using FeedWind to display YouTube content is a breeze. Simply copy the URL of the RSS feed from YouTube and paste it into the FeedWind setup screen.

Rather unhelpfully there is no icon to right-click on and copy the link. The link is simply taken from the URL of the YouTube Channel page.

In our example we picked out a soccer channel:

JUST THUMBNAILS

In this first example you can see there are only thumbnails of the available videos displayed. For those with a limited amount of screen acreage, this is an ideal solution. To reduce the feed to thumbnails like this, open the Entry Contents section "advanced settings" and toggle the html tag radar button.

FULL DISPLAY

In the following image (below) the html tag has been toggled to "on". To enable the FeedWind widget to display properly, the General section has been adjusted to allow for a wider container.

Select any parameters that you might want to adjust such as colors and design options and then select “advanced settings” from the Entry Title section. Here you will notice 3 radar buttons at the bottom of the form. These allow you to toggle the display of the feed in the widget you are creating. You can display either an icon, a player (to play the video on or playback an audio track) or hide them both and retain simply a text output. In the next settings section”Entry Contents,” settings will change depending on what you have decided in the Entry Title section.

Switching the contents off removes the text and leaves just a player or a video behind. The titles can also be toggled on/off in the Entry Title Section by selecting the same text color as the background color. Currently there is no ability to toggle the title using a radar button or checkbox but this may be available in future FeedWind releases.

Whatever your YouTube channel offers, it can be fed to your website through a FeedWind widget - its free and so easy there's no reason not to give it a try!

Get Youtube Video Channel RSS Feed URL in 2 Seconds! | Social Media & Online Marketing

Get Youtube Video Channel RSS Feed URL in 2 Seconds! | Social Media & Online Marketing

Another quick entry, courtesy this guy -

I was looking for the RSS feed of one of my Youtube Channels but well, lets just say couldn't find it on Youtube. So of course I google it, and this guy Rick Neilsen just did it for me in less than 2 seconds.

Here it goes -

If you got a youtube channel, simply replace the text 'YourYouTubeUsername" from the link below with the name of the channel. AND ITS DONE.

http://gdata.youtube.com/feeds/api/users/YourYouTubeUsername/uploads

Helpful or not? Let me know!

YouTube RSS Feeds - Everything You Need To Know About

Everything You Need To Know About YouTube RSS Feeds

If you’re a lover of RSS feeds, you’ll know that they can be extremely versatile. Being able to import new content from your favourite websites into your RSS reader is a tool so handy it’s not easily forgotten. Likewise, being able to grab the latest audio and video podcasts from your favourite content creators is extremely useful.

YouTube is also a site filled with video content which can be extracted via RSS. You might be keen to share YouTube RSS feeds of your own content or you might want to get RSS feeds of things that interest you. Whatever your reasoning, you’re going to need to know a little bit about YouTube RSS feeds in order to get started.

The Basics Of YouTube RSS Feeds

YouTube RSS feeds are able to be read using most regular RSS readers and podcast software. The YouTube RSS feeds can also be used to bring videos into lifestreams, to be downloaded or to share your feed with video content delivery tools like Miro or iTunes.

You can preview any feed and generate interesting feeds using YouTube’s Data API Demo tool. It will also let you filter for certain categories and do some really interesting stuff.

youtube rss feed

RSS Feeds For Your Own YouTube Channel

To get your RSS feed URL for your YouTube channel, you can use this format to get the URL:

https://gdata.youtube.com/feeds/base/users/USER_ID/uploads (Includes images)
 https://gdata.youtube.com/feeds/api/users/USER_ID/uploads (Without images)

To get the RSS feed URL for your favourites in YouTube, use this URL format:

https://gdata.youtube.com/feeds/api/users/USER_ID/favorites

You should note that metadata such as titles, tags and description can be seen in the RSS feed, so it’s important to add those details when you upload your videos to YouTube.

Some Other Useful YouTube RSS Feeds

For playlists, you’ll need to get the playlist ID. This is the big long code at the end of the playlist URL after you see list= written. For instance, in the following URL, the playlist ID is PL06D1F979F292B698.

http://www.youtube.com/playlist?list=PL06D1F979F292B698

To get the RSS feed URL for a playlist in YouTube, use this URL format:

http://gdata.youtube.com/feeds/api/playlists/PLAYLIST_ID

You can also get an RSS feed URL for a keyword search in YouTube using this format:

http://gdata.youtube.com/feeds/api/videos?orderby=updated&vq=KEYWORD

For more interesting RSS feeds, go to the YouTube Data API Demo tool (as mentioned before).

Downloading Videos From YouTube RSS Feeds

Once of the reasons YouTube RSS feeds are useful is to give you an easy way to download content from YouTube. For instance, you could set things up so that you download videos from YouTube via the RSS feed of your favourites or a playlist. From then on, anytime you favourite a new video on YouTube that will be downloaded for you. This could be very handy for collecting local copies of videos your friends and family upload for you to see.

Streaming Videos To WordPress

There are a number of ways to use RSS to stream video from YouTube within WordPress. The first, quickest option is to use a plugin like TubePress, which creates a gallery of YouTube videos using the YouTube Data API RSS feeds.

youtube rss feed channel

There are also ways to code your own RSS feed integration into WordPress. If you’re keen to give that a go, take a look at Jarrett Gucci’s guide to streaming YouTube video into WordPress. The code’s all there for you to cut-and-paste and alter as you see fit.

Note, if you’re using WordPress.com you can add video from YouTube using shortcodes.

What are some of the great YouTube RSS feeds you’ve generated or found? What do you use the RSS feeds for? Do you display them on a site, download them, add them to a lifestream or do something else entirely?