How Do I... http://howdoi.posterous.com Tutorials to help you get the most out of Posterous posterous.com Tue, 03 Jan 2012 14:59:21 -0800 How Do I Take more control over who can see what I share? http://howdoi.posterous.com/how-do-i-take-more-control-over-who-can-see-w http://howdoi.posterous.com/how-do-i-take-more-control-over-who-can-see-w Topic: This tutorial will show you how to ensure that what you share is only seen by those you intended it for.

Getting Started:

One way to ensure that your content is only seen by those you intended it for is to make your Space private (or create a new private space) and add only those people whom you want to share with as it's members.

To make your Space private, click Spaces and click the dropdown settings menu across from the space whose privacy settings you would like to change.

Screen_shot_2012-01-03_at_2

Click Edit in the privacy section to change the privacy settings for your site.

Screen_shot_2011-09-05_at_2

Screen_shot_2012-01-03_at_2

After you make your Space private, add members by going to the Add Members for that Space from the Spaces section.

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1697881/Screen_Shot_2011-12-14_at_7.09.57_PM.png http://posterous.com/users/1lRd16H1arT Suyash Sonwalkar Suyash Suyash Sonwalkar
Tue, 03 Jan 2012 14:47:00 -0800 How Do I Spend Less Time Updating My Social Media Accounts? http://howdoi.posterous.com/how-do-i-spend-less-time-updating-my-social-m http://howdoi.posterous.com/how-do-i-spend-less-time-updating-my-social-m

Topic: In this tutorial, you will learn how to automatically share your posts on Facebook, Twitter, and other social media services without having to re-upload the same photos, videos, and content to multiple places using the Autopost feature.

Getting Started

To set up Autopost for your Posterous Spaces, click the Spaces tab and then select Autopost Setup from the dropdown across from the Space you wish to set it up for:
Screen_shot_2012-01-03_at_2
Click Add a Service and select Facebook, Twitter, or any of the other services listed. After authenticating with it, your posts will automatically be sent to those networks. For Spaces with multiple members, choose whose posts will go to each service (useful if you want only your posts to a group Space to be posted to your Facebook profile).
Screen_shot_2012-01-03_at_2
Screen_shot_2012-01-03_at_2
When you post photos and videos, we'll automatically post those to Facebook, Twitter, and any of your other Autopost destinations. Posterous Spaces will even add your photos to a Facebook Album.

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1697881/Screen_Shot_2011-12-14_at_7.09.57_PM.png http://posterous.com/users/1lRd16H1arT Suyash Sonwalkar Suyash Suyash Sonwalkar
Tue, 03 Jan 2012 10:48:00 -0800 How do I create a Space where I only share with close friends and family? http://howdoi.posterous.com/how-do-i-create-a-space-where-i-only-share-wi http://howdoi.posterous.com/how-do-i-create-a-space-where-i-only-share-wi

Topic: In this tutorial, you will learn how to set up a private space and share photos, videos, and thoughts with only those closest to you.

Getting Started

To set up a new private space, log in and go to the Spaces section and then click Create Private Space: 

Screen_shot_2012-01-03_at_10

Enter a name and site address for your space:

Screen_shot_2012-01-03_at_10

After creating the Space, click Add Members:

0screen_shot_2012-01-03_at_10

0screen_shot_2012-01-03_at_10
Enter (or paste) the email addresses of the people you'd like to add to your space and choose Followers if you would like them to only see and comment on posts or choose Contributors if you'd like them to be able to post to the space:

1screen_shot_2012-01-03_at_10

After you add users to the space, you can begin posting to it by clicking Create a Post from the Reader, from the iPhone or Android applications, or by emailing sitename@posterous.com, where the sitename is what you choose when creating your space.

Examples:

Private Spaces are perfect for sharing photos, videos, and discussions with your close family or friends, club meetings, fraternities and sororities, or any other time you need to be sure that your content isn't being shared with all of your friends.

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1697881/Screen_Shot_2011-12-14_at_7.09.57_PM.png http://posterous.com/users/1lRd16H1arT Suyash Sonwalkar Suyash Suyash Sonwalkar
Mon, 25 Jul 2011 11:09:00 -0700 How do I use Posterous for education? http://howdoi.posterous.com/how-do-i-use-posterous-for-education http://howdoi.posterous.com/how-do-i-use-posterous-for-education

Usfgraduation_website

When choosing any sharing platform educators need something both powerful and flexible yet easy to use from the educator down to the student level.

