Misse {Design} - Design, HTML & Blogger Tutorials

Moved to XOMISSE

2014-10-08T00:57:00.001+01:00

moved to http://xomisse.com

xomisse | new design blog with tips, tutorials & templates

2013-08-07T19:49:00.002+01:00

xomisse.com - New & Improved design blog

Hello lovelies, so I thought I would properly update you all on the move. This blog will no longer be updated, instead all design related posts will be over on xomisse.com. It will have lots of blog tips, tutorials, premade templates and of course some freebies. I will also be reopening my design services very soon over there too so make sure to pop over and have a look. Hope you enjoy the new site! Don't forget to follow on bloglovin, facebook or twitter to be kept up to date on new posts.

Hope you to see you there,
Ellie xo

Blogger Gets an Update | Easier way to Design Your Blog

2013-04-10T16:18:00.000+01:00

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

HelloCotton Comes to an End

2013-03-30T08:51:00.000+00:00

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?

Make your Navigation Fixed when Scrolling on Blogger

2013-03-27T14:50:00.000+00:00

Many popular sites, like Facebook for example, are starting to use a scrollable or sticky navigation bar. This is a menu navigation bar that is under/above your header and once you scroll and the top of the window "hits" the navigation bar, the navigation bar will "stick" to it and scroll down the content of the page. I have one planned for the update to this site. It means that the user/reader, doesn't have to scroll back to the top of the page to choose a different page or topic. Here's how to do it on Blogger.

UPDATED - http://xomisse.com/create-a-sticky-navigation-when-scrolling-on-blogger

Export Google Reader Data & Import Reader Feeds to Bloglovin'

2013-03-15T12:21:00.001+00:00

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

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

2013-03-14T21:06:00.000+00:00

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

Pinterest 2013 | Use Analytics to Improve Blog Traffic

2013-03-12T20:42:00.001+00:00

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

Facebook, Youtube & Google+ get a new look!

2013-03-07T10:47:00.000+00:00

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?

Promoting Blog Posts | #3b All About Googles Search Engine

2013-03-04T11:57:00.000+00:00

Post has been updated - http://xomisse.com/blog-tips-all-about-search-engines-seo-keywords/

Basics of Blogger HTML | Editing CSS & Adjusting Blog Design

2013-01-08T14:22:00.000+00:00

Part 1 Basics of Blogger HTML | Markup & Coding

This post will be about styling CSS and changing things on your blog. I will (hopefully) teach you how to write different things and give you a better understanding of how your blog works. The first part of this series was on Markup & Coding which can be very confusing, but maybe after you've read through this, it will begin to make a little more sense. Let me know if you have any questions...

Some Simply Rules

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. Multiple properties are written like this selector { property: value; property2: value2; property3: value3; }

CSS Close Properly: When using more than 1 tag, remember to close properly.
Example right <em><strong> TEXT </strong></em>
Example wrong <em><strong> TEXT </em></strong>

Insert an image

<img src="IMAGE URL" border="SIZE px" alt="Description">

img src is the image source, so insert the URL link of the image here. Then if you want to add a border insert a number or enter 0 for none. The alt is the description of the image, it is how it is found in search results, make it relevant to the image and the post. To read more about search engines & images read this SEO tutorial and check out the entire SEO series to learn how to increase traffic to your blog or website. Now say we want to add the size of the image and align it to sit where we want.

<img src="IMAGE URL" align="left/right/center" width="SIZE px" height="SIZE px" border="SIZE px" alt="Description">

Insert a link

<a href="URL LINK"> ANCHOR TEXT/ TEXT DISPLAYED/ DESCRIPTION</a>

The <a> tag defines a hyperlink (link to something), the href describes WHERE the link is. If you want the link to open in a new tab/window add the following target="_black" to the a href tag like so...

<a href="URL LINK" target="_black" > ANCHOR TEXT/ TEXT DISPLAYED/ DESCRIPTION</a>

To style links you use the following selectors in this order

a:link (the link itself)
a:visited (the link once clicked)
a:hover (the link when mouse rolls over it)
a:active (current selected link)

Don't forget the structure selector { property: value; }

How to Align or Center Something

<center> THE THING YOU WANT CENTRED </center>

Simply wrap the center tag around what you want to be aligned in the center, or in the css use the following to align your html element.

selector { text align: left/right/center/justify; }

selector { float: left/right/justify; }

Some Text Tags

