Posts categorized "Features" Feed

New to Beta: Easily Add and Upload YouTube Videos to Posts and Pages

In today's day and age, we're all taking videos or finding videos online that we want to show people.  Typepad has now made it easier than ever to add videos from YouTube to your posts and Pages with our new YouTube Video feature.

The feature lets you both upload your videos directly to your own YouTube channel and add them to the post and also search YouTube to add other videos to your posts. This is currently only for our Beta Team members, so if you don't see the option, be sure to join.

First we'll cover uploading your own videos.

To start, click the Upload Video to YouTube button to switch to upload mode.  You should see it here:

Uploadvideo
You're on your way to uploading your video!

If you are not already signed in to a YouTube account, you will be prompted to sign in to Google. You will also be asked to choose which YouTube account to use if you have multiple YouTube accounts associated with your Google account.

After doing that, simply click the Browse or Choose File button to locate the video file on your device and open the file. YouTube supports the following video formats: .MOV, .MPEG4, MP4, .AVI, .WMV, .MPEGPS, .FLV, 3GPP, WebM

Now just click the Upload Video button. It may take some time for the video to finish uploading. Once done, the progress bar will reach 100% and the video thumbnail will appear when the video upload is complete. You can now add a Title and Description which will display at YouTube.

Click Insert and Close to embed the video in your post or page after the upload is complete. Easy as pie!

Now we're going to show you how to search for videos and add them directly that way. Here's the section where you do this:

Searchvideo
Finding a video for your post.

To search for your own YouTube videos, click My Videos, select the video you wish to embed, enter a title, and click Insert and Close.

To search for any public YouTube video to embed, enter the search terms, select the video to embed, edit the title (optional), and click Insert and Close.

For our non-Beta users, we'll be releasing it soon, but we urge you to give the Beta Team a try in the meantime.

What do you think of this new feature?  Is there anything else you'd wish we had included or done differently?

Have any questions, want to give us some feedback, or need more help? As always, the Typepad Support team is here for you!


CSS Tips: the new beta Image Gallery

The new beta Image Gallery

In light of our new Image Gallery feature that's currently in Beta, here are some CSS tips to get you started on fitting it to your blog's theme and brand.

Before anything, check out our post on the new Image Gallery, covering the features it now has and how to use them. If you're not already a Beta team member, or aren't sure if you are, you can go to Account > Summary to make your changes. You'll also need to be an Unlimited or higher member to take advantage of the Custom CSS feature.

Note: these CSS changes assume that you will be using the same Image Gallery option setups each time you use the feature. The changes will always be applied. If you do not wish for that to happen, then we recommend placing the CSS inside <style> ... </style> tags in the HTML of the post or page.

Default Styles

Some of the default options are to add multiple images, set to a specific thumbnail size that will display in a grid pattern, and adding a title, description, and border. Those options are all selected and the final default result appears in the screenshot below.

default image gallery styles
The theme chosen for this example is a wide 1-column layout, so you're seeing the 2-thumbnail wide gallery aligned to the left in that space.

 

Before we get into the CSS tips, here is a breakdown of the CSS IDs and Classes used for the gallery:

#featherlight-gallery
    fieldset (fieldset.border)
          legend (legend.border)
      .featherlight-gallery
      #gallery-container
          ul.asset-thumbnails
              li.asset-thumbnail
                a

The offsetting shows which IDs and Classes are parents and children, in case you need to make further customizations than what will be done in the example below.

Width and Position

The first change we'll make is to tell the gallery we want it to take up more horizontal space and to always be positioned in the center of the post. Due to the fact that the example uses a wide 1-column theme, we can make use of the empty space the default gallery leaves to the right. To do that, we would use the following CSS:

/* IMAGE GALLERY - WIDTH & POSITION */
#featherlight-gallery, #featherlight-gallery fieldset { width: 90% !important; /* width of gallery */ margin: 0 auto; /* auto margin to center */ }