Why does Posterous shine in an education setting? Here are a few reasons:

  • It's simple - Stay in touch beyond the classroom. In just minutes, create a Site or Group to begin sharing assignments, student work, news, and even meaningful discussions. 
  • Easily publish class materials and multimedia - Make learning fun by posting homework, podcasts, slides, and photos. Just upload. Posterous makes it look good and takes out the hassle of dealing with any 3rd party webhosts.
  • Keep content and conversations private - Share class updates and exchange ideas in a secure setting. Control who can view and who can post with easy to manage privacy controls.
  • Contribute as a team - Don’t do it alone! Invite others to publish and subscribe. Set access controls for Contributors and Administrators. Easily manage recipient lists.
  • Access Posterous anywhere - With our mobile apps and approach to e-mail everyone from time-pressed parents, teachers, and students can catch up on posts and activity.

In this How Do I tutorial we'll be going over some uses of Posterous that are already being used by educators and students.

Teachers and Professors

It's common for educators to have a public website for students and parents to visit. Class activities are usually shared on a website that both students and parents can find information and even contribute to.

In his screencast, Wesley Fryer shares how easy it is to create a moderated class blog on Posterous. To create a moderated class blog, all you need to do is create a new site and set your settings to be able to moderate submissions and comments.

Anyone can post to your site. For this site, students and parents would just need to e-mail 7thgradeblogging@posterous.com with their posts. The admin, or the teacher, can then approve each comment and submission individually.

Posterous is smart - try e-mailing us any type of multimedia. We also do neat things like automatically embedding YouTube links and automatically resizing any images without the need of any 3rd party hosting providers. If you want to learn more about posting via e-mail click here.

The benefits of using Posterous as your public class blog include:

  • Set up your site in minutes and add pages for additional static information.
  • Add student and teacher e-mails as subscribers so they receive any new post you publish.
  • Adding multimedia through the web, mobile app, or e-mail is simple and easy to frequently post.

Students

Setting up an online, professional portfolio or blog is easy. Simply sign up for a public site and choose from the dozens of professional themes to make your site stand out. Uploading media is done right from the mobile app, the web editor, or e-mail.

Screen_shot_2011-07-22_at_11

Uploading multiple images automatically creates a gallery so you don't need to fiddle with any code or plug-ins. 

Administrative Services and Student Organizations

Posterous is more than just a blog - it can also act as its own freestanding website. The DePaul Career Center is a great example of what you can accomplish using Posteorus' easy to set-up interface. Keep your organization looking good and keep your subscribers informed of any new updates. 

Screen_shot_2011-07-25_at_11

Events

Posterous Events is a great sharing tool to use for events. Seth O'Dell of Higher Ed Live talks about how crowdsourcing photos with camera phones and Posterous is as simple as e-mailing your photos.

You can also create a collaborative photo album as explained here.

Mobile_web_three

Need some additional inspiration for using Posterous in an educational setting? Check out these Posterous sites:

SecondGradeJoy's Posterous

Jill Brandeberry

DePaul Career Center

Spinosa Math

If you are currently using Posterous for education, let us know! Also, check out our Posterous for Education FAQ page for all the reasons why Posterous is great in an education setting!

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1767383/rb-2012-small.jpg http://posterous.com/users/4afzrkRXRBHX Ryan Brown brownday Ryan Brown
Mon, 18 Jul 2011 10:00:00 -0700 How do I add a newsletter form to my Posterous? http://howdoi.posterous.com/how-do-i-add-an-opt-in-newsletter-form-to-my http://howdoi.posterous.com/how-do-i-add-an-opt-in-newsletter-form-to-my

Chimp-0

The good folks at MailChimp have made it incredibly easy to include MailChimp's Embedded Signup Form feature into Posterous with Chimpsterous. Visitors can then enter their own information to be subscribed to your selected MailChimp subscriber list.

Getting Started

This tutorial will only take about 5 minutes. You'll need:

  • Your MailChimp API Key
  • Configure Chimpsterous with your Posterous login

Getting Your API Key

First, you're going to need to generate an API key from the MailChimp Dashboard. You can find this under Account > API Keys & Authorized Apps.

Chimp-2

In the next screen, select Add a Key and copy the key string that is generated.

Chimp-3

Getting Your Chimpsterous

Once you have your API Key copied, head over to Chimpsterous. From there, follow the prompts to include your MailChimp API key and Posterous login information.

Success! Chimpsterous should have automatically created a page on your primary Posterous site with a functional newsletter form.

Screen_shot_2011-07-14_at_5

Note: This only currently works with your primary Posterous site.

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1767383/rb-2012-small.jpg http://posterous.com/users/4afzrkRXRBHX Ryan Brown brownday Ryan Brown
Wed, 06 Jul 2011 10:00:00 -0700 Adding Google's +1 (plus one) button to your Posterous http://howdoi.posterous.com/adding-googles-1-plus-one-button-to-your-post http://howdoi.posterous.com/adding-googles-1-plus-one-button-to-your-post

