Customizing the Other Accounts module with your own social icons

July 20, 2012

In our last theme release we unveiled a customized Other Accounts module, which makes use of the default icon and overrides it with a custom social icon of our choosing.

Custom Social Icons for the Other Accounts module

We created 7 custom social icons for various services, then used CSS to override the Other Accounts module when it is in Grid format. (To add the Grid format, go to Design > Content, then add the Other Accounts module and check the Grid option. Save your changes.)

Here are the icons we created and used:

Facebook_chevronFlickrGoogle+InstagramTypepadPinterestRSS feedTwitter

Want to know more? Then...

Continue reading "Customizing the Other Accounts module with your own social icons" »

Weekend Project: Display Your Recent Pinterest Content In Your Blog's Sidebar

July 06, 2012

Everyone seems to be talking about Pinterest lately, and for good reason - with Pinterest, you can organize and share all the beautiful things you find on the web, plan weddings, decorate homes, and even organize recipes - visually and socially.

We recently introduced the Pin It button to Typepad blogs, and we even taught you how to embed a pin in a blog post, but if you've ever wanted to display your most recent Pinterest pins on your blog's sidebar, then this weekend's project is for you. Thanks to Typepad blogger Zalary for the inspiration!

This project can be done easily with Basic Templates, and folks at all skill levels should be able to tackle it, so lets get started!

Pinbar

Step 1: Grab the code! Though this project is super easy, the block of code is quite large, so we've placed all of the code you'll need into a handy text file, which you can download right here. ***Note*** Make sure to open this file in plain text! For Windows users, that usually means using Notepad, and for Mac, that usually means using TextEdit. Using a rich text editor or an application like Word can break the code!

Step 2: Next, you'll be looking for a couple of lines of code in the text file, and replacing them with your relevant information. The first section of code to look for includes your Pinterest RSS URL and the number of pins you want to display, which looks like this:

$(document).ready(function () {
$('#pinterest').rssfeed('http://pinterest.com/username/feed.rss', {
limit: 6,
snippet: true,
header: true,
date: false
});

$('.nailthumb-container').nailthumb();
});

You'll need to change the URL there to your own Pinterest URL. To display your latest pins from all boards, use http://www.pinterest.com/USER-NAME-HERE/feed.rss. To show a specific board, use http://www.pinterest.com/USER-NAME-HERE/BOARD-NAME-HERE/rss

The default code is set to display your six most recent pins side by side in your sidebar. If you want to display more or fewer pins, just change limit: 6 to reflect that.

Step 3: The next step is for folks who want to customize the size of the thumbnails to fit perfectly within their sidebars. The default code provided works great for anyone with a 300 pixel sidebar, but if your sidebar is more narrow, you'll need to resize the images and change the padding a bit. Look for this bit of code:

.square {
width: 125px;
height: 125px;
overflow: hidden;
}

Taking into account the 30 pixels of padding that Typepad adds to each column, decide on how large or small you want your thumbnails to be, and update the width and height values, keeping them the same to maintain the proper ratio.

Next, look for this code:

.rssBody li.odd {
position: relative;
color: transparent;
/* overflow: hidden; */
padding-right: 20px;
float: left;
z-index: 1;
}

And change padding-right: 20px; to coincide with however many pixels you subtracted from the thumbnail size. That's it! You're done with code changes.

Step 4: Finally, copy all of the code in the text file (which has now been updated with your changes), and go to Design > Content in your Typepad account. There, click to add an Embed your own HTML module, and paste everything into the box provided. Click OK, then drag the module into place on your sidebar, and save your changes. You're all set! You should now see your most recent pins on your sidebar.

Extras: If you'd like to display a title above your pins, just paste the code into a new Notes TypeList and add that to your sidebar instead of using the Embed module.

You can also display a "Follow on Pinterest" button below your pins, by grabbing the "Follow Button" code from here and pasting it under the code for your pins in the same space.

Want to see the project in action? You can see my most recent pins on the sidebar of my blog, Hello Melanie! And we'd love to see it on your blog, so leave a comment and let us know if you're using it!

Weekend Project: Replace your banner with a fancy image slideshow

May 11, 2012

This weekend's project is for Basic Templates but because there's Custom CSS involved, you'll need to be at the Pro Unlimited plan to implement it on your blog. Upgrade if you aren't currently taking advantage of the Pro Unlimited plan.

Slideshows are a great way to show off groups of images without taking up a lot of space on a site. They haven't always been easy to set up, though. Fortunately, we have simple code that you can add to your blog via the Advanced area in the Navigation Bar.

Continue reading "Weekend Project: Replace your banner with a fancy image slideshow" »

Weekend Project: Automatically add a custom signature to each post

April 13, 2012

Note: This project uses the Custom CSS feature, which is available to subscribers on the Pro Unlimited plan and above.

Today's project is all about adding a personal touch to each of your posts - without having to do any extra work. We're going to show you how to use the Custom CSS feature to automatically place a custom signature to the end of each post. You can use a scan of your actual signature or an image created with an image editing program.

Here's an example of how your posts will look when we're done.

custom signature
First, you'll need an image. It should be reasonably sized - not too large, since it's just a little personal touch, not a full-on design element. It can just be your name, a small icon or logo, or a little greeting. Either way, it should be personal and unique to your blog.

Save the image as a PNG, GIF or JPG and upload the file in Library > File Manager. Click the name of the file to open it in your browser. Leave that open - we'll need the URL for the image shortly.

The image will basically just be the background for each post, aligned to the bottom. First, we need to create some space for the image. In Blogs > Design > Custom CSS, add the following:

.entry-content {
padding-bottom: 75px;
}

You'll need to adjust the padding to accomodate your image, plus a bit of space for padding. So if your image is 70 pixels tall, you could make the space 90 pixels to accommodate it.

Now, we'll add in the code for the image, like this:

.entry-content {
padding-bottom: 75px;
background: transparent url(http://example.typepad.com/assets/signature.png) bottom left no-repeat;
}

That places the image at the bottom of the post, aligned to the left. You can also align it to the center or to the right.

Finally, you may wish to add some space right below your image and above the post footer, like this:

.entry-content {
padding-bottom: 75px;
background: transparent url(http://example.typepad.com/assets/signature.png) bottom left no-repeat;
margin-bottom: 10px;
}

That's it! When you view your blog, you should see your special image at the end of each post.

Have a great weekend and happy blogging!

Weekend Project: Display Your Photos from Instagram

March 16, 2012

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

March 02, 2012

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

December 30, 2011

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

November 25, 2011

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

November 11, 2011

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

October 28, 2011

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!

Welcome

Need help?

Follow us!

Typepad on FacebookTypepad on TwitterTypepad on Google+Typepad on PinterestSubscribe to Everything Typepad

Like us!

Typepad Newsletter

Still having trouble? Contact Support.