Seth's Code and PC tutorials: links

Showing posts with label links. Show all posts

Monday, January 21, 2013

Syncing Opera

Opera on first run.

Almost everyone owns multiple devices today: phones, tablets and computers all have their specific purposes. And we all use the Internet for almost everything. Which makes it nice for us to be able to sync our bookmarks, history, notes and whatnot. Chrome, Firefox, Opera and most other browsers offer methods of syncing all your devices. I will go through syncing my Joli computer with my other computers. I customize my browser allot. I need my search engines synced.

Go to the computer which has the customized opera. Click on the Opera logo in the upper left corner and select "Synchronize Opera," then "enable synchronization". Log into My Opera or creat an account. Next, you need to do the same thing in the Opera browser you just installed. Click "I already Have an account and log in. Then you will see a screen asking you what you want to sync. Check everything you wish to be synced between your different browsers, and click "finish." Your web browsing experience will be the same on all devices. Unfortunately, Opera does not sync themes or extensions, so you will have to do that manually. However, Opera Link is very handy.

Sunday, January 6, 2013

How to display reccomendations via Facebook

One of the easiest ways to get users to visit another page on your site is to recommend pages they will like. One of the easiest ways is to display a Recommendations box with Facebook. But, to add like buttons to other hosts is easy.
To add the recommendations box to your site, navigate to developers.facebook.com/docs/reference/plugins/recommendations/ and fill in the box. You can customize it easily. Put the Facebook Javascript SDK in your <head> tags;
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Then paste the box code into the place where you want it to appear:

<div class="fb-recommendations" data-site="http://sethsdiscoveries.blogspot.com" data-width="300" data-height="300" data-header="false" data-font="trebuchet ms"></div>

Monday, December 31, 2012

Customizing how pages appear in Google+ shares

Quite often, you will see the Google+ share button. But did you know Google gives us away to customize the way the link looks when its shared? In fact, it is very simple. The code is basic. Add it to the <head> tags.
<html itemscope itemtype="http://schema.org/Article">
<meta itemprop="name" content="Title">
<meta itemprop="description" content="My Description">
<meta itemprop="image" content="image URL">
It is also easy to create a share button. Here's the code:

<script src="https://apis.google.com/js/plusone.js"></script>
<g:plus action="share"></g:plus>
You can make the share button load without any additional loading time to your page with this code:
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

Of course, you can add a +1 button to your site and it will enable sharing:


<div class="g-plusone" data-annotation="inline" data-width="300" data-href="URL to +1"></div>


<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

You can do all sorts of things with the Google+ platform, and integrate your site very well with the plugin page. I recommend you check it out.

Add Comments to your site using Facebook

Comments are used on blog posts and websites all over the web. They can be very useful for getting feedback from users. One of the most popular and easiest ways is by using Facebook for your commenting. First, navigate to http://developers.facebook.com/docs/reference/plugins/comments/ and enter the URL of the page you wish the comments to appear on. There are some basic customization options. Click "Get Code" and you will see two boxes of

code. The first you should copy and paste right after the <body> tag of your webpage. I got this code:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
The other code is pasted where you want the comment box and comments to appear. You can moderate these comments. To do so simply paste this code into the <head> of your page. <meta property="fb:admins" content="{YOUR_FACEBOOK_USER_ID}"/> As you can see, its really very simple. And its a wonderful and useful way of communication. Facebook might not be the best social network, but it certainly provides one of the best ways to add comments to a page. Google+ fans, you can't help but admit that this is a very useful thing.

Wednesday, December 26, 2012

Displaying webpages with iFrames

Iframes were once popular to hide content from the Search Spiders, a form of Blackhat SEO. Now that these spiders can see through iframes, I don't recommend using them for that purpose; it could get your site banned. However, they can be useful for displaying other sites in your webpages for various purposed. The basic code is:
<iframe src="URL" width="200" height="200">
Sorry, there was a problem loading this site. Maybe we typed the URL wrong or you can get a new browser <a href="http://www.opera.com">Here</a></iframe>

This iframe displayed fireburst.webs.com in a width and height of 500. It was simple to create. iFrames can be very useful for a webmaster, as long as you don't use them for hiding content.

Tuesday, November 20, 2012

Embed RSS feeds into a webpage

In websites such as Fireburst News, you will see RSS feeds embedded into the webpage. Also, you may want to display your RSS feed in your site's homepage. To make an RSS file, visit this post. Here's the code to embed my blog's RSS:
<script src="http://gmodules.com/ig/ifr?url=http://sethsdiscoveries.blogspot.com/feeds/posts/default&synd=open&w=320&h=200&title=&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>

Thursday, November 15, 2012

XML links or Xlink

In XML, tags are made up which makes XML links almost impossible. The solution to this is Xlink, which is a standard for XML links. To display links use a code like this;
<?xml version="1.0"?>

<homepages xmlns:xlink="http://www.google.com">

<homepage xlink:type="simple"
xlink:href="http://ddg.gg">Duck Duck Go</homepage>

<homepage xlink:type="simple"
xlink:href="http://www.google.com">Google</homepage>

</homepages>

An easy example would be this;
<plantstore xmlns:xlink="http://www.w3.org/1999/xlink">
<plant name="Petunia">
<description
xlink:type="simple"
xlink:href="http://plants.com/images/petunia.png"
xlink:show="new">
The familiar petunia at a bargain price.
</description>
</book>
</bookstore>

You can repeat the highlighted text as often as you like.

