Top 5 Best Browsers

Tuesday, July 31, 2012

Today's post is a quick summary and review of my favourite browsers and some thoughts on a couple of others. Obviously I haven't tried them all but I have tried a LOT of browsers, both on Windows and Mac. Here are my favourite five browsers, which in my opinion are some of the best. I hope you find something that suits you and how you use the web. Let me know some of your favourites below in the comments.

Opera - Website Here



Image and video hosting by TinyPic
Features

The Panel holds Bookmarks, Widgets, Notes, Unite (which is mentioned below), Downloads, History and much more, allowing you to customise the panel how you like. The widgets include Google Toolbar, Translate, To-Do list, Sketchbook, Radio and much more fun items to add to your browser. There is also a button which shows recently closed tabs in a drop down menu which I love because I hate when I accidentally close a tab and have to search through my history to find it again.

The Opera Turbo feature compresses the webpage, meaning it opens faster! It loads webpages up to 5x faster than other browsers while keeping a secure connection.

Opera Link means you can easily access bookmarks, notes, passwords and other browser information from any computer or device, you simply log in and choose what data is synchronized.

Opera Unite allows you to directly share content with friends, stream music, show photo galleries, share files/folders, host your own web pages and much more.

Opera Add-Ons take the place of widgets, they are basically the same thing however. Loads of extensions to choose from, I'm planning to review some of my favourites in the future.

(Opera are no longer developing Opera Unite & Widgets, instead they will be turned into extensions from Opera 11. Download Opera 12 here)




Rockmelt - Website Here


Image and video hosting by TinyPic
Image and video hosting by TinyPic
As they say "Not a Browser, a Wowser"... although cheesy this happens to be 100% true. Rockmelt is one of my favourite browsers which I've talked about before, it runs like Google Chrome but with Social Media added in. I think, as things are right now with Social Media being as big as it is, Browsers need to have these added in. The plugins are always...weird, but Rockmelt make it part of the browser and not just an add on. Simple Download, Login with Facebook and your ready to go. View my Getting Started with Rockmelt Guide.

Features
  • Built in chat, so you can stay in touch with friends.
  • A share buttons which lets you post to many different sites, update your Facebook status or Tumblr, tweet, add to Gmail or post on a friends wall.
  • Automatic sync so you can login from anywhere.
  • Add RSS Feeds, Apps or Websites and receive instant updates & news.
  • Choose a theme, add widgets and everything else available on Chrome.





The other 3 Favourites


Safari can be good, although I find it freezes and needs to refresh all open pages sometimes which is pretty darn annoying | Google Chrome is a great simple browser, you really can't go wrong! Plus it has loads of cool add-on features | Firefox is my favourite in terms of Web Design & Development, it offers Firebug which is one of my favourite extensions, it's great for learning about HTML. It also has so many add ons/extensions meaning you can really fit the browser to suit you.


Couple of Other Browsers


Dolphin 3D | WYZO | IE9 | SeaMonkey | OmniWeb | Camino | Maxthon | Lunascape |


Side Note


It's no secret that web designers/developers and anyone related to the field have a certain dislike for Internet Explorer. It's slow, it doesn't support so many features, it makes designing a website living hell and well, it used to turn off my virus protection on my laptop, I didn't like that at all. I hear the updated version is a little better though so please keep your browser up to date to get the best version.

What's your favourite Browser? 
read more " Top 5 Best Browsers "

Follow Button/Text


Todays tutorial is to show you how to have a stand alone follow button without showing follower count or profiles, I will also show you how to have text only "Follow this blog" or if you are interested in having your own image check out Social Networking Buttons Tutorial




Follow Button with Text







Design > Page Elements > Add Gadget > HTML/Javascript

Paste the following code;

<a href="http://www.blogger.com/follow-blog.g?blogID=Blog id here" target="_blank" title="Follow With Google Friend Connect"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhvBS4Gktqn9V4WMeAEuVseyD3cc5gIjilsjZ8e4DQZLK_D00Vgvnne0hHh1rY9tImdlddi3KLnTpU9BCVXrd0sX_2aS4xQObWTqnGr8t7B2GSs45C_i9U-zkFAloGhJj0LtNSb69S2ds7/s1600/follow-with-google-friend-connect-button.jpg" /></a>




Follow Button without Text





Design > Page Elements > Add Gadget > HTML/Javascript

Paste the following code;