<b> BOLD TEXT </b> OR <strong> BOLD TEXT </strong>
<i> ITALIC TEXT </i> OR <em> ITALIC TEXT </em>
<u> UNDERLINED TEXT </u>
<p> PARAGRAPH TEXT </p>

Creating Lists

<ol> ORDERED LIST </ol>
<ul> UNORDERED BULLET POINT LIST</ul>
<ul type="circle"> UNORDER BULLET POINT CIRCLE LIST</ul>
<li> SPECIFY EACH ELEMENT AS A SUBCATEGORY OF OL or UL</li>

How to write it & an example of how it appears:

<ol>Ordered List <li> Point 1</li> <li> Point 2</li> <li> Point 3....</li> </ol>
<ul>Unordered List<li> Point 1</li> <li> Point 2</li> <li> Point 3....</li> </ul>

Ordered List

Point 1
Point 2
Point 3....

Unordered List

Point 1
Point 2
Point 3...

Create a Table

<table>
<tr>
<td> AAAA </td>
<td> BBBB</td>
</tr>
</table>

tr relates to the row while td relates to the cell within the row. Notice how when I open a tag, I close it. The above gives me the following result, which you can customise using the CSS Selectors I've highlighted in green (table, tr, td) remember selector { property: value; }

AAAA

BBBB

Horizontal Line Dividers

An example can be seen between this post, a simply line under each section to break up the post. To create this you simply write

<hr>

To edit it a little more, lets add a width, size and colour. I'll show you an example below.

<hr width="100" size="5" color="purple">

Borders

selector { property: value; }

Starting with property, you can choose from border/ border-left/ border-right/ border-top/ border-bottom/ border-color/ border-style/ border-width & border-radius. Then enter the value. You can group values together for one selector.

Instead of
selector { border-width: 5px; border-style: solid; border-color: red}

You can write this instead

selector { border: 5px solid red; }

Different border-style values include solid/ dashed/ dotted/ groove/ ridge/ inset/ outset. These will all create a different type of border which you can choose the width of the line & the colour. To add a circular edge use the border-radius property

selector { border: 5px solid red;
border-radius: 20px; }

Its the same as adding rounded edges to images which I have a tutorial on here. This is how I created the curve on my heading, like so

Example of border & radius

Blockqoute

<blockquote> Text you want </blockquote>

This appears as a quote symbol in your edit post menu. You can then edit this in the css using blockquote { property: value; } Here is an example of mine and how I styled it.

Here is an example of a block quote on MisseDesign