As well all know, Javascript isn’t allowed in Posterous themes. Luckily, iframes are and that’s what we’ll use to go around the no Javascript limitation.

posterous screenshot

Simply go to your Posterous dashboard, click "Settings" on the top right, then click the "Edit Theme" button and select the "Advanced tab". Now, all you have to do is paste one of the following snippets where you want the button to show up and click the "Save, I’m done!" button.

  • Standard button:

1
<iframe src="http://dev.syskall.com/plusone/?url={Permalink}" marginheight="0" marginwidth="0" frameborder="0" scrolling="no" style="border:0;width:110px;height:30px;"></iframe>

  • Tall button:

1
<iframe src="http://dev.syskall.com/plusone/?url={Permalink}&size=tall" marginheight="0" marginwidth="0" frameborder="0" scrolling="no" style="border:0;width:50px;height:60px;"></iframe>

That’s all you have to do to integrate Google +1 to your Posterous.

If you want to host the script yourself, the source code is available on Github:

git clone https://olalonde@github.com/olalonde/google-plusone-posterous.git

Thanks to Olivier Lalonde for writing this tutorial!

Let us know in the comments if you are experiencing any problems!

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1767383/rb-2012-small.jpg http://posterous.com/users/4afzrkRXRBHX Ryan Brown brownday Ryan Brown
Tue, 28 Jun 2011 20:27:00 -0700 How do I add a Twitter widget to my Posterous site? http://howdoi.posterous.com/how-do-i-add-a-twitter-widget-to-my-site http://howdoi.posterous.com/how-do-i-add-a-twitter-widget-to-my-site

Twitter-0

Topic: In this tutorial we'll go over how to embed the official Twitter widget to your website.

Note: Posterous currently does not enable Javascript so this tutorial explains an iFrame workaround.

Getting Started: Before you get started on this tutorial, you will need:

  • To be able to access an outside web hosting account to host a .html file.
  • Know how to upload to that web hosting account.
  • Light HTML knowledge to know how to create an HTML file and where to embed your iFrame code in your theme.

1. Grab the official Twitter widget code from Twitter.com.

For this tutorial, click here to grab the Twitter widget code. We will be using the Profile Widget option.

Set your settings and preferences and click on Finish & Grab Code and copy the entire code into your clipboard.

2. Host a .html file with your Twitter code

Because Posterous currently does not enable Javascript we're going to need to use an iFrame as a workaround. In order for this to work, we're going to need to host a .html file.

If you have your own webhost that can host .html files:

  • Simply copy and paste the code into a blank .html file.
  • We'll name our .html file "twitter.html"
  • Take note of the destination you uploaded your file to (i.e. "http://yourwebsite.com/twitter.html")

3. Insert the iFrame into your Posterous theme

We'll be using this code to embed into your Posterous theme:

 

The code's height may need to be adjusted depending on your settings from the Twitter code.

Perhaps the most difficult part of this tutorial is to embed the iFrame code in the right area. It helps to look for the "right-column" or "sidebar" div and insert the code there. You can always preview your theme changes to see if your Twitter feed is showing. If you get it to work correctly, your Twitter stream should show up right on your website like so:

Twitter-6

Let us know in the comments if you come across any problems or want to share your site sporting your new Twitter feed!

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1767383/rb-2012-small.jpg http://posterous.com/users/4afzrkRXRBHX Ryan Brown brownday Ryan Brown
Wed, 01 Jun 2011 20:00:00 -0700 How to add a video badge to your Posterous page http://howdoi.posterous.com/add-a-roboto-badge-to-your-posterous-page http://howdoi.posterous.com/add-a-roboto-badge-to-your-posterous-page

If you want to add a little personality to your page and think text status updates are too dull and boring, adding a video widget may be right up your alley. Adding one to Posterous is easy using a widget from Robo.to.

Robo.to is a fun widget that allows you to record short snippets of yourself to share across your social networks. Think of it as your own visual robot that replaces your text status update with a sweet bite-sized video.

Kittykat

To include the robo.to widget into your Posterous page, follow these instructions:

1. Sign up for a free account at http://robo.to

2. Record your first short video.

3. From your robo.to page, scroll toward the bottom and click on the "Embed my Face" option.

4. Either copy the code from the embed badge or scroll down to launch the customizer to customize your video. I reccomend using the customizer to scale your badge to around 150x150. 

5. Go into your Manage page and click Settings.

Manage

6. Under Settings, click "Edit Theme" in the Look and Feel.

7. Click Advanced and enable advanced theming.

8. Paste the code into your sidebar block. See the below image to see where I placed my code.

Code

Please note that your code may differ depending on which theme you're using. This tutorial is written for users who are using a theme utilizing either a sidebar or a right-column layout.You may have to preview your code to see where your badge is going to show up.

