Posts categorized "Weekend Projects" Feed

Weekend Project: Display Your Photos from Instagram

If you're already using Instagram, you know how fun and addictive it is. If you're not, then all you need to know is that it's a bit like Twitter but for images. You snap a photo on your iPhone (Android users will get Instagram soon!), upload it to Instagram and the app shares the image across your social profiles like Twitter and Facebook.

Dessert

But you don't just upload and share your images, you can also apply really awesome filters that make your pics look much more vibrant and interesting. A picture of your yummy dessert just looks better when you apply one of Instagram's moody filters.

So now you're hooked on Instagram and you're shooting and sharing with friends and family. What if you want to display those images somewhere on your blog?

That's what today's tutorial is all about. We're going to offer two ways for you to automatically post those images onto your blog's sidebar. Once you have it set up, the images will automatically update as you add more to Instagram. Presto!

The first option is super easy. Just go to SnapWidget and scroll down to enter your Instagram username. From there, you can enter in a specific hashtag to pull from, thumbnail sizes, and so on. There's a preview feature so you can see how your images will look before grabbing the code.

You can add the code to your sidebar via a Notes TypeList or the "Embed your own HTML" module in Blogs > Design > Content. We have more details in our Knowledge Base. Below is an example of how SnapWidget looks on a real blog.

SnapWidget

The second method is a bit more complicated but allows for more control over the thumbnail size that shows in your sidebar. You'll use your Instagram RSS feed, a service that will convert that feed to JavaScript, and some Custom CSS to style the thumbnail.

Continue reading "Weekend Project: Display Your Photos from Instagram" »


Weekend Project: Customize Module Headers

We showed you some basics on styling module headers before, but this weekend we've decided to show off how you can use Custom CSS to customize the headers even further. Look at the cuteness!

From our example below you can see we've decided to customize three specific modules: the Search; the Categories List; and the Post Feed. There are more sidebar items with their own CSS class, but the three in our example are the most often asked about.

Customizing Module Headers with CSS

Continue reading "Weekend Project: Customize Module Headers" »


Weekend Project: Getting Started with Google Web Fonts

This project is for subscribers at the Pro Unlimited level and above, since you'll be using the Custom CSS feature. Want to do this too? Find out how to upgrade to Unlimited!

One bit of feedback that we hear a lot is that there isn't enough variety in the fonts available in the Compose editor and blog themes. There's a technical reason behind this - if you use a special font on your blog that your readers don't have installed on their computers, they won't be able to see it.

That's a bummer, right? Luckily, services like TypeKit and Google Web Fonts can help you bring more exciting fonts to your blog. We have instructions for getting started with TypeKit in our Knowledge Base and this project will get you started with using Google Web Fonts.

The first step is to head over to the Google Web Fonts site and take a look at the fonts they have for use. There are nearly 400 available so you'll be there a while. Don't say we didn't warn you!

Continue reading "Weekend Project: Getting Started with Google Web Fonts" »


Weekend Project: Featuring Images with a One-Column Layout

This Weekend Project is perfect for anyone who wants to display images in a gallery-like format, where the images are wide and don't have to contend with other design elements.

In the example below we've made use of the One-Column Layout, combining it with the Theme Builder and Custom CSS. You can setup something similar with only the Theme Builder.

One-col-layout-gallery

Remember that images, by default, will be restricted to 30px less than the width of the column. Keep in mind that the current max-width of the Theme Builder post column is 500px. The widest an image can be, without using CSS to increase the column width, is 470px.

Knowing that, and knowing we wanted to display much larger images, we setup a custom column width for our One-Column Layout by using the following CSS:

#container { width: 900px !important; }
#alpha { width: 900px !important; }

This means our images can be shown at a max-width of 870px!

We also chose the following Content settings at Design & Content to limit the design elements:

  • no date-header
  • no navigation bar
  • no module content
  • minimal post footer content (we kept it to just the permalink, comments link, and a few buttons)
  • no blog footer

You can choose your own preferred settings for what appears in the blog, but we really love the simple design that doesn't distract from the image.


Weekend Project: Setting up Shop

Yesterday, we announced that we're looking for independent retailers to list in the TypePad Shop. We will launch the shop just before Thanksgiving so if you want to be included before the holiday rush, be sure to submit your shop soon.

You don't have a shop? No worries! You have a whole slew of options for places to sell your goods online. Whatever it is that you want to sell, there's likely a great place to sell it.

For the crafters and artists, there's Etsy, an extremely popular (and very enticing to the shopaholics) marketplace where artists sell everything from handmade fashion to woodworking. Etsy makes it super easy to get started with their site - you can read the basics here.

