Blogger Gets an Update | Easier way to Design Your Blog

This post is now located at - http://xomisse.com/blogger-update-2013

read more " Blogger Gets an Update | Easier way to Design Your Blog "

HelloCotton Comes to an End

Last week, we heard the news that Google Reader was going to be deleted in July. Now we hear that Hellocotton - a social media site for female bloggers of all kinds, will be next to be shut down. I found some of my favourite blogs on Hellocotton and will be sad to see it go. It was a great idea and such a fab resource to find amazing bloggers all over the world.

How to Export your Hellocotton Data

Log in to Hellocotton - add then click here - http://www.hellocotton.com/opml.php to download your follow data which you can import into another reader such as bloglovin'. 

alternatives to Hellocotton, GFC & Google Reader | how to import your subscriptions elsewhere

Did you use Hellocotton? What do you think of the news?

Since the news of Google Reader/GFC, how are you following blogs now?

Read more ...

read more " HelloCotton Comes to an End "

Export Google Reader Data & Import Reader Feeds to Bloglovin'

Post has been updated - http://xomisse.com/blog-tips-ultimate-guide-to-bloglovin/

Read more ...

read more " Export Google Reader Data & Import Reader Feeds to Bloglovin' "

Google Retires Reader | Alternatives to Google Reader and Google Friend Connect

This post has been updated - http://xomisse.com/blog-tips-follow-options-alternatives-to-google-reader/

Read more ...

read more " Google Retires Reader | Alternatives to Google Reader and Google Friend Connect "

Pinterest 2013 | Use Analytics to Improve Blog Traffic

It seems like everyone has jumped on the new look for Spring band wagon. Pinterest is next up introducing a new design along with the long awaited analytics. The new analytics feature lets you track user engagement similar to Google Analytics. Users can now see most re-pinned and clicked images as well as other interesting data like impressions, reach and referral traffic. To switch to the new look, you either need to have a business account or have a URL attached to your account, then hover over your profile image and click switch to new look. You can switch back if you prefer the old look!

What do you think of the new look?

Analytics Screenshot via Mashable

Read more ...

read more " Pinterest 2013 | Use Analytics to Improve Blog Traffic "

Facebook, Youtube & Google+ get a new look!