9. Once you badge is where you want it, click "Save, I'm Done!"

This widget will automatically update as you update your robo.to status.

To just display one specific clip, follow these instructions:

Edit the embed code above and add the specific iid (in red) to the end of the uuid code (in green). Notice that each need to be preceeded by an ampersand (&) symbol, like so &uuid=###############&iid=######

You can get your actual iid by following the steps below.

  1. From your robo.to page click "see all" above your video.
  2. Find the one update you'd like to display and click it.
  3. Notice up at the URL of the new page that it ends with a questionmark "?" followed by the iid. Ignore the questionmark and only copy the iid=######
  4. Take the iid=###### and add it to your embed code as instructed above. Note that you will need to add it in two places. And you will need to preceed it with an ampersand (&) symbol.

You can see an example of how this widget works on my page.

Example

That's it! The Robo.to team has an iPhone app in the works that will make it super easy to update your widget right from your iPhone. 

Have fun adding a little personality to your page! If you've successfully added the widget or have trouble adding it please let us know in the comments!

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1767383/rb-2012-small.jpg http://posterous.com/users/4afzrkRXRBHX Ryan Brown brownday Ryan Brown
Tue, 17 May 2011 14:49:00 -0700 How do I post content from another website? http://howdoi.posterous.com/how-do-i-use-the-posterous-bookmarklet http://howdoi.posterous.com/how-do-i-use-the-posterous-bookmarklet

So you're browsing one of your favorite websites and you see a cool article, video, song, or photo that you want to post and share easily and quickly to your Posterous website. With the Posterous Bookmarklet, you can post it instantly to your Posterous site by simply clicking a special bookmark. 

Posterous-bookmarklet-1

Topic: This tutorial will walk you through installing the bookmarklet and using it to post any type of media to your Posterous site.

Installing the bookmarklet
Regardless of what browser you're using, all you simply need to do is drag the Share on Posterous button onto your browser's bookmark bar as explained here. If your bookmark bar isn't shown, you might have to right click the browser toolbar to enable it.

Using the bookmarklet
You can use the bookmarklet on any type of website. We automatically detect flash embeds, large files, and the most important media no matter what site you're on. You'll have the ability to add your own thoughts and comments to the media you're sending to your own Posterous site.

Grabbing photos
If the page you're looking at has multiple photos, the bookmarklet will automatically generate multiple excerpts. 

Posterous-bookmarklet-photos

Grabbing videos
The bookmarklet detects videos from the page you're viewing and makes it easily embeddable to your own website without the hassle of getting any embed codes.

Posterous-bookmarklet-video

Grabbing text
Want to excerpt just a certain amount of text? Simply highlight the text you want and use the bookmarklet.

Posterous-bookmarklet-text

Expert Tip: Check the Advanced Settings link to include relevant tags, choose which of your Posterous sites to post to, schedule your post for a later time, mark it as private, and set your autopost options all without leaving the web page!

Posterous-bookmarklet-advanced-options

Using Chrome? Try this plugin for a nice and easy to use Posterous Bookmarklet icon right on your browser!

Note: The bookmarklet supports any site. If you're running into any problems using this or want to show us how you're using this feature, let us know in the comments. Happy posting!

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1767383/rb-2012-small.jpg http://posterous.com/users/4afzrkRXRBHX Ryan Brown brownday Ryan Brown
Wed, 01 Dec 2010 14:28:00 -0800 How to set up a Podcast with Posterous http://howdoi.posterous.com/how-to-set-up-a-podcast-with-posterous http://howdoi.posterous.com/how-to-set-up-a-podcast-with-posterous
Untitled_5
Topic: In this tutorial, you will learn how to create a podcast using Posterous and how your listeners can add it to iTunes.

Getting Started

After setting up an account, you can simply email post@posterous.com with your podcast episode as an attachment. If you use an iPhone or iPod touch to record your podcasts, you can email directly from the voice memos application.

Posterous automatically generates an RSS feed for your listeners to subscribe to your podcast. 

There are three ways for your listeners to add your podcast to iTunes:

1. Subscribe in iTunes by dragging and dropping the web feed icon or RSS feed link from your Posterous site directly into your iTunes library.

2. Go to your Posterous site and right-click the web feed symbol (or RSS feed link) and copy the link. Then go to iTunes and click the Advanced Menu and choose Subscribe to Podcast. Paste the URL and click OK. The latest episode will be downloaded and iTunes will periodically check for new episodes. If there is a new once, it will be downloaded and synced to any mobile devices (like iPods and iPhones) depending on the listener's sync settings.