blockquote {

Basics of Blogger HTML | Markup & Coding

2013-01-07T23:17:00.000+00:00

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

<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

Removing the Space between Images Part2

2012-12-30T16:42:00.003+00:00

Post has been updated - visit http://xomisse.com/tutorial-remove-spaces-between-images-in-blogger/

12 Days of Giveaways | #1 Merry Christmas

2012-12-25T18:22:00.001+00:00

Sizes available: iPhone 3Gs, iPhone4s, iPad, 800x600, 1024x768, 1080x800, 1280x1024, 1680x1050, 1920x1080

Download May Your Christmas

See all my Christmas themed designs & posts over on the Christmas Countdown Advent Calendar! Check out my other design freebies and let me know what you think. If you've used anything, I'd love to see! As part of my Christmas Countdown I'm running a giveaway over on Misse{Blog} so make sure to pop over and enter. Have a lovely Christmas, hope Santa is good to you all! xo

12 Days of Giveaways | #2 Festive Glitter Chevron Part 2

2012-12-22T15:00:00.000+00:00

Sizes available: iPhone 3Gs, iPhone4s, iPad, 800x600, 1024x768, 1080x800, 1280x1024, 1680x1050, 1920x1080

Download Blue Chevron

Download Green Chevron

Download Gold Chevron

Download Silver Chevron

Download Red Chevron

Don't forget, something new added to the Christmas Countdown Advent Calendar every day! Check out my other design freebies and let me know if you've used anything, I'd love to see! As part of my Christmas Countdown I'm running a giveaway over on Misse{Blog} so make sure to pop over and enter. xo

What are your plans for Christmas Eve?

12 Days of Giveaways | #3 Festive Glitter Chevron Part 1

2012-12-20T20:37:00.001+00:00

Sizes available: iPhone 3Gs, iPhone4s, iPad, 800x600, 1024x768, 1080x800, 1280x1024, 1680x1050, 1920x1080

Download Green Chevron Quote

Download Blue Chevron Quote

Download Red Chevron Quote

What are you most looking forward to this Christmas?

12 Days of Giveaways | #4 Winter Night Lights

2012-12-18T21:24:00.000+00:00

Sizes available: iPhone 3Gs, iPhone4s, iPad, 800x600, 1024x768, 1080x800, 1280x1024, 1680x1050, 1920x1080

Download Winter Night Lights

Took some photographs of the house and garden the other night, this was one of my favourites so decided to share it. Love Christmas lights so much, everything looks so much prettier at this time of year! This website automatically tells you what your screen resolution is, there should be a size for anyone in the pack. If not leave your size below! Don't forget to have a look at the Christmas Countdown Advent Calendar, something new added everyday including more free designs & gift guides! Check out my other design freebies and let me know if you've used anything, I'd love to see! xo

What do you think?
Whats your favourite thing about Winter/Christmas?

12 Days of Giveaways | #5 A very Merry Christmas

2012-12-17T00:32:00.001+00:00

Sizes available: iPhone 3Gs, iPhone4s, iPad, 800x600, 1024x768, 1080x800, 1280x1024, 1680x1050, 1920x1080

Download A Very Merry Christmas

Don't forget to have a look at the Christmas Countdown Advent Calendar, something new added everyday including more free designs & gift guides! Check out my other design freebies and let me know if you've used anything, I'd love to see! xo

12 Days of Giveaways | #6 All I want for Christmas

2012-12-17T00:27:00.002+00:00

Sizes available: iPhone 3Gs, iPhone4s, iPad, 800x600, 1024x768, 1080x800, 1280x1024, 1680x1050, 1920x1080

Download All I want

Don't forget, something new added to the Christmas Countdown Advent Calendar every day! Check out my other design freebies and let me know if you've used anything, I'd love to see! xo

A Social Media Update

2012-12-12T13:11:00.000+00:00

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!

12 Days of Giveaways | #7 December Snow Wallpaper

2012-12-11T18:30:00.000+00:00

Sizes available in each pack: iPhone4s, 800x600, 1024x768, 1280x1024, 1680x1050*, 1920x1080

Download December Snow

*Size 1680x1050 fits screen size 1280x800 when option "Fill Screen" is chosen.

A background for your computer, laptop or Facebook/Twitter banner. If you've downloaded something from this blog, I want to see. Send me your link or a picture on twitter @misseblog xo

Bloglovin' Update | Personal Profile Pages

2012-12-10T20:46:00.003+00:00

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

12 Days of Giveaways | #8 Christmas Wreath Social Buttons (46incl.)

2012-12-09T14:56:00.000+00:00

Download Link: Red Wreath | Green Wreath | Gold Wreath | Pattern Diamond Background | Pattern Star Background

Check out the Christmas Advent Calendar to stay up to date with all things Christmas here on Misse{Design} & Misse{Blog}. It's full of Christmas goodies, gift guides and giveaways. I'll have a surprise on Christmas eve too so make sure to stay tuned! Hope you like these Holiday Social Media Icons for your blog/website, also have some Festive Glitter Icons. Have a look at the Christmas Advent Calendar to see when the next design is up! If you've used anything from the Christmas Countdown, send me a picture on Instagram or Twitter (both @misseblog), I'd love to see! Hope you're having a lovely week xo

46 Buttons Incl: RSS Feeds | Twitter | Behance | Blogger | Wordpress | Ebay | Shopping Basket | Youtube 1 | @ Sign | Shopping Cart | Twitter Bird | Google Plus | Facebook | Tumblr | Linked In | Lookbook | Home | Camera | Chat | Feedburner | Youtube 2 | Vimeo | Flickr | Pinterest P | Bloglovin | Contact Phone | Email 1 | Email 2 | Pinterest Pin | Hellocotton | Big Cartel | DIY & Craft | Polvore P | Polyvore | Etsy | Digg | Dropr | Heart | Instagram | We Heart It | Deviant Art | Free Label | Google | Misse{Design} Button for Credit - Read more here!

Check out my new and improved site XOMISSE.COM for blogging tips, design tutorials and more!

12 Days of Giveaways | #9 Baby It's Cold Outside Wallpaper

2012-12-06T18:30:00.000+00:00

Sizes available in each pack: iPhone4s, 800x600, 1024x768, 1280x1024, 1680x1050*, 1920x1080

Download Baby It's Cold

*Size 1680x1050 will fit 1280x800 screen, simply select "Fill Screen"

12 Days of Giveaways | #10 Festive Glitter Social Icons

2012-12-04T18:30:00.000+00:00