<a href="http://www.blogger.com/follow-blog.g?blogID=Blog id here" target="_blank" title="Follow With Google Friend Connect"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidQeityYXcO7xSXIqcauFOZWuPn9msPPGSSB6OE-bZrsBqI0I7ogp6VydR2JPpV-jHyhLGqeZipA1UQ88AIXOQpFmcjCBWhhNYuyFYMLkz355s69iOqibdByHB8dy5nXeQe4y4sQAYZkqQ/s1600/google-followers-button.png" /></a>



Follow Text





Follow My Blog

Design > Page Elements > Add Gadget > HTML/Javascript

Paste the following code;

<a href="http://www.blogger.com/follow-blog.g?blogID=Blog id here" target="_blank" title="Follow With Google Friend Connect">Follow My Blog</a>





Get your Blog ID

When adding a new post or editing a gadget, your blog id will appear in the url. Alternatively, click Follow at the top of the page (in the nav bar) and the url link will appear here with you blog id :)








Read more ...
read more " Follow Button/Text "

Guide to HelloCotton

Monday, July 30, 2012


Think Facebook combined with bloglovin', with a dash of pink! Yes, HelloCotton is a social networking site for female bloggers. A place to find new blogs, be inspired and follow blogs you love, while allowing you to vote, like, share and comment!


Miss E Blog on HelloCotton Bloggers


Started in Paris in 2008, it is now a place for creative and inspiring women all over the world to be a part of a huge blogging community, with so many categories to browse through, you're sure to find something you love.
  • Fashion
  • Beauty
  • Lifestyle
  • Food
  • Family
  • Weddings
  • Design
  • Crafts & DIY
  • Culture
  • Health & Love
I've already found some lovely, inspiring and creative blogs, from fashion to craft & diy. Absolutely loving this site, kind of reminds me of Stumbleupon because I find some amazing sites but I never have to skip a page. HelloCotton has something I love in each category.

</span></font><span class=

</span></font><span class=



 "Hellocotton is the greatest source of inspiration and the best way to discover the latest trends. Hellocotton's aim is for the best women bloggers out there to get together, creating a community of talented writers, in all categories possible. Hellocotton is also a place for blog readers to meet up, follow their favorite bloggers and get inspired."

Follow me on HelloCotton <


Set up & Create your Profile

 Simply register & edit your settings, adding your blog information, social networking sites. Then explore and follow your favorite blogs. Easy :)


HelloCotton Blogs Bloggers Forum



Have you joined yet? What do you think?
How many social sites do you have altogether??
Read more ...
read more " Guide to HelloCotton "

Guide to Bloglovin'

Read more ...
read more " Guide to Bloglovin' "

Font to Lower/Upper Case or Capitalized

Font is so important when it comes to blogs, you want your readers to be able to read the text on your blogposts, this is a really simple way to edit your text so that its all lowercase, uppercase or capitalized.

Design > Edit Html > Download Full Template (as backup), Design > Edit Html >

Search (Ctrl F/Cmd F) for the following code;

body {

Below it enter the following

text-transform: Option;

Edit Option to say either lowercaseuppercase or capitalize and there you go, so simple.

Was this useful? Do you even think about your font and if its readable?
Read more ...
read more " Font to Lower/Upper Case or Capitalized "

Turn Off Word Verification on Blogger

Word Verification on Blogger has always been annoying, but it is becoming even more so. Now instead of just jumbled words, the words are closer together, harder to read and an image of numbers (what looks like peoples front door) are being thrown in! You want your visitors to comment, so why make it hard for them? It really is very simple to turn off, here's how;

Settings > Posts & Comments > Show word verification > NO! > Save Settings

Now watch how many more comments you get ;) xo

New Tutorial: Put links beneath each blog post






Read more ...
read more " Turn Off Word Verification on Blogger "

Increase Traffic with these SEO Tips!

Read more ...
read more " Increase Traffic with these SEO Tips! "

Center Header in Blogger

Wednesday, July 25, 2012



This tutorial has been moved to - http://xomisse.com/center-header-image-in-blogger
Read more ...
read more " Center Header in Blogger "

Horizontal Navigation with Images

Tuesday, July 24, 2012


nav navigation bar menu with images links




The lovely Mel from mediamarmalade asked how to make a horizontal navigation bar using images so I decided to turn it into a blog post. Here's two quick tutorials on how to do so. Let me know if you have any problems and if you need to know anything else. Hope you're all having a lovely Tuesday!