3. When linking from a webpage, you can set-up one click subscriptions. With one click, a listener's iTunes installation will open and they will be subscribed to your podcast. This involves pasting a new link onto your site. First, copy your existing RSS feed link and replace the http with itpc. Then paste this new link into a new post or into your profile with some text directing the listener to click the link to directly subscribe to your podcast.

Examples

Both Sides Now is a weekend radio show that features Mary Matalin and Arianna Huffington discussing politics and governance. They post their weekly podcast on Posterous. NextGenMedia also hosts a podcast on Posterous where the hosts discuss tech and new media.

Theme Recommendations:

Podcasting is compatible with all themes we offer, but a lot of podcasters tend to choose minimalist designs to help their readers focus on their audio content.

Expert Tips:

Optionally, you may want to run your feed through Google's Feedburner.com service. Feedburner lets you create an iTunes feed that includes artwork and extra information. It also tracks how many listeners subscribe to your podcast.
To add Feedburner to your Posterous site, simply do the following:
1. Copy the URL of your Posterous RSS feed. You can get to the feed by clicking on the feed icon in the sidebar of your site.
2.  Sign up or login to Feedburner here.
3. Paste your feed URL into the "Burn a feed right this instant" field on Feedburner and click "Next". Pick a title and an address for your Feedburner feed and remember the address for the next step.

4. Click Manage » Settings tab » Analytics section to set your Feedburner Address to the address you just chose.

5. You're done! Next time you click on the feed icon on your site you should be taken to your Feedburner feed.
See the Feedburner site to configure your feeds' settings as well as add an iTunes description and podcast art. See this page to add your podcast to the iTunes podcast directory and iTunes podcast documentation.
Do you have podcasting tips to share? Tell us in the comments!

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1697881/Screen_Shot_2011-12-14_at_7.09.57_PM.png http://posterous.com/users/1lRd16H1arT Suyash Sonwalkar Suyash Suyash Sonwalkar
Wed, 17 Nov 2010 14:42:00 -0800 How do I add custom fonts to my site? http://howdoi.posterous.com/how-to-use-typekit-with-posterous http://howdoi.posterous.com/how-to-use-typekit-with-posterous
This post is a result of a collaboration between Typekit and Posterous to allow users to quickly and easily add custom fonts to their site. Special thanks to Mandy Brown from Typekit for her help in making this "How Do I" post possible.

Screen_shot_2010-11-17_at_4

Topic: In this tutorial, you will learn how to customize the fonts on your Posterous site using Typekit.

This tutorial is more advanced than previous "How do I..." posts, but we think you'll find it interesting if you want to learn how to customize your site's fonts beyond the standard set of fonts you come across everyday on the web as well as learn a bit about how your Posterous site is structured.

Getting Started

Click Edit Theme from the Settings section of your Manage page. Once you are there, click on the "Advanced" tab, then click "Typekit". You will see a text box in which you can paste your Typekit Kit ID.
Typekit_screen_1
If you do not have a Typekit account yet, you can create one easily by clicking on "Sign up for Typekit" in that same section.
Typekit_screen_2
After you've signed up for Typekit, enter your Typekit ID into the box as shown above.

Adding Fonts to your kit

Log into Typekit.com and browse the library for fonts you like. You can browse by style, language, or tag; and you can combine these preferences any way you like. For example, you can browse for sans-serif fonts that support English and Spanish and have a geometric shape.

Screen_shot_2010-11-17_at_10


It's best to choose only one or two fonts for your blog. One common and often successful pattern is to use a sans-serif font for your entry titles, and a complementary serif font for the text of your entries, or vice-versa.

Once you find the fonts you like, add them to your kit. Just click the "add to kit" button next to each font.

0screen_shot_2010-11-17_at_10

Then, launch your Kit Editor. It's the big green button in the upper right.
Screen_shot_2010-11-17_at_10
Now, you have a few choices you need to make for each font:
0screen_shot_2010-11-17_at_10

Selectors
This is where you tell Typekit which elements of your blog you want set in your chosen font. More on this in a moment.

Language support
There are two settings for Language Support in Typekit. The default setting supports English, Spanish, Italian, and Portuguese character sets; if your blog is in one of these languages—and you've chosen a font that supports that language—then you're good to go with the default character set.

If your blog is in another language—and, again, you've chosen a font that supports it—then you need to select the "all characters" set. (More information on Typekit's language support is here.)

Weights & Styles
Many Typekit fonts include a variety of weights and styles. You should choose only the weights and styles you need. In most cases, three weights and styles will do: regular, bold, and italic. Adding too many weights and styles (for too many fonts) can increase the size of your kit and slow your pages down; when your kit size exceeds 400K, you’ll get a warning to reduce the size to improve performance.

