Skip to main content

Posts

Showing posts with the label html

Common Social Media Colours and Fonts

Just a quick post listing some of the social media colours for use in your icons Facebook Blue:  #3B5998; White:  #FFFFFF; Font:   Klavika  Twitter Blue: #4099FF; White:  #FFFFFF; Font:   Pico - Alphabet LinkedIn Blue:  #0082B0; White:  #FFFFFF; Font:   Myriad Pro Bold Blogspot Orange:  #FF7419; White: #FFFFFF; Font:  Custom font (you will have to make one yourself) Tumblr Blue:  #243C54; White:  #FFFFFF; Font:   Bookman Old Style Bold Sample Icons:

Obfuscate your email address

We all know that there are many robots out there crawling our sites look for email addresses to send spam to. We also know that we need to try and hide our email addresses to make it harder on the crawling robots. This usually involves referencing an ASCII chart to get the correct hexadecimal codes for each letter and symbol in the email address and then manually typing them into your code. So, I figured someone out there must have automated the process at least and a little bit and I was pleasantly surprised to find this site: http://www.fingerlakesbmw.org/main/flobfuscate.php They offer a nice simple script where you put in your email address and they convert it for you. Cut and paste to your code and you're done.

Placing Code In Your Blogspot Post

Ever wanted to post code to your Blogspot account, but ran into a mess regarding how Blogspot interprets your code sample?  Well, the solution is pretty straightforward with a bit of tinkering. First, you'll need to edit the HTML of your blog from the Design , Edit HTML tab in the administrative section of your Blogspot account. What you will need to do is add a class to the style section in the header called .postCode  which will look something like this: .postCode{  background:#FCFCFC none repeat scroll 0 0;  border:1px inset #012BB2;  height:150px;  margin:10px;  overflow:auto;  padding:6px;  text-align:left; } Then, whenever you right a new blog post, you need to make sure to select the Edit HTML tab next to the Compose button and put the following wrappers around the code: <pre class="postCode"></pre> Now, to actually get it to appear like that, you have to put your code through a bit of a translation by...

Official Facebook Like Button

I would like to follow up the post made about the Tweet button with a post about the Facebook Like button and the benefits of adding the button to your web site. Below is an image of what the button looks like.  If you would like to see a real world example, you will find one at The Vintage Revival  near the bottom. The Facebook Like button allows visitors to share the content of your site with people on Facebook. When a visitor clicks on the Like button, a story appears in that visitor’s friends’ News Feed with a link back to your website. As you can guess, this quickly and easily helps promote your site on one of the most popular social networks on the Internet today. By embedding code in your website (called Open Graph tags ), your page will become the equivalent of a Facebook page with a connection made on Facebook between the visitor and your web site. Your site will appear in the "Likes and Interests" section of the visitor's profile and you will have t...

Official Tweet Button Released by Twitter

Twitter has now released a new Tweet button for there service. This function was previously offered by TweetMeme's Retweet button . Similar to Facebook's Like button , the new Tweet button from Twitter allows a visitor to send a Twitter message from your site. Tweet Twitter offers a page to help you construct your Tweet Button: http://twitter.com/goodies/tweetbutton On this page, you have the option of how your button will appear: The text that people will include from this Tweet can be customized The URL that you want linked to this Tweet The default language You can also recommend up to 2 people to follow for this Tweet button to recommend to the visitor When you have completed the customization, it's easy to insert the code into your site because Twitter will generate it for you.  Cutting and pasting the code into your site will complete the process and then you are up and running. That's it.  It's a very similar process to the Facebook Like...

Forté Representation - Non-Flash pages added

A recently developed site, Forté Representation , was released as a pure Flash site.  To allow this site to be viewed on non-Flash enabled devices such as the iPhone, non-Flash pages were developed.  Upon visiting the site, it is determined whether you can see Flash or not.  If you can't see Flash on the device you are accessing the site with, then you will only be served non-Flash pages. One of the key features of the site is the gallery.  To mimic the Flash version of the photo gallery, Javascript was implemented with the assistance of the JQuery library.  Combining JQuery with a plugin called EasySlider allowed for development of a sliding gallery that is visible on non-Flash devices. In total, the site was broken up into separate HTML pages: Home Photographers, broken up into each artist:  Linda Mackie , Ian Sheh , and Renat Touichev . Makeup+Hair, listing the artist Eman Aziz . About Connect Clicking on any of the above links on a Flash en...