Make Image Links open in a New Tab

Many people want to make image links open in a new tab, like they do on my Alternative Search Engines list. It's a fairly simple code too:
<a href="http://www.clipotech.com/" target="_blank"><img border="0" height="75" src="http://4.bp.blogspot.com/_QF2exREIx20/SVDCxpqD2jI/AAAAAAAABtg/cJuBW3wQpLw/S1600-R/0007.PNG"/></a>
That will make a link that goes like this:

You can remove any text that's marked in red.

Saturday, November 3, 2012

Make a Firefox search Add-on for a GCSE

Adding an search engine to Firefox is the only disadvantage to Firefox. You have to install an add-on. Compare that to Opera, where you can right click the search field. To make things worse, search add-ons are in XML. I could go on and on, but I will put my dialog at the end and you may read it if you like.
TO make this search addon your GCSE will have to follow this tutorial:http://sethsdiscoveries.blogspot.com/2012/10/two-page-more-customizable-gcse-for.html
Open notepad and enter this code:

<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
<ShortName>
Seth's Tutorials
</ShortName>
<Description>
Search for code and PC tutorials by Seth Sevenyoln</Description>
<InputEncoding>
UTF-8
</InputEncoding>
<OutputEncoding>
UTF-8
</OutputEncoding>
<AdultContent>
false
</AdultContent>
<Image height="16" width="16" type="image/x-icon">
http://sethsdiscoveries.blogspot.com/favicon.ico</Image>
<Url type="text/html" template="http://sethsdiscoveries.blogspot.com/p/search-results.html?q={searchTerms}"/>
<SearchForm>
http://sethsdiscoveries.blogspot.com
</SearchForm>
</OpenSearchDescription>

Seth's Tutorials is the name of the add-on and the name of the search engine displayed in the search box. Search for code and PC tutorials by Seth Sevenyoln is the description which is displayed in the search results of Mozilla add-ons directory. http://sethsdiscoveries.blogspot.com/favicon.ico is the URL of the icon and no it doesn't work for me either. http://sethsdiscoveries.blogspot.com/p/search-results.html?q= is the URL where results are displayed. For example, if you wanted to search fireburst.webs.com the URL would be fireburst.webs.com/searchresults.htm?q=. A way to find this out is to search for "n" and take the "n" out of the URL. http://sethsdiscoveries.blogspot.com is the URL of your homepage. Mine looked like this:

Then save it as "searchname.xml" To save it as an xml file you will need to put the filename in quotations. Mine looked like this:

Open Firefox and navigate to addons.mozilla.org. Log in or sign up with a developers account(free). Follow the steps and submit your addon. You're finished. You can download the add-on for my blog here

Thursday, October 25, 2012

Links, part 3: Colors & CSS

In a previous post I explained the link. In this post I will go into how to change link colors, add hover effects and visited colors. The first will be changing the link colors by some basic HTML in the body. Insert this code between the <body> and </body> tags.
<body link="#C0C0C0" vlink="#808080" alink="#FF0000">
body link is when the link is displayed on the page. #COCOCO is the blue you see everywhere. vlink is the visited color. #808080 is the purple you see on most pages when you revisit a page after clicking a link. #FF0000 is red, and alink is the hover color.

Link color in your CSS stylesheet

Its easy, and you can do even more, like making a link suddenly underline when hovered over. Here's the code:

a.nav:link {color: blue; text-decoration: none; }
a.nav:visited {color: purple; text-decoration: none; }
a.nav:hover {color: green; text-decoration: underline; }
a.nav:active {color: red; }
Multiple Link effects through CSS stylesheet
You can make "classes" of link effects in CSS that will make links in each class act differently. For example, you could make a class called nav for links in the body, and a class called foot for links in the footer. Here is the code:
a.nav:link {color: blue; text-decoration: none; }
a.nav:visited {color: purple; text-decoration: none; }
a.nav:hover {color: green; text-decoration: underline; }
a.nav:active {color: red; }

a.foot:link {color: red; font-size: 14pt; font-weight: bold; }
a.foot:visited {color: green; font-weight: bold; }
a.foot:hover {text-decoration: underline; background-color: blue; }
a.foot:active {color: orange; }Using the classes
It's much simpler than individually changing every link that you want different from the settings you put.

For the class nav use this code: <a href="URL" class="nav">Link Text</a>

For the class foot use this code: <a href="URL" class="nav">Link Text</a>

Links, Part 1: The basic link

Links are an almost irremovable part of a site or even a page. Links are used to lead to other pages, other sites, even emails. Fortunately, links are very easy. In this post I will go over the hyperlink, the email link and the image link. The basic link code is <a href="http://sethstutorials.blogspot.com">Seth's Code & PC Tutorials</a> Replace with http://sethstutorials.blogspot.com with the address of the site you want to link to. Replace Seth's Code & PC Tutorials with the text you want your links to display.

Email Link

The email link is simple. The code is:
<a href="mailto:sethsevenyoln@aol.com">Email Me</a>
Replace sethsevenyoln@aol.com with your email address, and Email Me with the text you want displayed.
Image Link

The image link is a bit more complicated. Still, its quite possible. The code is:
<a href="http://fireburst.webs.com"><img src="image.gif" border="0"></a>

Replace http://fireburst.webs.com with the URL of the site you want to link to, and image.gif with the URL of the image you want displayed.

Opening a link in a new tab

If you want a link to be opened in a new tab, for the basic link use this code:

<a href="http://url" target="_blank">link text</a>

Pages