The above code sets the gallery width to be near 90% (you may need to make it wider or narrower, depending on your blog's width), so it can then have room to be positioned center to any other content you have in the post or page. Here's what that would then look like:

wider centered gallery
CSS for wider gallery and center positioning is applied.

Title and Description

While the default style works well with the new width, we're going to walk you through how to adjust the font and background color of the gallery title, then the positioning of the description.

Considering the color scheme the design we used has, the title may stand out more with a background color. It's also on the small size, so we'll want to make that a tad bigger. Having it automatically capitalized could look nice as well, so we'll go ahead and make that change too.

/* IMAGE GALLERY - TITLE */
#featherlight-gallery legend { font-size: 125%; /* increase font size */ background-color: #ea9f8f; /* change background color */ text-transform: uppercase; /* transform text to all uppercase */ }

With the color and size changes, it may seem too cramped inside the border of the title. We'll add some space to make that look better by adjusting the margin and padding.

/* IMAGE GALLERY - TITLE */
#featherlight-gallery legend { font-size: 125%; /* increase font size */ background-color: #ea9f8f; /* change background color */ text-transform: uppercase; /* transform text to all uppercase */ margin: 0 15px; /* adjust margin to have 15px space on left-right */ padding: 10px 20px; /* add padding to give text breathing room */ }

The description appears a little close to the bottom of the title, so to fix that, we can use the following:

/* IMAGE GALLERY - DESCRIPTION */
.featherlight-gallery { padding: 15px 0 10px; /* increase padding above and below description */ }

Note: some of these font style changes can be done in the editor but, again, we're assuming you want these style changes to be applied to all instances of the image gallery when it's used. If not, just make individual stylistic changes in the compose editor after inserting the gallery images.

Here is what the above changes would look like on the published blog:

Title and Description changes are applied
CSS for title and descriptions changes are applied

Opacity

The final change we'll make will be to change the opacity of the linked images so that they only show their full opacity when hovered on. This allows viewers to focus on a specific image before clicking to see it larger. Here's the CSS to do that:

/* IMAGE GALLERY - DIM IMAGE OPACITY */
#gallery-container ul li a { 
    opacity: 0.5;  /* set linked image to half opacity by default */
    }

/* IMAGE GALLERY - FULL IMAGE OPACITY */
#gallery-container ul li a:hover { 
    opacity: 1;  /* return full opacity on hover */
    }

The first set of code tells the linked image to appear at half opacity, so that it's dimmed by 50%. The second set of code tells it to return to 100% opacity when it's being hovered over. This is what that looks like in the published blog:

Image Gallery OpacityAnd that's it for today's CSS tips! If there's something we didn't cover in this particular article, and you're wondering if it's possible, feel free to leave a comment or open a help ticket at Help > New Ticket. We're always ready to help!


New to Beta: A Brand New Image Gallery

We here at Typepad love taking pictures and showing them off to friends and family, so we know that you must love it too!

To make showing your images off a better experience, we've completely updated the Image Gallery, a feature currently available to our Beta Team. This will allow you to put your best foot forward and make a great impression with your blog's photos.

Gallery_example
An example Image Gallery.

To get started, you'll notice the following pop-up when you insert an image, select Edit, and then the Image Gallery option on the Compose Page:

Image_insert
The new Image Gallery image insert.

The first thing you want to do is choose your Thumbnail Size.  This will be the size of the image that is displayed on your blog.

Images added to your Image Gallery will be placed in a grid format (unless you check the Scroll Gallery box, but more on that in a minute), so you'll want to choose your Gallery Width.  This is how wide the Image Gallery will be when displayed on your blog.

Typepad will automatically offer only the number of image options that will fit on your blog's design, so no need to worry about images fitting the gallery.  For example, if you choose the 75 pixel thumbnail size, you'll be able to fit more images in a row than if you choose the 250 pixel thumbnail size, so there will be more choices for 75 pixels than 250 pixels.

You can check the first box to add a border around your Image Gallery.  If this remains unchecked, no border will be added.

Next, you can choose if you'd rather have one line of images for your Image Gallery instead of the grid format.  Checking Scroll Gallery will result in an Image Gallery that looks like this:

Scroll_gallery
An example of a scrolling Image Gallery.

Your readers can then use the scroll bar to see more images in your Image Gallery.

We know that there are times you'll want to edit an Image Gallery to make changes like adding more images, deleting an image, or other adjustments.

To do this, simply click your cursor on an image in the Image Gallery and then click the Insert Image button again. When you do, you'll see the Image Gallery pop-up from earlier, containing the options you've chosen previously. You can pick different ones and save your changes. You can also insert additional new images at this time.

You'll notice one other new option when clicking on an image and clicking the Insert Image button.  When you do this, you can now add a title and an alt-image description for the image. The title will be displayed under the pop-up version of your image when your readers click on the thumbnail on your blog.  The alt image description will only be seen if the images do not load.

