Guess Who’s Back – Blog Setup And Design

OnlineExtrav2017

 

Stampin' Up! Online Extravaganza

Need a promo button for your site to promote Stampin' Up!'s Online Extravaganza? Here's one you are welcome to use.  This one was created in PicMonkey for those DIYers!

Amy has the HTML code and a video tutorial on how to load it to your site.  Visit Webs By Amy now!

Example: US Demonstrators  (PDF link)

<a
href="http://su-media.s3.amazonaws.com/media/Promotions/NA/2017/Online%20Extravaganza/Item%20List%20Flyer%20CA%20EN.pdf"
target="_blank"><img
src="http://i588.photobucket.com/albums/ss329/websbyamy/23804288_1880712875289377_636951947_n.jpg"
alt="Online Extravaganza" border="0" /></a>

 

Need it Smaller?

This button is 250 pixels wide.  Need to make is smaller to fit in your site's sidebar?  For those using TypePad, 180 pixels width should fit.  Give it a go……

Simply add this code in the <img> tag….

<img width="180" src="http://i588.photobucket.com/albums/ss329/websbyamy/23804288_1880712875289377_636951947_n.jpg"

 

Want it to link to your online store instead of PDF?

If you are a current Stamping And Blogging member, you can find the video tutorial as well (Blogger, TypePad, WordPress). This button and code to the DBWS store page is loaded in Blog Maintenance and available for U.S., Canada, Australia, Great Britain, France, Germany, New Zealand, Netherlands.

 

Joining Webs By Amy Team!

I am joining Webs By Amy and will be working with Direct Sellers, just like you, in creating a new look, transferring to new site, refreshing old ones, and/or helping out with site and sidebar maintenance!  This is a very exciting new venture COMING SOON!

Stay tuned….
Heather 😀

Heather Wright-Porto
BlogsByHeather.com

 

TypePad Blogging: Create Pages That Have No Sidebar

You basically have your blog and the overall layout you chose, that has one or two sidebars.  But for the Pages you create, you do not want the sidebars to show…how can you do this? Copy and paste code in the HTML view that will essentially "hide" the sidebar(s).

PageWithNoSidebarsMy example: http://www.blogsbyheather.com/page-without-sidebars.html

Here are the 4 sets of code to choose from…again, depending if you have 1 sidebar (considered a Two Column blog) or 2 sidebars (considered a Three Column blog).

Just copy and paste the code (that suits your blog layout) at the top of your page (in HTML view, not Rich Text view).

CodeForNoSidebars
Need Help Deciding Which Code to Use?

Then simply comment or email me with your blog's URL and I'll let you know 😀

Create a Page Without Sidebars

After selecting the code which applies to your layout, you'll want to add the code to your Page. It is best if you finish writing the page before adding the code, because once the code is added, you will not be able to work in Rich Text mode. (TypePad, Create a Page For Your Blog Without Sidebars)

 

Two Column (Right)

<style>
.layout-two-column-right #alpha { width: 100%; }
#beta { display: none; }
</style>

Two Column (Left)

<style>
#alpha { display: none; }
.layout-two-column-left #beta { width: 100%; }
</style>

Three Column (Right)

<style>
.layout-three-column-right #alpha { width: 100%; }
#beta { display: none; }
#gamma { display: none; }
</style>

Three Column

<style>
#alpha { display: none; }
.layout-three-column #beta { width: 100%; }
#gamma { display: none; }
</style>

The code I used because I have a sidebar on each side (one on the left, one on the right):

<style>
.layout-three-column #alpha { display: none; }
#beta { width: 100%; }
#gamma { display: none; }
</style>
 

Wishing you continued success!

Heather 😀

Heather Wright-Porto
Author, Blogs By Heather
Partner, Stamping And Blogging

Buy a Domain | WordPress Hosting | Book Your Blog Setup & Design | Sign Up for Site Maintenance

 

Tools To Transfer Your Blog To WordPress

Hi there!
Hope you enjoyed your weekend!

Over the next month you'll see changes over here at "Blogs By Heather" and my paper crafting site "Hand Stamped By Heather."  I'm talking about a Blog Transfer! 

 

TypePad to WordPress

image source:TP2WP


Move TypePad Blog to WordPress

This blog, Blogs By Heather, is a TypePad blog and I use Advanced Templates for advanced customization options, but it's time to move over to WordPress.  I am going to use TP2WP. I know people who have spent thousands on this type of transfer, but this tool is $49!  


Move Blogger Blog To WordPress