Google+ has rolled out some new features and a new look, announced on the Google+ blog yesterday that users will gradually see some new features on the site over the next couple of weeks. Once new change is the new local review tab, as well as a larger cover photo (2120 x 1192 pixels) and some other changes to the about you section. Personally, I think the cover photo is too big (I've cut the top of in the photo above - check out what I mean on my Google+ page) but what do you think?

Facebook also has a redesign in motion, which is expected to include multiple new feeds based on categories such as Instagram photos, listening to, news and artist updates. With more areas to scroll through, users will more than likely spend longer on the site. Mashable has reported a new look for Facebook has already launched in New Zealand, which includes a new toolbar below the cover photo and a new about me widget beneath the cover photo. Facebook is holding a press event today so we will soon hear more about these updates, Check out my Facebook for updates as well as photos and videos. For more screenshots of the new design visit Mashable.

Follow me on Facebook, I've been updating much more recently!

Update (6:30pm)

Facebook unveils new design during press event which is currently taking place, showing that the news feed will evolve and focus will be placed on bigger clearer images, music streams and multiple news feeds. Join in as Mashable give live updates! Videos and photos can be found on my Facebook page.

Youtube introduce one channel, a new design allowing users to have a bigger header and a trailer video for people who aren't subscribed to their channel. It also lets users organise and display their videos better and have control over what content subscribers see. To read more and upgrade your channel visit YouTube One Channel.

Facebook Screenshots via Mashable.

What do you think of the new changes?
Do you wish social media sites stopped changing?

Read more ...

read more " Facebook, Youtube & Google+ get a new look! "

Basics of Blogger HTML | Markup & Coding

EDIT

I'm thinking of creating a summary of this post, trying to explain a little more in detail as I understand it is confusing. Have a look at part 2 editing css & adjusting blog design, once you've read that, this may make more sense. Let me know what you think and if you would like some more detail about something in particular.

---

It's been a while since my original Basics of HTML Creating a Static Page post. So today I'm going to update on the basics of HTML, but it's going to be based on Blogspot coding rather than normal static HTML. I've separated it into two posts explaining the layout markup, basics of coding and how to adjust the css the look of your blog.

* This is to help you understand how your blog works, how its laid out and how to adjust different parts to give your blog a new look. Please be careful & backup your blog before attempting to alter it in any way. I have lost count of the amount of people who have emailed me to fix something because they paid another blogger to design their blog who had no idea what they were doing. Please do not hire someone who isn't experienced or trained...that's all I'm going to say on that *

Bloggers HTML Layout - The Markup

Just a quick bit of background information. Blogging sites such as Blogspot, Joomla and Wordpress are coded (written) a little differently to normal static websites. A static website has to be re-written to be updated. We created a static website in the first Basics of HTML post. These blogging sites like Blogger, Wordpress are dynamic, they change. These sites use something called CMS (Content Management Systems) which is a software that allows the owner to update & maintain the content without needing to know the technical html things. They are coded so that things can be updated easily but it is always good to know how your blog is structured to better understand how it works.

---

Some Simply Rules

HTML Body: If you open a tag you must close the tag. Tags are within arrow brackets. <   > is open, followed by a closing </   > tag. Example <body> ....load of code... </body>


Measured in: px = pixel (dot resolution of the screen) | pt = point | See conversion of px, pt, em & % here

Code written in: small letters

Layout for CSS: selector { property: value; } Example .post-title { font-color: red; }, h4 { text-align: right;} the sector is basically what HTML element you want to change (titles, headings, image, menu, background...), the property is the part you are changing (font, size, colour, border, alignment) and the value is the "answer", what you are changing it too.

---

How you blog works

Summary

<?xml version="1.0" encoding="UTF-8" ?><br />
<!DOCTYPE html ...>
<html ...>
<head>
<title><data:blog.pageTitle/></title> Title of Blog, appears in browser
<b:skin><![CDATA[/*

/* All the styling (CSS) goes in here. Discussed Section 1-10 */

]]></b:skin>  Section 11
</head>
<body> Open Tag

<!-- The columns and widgets go in here. Section 12 --><br />

</body> Close Tag
</html>

Section 1 - Content

/* Content
----------------------------------------------- */
body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)
}
 html body $(page.width.selector) {
  min-width: 0;
  max-width: 100%;
  width: $(page.width);
}
 a:link { Colour of a link
  text-decoration:none;
  color: $(link.color);
}
 a:visited { Colour of a link when clicked on
  text-decoration:none;
  color: $(link.visited.color);
}
 a:hover { Colour of a link when mouse rolls over it
  text-decoration:underline;
  color: $(link.hover.color);
}
 .body-fauxcolumn-outer .fauxcolumn-inner {
  background: transparent $(body.background.gradient.tile) repeat scroll top left;
  _background-image: none;
}
 .body-fauxcolumn-outer .cap-top {
  position: absolute;
  z-index: 1;
  height: 400px;
  width: 100%;
  background: $(body.background);
  $(body.background.override)
}
 .body-fauxcolumn-outer .cap-top .cap-left {
  width: 100%;
  background: transparent $(body.background.gradient.cap) repeat-x scroll top left;
  _background-image: none;
}
 .content-outer {
  -moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
  box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
   margin-bottom: 1px;
}
 .content-inner {
  padding: $(content.padding) $(content.padding.horizontal);
}
 $(content.background.color.selector) {
  background-color: $(content.background.color);
}

This part controls how your overall blog content looks. The background, font, colours, text and links. A lot of this will be written similarly in other sections. $(_____); relates to the Template Designer. You can change this styling here manually or by going to Template > Customise.