Insert_edit
The new image options when editing your Image Gallery.

Double clicking the image will open up the familiar Aviary image editor to make changes to the image's rotation, filter, and more.

Another way you can edit your Image Gallery is by dragging and dropping the images into a new order within the Image Gallery itself.

To do this, click once on the image you want to move within the gallery. You'll see a grey bar appear underneath the image once it's been selected and clicked on. Use this bar to grab the image and move it to its new location.

Grey_bar
The grey bar indicates the image has been selected.

When your readers click an image to view within your Image Gallery, this is what they'll see:

Image_popup.com_footer_.com_foote
An example of an Image Gallery pop-up.

To move to the next or previous image, readers can click the arrow to the sides of the image or the left and right arrow keys on their keyboard. When they reach the final image, they'll be taken back to the first one.

If you'd like to display different colors for the arrow background and/or arrow itself, our Pro Unlimited subscribers can use the Custom CSS feature to do so.  Our Knowledge Base article has example code you can edit and use on your own blog. You can upgrade your plan at any time to begin using Custom CSS.

For more information on the Image Gallery itself, please read our Knowledge Base article.

And there you have it! We love our image gallery makeover and we're sure you will too! Since this is a Beta Team feature, if you want to see it right now, you'll need to join our Beta Team. That will give you immediate access to this and other Beta Team features.

For our non-Beta users, we'll be releasing it soon, but we urge you to give Beta a try in the meantime.

What do you think of its changes?  Are there any features you'd wish we had included or done differently? We also want to see your Image Galleries, so please leave links in the comments so that both us and your fellow Typepad community can take a look!

Have any questions, want to give us some feedback, or need more help? As always, the Typepad Support team is here for you!


Update Your Security Question

Update Your Security Question

What would you do if you could not get access to your blog???? Do you know your username and password or just rely on the auto-fill  function? While you still have access to your account, it is important to create or update your security questions and answers. This saves you the trouble of verifying a bunch of information to get into your account.

To add or update your security questions, click on the Account tab, then Under Account Information look for Security Questions.  From the drop down you can pick one of our questions or use the custom question option to create your own. You will need to set up two security questions. After you have selected the questions and provide us with the answers, click on Save Changes.

Security questionsThe security questions will be used by Typepad support to verify ownership in case you need help getting access to the account or need private information about your account. 

If you ever need help getting access to your account let us know! You can contact us through our support form or email us at support@typepad.com.


New Feature: Embed Instagram Posts

Instagram and Typepad

Today we are excited to share with everyone our new Instagram feature. You can now embed posts from your Instagram or someone you follow. This is great when discussing latest news or showing your readers "behind the scenes" of your blog! Working from your desktop or your mobile device, you can add your Instagram posts for your readers!

Add an Instagram post to your blog

From the Compose page, click on the Instagram button. In the pop up, paste in the embed code from Instagram. Click on Ok. Super easy!

Embed Instagram

Get Your Instagram Embed Code Typepad Tip Instagram

Not sure how to get the embed code from Instagram? We can show you! From your browser (either on your desktop or mobile device) go to your Instagram account.

From your browser, you can go to any Instagram account (including yours) if you know the username. Go to the URL http://instagram.com/username (replace the username with the Instagram username.)

Click on the image you want to embed to view the three dots. Click on the three dots and then click on the Embed button. Click on Copy Embed Code. 

Embed code from Instagram

Copy the code Instagram provides, then go back to Typepad and paste it in. 

This is a perfect way to introduce your readers to your Instagram and we hope you love it just as much as we do! Feel free to leave us a comment so we know how you like using this new feature. If you have any suggestions for ways we can improve it, make sure to leave comments on that too! If you need more information about embedding your Instagram post, check out the Knowledge Base. As always, the support team is here to help you out. You can open a help ticket with any questions to get one-on-one support.


Forward your email to Outlook

Forward your Typepad Email to Outlook (2)

Continuing in our email domain series, we are going to learn how to forward your emails to your Outlook account. After you have purchased your domain and set up your email address, you can forward it to Outlook. For Outlook, you will need the IMAP and the SMTP. We recommend you save this information somewhere safe. You will also need the email address (username) and password for your webmail account.