For my paper crafting blog, Hand Stamped By Heather (as I am a Stampin' Up! Demonstrator), I will be using this tutorial (by RTcamp) to move my Blogger blog to WordPress.

Again, I will do my own first, work out any kinks or issues that may arise, and then tell you how to do it yourself; or can then do it for you.

Stay tuned….
Heather 😀

Heather Wright-Porto
Blogs By Heather
Partner, Stamping And Blogging

Buy a Domain | WordPress Hosting | Book Your Blog Setup & Design | Sign Up for Site Maintenance

 

Have you heard of the EU Cookie law? Here’s how to comply.

One of my customers contacted me for help. She said that she received a notice from Google that her site needed to look a certain when when viewed in EU countries. That she needed to add "Cookies notification in EU countries".  They recommended Cookie Consent from SilkTide.

Basically, you just need to add a bit of code to your blog's template in order to comply.

CookieComply

The message will only appear until the visit clicks "Got It". Now that I have done so on her blog, I no longer see the message on subsequent visits to her site.  See it in action here at KathleenStamps.com

Select/Copy this code:

Download it here from my site.

CookieConsent

And then Paste this code in the appropriate location for your site.

In her site, which is a Blogger blog,

  • Click on Template from the Dashboard.
  • Click on Edit HTML.
  • And you should see the </head> tag.  If you don't you can do a CTRL+F (find) and do a search for </head>.
  • Place your cursor above that line, and paste in the code. (See Screenshot Below)
  • Save Template.
  • You're done!

  BeforeHeadTag(Click image for larger view.)

Blogger Help:

In Blogger, you could have also probably just added an HTML Widget to your blog's sidebar:

  • From the Dashboard, go to Layout, Add a Gadget.
  • Select HTML/JavaScript.
  • Paste in the Code.
  • Save.
  • Save Arrangement.
  • You're done!

TypePad Help:

  • Go to Design, then Content.
  • From the Modules box, choose Embed Your Own HTML. (See Screenshot below)
  • Then click Add This Module.
  • Then Paste in the code in the large text box that appears, click OK.
  • Drag and drop on your sidebar (won't be seen).
  • Then remember to click the Save Changes.
  • You're done!

TypePadAddModule(Click image for larger view.)

WordPress Help:

  • From the Dashboard, go to Appearance, Widgets and drag a Text Widget to your blog's sidebar.
  • Paste in the code.
  • Click OK/Save.
  • You're done!

NOTES: In TypePad and WordPress there are other ways to modify the HTML code, but these methods work as well.  In WordPress, his is for self-hosted blog. If you are using the free WordPress.com, then you cannot use JavaScript in Widgets.

I told Kathleen I would post about this on my site, as I also learned something new! It was the first time a customer had requested my help with the EU Cookie Law.

Happy Blogging!

Heather Wright-Porto
Partner at Stamping and Blogging – Home of our How To Setup a Blog series (over 70 videos and tutorials covering Blogger, TypePad and WordPressNO OTHER training site covers all THREE platforms!)

 

Is Your Blog Mobile Friendly?

It's easy to find out…go to https://www.google.com/webmasters/tools/mobile-friendly/ and enter your site's URL.

MobileFriendlyTestURL

And you'll get your answer…..Sandi's site is mobile-friendly!  This site, Blogs By Heather is not! So we'll go thru that later….

MobileFriendly

Review of Terms

Let's review quickly two terms you probably keep hearing, Responsive and Mobile-Friendly. They are two separate things. Your site could be Responsive, but not Mobile Friendly.  

Responsive means that it auto-resizes to fit any screen…whether it's your desktop, laptop, iPad or smart phone. For example, you can see this site on your smart phone, it resizes beautifully…but can your read it?

That leads us to Mobile Friendly….Just because a website or blog is responsive and can be scaled proportionally, it's usability and readability is not so good.  

A site is mobile-friendly if it can be easily read and navigated from your smart phone without having to take out a magnifying glass or zooming in to read a blog post.

So, when a site is Mobile-Friendly is contains the same great information, but appears in a different layout.  Check out Sandi's site for a great test. http://stampinwithsandi.ca.  Look at it both on your ipad or desktop and then watch it change when you visit it from your smart phone!

Many mobile-friendly sites have the form of a logo at the type (in place of a banner), and a vertical layout of your navigation bar, followed by excerpts of your blog posts, and then your sidebar elements are normally towards the bottom of the page, again in a vertical layout.  Sandi's is beautiful :D 

So, how do you fix it? How do you make your site Mobile Friendly?

Let's review Blogger, TypePad and WordPress. 

Blogger Responsive,
Mobile-Friendly Design

Well, you have to figure this one would be 1-2-3 easy and it is! Google Blogger has a Mobile layout built-in. You just have to turn it on and viola!!! Done. In seconds!!!!!!

From your Dashboard, go to Layout and there is the Mobile layout!

 

BloggerMobileClick on the Settings icon, I chose the layout on the right and clicked Save! That's it.  This was available long before Google's April 21st announcement.

BloggerMobileSettings

Yea Blogger!!!!  Check out my old paper crafting site, http://handstampedbyheather.com, on your laptop, ipad, and then via your smart phone.

Again, this video will be a snap for us to create for you at Stamping and Blogging. Stay tuned 😀

WordPress Responsive,
Mobile-Friendly Design

Many WordPress themes are Responsive and Mobile-Friendly, such as Sandi MacIver's new Canadian blog: http://stampinwithsandi.ca.  Check it out on your desktop and iPad. Then go to that site via your smart phone and check out how easy it is to now navigate the site and be able to "read" everything.

When choosing a WordPress theme for your site, be sure to read the description and that it's at least Responsive.  Although a WordPress themes may be Responsive, it may not mobile-friendly yet, so you'll need to add a plugin. Most popular are:

In Stamping and Blogging, we'll experiment and create videos for WP Touch…I'll let you know when it's ready 😀  If you need help setting up a new WordPress blog or installing a new Mobile Friendly theme, contact me.

TypePad Responsive,
Mobile-Friendly Design

TypePad will be the more challenging change for many of us that have custom designs.  You can see here in my mini-tutorial on switching to a Responsive Design and using CSS code to load the custom banner. TypePad Everything support jumped in to share with us special code that would help the custom banner become "responsive".

However, TypePad also shared this tip in their article (on how to optimize your blog for mobile devices) for those using the Classic Theme Builder, which many of my clients do…so this may help get you started….(but it's only for BETA users at present).

At Design > Theme Builder, check the Create as Responsive box and click Save Changes to make an existing design responsive. To create a new theme, go to Design > Choose A Theme, select Theme Builder, and click Choose. Then, you'll have the option to Create as Responsive and apply the new design to your blog.

Lastly, TypePad shares this article in response to how to make your TypePad blog mobile-friendly.

So I will share with you my experience as I transform this site, Blogs By Heather from Advanced Templates to a Responsive Design.  The biggest challenge I'm thinking will be the dropdown menu….but we'll see 😀

(Updated May 11, 2015) I will use one of my customer's sites as an example. I'm actually preparing to move over to WordPress and can instead share with you how I do that!

Additionally, in Stamping and Blogging we're creating videos on how to convert to a Responsive Design using one of the three Responsive theme TypePad has available currently for all users.

 

What happens if your site is
NOT Mobile-Friendly? 

In closing, this new Google algorithm does not impact your desktop search results ranking. It only impacts your mobile-ranking and how Google identifies and lists those sites resulting from a search people are doing from their smart phones (mobile devices). 

So first, make sure your site is at least Responsive. And then follow the above tips to make it Mobile Friendly or join Stamping and Blogging for step-by-step videos!

How To Use TypePad’s Responsive Design

Now that Sandi and I have finished our "How To Setup a Blog" series at Stamping and Blogging, and I've finished up the 101 Blogging Tips series here at Blogs By Heather, I'm back into giving you what I do best… "how to" tutorials. Have any suggesetions? Post them to my Q&A page – thanks 😀

TypePad Tutorial: Responsive Design

Today's tutorial is on "How to use TypePad's new Responsive Design".  It's not really for me personally as I now use Advanced Templates, have a custom dropdown menu and advanced coding, but I experimented anyway 😀

NOTE: Create a test blog to experiment with!

Instructions

  1. Go to Design.
  2. Click Choose Theme.

    2-ChooseTheme

  3. The responsive theme is actually called Snap.
  4. Then choose a color theme.

    3-SnapColor

  5. You can either click Preview or you can choose to Apply the design and then View Blog.

    7-preview
    It is very simplistic, although TypePad plans on building more themes. And it will scale for all devices.  However, for many they want more "design" elements.

  6. Additionally, you can choose Custom CSS.

    6-CustomCSS
    This is the code (below) to upload a custom banner
    to your theme.

    You should load the banner (image) to your File Manager – then Right-Click on the image to get the URL path. 

    Replace the URL you see in the URL() setting.
    Setup Width and Height to that of your banner. These settings are for my example.

    #banner
    {
    width:970px;
    height:300px;
    background: url(https://heatherporto.typepad.com/BlogDesign-BlogSetup-Banner.png) no-repeat;
    }

    See the Related Links at the bottom of the post for more help in customizing CSS.

  7. Click Save Changes.

    9-ResponsiveDesignBanner

  8. For me, the Blog Title was still showing (where this code works perfectly in Theme Builder). So…..
  9. TypePad Everything, Colleen, gave me a shout out and told me about this code to add to the Custom CSS area to 1. hide the Blog Title and Description (that is needed for SEO) and help the banner scale appropriately as well.

     .container .jumbotron { padding: 0; } .jumbotron { padding: 0; margin-top: 15px; } .jumbotron h1 { margin: 0; } .jumbotron h2 { display: none; } .jumbotron h1 a { background: url(banner.jpg) center top no-repeat; background-size: contain; display: block; left: 0; top: 0; height: 200px; width: 100%; text-indent: -1000em; min-width: 320px; } /* Extra Small */ @media (max-width: 768px) { .jumbotron { height: 90px; } } /* Small */ @media (min-width: 768px) { .jumbotron { height: 140px; } } /* Medium */ @media (min-width: 992px) { .jumbotron { height: 180px; } } /* Large */ @media (min-width: 1200px) { .jumbotron { height: 200px; } } 

  10. Remember to save these last changes as well.

 

Related TypePad Links
on this new theme design:

 

Join Stamping and Blogging!

Guess what? You can now purchase a yearly subscription to Stamping and Blogging! AND you save, getting 2 months FREE!  For those that are currently monthly customers, cancel your current profile, let the month cycle complete and then Subscribe using the new button! Just remember to give me a heads up that you're switching payment plans! Email us at stampingandblogging@gmail.com. Thanks 😀