CSS Stack
These are the fallback fonts that will be used if Typekit fonts are unable to load (e.g., when someone visits your site with a really old browser or device). Typekit provides generic fallback fonts (e.g., serif or sans-serif), but you can add other fallbacks if you like. This is entirely optional, however; the generic fallback fonts are sufficient for most sites.

Now, let's come back to those selectors.

Markup, or, how web pages are made

A CSS selector declares which element of the markup a style belongs to. Let's break that down a bit.

Everything on your blog is "marked up" with HTML (the HTML can also be referred to as "the markup"). HTML consists of a small set of tags that are used to define what type of content is being displayed.

You can see your Posterous theme's markup by going to Edit Theme from Settings and clicking Advanced, Enabling Advanced Theming and Expanding the window:

1screen_shot_2010-11-17_at_10

 For example, the following shows the title of a blog (which is also the top-most heading on the blog) marked up in HTML:

 <h1>This is my blog title</h1>

The HTML includes an open tag  (<h1>) and a close tag (</h1>) that define the element (in this case, a heading).

HTML includes headings (<h1>,<h2>, and on down through <h6>), paragraphs (<p>), ordered (or numbered) lists (<ol>), unnumbered (typically bulleted) lists (<ul>), and more. It also includes many elements that define the layout of the page (such as <div> for divisions). For example, this shows a blog title and paragraph inside a division:

 <div>
   <h1>This is my blog title</h1>
   <p>This is a description of my blog</p>
 </div>

In this case, the <h1> and <p> are contained inside the <div>. (As a result, the <div> is called a “containing” element and the <h1> and <p> are “child” elements.)

HTML also includes classes which are used to define a particular type of element. For example: say the home page of your blog includes your last ten posts. Each of those posts has a title. You could decide to define all those titles as a particular kind of <h2>, like so:

 <h2 class="post-title">This is the title of one post</h2>
 <h2 class="post-title">This is the title of another post</h2>

This tells the browser that this is a particular kind of <h2> and that it has a name: post-title. It's also possible to assign an ID to a tag instead of a class; IDs are used for unique elements, and a particular ID can only be used once on a page.

 <h1 id="blog-title">This is my blog title</h1>

Selectors, or applying your styles

So where do selectors come in? Let's go back to that definition from above: A CSS selector declares which element of the markup a style belongs to. In essence, a selector says "these styles apply to this element". So, let's come back to our basic blog title:

 <h1>This is my blog title</h1>

In this example "h1" is the selector. When the browser loads this HTML, it looks to the stylesheet to see which styles are applied to h1. It then displays the heading according to those styles. So, if your stylesheet declares that all h1s should be blue and use the font Georgia, then every time the browser comes across an h1, it will display it with those styles.

In many cases, the selector for a given HTML element is simply the text of the tag. So, if the element is a <p>, than the selector is simply p. If the element is a <div>, than the selector is simply div.

What if the element has a class or ID assigned to it? You can select the class by adding a period (".") before the class name, or an ID by adding a number sign ("#") before the ID name. Let's look at those examples again.

Here's a heading with a class assigned:

 <h2 class="post-title">This is the title of one post</h2>

In this case, the selector is ".post-title". The class name includes a period (".") before it to indicate it’s a class.

Here's a paragraph with an ID assigned:

 <p id="blog-description">All about my blog</h2>

In this case, the selector is "#blog-description". The ID name includes the number sign ("#") before it to indicate it’s an ID.

You can also append the class and ID names to their elements. So, you could say "h2.post-title" or "p#blog-description".

In this way, the selector becomes more specific. Whereas p refers to all paragraphs, p#blog-description refers to one very specific paragraph. You can also create more specific selectors by indicating the containing element. So, coming back to the <div> example above, with this markup:

 <div>
   <h1>This is my blog title</h1>
   <p>This is a description of my blog</p>
 </div>

You could use a selector of "div h1" or "div p". The containing element is placed before the child element, with a space between the two. That identifies not just any <h1>, but the <h1> inside the <div>.

Selectors, Typekit, and Posterous

This is where we'll bring everything together and actually apply fonts to a Posterous site.

Now you know a bit about selectors: what they are, and how to find them, let's come back to the Typekit editor.
2screen_shot_2010-11-17_at_10
Once you've identified the selector for the element that you want, you just have to add it to the selector field in your Kit Editor and click the "add" button. You can add as many selectors to each font as you like.

For example, I've found the header and header subtexts for my Posterous site and added them in the TypeKit Editor:
1screen_shot_2010-11-17_at_10

The <div id="header"> was for the header title and the <div id="header-text"> was for the subtext below the title for my site, so I added them as #header and #header-text into the TypeKit Editor (because ID name selectors are written with a  # before their names).

When I hit Publish and refresh my site, I see that TypeKit has applied the Font I've selected for the header title and header subtext for my site