Reminder: If you misplaced this information you can find it in your domain account. Go to domains.typepad.com and log in. Click on My Account, then under Manage Free Service type in your domain and select Email Services from the drop down. Click on Manage Users/ Accounts, then you click on the email address. Here you will see the mail settings information.
If you forgot your webmail password you can reset it here too. To log into your webmail go to: http://webmail.yourdomain.com (replace yourdomian.com with the domain you purchased). 

The following instructions are for Outlook 2016. The instructions for each version are similar. If you would like specific instructions for the version you have, check out this great post Outlook Email Setup from Microsoft.  After you select the version, click on Other Email Account (or I don’t know).

Let’s get started

Open Outlook 2016. Click on the File tab, then click on Add Account. Click on Advanced Setup, then Manually setup or additional server types. Select POP or IMAP then click on Next. You will be taken to a window to add all your account information.

In the Add Account window, you will enter all the information you saved. Under User Information, include your name and the email address you want to add. Under Server Information, change the Account Type to IMAP and put in the IMAP and SMTP information. Under Login Information enter the email address and password for your webmail account.

OL 3

Click on More Settings. Under the Outgoing Server tab, then select the box for My outgoing server requires authentication. Click on the Advanced tab, change Use the following type of encrypted connection to SSL. This will change the Incoming server (IMAP) port number to 993, that is what you want. Change the Outgoing server (SMTP) port number from 25  to 465, then click on OK. This will take you back to the Add Account Window. 

OL 5

Click on Next to test the connections. Once the tests are successful, click on Close. Last, click on Finish to complete the set up.

If you have a gmail account you want to forward your emails to, check out our post Forward Your Typepad Email To Gmail. If you have an email client you would like instructions for, let us know in the Comments. We would be happy to provide more how-to's. 


Get an email address with your domain!

Email domain

When you purchase a domain through Typepad you also get two free email addresses that use your domain. You can use the webmail services to send and receive emails or you can forward them to a different email address. An email address from your domain has a professional look, it will give your blog and business more credibility.  

Set up your email address

First, you will need to log in to Typepad Domains by going to:

Manage Free Serviceshttp://domains.typepad.com/login.php

Once logged in, you will click on the Welcome tab, then click on My Account. Under Manage Free Services, type in your domain  and select Email Service from the drop down menu. You will be taken to a new page. Under Actions click on New User to create a new email address with your domain. You will need to fill out:

  • Name
  • Desired Email Address
  • Alternative Email Address for important communications
  • Country of User
  • Language of User


Once you have filled out the information you will click on Add User. After you have successfully created your email address you are given a personal webmail URL to check your email and a username and password. Make sure to copy this information and save it in a safe place.

Final successful registration

Next up....

Busy bloggers may not need another place to check email. You can forward your emails to Gmail, check out the post Forward your Typepad Email to Gmail. You can also forward your emails to Outlook, check out the post Forward your email to Outlook.


Two New Features: Drag and Drop Multiple Images and Uploading Files to Help Tickets

Today we're happy to announce that we've added two new features to Typepad that ought to make life a little easier for you.

The first is the ability to drag and drop multiple images when uploading them on the Compose page.  This allows you to put them in the order you prefer.  Please note that this is for Beta Team members only.

To use this feature, simply click the Insert Image button on the Compose page and select multiple images.  You'll then see something like this:

Dragndrop

Now just drag and drop the images into the order you prefer.  Simple!

If you aren't already a member of the Beta Team, you may want to join soon. We've got some more changes in the works for images and you won't want to miss out!

Have a screenshot of a behaviour you want to show us? A file you're having difficulties uploading? The second feature allows you to easily add files to your help tickets.  Just click the "Browse..." button at the bottom of the ticket page, find the file, and select it.  Now, when you submit your ticket, the file will be included for the Typepad Support Team to review.

Uploadhelp

We hope that these new features make Typepad even more useful for you! As always, let us know if there's a feature you'd like to see in Typepad.  We're always working to make Typepad the best it can be for you and your suggestions are key in this.


Now in Typepad: Upload Multiple Images to Posts!

It's a little early for Christmas, but we're bringing you a present now - the ability to upload multiple images at once to a post!

Now, when you insert an image into your post, you have the option to choose one or more images at the same time.  Simply select the files you want to insert - either non-consecutive or consecutive - and you're done!

Multiple_images

We're working on adding some more refinements, like respecting the order choice when choosing files, but we wanted to get this sweet little surprise out to you as soon as possible!

If you have any suggestions or questions on this or any other feature, the Typepad Support Team is only a click away!