Step 1

Firstly, you need to design your buttons and upload them to a hosting site (such as Photobucket, Tinypic, etc)

Step 2

Backup your template.

On blogger, click Layout > Add New Gadget > HTML/Javascript

<center>
<table width="TOTAL WIDTH OF NAV BAR" height="TOTAL HEIGHT" cellspacing="0" cellpadding="0" border="0" id="Table_01">
<tbody><tr>
<td><a href="URL"><img width="WIDTH" height="HEIGHT" alt="" src="DIRECT IMG URL" /></a></td>

<td><a href="URL"><img width="WIDTH" height="HEIGHT" alt="" src="DIRECT IMG URL" /></a></td>

<td><a href="URL"><img width="WIDTH" height="HEIGHT" alt="" src="DIRECT IMG URL" /></a></td>

<td><a href="URL"><img width="WIDTH" height="HEIGHT" alt="" src="DIRECT IMG URL" /></a></td>

<td><a href="URL"><img width="WIDTH" height="HEIGHT" alt="" src="DIRECT IMG URL" /></a></td>
</tr>
</tbody></table>
</center>


Alternative Option


Step 1

Firstly, you need to design your buttons and upload them to a hosting site (such as Photobucket, Tinypic, etc)
Take note of the width & height of each image.

Step 2

add nav navigation bar with image to blogger blog

On blogger, click Layout > Add New Gadget > HTML/Javascript

Add a title, it will help with editing later on and you can delete it after.

Then copy and paste the following for as many links you need.

<a href="URL"><img src="DIRECT IMG URL" width="WIDTH" height="HEIGHT" alt"DESCRIPTIVE WORD"/></a>

Problems


Gaps, Spaces?

If there is any gaps between the images, remove the spaces so instead of

<a href="URL"><img src="DIRECT IMG URL" width="WIDTH" height="HEIGHT" alt"DESCRIPTIVE WORD"/></a>

<a href="URL"><img src="DIRECT IMG URL" width="WIDTH" height="HEIGHT" alt"DESCRIPTIVE WORD"/></a>

<a href="URL"><img src="DIRECT IMG URL" width="WIDTH" height="HEIGHT" alt"DESCRIPTIVE WORD"/></a>

 you're left with;

<a href="URL"><img src="DIRECT IMG URL" width="WIDTH" height="HEIGHT" alt"DESCRIPTIVE WORD"/></a><a href="URL"><img src="DIRECT IMG URL" width="WIDTH" height="HEIGHT" alt"DESCRIPTIVE WORD"/></a><a href="URL"><img src="DIRECT IMG URL" width="WIDTH" height="HEIGHT" alt"DESCRIPTIVE WORD"/></a>

Margins & Padding?

</span>add nav navigation bar with image to blogger blog<span class=

Click Template > Edit HTML

Search for the title, you'll see HTML# (# = number)

Click close > Customise > Advanced > Add CSS

Paste the HTML# and the following

{
padding: 0px;
margin-bottom: 10px;
}

Margin-bottom will add space between the navigation bar and start of your blog posts. You can edit padding & margin depending on how you want it to look.


Anything else, Let me know
Next up: Drop Down Menu
Read more ...
read more " Horizontal Navigation with Images "

Pearltrees - Create your Online Bookmark

Monday, July 23, 2012

I don't know about all of you, but my computer is jammed full of saved links - from bookmarks to written in a text file to screenshots. I basically have a folder of
"to-do" & "need to read" which gets bigger and bigger and never gets read because it's never organised. I randomly came across this site called Pearltrees and it is amazing! I will talk about it and explain how it works and also how you set up your account. I've been using it for over a month now and I love it. It's so quick and easy!









Pearltree organise save web pages


What is Pearltrees?


Pearltrees is a place online to store, share and organise everything that is on the web.


How does it work?


You instal "Pearler" and place it in your bookmarks. Then when you come across something you like on the web, you simply click the bookmark and an options window will pop up (shown below) allowing you to save it to your tree. You can organise your tree into many pearls (like folders) and keep everything in a certain place on your account. No more messy, full bookmark bar's or reading lists.









Pearls Bookmarks Saved Pages Folders
My Pearltree Pearls - Act like Folders

Pearl Tree Options
Options & An area to drop pearls (webpages) until you organise them

Pearltrees Save a web Page
Click the Pearler & this window appears asking what you want to do with that page.


Anything Else?