2screen_shot_2010-11-17_at_10

It generally takes some experimentation to see what elements point to which parts of the site, but most of the text on your site can be customized in this way.

Note: Typekit's selectors will need to be at least as specific as the selectors in your blog's theme. If you find a certain selector isn’t working, try to use a more specific selector, including both the element and the class or ID. This ensures that Typekit’s styles will override the existing styles in your theme.

Examples:

Some sites which use Typekit for custom fonts include Adam Singer's Posterous, Marc Hedlund's Posterous, and photographer Simon Ridgway's Posterous

Theme Recommendations:

Typekit is compatible with all of the themes we offer, although some themes already use custom fonts which are tuned for that theme's aesthetic. If Typekit doesn't work on a  particular theme, make sure your selectors are specific enough or contact help@posterous.com.

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1697881/Screen_Shot_2011-12-14_at_7.09.57_PM.png http://posterous.com/users/1lRd16H1arT Suyash Sonwalkar Suyash Suyash Sonwalkar
Wed, 10 Nov 2010 13:34:00 -0800 How to get the most out of posting by email http://howdoi.posterous.com/how-to-get-the-most-out-of-posting-by-email http://howdoi.posterous.com/how-to-get-the-most-out-of-posting-by-email

Posting by email is one of the best experiences that Posterous offers. To post, simply email post@posterous.com and we'll post the content of your message and attachments and we'll email you back a link to your post. However, there are a ton of other cool things you can do with email that are only possible using Posterous.

Topic: In this tutorial, you will learn how to take advantage of all the features that Posterous offers when Posting by Email.

Instructions:

Posting via Email Basics

When you email post@posterous.com, your email will be published to the primary site on your Posterous account.

If you only have one site, that's your primary! If you have more than one, email post@sitename.posterous.com, where "sitename.posterous.com" is the URL for your site (this site's URL is howdoi.posterous.com).

To create a draft, email draft@posterous.com or draft@sitename.posterous.com

Inline Images

By default, Posterous will create a gallery for all of the images that you've attached to an email. This is great if you want to share an album of photos for an event or a group of related photos. This isn't so great if you want to write a how to guide. Thankfully, Posterous makes it easy to prevent a gallery from being automatically created and have images appear exactly where you intend them to.

If you use Mac OS X or iOS, all you have to do is put "((nogallery))" in the subject line and we won't automatically create a gallery for your pictures, they will appear right where you inserted them. Some email clients don't support inline images, but Gmail does, if you specifically enable it.

Enabling Inline Images in Gmail

1. Go to Settings > Labs:

Screen_shot_2010-11-08_at_3

2. Enable Inserting Images:

Screen_shot_2010-11-08_at_3

3. Save your settings.

Use the insert image icon in the formatting toolbar to insert an inline image:
Screen_shot_2010-11-10_at_3

Now you can enter ((nogallery)) into the subject line when you email your post and your images will appear right where you inserted them into your email, instead of in a gallery at the bottom or top of the email.

Choosing which sites to Autopost to

Normal posts created by emailing post@posterous.com autopost to all your other sites. You can also specify where you want to post via the email address you send to.
You can use the following service names to email to: twitter, facebook, flickr, picasa, blog, blogger, tumblr, youtube, vimeo, friendfeed, delicious, laconica, identica, livejournal, plurk, shopify.

Selective Autopost

Do you have multiple sites of the same type? For example, do you have two Twitter accounts but you only want to autopost to one of them? Email #text@posterous.com to send only to sites where the url contains that text.

If you have apple.wordpress.com and banana.wordpress.com, you can email #apple@posterous.com to update apple but not banana. Combine here also. #apple+twitter@posterous.com will post to apple.wordpress.com and all your twitter sites.

Tagging

Add tags to your post by email by entering them in the subject line: ((tags: New York, food)).

Examples:

For this post, I initially emailed draft@howdoi.posterous.com with the subject line: How to get the most out of posting by email ((nogallery)) ((tag: Email))

I used inline images to put screenshots for how to enable inline images in Gmail and then double checked my draft in Manage before publishing it to the site.

Theme Recommendations:

Posting by email is compatible with all sites and themes, check out the dozens of themes that are already available by clicking Edit Theme in the Settings section of Manage or check out a preview of some awesome upcoming themes from OBox Design.

Expert Tips:
  1. Posterous automatically removes most email signatures from your post. If you have a nonstandard signature or if your corporate email server appends a nonstandard signature to outgoing mail, you can use #end in the body text to prevent it from posting.
  2. Email private@posterous.com or private@sitename.posterous.com to create a private post.
  3. Add a pagebreak by using #more in the body text of your email.