background: $(body.background); like above relates to the Template Designer. May also appear like background: #color; which can be changed using hex colours (#FFFFFF) or words without the # (white). I show how each are written below.

a:link {  text-decoration:none;  color: $(link.color); 
} a:visited {  text-decoration:none;  color: #666666; 
} a:hover {  text-decoration:underline;  color: purple; 
}

Section 2 - Header

/* Header
----------------------------------------------- */
.header-outer { Entire Top Header section 
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
  _background-image: none;
}
 .Header h1 { Header Title Text
  font: $(header.font);
  color: $(header.text.color);
  text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}
 .Header h1 a {
  color: $(header.text.color);
}
 .Header .description { Header Description
  font-size: $(description.text.size);
  color: $(description.text.color);
}
 .header-inner .Header .titlewrapper {
  padding: 22px $(header.padding);
}
 .header-inner .Header .descriptionwrapper {
  padding: 0 $(header.padding);
}

This section obviously contains the header. A lot of this doesn't need editing, as when you upload a header image to take the place of the text it eliminates most of this code. Find out how to centre the header in blogger here.

Section 3 - Tabs/ Menu

/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
  border-top: $(header.bottom.border.size) solid $(tabs.border.color);
}
 .tabs-inner .section:first-child ul {
  margin-top: -$(header.border.size);
  border-top: $(header.border.size) solid $(tabs.border.color);
  border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
  border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}
 .tabs-inner .widget ul {
  background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
  _background-image: none;
  border-bottom: $(tabs.border.width) solid $(tabs.border.color);
   margin-top: $(tabs.margin.top);
  margin-left: -$(tabs.margin.side);
  margin-right: -$(tabs.margin.side);
}
 .tabs-inner .widget li a { Colour of a link
  display: inline-block;
   padding: .6em 1em;
   font: $(tabs.font);
  color: $(tabs.text.color);
   border-$startSide: $(tabs.border.width) solid $(content.background.color);
  border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}
 .tabs-inner .widget li:first-child a {
  border-$startSide: none;
}
 .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: $(tabs.selected.text.color);
  background-color: $(tabs.selected.background.color);
  text-decoration: none;
}

 This is the menu part of your blog, usually found beneath the header. Use this section to edit the links, colours, text font and border of your tabs menu. To center tabs have a look at this quick easy tutorial. I created two tutorials on alternative ways to have a menu - Horizontal Navigation with Images & Drop Down Navigation Menu. There are a few ways to change the border, which I'll go into more detail in in the next post but if you want to remove the border & shadow from your posts or the content of your blog visit this tutorial. If you want to remove the border or shadow from your images visit this tutorial.

Section 4 - Columns/ Sidebar

/* Columns
----------------------------------------------- */
.main-outer { Entire Blog Area incl. the post & sidebars
  border-top: $(main.border.width) solid $(body.rule.color);
}
 .fauxcolumn-left-outer .fauxcolumn-inner {
  border-right: 1px solid $(body.rule.color);
}
 .fauxcolumn-right-outer .fauxcolumn-inner {
  border-left: 1px solid $(body.rule.color);
}

This section may be different depending on the layout of your blog. You don't have to worry too much about this area. .main-inner .column-right-outer or .main-inner .column-left-outer will control your sidebar area, these are found in section 7.

Section 5 - Headings

/* Headings
----------------------------------------------- */
h2 { H2 heading usually controls widget titles & sometimes the date
  margin: 0 0 1em 0;
   font: $(widget.title.font);
  color: $(widget.title.text.color);
  text-transform: uppercase;
}

Headings range from h1 (largest) to h6 (smallest). You can add headings here with different colours & sizes to use within your posts. Remember that some headings such as h3.post-title, .comments h4 will be defined in section 7. To use a heading in your post simply use the heading tag <h5> Enter Text Here </h5> the following appears like this on my blog

Enter Text Here

I did this by editing the h5 heading like so