Once you have your Etsy shop set up and ready for business, you'll want to make it easy for your readers and followers to find. You have two options: a widget in your sidebar with images and links for your items or you can embed your shop in a Page as part of your blog. We have a full overview with instructions for both methods in our Knowledge Base.

Another great place for artists is bigcartel. You can create your own custom marketplace with their easy to use interface and take orders and payments directly from the site. Your store is hosted on their site so there's nothing to install or set up. They even have a free level if you only have a few items to sell.

Bigcartel doesn't have a widget feature just yet but their shops have RSS feeds, which you can display in your blog's sidebar with the Your Feeds feature. You could also link directly to your shop in your blog's navigation bar or in a sidebar using a Links TypeList.

If you'd like to take payment a little more directly, PayPal is a good option. If you just have one or two items to sell, like ebooks or music, you can create a Page on your blog and add a PayPal payment button. We have tips for including custom code via the Compose editor here.

PayPal also offers a storefront widget, which you can display in your blog's sidebar. It's very quick to set up and allows visitors to select items directly from the widget.

Do you have a favorite way to sell stuff online? Share it in the comments! And don't forget to submit your info to the TypePad Shop!


Weekend Project: Wide Image or Ad Above Two Sidebars

For this Weekend Project we'll be tackling the task of adding a wide image above the sidebars of a three-column-right layout. This can also be used for wider widgets, large advertisements, and more. Typically, however, it's used when you have something you want to feature above the rest of your sidebar.

Adding Wide Content Spanning Above Two Sidebars

We recommend creating a test blog in your account, then selecting the three-column layout where the post column is on the left and the two sidebars are on the right. The theme you choose can be a duplicate of your existing theme, or you can add any theme of your choice; it really depends on whether you want to test the change for your existing design or a new design.

Adding Wide Content Spanning Above Two Sidebars

To get started, you'll need to go to Design > Content, then add the Embed Your Own HTML module. When you click to add the module, a pop-up box will appear, pre-filled with "Custom HTML" in the Label field, which we recommend changing to something that will remind you what the module is for. The HTML field is where you'll be placing the content you want to span across the two sidebars.

In order to create the space for your content, you'll need to first strip the default module tags that appear around the Embed Your Own HTML module content. To do that, place the following into the HTML field of the Embed Your Own HTML module:

<!-- no_wrapper -->

Immediately below that, you'll need to add the HTML to prematurely close the #beta-inner and #beta DIV tags of the first sidebar. The code for that looks like this:

 </div> <!-- prematurely close #beta-inner -->
</div> <!-- prematurely close #beta -->

If you left the HTML at that, your sidebars would be broken, but that's something that will be fixed before you click OK and save the content changes.

Next up, add the HTML for your content. If, like in our example, you are adding a centered image, the recommended HTML would be:

<div align="center">
 <img src="http://example.typepad.com/image.jpg" title="Image Title" />
</div>

Replace http://example.typepad.com/image.jpg with the URL of your own image. If you're using the space for an advertisement or widget, then paste in the HTML or script that you were provided for that item instead of our example image code.

The final step would be to add in HTML to re-open the closed sidebar by adding in the opening DIV tags. We recommend keeping the same IDs for the DIV tags, which would make the HTML you need to add:

<div id="beta"> <!-- re-open #beta -->
 <div id="beta-inner"> <!-- re-open #beta-inner -->

All of the HTML content together for our example would be:

<!-- no_wrapper -->
 </div> <!-- premature close #beta-inner -->
</div> <!-- premature close #beta column -->

<div align="center">
<img src="http://example.typepad.com/image.jpg" title="Image Title" />
</div>

<div id="beta"> <!-- re-open #beta -->
 <div id="beta-inner"> <!-- re-open #beta-inner -->

Adding Wide Content Spanning Above Two Sidebars

After adding the HTML above, click the OK button and position the module at the very top of the first sidebar. You can then click Preview to see how the spanned area looks before clicking Save Changes.

With that last step, we wrap up this Weekend Project! It can be used for a myriad of things. You can even add more than one item to the spanned area (just place it within the same area as your first image, ad, etc.). So, try it out, have some fun, and let us know how it works out for you!


Weekend Project: Grid-style Posts Layout

This weekend's project is inspired by Rachael Herron's blog Yarn-A-Go-Go. Specifically, Rachael has set up her Books section to use a grid format for the book covers and blog post title. Each post then has a detailed synopsis, links to purchase the books, and reviews.

Yarn-A-Go-Go

If you would like to display your posts in an easy-on-the-eyes grid format, and you're using Advanced Templates for your blog, read on!