What are some of your favorite tips? Let us know in the comments!

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1697881/Screen_Shot_2011-12-14_at_7.09.57_PM.png http://posterous.com/users/1lRd16H1arT Suyash Sonwalkar Suyash Suyash Sonwalkar
Mon, 01 Nov 2010 15:05:00 -0700 How to create a site and add navigation http://howdoi.posterous.com/how-to-create-a-site-and-add-navigation http://howdoi.posterous.com/how-to-create-a-site-and-add-navigation

With Posterous, you can easily create multiple Pages and blogs to build a complete presence on the web. 

Topic: In this tutorial, you will learn how to create site with multiple pages and link them up with a navigation bar.

Instructions:

1. To get started, create several pages by going to Manage --> Pages tab --> Clicking create a new Page:

Screen_shot_2010-11-01_at_11

2. For example, create a page for your contact information or your favorite books or interests. 

3. After you have created a few Pages, you can link them from Pages tab. Pages that you've created for a single blog will be linked for site navigation automatically, but if you've created multiple blogs, you'll need to use the Link button to link them manually.

For example, to link to my Bits and Pieces blog, which I use to post interesting things I come across on the internet using the Posterous bookmarklet, I'll click Link and add it to my main site's navigation bar:

0screen_shot_2010-11-01_at_11

4. After I create links to all of my other blogs, it's time to reorder the links and pages so that my site's navigation will appear the way I want it to by using the drag bars on the left side of each link/page. Then set a homepage at the bottom of the Pages tab:

Screen_shot_2010-11-01_at_11

5. Now it is time to make sure that all of my blogs have the same navigation layout. Select your other posterous blog(s) and go to the Pages tab. Create a link to your other sites as well as any Pages you created on your primary site:

Screen_shot_2010-11-01_at_11

After you've done this for each of the sites you want to link through Navigation, you're done! Go to your site and check to see if your navigation panes are working correctly.

Examples:

A few great examples of Posterous site using navigation include Janina Gavankar's Posterous, the site for the upcoming film Ameriqua, and Four Cow Farm.

Theme Recommendations:

All of our default themes are compatible with Pages and Navigation, but some really make your site navigation shine. We recommend using Proper, Purple, and Pleiades. Feel free to experiment with different themes from the Settings section of Manage.

Expert Tips:

You can also create multiple blogs, like a separate blog for your photos, to post to by clicking the Create a new posterous button at the bottom of your blog list:
Screen_shot_2010-11-01_at_11
Link up multiple blogs to your site by using the Link button from the Pages tab. If you want to add navigation for certain topics, tag your posts and then link to the tag.

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1697881/Screen_Shot_2011-12-14_at_7.09.57_PM.png http://posterous.com/users/1lRd16H1arT Suyash Sonwalkar Suyash Suyash Sonwalkar
Mon, 11 Jan 2010 13:54:00 -0800 Getting started with the Actor Theme http://howdoi.posterous.com/getting-started-with-the-actor-theme http://howdoi.posterous.com/getting-started-with-the-actor-theme

Setting up your new Posterous Space with the Janina Gavankar designed Actor Theme is easy. We'll guide you through the step-by-step process so you can start sharing content quickly.

Getting Started

First of all, you should register for a new Posterous Spaces account if you haven't already done so.

Next, you will need to login and access your Dashboard to start customizing your Space. Hit the customize button from the settings wheel and select the Actor Theme in the Themes section.

Hit the customize button and title your Space. Add a little description, too, if you want.

Naming

Now let's get your photo onto the Space. 

We recommend using an image that's 300 pixels wide by 450 pixels tall. If you don't know how to crop an image using an image editing program, you can use http://resizeyourimage.com/.

Header-image

Click on the Header image tab and click Choose File and select the cropped image that you saved. 

Once you're done, hit the big green button Save I'm Done! at the bottom right hand of your screen.

Adding Pages

From the Space list view, click on the settings wheel and select Pages & Links.

From there, you can populate your Space with links and pages. Pages can be edited by you and links send users to external links. 

Some tips on Pages:

  • A photos page can be easily done by uploading multiple photos. We automatically resize these photos and put it in a beautiful gallery.
  • A reel and press page can include video files, YouTube videos, or Vimeo videos. Just input the links to the YouTube or Vimeo videos and we automatically embed it for you.
  • A resume page can embed a pdf file for easy viewing. Simply upload the file. If you want, you can input and format the text to your liking.
  • Add a contact page so your fans and others can contact you!

 

How To Post

For tips on posting to your Posterous Space, click here.

Setting up Autopost

Once you post to your Posterous Space we can automatically update your other social media profiles. Find out how

Need additional help?

Contact us directly and we'll help get you started.

 

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1767383/rb-2012-small.jpg http://posterous.com/users/4afzrkRXRBHX Ryan Brown brownday Ryan Brown