h5 { background: #color;
border-radius: 0 20px 20px 0; Adding a rounded border, similarly to this tutorial for photos.
color: white;
font: small-caps 16px Calibri;
letter-spacing: 0.1em; Space between the letters
margin: 3px 0 4px;
padding: 3px; }

Section 7 - Posts 

/* Posts
----------------------------------------------- */
.date-header span { Where you can edit the look of the date
  background-color: $(date.header.background.color); Background of dats
  color: $(date.header.color); Colour of date text
  padding: $(date.header.padding); 
  letter-spacing: $(date.header.letterspacing);
  margin: $(date.header.margin);
}
 .main-inner { Space between posts/ sidebar/ around content/ etc.
  padding-top: $(main.padding.top); 
  padding-bottom: $(main.padding.bottom);
}
 .main-inner .column-center-inner {
  padding: 0 $(main.padding);
}
 .main-inner .column-center-inner .section {
  margin: 0 $(main.section.margin);
}
 .post {
  margin: 0 0 $(post.margin.bottom) 0;
}
 h3.post-title, .comments h4 { Post title & comment
  font: $(post.title.font);
  margin: .75em 0 0;
}
 .post-body { Body of the post, what you write
  font-size: 110%;
  line-height: 1.4;
  position: relative;
}
 .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img { Images within the post
  padding: $(image.border.small.size);
   background: $(image.background.color);
  border: 1px solid $(image.border.color);
   -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
 .post-body img, .post-body .tr-caption-container {
  padding: $(image.border.large.size);
}
 .post-body .tr-caption-container {
  color: $(image.text.color);
}
 .post-body .tr-caption-container img {
  padding: 0;
   background: transparent;
  border: none;
   -moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
  -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
  box-shadow: 0 0 0 rgba(0, 0, 0, .1);
}
 .post-header {
  margin: 0 0 1.5em;
   line-height: 1.6;
  font-size: 90%;
}
 .post-footer {
  margin: 20px -2px 0;
  padding: 5px 10px;
   color: $(post.footer.text.color);
  background-color: $(post.footer.background.color);
  border-bottom: 1px solid $(post.footer.border.color);
   line-height: 1.6;
  font-size: 90%;
}
 #comments .comment-author {
  padding-top: 1.5em;
   border-top: 1px solid $(body.rule.color);
  background-position: 0 1.5em;
}
 #comments .comment-author:first-child {
  padding-top: 0;
  border-top: none;
}
 .avatar-image-container {
  margin: .2em 0 0;
}
 #comments .avatar-image-container img {
  border: 1px solid $(image.border.color);
}

Section 11

]]></b:skin>

    <b:template-skin> Sizes of blog width & sidebar
      <b:variable default='960px' name='content.width' type='length' value='1000px'/>
      <b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
      <b:variable default='310px' name='main.column.right.width' type='length' value='300px'/>

Find out how to change the size of your blog here.

The following is all to do with sizing & space.

      <![CDATA[ 
      body {
        min-width: $(content.width);
      }

      .content-outer, .content-fauxcolumn-outer, .region-inner {
        min-width: $(content.width);
        max-width: $(content.width);
        _width: $(content.width);
      }

      .main-inner .columns {
        padding-left: $(main.column.left.width);
        padding-right: $(main.column.right.width);
      }

      .main-inner .fauxcolumn-center-outer {
        left: $(main.column.left.width);
        right: $(main.column.right.width);
        /* IE6 does not respect left and right together */
        _width: expression(this.parentNode.offsetWidth -
            parseInt("$(main.column.left.width)") -
            parseInt("$(main.column.right.width)") + 'px');
      }

      .main-inner .fauxcolumn-left-outer {
        width: $(main.column.left.width);
      }

      .main-inner .fauxcolumn-right-outer {
        width: $(main.column.right.width);
      }

      .main-inner .column-left-outer {
        width: $(main.column.left.width);
        right: 100%;
        margin-left: -$(main.column.left.width);
      }

      .main-inner .column-right-outer {
        width: $(main.column.right.width);
        margin-right: -$(main.column.right.width);
      }

      #layout {
        min-width: 0;
      }

      #layout .content-outer {
        min-width: 0;
        width: 800px;
      }

      #layout .region-inner {
        min-width: 0;
        width: auto;
      }
      ]]>
    </b:template-skin>