Continue reading "Weekend Project: Grid-style Posts Layout" »


Weekend Project: Styling Author Comments with Custom CSS

Last week we shared how to style your comments if you use Advanced Templates. This week we'll be focusing the Weekend Project on how to style your comments with only CSS.

In order to take part in this Weekend Project, you'll need to be a Pro-Unlimited (and above) member, and use the Custom CSS feature. All set? Let's get started!

First things first, though, let's take a look at how comments appear before any changes are made. Note that, due to the comment settings I've selected for this example, the comments include a profile image to the left of each comment.

Comments without styling

Continue reading "Weekend Project: Styling Author Comments with Custom CSS" »


Weekend Project: Styling Author Comments in Advanced Templates

All comments on your blog look the same by default but, as the author of the blog, you want your comments to stand out. This Weekend Project post will show you how to add formatting to your own comments. The use of an Advanced Template Set for your blog's design is required for this tip.

First, go to Design > Templates and click to edit the Individual Archives Template. Look for the section below in the template:

<MTComments><!-- comment listing -->
<a id="c<$MTCommentID$>"></a>
<div class="comment" id="comment-<$MTCommentID$>">

Add <$MTCommentAuthor dirify="1"$> to the third line of code just after <div class="comment

<MTComments><!-- comment listing -->
<a id="c<$MTCommentID$>"></a>
<div class="comment <$MTCommentAuthor dirify="1"$>" id="comment-<$MTCommentID$>">

The MTCommentAuthor tag calls the Display Name of the commenter. If the commenter is signed in to comment, the Display Name is set at Account > Summary in the author's TypePad account. If the commenter is not signed in to comment, the content of the Name field in the comment form is used.

The dirify attribute converts the Display Name to all lower-case, strips non-alphanumeric characters, and converts spaces to underscores.

In the example, the author name is Rex Manning, and the dirify tag will convert the name to rex_manning making it easy for us to use CSS to apply formatting to comments submitted by Rex.

If you viewed the source code for a post you've left a comment on, you'd see the result of the above code would be:

<MTComments><!-- comment listing -->
<a id="c####"></a>
<div class="comment rex_manning" id="comment-####">

At Design > Templates, click on the Stylesheet Template to add the CSS to style comments submitted by the post author.

The class for the author comments is going to be the author's Display Name converted to all lower-case, no alphanumeric characters, and underscores used instead of spaces. If your display name is Sarah, the class used is .sarah. If your display name is Sam Callahan, the class used is .sam_callahan.

To indent the comments submitted by the author, you would use the CSS:

.rex_manning {
  margin-left: 20px;
  margin-right: 20px;
}

To also add a background color and border to the comment:

.rex_manning {
  background-color: #DDEBEB;
  border: #000000 1px solid;
  margin-left: 20px;
  margin-right: 20px;
  padding: 8px;
}

You can add an image to the comment. First, upload the image to your TypePad account at Library > File Manager. Copy the URL for the uploaded image to include in the CSS. The example CSS below places a small pencil icon to the left of the author's name.

.rex_manning .comment-footer {
  background: url(http://example.typepad.com/pencil.png) no-repeat;
  padding-left: 18px;
  border-top: #000000 1px solid;
}

Combining all the above styles together results in:


Weekend Project: Move the search form to the navigation bar

We're calling this a Weekend Project because there's a bit of code involved but you'll be amazed how easy this is to do. This project can be used on blogs using Basic Templates at any of the Pro subscription levels.

First, you'll need the code for your blog's search form. The code is different for each individual blog so to make it easy, we'll just grab the code directly from the blog's HTML source. Make sure the search form module is enabled in Blogs > Design > Content and then open your blog in your browser.

View the source of the page (View > Page Source on Mac, View > Source on PC) and look for the Search header in the sidebar code. You'll copy just the <form> code. Below is a screenshot of what to look for and copy.

View source

Next, go back to the Design > Content page and open the Navigation Bar. Here, select the Advanced option and paste the code in the list item (<li> in code) for the last item in the list. You will also add a bit of code to the float the form to the right in the nav bar. It will look like this:

 <li class=”last-nav-list-item nav-list-item” style=”float: right;”><form id="search-blog" method="get" action="http://example.typepad.com/.services/blog/6a00e550196b118834013486aabf34970c/search">
            <input type="search" name="filter.q" results="5" value="" />
            <input type="submit" value="Search" />
        </form>
   </li>

Here's an example screenshot:

Nav Bar code

When you save and view your blog, it should look something like this:

Search form on blog

The final step is to remove the search module from your sidebar in Design > Content. That's it! You're all done. Have a great weekend of relaxing and blogging, folks!