You can click "Related Interests", this shows you similar pages/pearltrees. Follow your friends pearltrees and find loads of interesting things. Share to Facebook or Twitter or Email your pearltrees. Watch the video below for full details.

Ok, I'm sold! How do I start?


  1. Set up your Pearltree Account
  2. Instal Pearler - How to here.
  3. Start browsing the web, when you find something you want to save. Click the Pearltree in your bookmark bar.
  4. Log into your account to view, organise and share your pearls.
  5. Transfer all your bookmarks/reading lists to Pearltrees and enjoy a spacious & clutter free browser!


Update


Pearltrees is now availble on the iPhone!





Have something to say? Let me know below. Liked this post? Share it...

Read more ...
read more " Pearltrees - Create your Online Bookmark "

Useful Apps & Websites

Tuesday, July 10, 2012

Warning: Text Heavy!

I tried, tested and researched a few different app's and websites aimed at bloggers and social network users.

When I'm online (more so my laptop than my mac) I like to use 2 browsers, one for my personal facebook, mail, internet use, the other for blogging, twitter, blog, mail, lookbook etc. That way I can have all I need bookmarked, automatically logging in...so on. Most of us that blog use a range of sites, sometimes it can get messy and confusing so I've recently started organising it a little more, using different app's, tools and websites. So here we are...

Read more ...
read more " Useful Apps & Websites "

Basics of HTML

Sunday, July 1, 2012

This post was the very first design/html type post that I published on Misse{Blog}, I had such a great response to Tutorial Tuesdays that I ended up starting this blog! Thank you all so much for all the emails and tweets, it really makes my day. I love being able to help you all and do something I absolutely love. Make sure to check out my freebies, as a thank you :)

Todays topic is the basics of html, I think it's important to know the layout before starting to edit HTML in order to design your blog, it will make more sense to you, I hope. So here we go...

When writing up HTML code from scratch, it is best to do so with programs such as Textpad(PC) or TextWrangler(Mac). First things first, you must give the document structure. The layout should look like this;


  <html>
       <head>
       <title>Title of Web Page here</title>
       </head>

       <body>
       Web Page content (such as images, text, etc.) goes here
       </body>

  </html>


<    > is an opening tag & </   > is a closing tag.

The second step is text elements such as h1 (heading 1), h2 (heading 2), p (paragraph), em (emphasised text).

   <html>
       <head>
       <title>Title of Web Page here</title>
       </head>


       <body>
       <h1>Miss E Blog</h1>
       <h2>How to</h2>
       <p>Web Page <em>content</em> (such as images, text, etc.) goes here</p>
       </body>


    </html>


Save as example.html and open in a web browser. It should look like so;



To add an image to the webpage, we simply add this code;

<img src="elaine.jpg" alt="picture of owner" />

within the body tag (<body>). Make sure that the name of your image is identical to that of which you called it. eg. "elaine.jpg", it is very important that is is identical so do double check. Save and re-open in the browser.



Now I want to add a link to another web page. There are a number of ways to do so, which I will get into later. We do this by using the anchor element a (<a> ... </a>) I add this code within the body tag;

<a href="http://miss-eblog.blogspot.com/">Misseblog found here</a>

I also added the link break (<br />) under this but before the image in order to move the image to the next line.



<html>
       <head>
       <title>Title of Web Page here</title>
       </head>

       <body>
       <h1>Miss E Blog</h1>
       <h2>How to</h2>
       <p>Web Page <em>content</em> (such as images, text, etc.) goes here</p>
       <a href="http://miss-eblog.blogspot.com/">Misseblog found here</a>
       <br />
       <img src="elaine.jpg" alt="picture of elaine" />
       </body>

       </html>



 resulting in;




The last step is to change the look. To do this we add the style tag.

<head>
       <title>Title of Web Page here</title>

<style>
</style>
       </head>

Now we can begin to change the look. I will be getting into styling in more detail in a couple of weeks, so you don't need to worry about it now. But here is some basic styling;


<style> 

body { background-color: black;
            font-family: sans-serif;  }

h1 { color: red;
       border-bottom: 2px solid black; }

h2 { color: green; }

p { color: yellow; }

</style>






So there you are, you know the basics. You have created you're first webpage.
Check back next week to learn more. Hope you found this interesting, I think once I get around to the blog-related designs it will be more useful and interesting. But I hope you learned something.


Read more ...
read more " Basics of HTML "