(Any script goes here)

  </head>

Section 12

The body part of bloggers html contains the content layout for your blog. Be really careful if editing this section as one mistake may delete something needed for your blog to work. Each part of this section corresponds to a part above. Example

Header of a post in the HTML Body 

<b:if cond='data:post.title'>
            <h1 class='post-title entry-title' itemprop='name'>
              <b:if cond='data:post.link'>
                <a expr:href='data:post.link'><data:post.title/></a>
              <b:else/>
                <b:if cond='data:post.url'>
                  <b:if cond='data:blog.url != data:post.url'>
                    <a expr:href='data:post.url'><data:post.title/></a>
                  <b:else/>
                    <data:post.title/>
                  </b:if>
                <b:else/>
                  <data:post.title/>
                </b:if>
              </b:if>
            </h1>
          </b:if>

CSS Styling

h3.post-title {
    border-bottom: 1px dotted #D0B79D;    font: 18px Arvo;    letter-spacing: 0.05em;    margin: 0;}

Padding Vs. Margins

Padding defines the space between the content & the border. Margin is the space between the border and the outer element. Once you begin to edit these more, you'll understand the difference better.

Next up: Adjusting the CSS

I hope that explained how you're blog is laid out and what a couple of things do. Coming up next will be the different CSS elements and how to adjust some things on your blog easily. Hopefully that was explained ok? If not, leave any questions or requests below. I'd suggest setting up a "play" blog and just messing around with altering different CSS styling one at a time to see what happens and to get a feel for it, much easier to learn when you're doing it bit by bit.

PART 2 Editing CSS & Adjusting Blog Design

Read more ...

read more " Basics of Blogger HTML | Markup & Coding "

A Social Media Update

Well there's been quite a few changes over the last couple of week. I wrote about the recent update to Bloglovin with the introduction of Profile pages which I think is a great update, allowing a much more personal experience and also Pinterest launching Secret Boards, another great update allowing you to hide boards that you're not quite ready to share yet. This week we saw two major updates from Twitter & Instagram...



At the start of this week, Instagram updated with a new look in the camera/photo section, this makes it quicker to choose an image in your photo library as well as Foursquare integration, better tilt-shift and a new monochrome effect. Instagram also made a change that prevents images being seen on the Twitter timeline as a preview instead being directed to Instagram via a link, they seem to be promoting the use of web profiles more and more. Instagram photos can no longer be seen in the Twitter users photo gallery either. This is all very annoying for Twitter users but a possibly smart and defensive move for Instagram as Twitter have released their own version. Don't forget Facebook bought Instagram earlier in the year.



Twitter partnered with Aviary to introduce Photo Filters. Users are now able to take a picture, edit & publish it all on Twitter, with 8 effects to choose from in a single grid or swipe through view as well as cropping and zooming and an auto enhance feature. The best part after the news from Instagram? They can be viewed automatically on Twitter. Today (December 12th) Twitter will be updating everyones profile to the new one, with headers and photo filters.

LinkedIn also got a bit of an update, the new look appears a lot cleaner and easier to navigate around a persons profile with bigger headings and images.

What do you think? Will you still use Instagram or will you be switching over to Twitter Photos instead?

Edit:

Dropbox is an incredibly free service, allowing you to access all your photos, music, videos and documents anywhere. Once installed on your computer, anything in the DropBox folder will be uploaded for you to access anywhere. I have it on my laptop, computer and iPhone which allows for quick transfer of assignments, photos and files. I was first introduced to it in college and we all use it to send files to each other without having to compress, attach/upload, wait for everything to load and send. This week Dropbox launched Links, allowing you to share files or folders of any size with anyone even if they aren't using Dropbox, simply copy and share the link. Want to check out the service, you can visit Dropbox & join here!

Read more ...

read more " A Social Media Update "

Bloglovin' Update | Personal Profile Pages

Blog Post has moved - http://xomisse.com/blog-tips-ultimate-guide-to-bloglovin

Read more ...

read more " Bloglovin' Update | Personal Profile Pages "

How to set up & instal Google Analytics for your Blog

Post has been updated and moved to - http://xomisse.com/tutorial-adding-google-analytics-to-your-blog/

Read more ...

read more " How to set up & instal Google Analytics for your Blog "

Guide to Rockmelt - Browser & Social Networking

I wrote a little about Rockmelt browser in this Best Browsers post. It is definately one of my favourite browsers and I know a lot of people that have switched over to it since I recommended it. It is basically Google Chrome but with added Social Media, allowing you to post and share straight from the browser. If you addicted to Facebook, Twitter, Tumblr, Youtube and everything else, then you'll probably love this! It's now available for your iPhone and iPod Touch and they are working on it for the iPad and for Android. Visit Rockmelts Website for more information and to download the browser.

Special 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, Twitter, Tumblr, 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.

 

1. Compose

Update your status, post to Facebook Walls, Send Messages, Send to Gmail, Tweet and so on, all from this button.

• Find it in the upper left hand corner, click it and a box will appear.
• In the To: area, add in wherever or whoever you want to post it to.
• Add Comments, Links, Location and click Share

2. Share

Like on many smartphones, you can quickly share the page you're looking at. It also gives you the option to add a comments. Simply click the Share button and the link is automatically added, all you have to do is decide where to share it.

3. App Center

This is my favourite feature, you get instant updates from the sites you've added. You can add Apps, Websites or even RSS Feeds. As you surf the web, if a webpage has an Apps, it will be suggested. Just click to instal. Once it's on your panel, click it to reveal a slide out box will all updates from that site. You can also click on the add button and search for what you like.

4. Favourite Friends

We all have those people we always talk to online, so why not keep them at the top of the chat box. 

• Click on the expand button on the bottom of your friend edge.
• Search for your fav friends, click the star next to them.
• The gift icon will invite your friends to Rockmelt.

5. View Later

Bookmarking "I need to read this but don't have time right now" pages is handy, but they build up and cause an overflow of clutter in your bookmarks bar. Be honest, how often do you go back to find it so you can read it? With this, you create a reading list, once read you can simply remove it.

• When on a page you want to read later, click the clock in the URL bar or click on the clock underneath an item in your app feed. 
• Click the clock in the App Edge and see everything you've added.

6. Facebook

Facebook is built in to Rockmelt, although I'm hardly ever on Facebook anymore it's a handy thing to have. I mostly use it to check for college updates so Rockmelt tells me without having to use another tab. Confirm friend requests, send/reply to messages and get instant notifications from your Rockmelt browser.

7. Social Omnibox

Message friends, post on their wall and open apps, all from Rockmelt.

• Type your friends name or App into the search bar.
• Click View Profile, Message, Write on Wall. View site or open App.

8. Quiet Mode

No more distractions. Turn on Quiet Mode by clicking the bell in the upper right hand corner, this will hide your App & Friend Edges, go offline in chat and disable notifications so you can get some work done. When your finished, turn Quiet Mode off again.

Change Preferences

Change how you get notified, app behavior, edge positioning, social reading and much more by clicking Rockmelt & Preferences. 

Want Even More?

Check out Google Chromes Webstore to add extensions (widgets/apps/themes/etc) to your Rockmelt Browser. Look out for reviews of some of my favourites coming soon.

Have you tried Rockmelt? What do you think about the features?

Check out some of my favourite browsers in this post. If you liked this post and find this blog useful, please share it! xo

Read more ...

read more " Guide to Rockmelt - Browser & Social Networking "

Pearltrees - Create your Online Bookmark

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!

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.

My Pearltree Pearls - Act like Folders

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

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

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 "

Read more »

Basics of HTML

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 "