I wrote this tutorial after I successfully designed, uploaded and linked my own printable recipe card for my blog on Blogspot/Blogger. Blogspot/Blogger doesn't have a widget for plug-in for making printable recipe cards and trying to find one online is nearly impossible unless you want to pay a monthly fee, which I don't. So, I set out to design this template that could be editable, sharable and printable. It does take some added work to put a recipe together in the template and then get it linked to a printable document and then added to your blog. But, don't worry, I will walk you through all of the steps. It may seem like a lot at first, but once you have done a few recipes using the template, it will become second nature to you and a pretty quick process to get a printable recipe card uploaded onto your blog. So, grab some tea or coffee and let's get started!
1. SAVING YOUR TEMPLATE TO GOOGLE DOCS
You can edit and use the above recipe template for your own personal use. Place your cursor on the top of the template shown above, just ABOVE the template outline border. Left-click your mouse and pull down at the same time to highlight the entire template blue. Right-click in the blue area and select copy. Open up a new document in Google Docs and paste the template into your document. Name it something like RECIPE CARD TEMPLATE and save it. Now you have a template that can be used on your website. You won't use this directly for your recipes. You will copy and paste this template in several locations to create your custom recipe cards. Follow all the steps below to learn how.
2. USING THE TEMPLATE ON YOUR WEBSITE
To use the template on your website, first open up a NEW document on Google docs in your browser and a new blog post on your Blogger dashboard, copy and paste your template that you just saved into the Google Doc document and your blog post. Then on your GOOGLE DOC DELETE the words inside the box.
In your blog post, replace the template words with YOUR RECIPE. Left-click your mouse INSIDE the template box and pull down at the same time to highlight the recipe words blue. Right-click in the blue area and select copy. Go back to your Google Doc with the empty template box, place the cursor inside the box and click paste. Now your recipe is inside the template box and ready to use. Name it and save it.
3. Make Your Recipe Sharable
On your new recipe that you just created in Google Docs, click on the blue share button in the upper right-hand corner. In the pop-up box where it says “Get Link”, click the blue text to change the link so that anyone can view. Make sure the drop-down on the right-hand side says “Viewer”. Click “Done” to save your changes.
4. MAKE AND LINK A PRINT BUTTON FOR YOUR TEMPLATE
On your Blogger dashboard open the blog post you just created for your recipe. Click the <> button in the upper left-hand corner and select HTML. Copy an paste the following code at the the top or bottom of your page’s HTML code where you want the print button to appear:
<h1></h1><h1><center><span style="font-family: arial; font-size: small;"><button class="button"><b><i>PRINT RECIPE</h1></i></b></span></a></button></center>
Click the <> button in the upper left-hand corner and select Compose.
You should have a blog post draft that looks similar to this.
Go back to the recipe you want a printable link to in Google Docs. Click on the blue share button in the upper-right hand corner and click “Copy Link” in the pop-up box.
On your blog post, highlight the text inside the print button. Click on the insert a hyperlink button in the post toolbar. Type PRINT RECIPE in the “Text to display” box. Place the cursor on the line that says “Paste or search for link” and paste the link you just copied from your Google Doc. Click apply to save changes. The linked text will now be highlighted and underlined. But the PLAIN, NON-UNDERLINED text inside the button that says, “PRINT RECIPE” will need to be deleted. Place the cursor inside the button and delete the plain, non-underlined text. Save changes.
5. MAKE YOUR RECIPE TEMPLATE MOBILE RESPONSIVE
If you want your recipe template to be responsive, meaning it fits within the parameters of all web browsers in cell phones, tablets, desktop computers, then you can add the following code to your template in your blog post:
style="overflow-x:auto;
Go to your blog post with the recipe template you want to make responsive. Click on <> to open up the HTML editor for that post. Look for the code looks similar to this:
<table style="border-collapse: collapse; border: none; table-layout: fixed; width: 468pt;">
Paste the style overflow code above right before the width code:
<table style="border-collapse: collapse; border: none; table-layout: fixed; style="overflow-x:auto; width: 468pt;">
Update to save your changes.
That’s it! Now you have a simple recipe card on your blog post that not only looks fantastic, but is also printable! To get social share buttons like I have that can be added to your blog post go to https://sharethis.com.
No comments:
Post a Comment