Showing posts with label Blogger Tips & Tutorials. Show all posts
Showing posts with label Blogger Tips & Tutorials. Show all posts

Friday, June 22, 2018

How to Create a Link to Jump to a Specific Part of a Page - Step by Step Instructions

How to Create a Link to Jump to a Specific Part of a Page - HTML Tutorial First, let me define "page jump link".  If you wish to have a link to a section or paragraph in an article, you can create a page jump link that can be inserted anywhere in an article.  You can even use jump links to "jump" to a section in another article on a website.  Or use one to jump to an article section on a totally different website that you manage by simply using the link to the jump link itself.  


Like this: 


I used page jump links at the top of our Review This Site Directory so visitors could quickly skip to the category of articles they wish to see. I've had several fellow bloggers ask me how I created those indexing page jumps and I happily shared my code.  However, it is easier for me to simply publish this article then to continue sharing the code individually each time it is requested.
 

FAST CLICK INDEX - Click the Category Title to Jump to Specific Section of Our Site Directory
BOOKS    CRAFTS    DECOR     ELECTRONICS     GARDENING    GIFTS    HOLIDAYS    MOVIES    MUSIC    PARTIES    PHOTOGRAPHY    PRODUCTS    RECIPES    SITE REVIEWS    SPORTS    TIPS FOR WRITERS    TOYS    TRAVEL    WEDDING    SPECIAL TRIBUTES        ABOUT THE CONTRIBUTORS    ARCHIVES    




ONE VERY IMPORTANT NOTE: THIS CODE MUST ALWAYS BE ADDED OR CORRECTED ON THE HTML, NOT COMPOSE, OPTION WHEN WRITING ON BLOGGER.

If you ever use Compose on an article on Blogger where you use the jump skips, your jump link code will be lost.
As an example, if I ever wish to add anything to this article, I will have to do so in the html tab. Should it open to compose, click the html tab and close the article immediately without making or saving any changes. Keep opening it until it opens in the html. Never update or save an article that has page jumps while working under the compose tab.


HTML Code to add Jump Links


I'm showing the actual html code that you would need to create a jump link.  This is the code I used in this article to skip to the end.

This code should go at the top, or section where you want to place the option to jump to another section.  Replace the title text with your own descriptive text.

<a href="#the_end_HERE">Skip to End</a> 


And this code should go at the beginning of the section you wish to skip to.

<a id="the_end_HERE">The End!</a>


The id link text must be exactly the same in both links.  As you can see, the visual title text can be different.



Easy Jump Links

Adding page jump links to an article is actually very easy if you are careful and remember to stay in the html tab area on Blogger. I do recommend keeping a copy of your original article html text on a file saved to your computer. Accidents happen, especially if we get in a hurry and need to make a quick change or update an article.

This html jump link code also works on Wordpress!


Happy Blogging & Jumping!


 
 


House of Sylvestermouse











Note: The author may receive a commission from purchases made using links found in this article.

Friday, September 8, 2017

How to Add Tabs to the Top of a Blogger Blog - Step by Step Instructions

Add a Navigation Menu to Your Blogger Blog


How to Add Tabs to the Top of A Blogger Blog Blogger offers a great way to start a free blog, but there are a few things you may want to do to improve the navigation of your blog. One of those things is adding category tabs to the top of your Blogger Blog to make it easier for guests to find subjects of interest by category. This horizontal line of tabs is often referred to as a Navigation Menu or Bar because quite simply, it helps visitors navigate your site and find exactly what they are seeking. 

As you add new posts to your blog, you will discover that it becomes really difficult for visitors to find your older articles. Therefore, labeling your posts by category and than creating tabs at the top of your blog becomes essential. 

Be sure to bookmark these easy to follow instructions for adding tabs to your blog. As your blog content grows, you may wish to revisit and change your tabs. This article will then serve as a great refresher on how they were initially set up, therefore you can easily see how to change or add to them.


Easy Instructions on How to Add Tabs to Blogger 


I am going to take you to the layout of Review This to show you step by step how to create your navigation menu.  This is the method used to create our top navigation menu that is a simple list  of our Contributors names.  If you click on either name, you will see that it redirects you to posts that have been published by that one author.  You decide what category labels best suit your blog.  For instance, a recipe blog might have labels for Appetizers, Main Course, Desserts, Snacks, and More.


How to Add Tabs to the Top of a Blogger Blog - Step by Step Instructions


The secondary navigation menu of our categories is a drop-down menu.  A separate tutorial on creating a drop-down menu will be published at a later date.


(See Tutorial Images in Slideshow Below Written Directions)


  1.   Add a Category Label to Each Post.  Labels are on the right side of each post draft under Post Settings.
  2.   Go to the Layout Tab on Your Blog Dashboard 
  3.   Click "Add a Gadget" in the Cross Column Section under the Header Section
  4.   Select either the Labels Gadget or the Page Gadget.  We used the Page Gadget on Review This because we had Page Links we also wanted to add to our Nav Bar in addition to the labels.  (Contributors & Quick View Home Page Links)
  5.   If you Use the Label Gadget, simple select the labels you wish to have as tabs, and save.
  6.   If you Use the Page Gadget, select the pages you want to use, plus add other labels as external links, save link, and save gadget.  
  7.   You can change the order of the tabs by simply dropping & dragging them within the gadget.
  8.   View Your Blog in "Preview" to See Your Arrangement  
  9.   Save Arrangement (button in upper right corner of layout page) 

 

CONTROLLING THE SLIDESHOW ABOVE
Use the Arrows at the Base of the Slideshow to Move Through the Images
and the stop button to pause the playing slideshow on a specific image

 

More Tips & Tutorials for Blogger
(Including Instructions to Create an Image Slider Like I Used Above)




Note: The author may receive a commission from purchases made using links found in this article.

Friday, August 4, 2017

How to Create An Image Slideshow & Add Image Slideshow in Blogger Post Reviewed

How to Create An Image Slideshow & Add Image Slideshow in Blogger Post

Easy Instructions for Creating a Slideshow for Blogger Posts


Blogger is a fabulous free blogging site, but it does have it limits.  While you can easily add single images to a blogger post, there is no slideshow option available.  Therefore, we must improvise by creating and adding our own slideshows to our Blogger articles. 

Last week, I featured a slideshow in my How to Grill the Perfect Steaks article.   While the images were not especially "pretty", the pictorial tutorial would be extremely helpful to a grilling beginner.

This week, I will show you how to create and add your slideshows to your own Blogger posts.  If you follow these few simple instructions, you will find out for yourself just how easy it is to generate beautiful image slideshows to feature on a Blogger post.


How to Create An Image Slideshow for Blogger

You do need a Google account since we will be using the Google Slides.   Follow these very easy steps to create your own slideshow.

  1.   Click here to open Google Slides
  2.   Select "Blank" under Start a Presentation
  3.   Select "Insert" then "Image" from the Drop Down Menu
  4.   Upload Your Image 
  5.   Add Additional Images by Clicking the + sign on the top left
      and repeat Step 3 until all of your images are added.

Slideshow Showing Images of Steps


 

How to Add an Image Slideshow in a Blogger Post

Once you have finished adding all of the photos to your slideshow, it is time to publish and embed the slideshow in your Blogger post.


  1. Select File and scroll to "publish to web"

  2. How to Add a Slideshow to Your Blogger Post


  3. Copy the Code
  4. Add Image Slideshow in Blogger Post

  5. Paste the code in the html of your Blogger post
How to Create An Image Slideshow for a Blogger Post

 

This is How It Looks on Compose in Your Blogger Post

How to Create An Image Slideshow for a Blogger Post


Additional Options In Google Slides for Creating Slideshows

  • You can change the background color under the Layout Tab
  • Change the layout to accommodate 2 images instead of one
  • Images can be Cropped
  • Change the layout to Combine Text and Photos
  • Text can be Added on Photos 
  • Add Links to Photos
  • Rearrange the Images by Simply Dragging Image
  • Add or Change Photos after the Slideshow is published
  • Built-in Spell Checker
  • Undo & Redo Buttons


Example Slideshow



 

 

More Tips & Tutorials for Blogger




Note: The author may receive a commission from purchases made using links found in this article.

Friday, April 7, 2017

Add a Large Image to Tweets on Twitter with Twitshot

Add a Large Image to Tweets on Twitter with Twitshot
Twitshot makes adding large images to your Twitter tweets easy! 

Most of us don't have enough hours in the day to spend a lot of time on each social media site to share each article.  Finding an easy way to share eye-catching images quickly, makes every blogger's daily schedule more manageable.  


Twitshot is my all time favorite shortcuts to beautiful tweets that include big images with the necessary textual information.

Normally a tweet includes a thumbnail size image that is often overlooked when scrolling through tweets.  Large images are not as easily overlooked or bypassed.  

Getting traffic to your article often starts with catching a readers attention.  The best way to do that, is with images and not words.


Appearance of a Regular Tweet 

If you use the Twitter button on an article, this is the way a published tweet will look.  As you can see, it has the small thumbnail picture.

 How to add Large Images to Tweets on Twitter


Appearance of a Twitshot Tweet

If you use Twitshot, this is the way your tweet will publish.  The photo is center stage and very eye-catching due to the size of the image.

 
How to add Large Images to Tweets on Twitter!


You can even include a short text description if you need or want that article summary normally shared beside the thumbnail image.  140 characters are allowed on Twitshot with your large image.  In the case of the movie review below, I had to shorten the summary for it to fit, but the text is still descriptive enough for readers.

Learn How to Add Large Images to Tweets on Twitter

How to Use Twitshot


It is so easy to use Twitshot.  You simply enter the article url into the box on Twitshot and select the image you want to accompany your tweet.   

Hover over the image to optimize your image to the recommended Twitter image size (1135 x 600).  However, you can select an image that is square instead of oblong.

When You Enter The Article Link, This is What You See
Learn How to Add Large Images to Tweets on Twitter




Here is a Mark-Up of Exactly What to Do to Add and Tweet With a Large Image
If you don't like the images that are auto selected, you can paste an image url, search for an image, or upload an image.  
How to Add a Large Image to Tweets on Twitter


Click Here to Visit Twitshot Today and Start Tweeting with Large Images!

You can also add a TwitShot Button to your Site for Sharing.  Click Here to Get the Code


More Tips & Tutorials for Blogger


Add a Large Image to Tweets on Twitter with Twitshot Written by:
House of Sylvestermouse




Note: The author may receive a commission from purchases made using links found in this article.

Friday, August 12, 2016

Using Easy Product Displays to Create Home Page Featured Articles

How to Create a Blogger Home Page Review and Tutorial

ReviewThisReviews.com

Previously, I published How to Create a Static Home Page on Blogger.  In that article, I shared that I used "Easy Product Displays" to generate the code for our Quick View Home Page here on Review This!   With EPD, I can easily create a truly awesome code that features the article images, with captions, set side by side.  

This provides a viewer friendly page that our guests can view quickly and select an article on Review This that they wish to read.  Because each photo is linked to the review article of origin, a visitor need only click the photo to be redirected to that page.  

It truly is the perfect Home Page set up for Blogger.



How to Make Your Own Home Page Features Using EPD


I was asked by several people to share a step by step tutorial on how to use Easy Product Displays (EPD) to create the Home Page features.  Since I change our Quick View Home Page features each week, that is a very easy request to fulfill.  

I will show you step by step photos of the process, but you will need to join Easy Product Displays to use their service and generate the code.  You can join for your free trial and set up your first home page code, by simply clicking the box below.

Note:  Setting up a featured article page is not the intended purpose of EPD, it is just a fantastic alternate use of their service.  
What Easy Product Displays offers to affiliate marketers with their search tools, buttons and displays is much more valuable.



Step by Step Instructions for Creating Your Featured Article Page

  1. Select Your Setting on the EPD Dashboard - Be sure you Select "None" for the Button Type.  I also select "No Border" for the Border Style
    http://www.reviewthisreviews.com/

  2. Add the Number of "Boxes" for Photos/Articles You Wish to Display
    http://www.reviewthisreviews.com/

  3. Fill in the Spaces with the Article URL, the Title, and the Photo URL
    http://www.reviewthisreviews.com/

  4. Select Your Layout - As you can see the the screenshot below, there are a variety of layout styles.  
    http://www.reviewthisreviews.com/

  5. Click the "Get Code" tab in the upper right corner, then select "Copy to Clipboard"
    http://www.reviewthisreviews.com/

  6. Move to your Blogger Page and paste the code copied to clipboard on the Blogger post using the "HTML" tab page.
    http://www.reviewthisreviews.com/

Additional Notes:

If you wish to add line spaces in the captions under the pictures, you would simply add <br /> <br /> where you want the break.  


A Screen Shot of Our Quick View Home Page 

This is a miniature screenshot taken at the time this article was written of our Quick View Home Page here on Review This!  I wanted you to easily be able to see the results, but you are always welcome to visit our current Quick View Home Page.
 
Review This Quick View Home Page

If you have any questions, or need additional information, please ask in the guestbook below.


More Tips & Tutorials for Blogger


Using Easy Product Displays to Create Home Page Featured Articles Tutorial Written by:
House of Sylvestermouse




Note: The author may receive a commission from purchases made using links found in this article.

Friday, August 5, 2016

How to Create a Static Home Page on Blogger

reviewthisreviews.com
Blogger is a great blogging platform that is perfect for beginners, as well as experienced bloggers.   However, as our blogs grow, we need to find ways to make them easier to navigate.  We want our older posts to be easier to find by our readers.

Those of us who write on blogs already know that the newest article will be featured at the top of the blogger site.  The older articles will be shoved down the blog landing page and eventually to the "next" page.  Depending on the frequency of publishing, that can actually happen pretty fast.  Articles that are still very relevant are no longer seen on the landing page and become harder to find.  One could almost even say they are "hidden" by the newer content.  So, what can we do?  

We take navigation very seriously on Review This!  In addition to having every article listed in our drop down tabs, we have a "Quick View Home Page".  Each week, our contributors select articles to feature on that page.  It looks & feels like a Home Page on a website.  

We opted to have our Quick View Home Page set up as a separate page that our readers can easily visit, as opposed to setting it as our static home page.  However, you can certainly set one up just like it to be the landing page for your blog. 


Step by Step Instructions for Creating a Blogger Static Home Page 


Blogger has a default "Home" that takes any guests to the "line up" of published articles.  It is necessary to do a redirect in order to have a static home page on Blogger. 

1)  Create a new page with an appropriate title and Publish it.

http://www.reviewthisreviews.com/2016/08/how-to-create-static-home-page-on.html

2)  Set the Redirect on your Blogger Dashboard.  Go to Setting > Search Preferences > Custom Redirects

Fill in the blank squares.  The site url is auto-filled:  
  They will look something like this.  Be sure to add the / at the end of your current home url

      From:  www.CurrentHomeURL.com/
      To:   http://www.YourSiteName.com/p/home-page.html 


http://www.reviewthisreviews.com/2016/08/how-to-create-static-home-page-on.html
 
 
3)  Check Each of the Boxes Click Save

4)  Click Save Changes

5)  Check the main url link to make sure it is properly redirecting to your new home page.

6)  Go Back to the Page you created at the beginning of this tutorial and add the content you want showing on your new Home Page.


You Now Have A Static Home Page on Blogger!



★ ★ ★ ★ ★

Click the button below to see the Review This Quick View Home Page.  Each week, I use EPD, Easy Product Displays, to generate the code for the page that allows the images with captions to be set side by side.  

I have published a step by step guide "Using EPD to Create Home Page Featured Articles" in a separate post.  Please click this link to see that companion tutorial.
 





Note: The author may receive a commission from purchases made using links found in this article.

Friday, June 17, 2016

How to Change a Blogger URL to a Custom Domain URL - Easy Instructions with Photos

Custom Domain URL on Blogger - Easy Instructions
There are several reasons why you might want to redirect a blogger url to a custom domain url.  In my case, I didn't want to transfer all of the articles on blogger to a new site just to have the custom domain url.  Custom domains are easier to remember since they most often match the site name.  They also don't require readers to remember the "blogspot" part of the url.  It is so much easier to tell friends, family, and readers to visit ReviewThisReviews.com than it is to tell them ReviewThisPersonalReviews.blogspot.com.  Now that our site has been redirected, either the old url or the new custom domain url will land you here.

Even though we have owned the custom domain name for years, I was hesitant to make the redirect.  I feared all kinds of evils would befall us.  I worried that we might even be offline for hours or days.  All of those concerns were unfounded.  Nothing bad happened and within 30 minutes, our custom domain was completely set and our site was redirected.

Now, let me share our extremely easy directions for redirecting a blogger site to a custom domain.  These instructions are written with bloggers in mind, not computer web designers.  The instructions are written in plain, easy to understand English and I have included lots of screenshots so you can see exactly what I am talking about in each step. 

Instructions for Redirecting a Site URL


If you follow these instructions, they will work.  Some steps may require waiting time for the DNS settings to activate, but that does not mean you have made a mistake.  Simply be patient and allow the internet to process your commands. 

1) Purchase Custom Domain - I use Namecheap, so these instructions will show their dashboard 

2) On the Blogger Dashboard, click Settings > Basic 

3) Click the link "+ Setup a 3rd party URL for your blog" 

Easy Instructions with Photos for Changing a Blogger URL to Custom Domain


4)  Go to the Namecheap Dashboard and click "Manage" by the url you wish to use, then select "Advanced DNS" from the top tabs.
 
Easy Instructions for How to Change a Blogger URL to a Custom Domain URL

Easy Instructions for How to Change a Blogger URL to a Custom Domain URL


5)  Copy the domain url, go back to the blogger dashboard, and paste the domain url in the box.   
BE SURE TO START THE DOMAIN URL WITH www.      
example:  www.thetoymousestore.com      
(If there is a / at the end, remove it)
 
Easy Instructions for How to Change a Blogger URL to a Custom Domain URL

6)  Click Save - This will auto-populate the information you need for the next step.
 
Easy Instructions for How to Change a Blogger URL to a Custom Domain URL

7)  Copy the destination (ghs.google.com) and Go Back to the Namecheap Dashboard.  Paste ghs.google.com in the CNAME record value box replacing "free.park-your-domain.com."  Make sure the www is in the Host section  

8)  Click "add a new record" and select to add another CNAME Record (See Screenshot Below)  

9)  Paste the second line of letters and numbers in the appropriate CNAME boxes  

Easy Instructions for How to Change a Blogger URL to a Custom Domain URL

10)  Click all of the check marks - they will disappear and little trash cans will appear 

11)  Go back to the Blogspot dashboard and click Save.   (If it doesn't save right away, wait 15 - 20 min and try again.   One of my blogs took about  15 min for the DNS settings to activate so I could save it.) 

12)  Once saved, confirm the new domain url is working by viewing your actual blogLook at the address to confirm url change.
 
Easy Instructions for How to Change a Blogger URL to a Custom Domain URL


13)  One last VERY IMPORTANT STEP!   

On the Blogger dashboard, under Settings > Basic, click the "edit" link beside the new url and check the box beside "Redirect 'YourSiteName'.com to www.'YourSiteName'.com.    This ensures that the www.  is not required in the url to find your site.   (This may also take a few minutes before it will allow you to save it)  

Easy Instructions with photos for changing a blogger url to a custom domain url


Congratulations!   
You are done, so go Celebrate!!!



You may also enjoy seeing our new Quick View Home Page here on Review This!  This page features articles you may have previously missed, while also providing excellent examples of the types of reviews published on our site.  

I will be sharing instructions on how to create your own Quick View Home Page for your blog soon.


http://www.reviewthisreviews.com/p/quick-view-home-page.html


 

How to Change a Blogger URL to a Custom Domain URL written by:
House of Sylvestermouse




Note: The author may receive a commission from purchases made using links found in this article.

Friday, May 15, 2015

How to Create Collections on Zazzle and Add Them to Your Sites

Creating a Collection on Zazzle is really easy!   Plus, adding your curated Zazzle collection is even easier, but you may wonder why you would want to feature the collection link instead of featuring the items themselves in a post.  There are actually several reasons why the collection would be a better option than individual links, but first let's cover how to create the Zazzle collection.

 

How to Create a Zazzle Collection

  1. Select Your Subject ~ Example:  Postcards from Rome
  2. Hover you mouse over the item you will be adding to the board.  You will see the "add to collection" button in the upper right hand corner.
  3. Click the down arrow to see the list of your collections.  
  4. Since we are adding a new collection, type the title of your new collection in the bottom square and click create.  
  5. Add a description of your new collection by editing the board.
  6. Add 5 tags
  7. Check the "visible in stores" square if you wish the collection to show on your store's home page.   It must also be marked "public" do show to anyone other than you.
How to Edit, Title, Add Tags and Add a Description to Your Zazzle Collection



Alternate Way to Create a Collection on Zazzle


You can also start a new collection by simply clicking the "+ New Collection" on your Collections page and continue with steps 4-7 above.

How to Create a Collection on Zazzle

 

How to Find Your Collections on Zazzle


In order to edit, change the cover photo, or rearrange the items in the collection, you can simply go to your collections page and select the collection you wish to edit.  You will find that option in the drop down tabs under your profile image at the top.

How to Find Your Collections on Zazzle

 


How to Add a Photo to the Top of Your Zazzle Collection Page


At the top of each collection page, you have the option to add a photo or banner image.  This gives the collection page a really nice overall finished look, while also giving an instant example of what can be found in that collection.

Add a photo to the top of your Zazzle collection by simply clicking the "camera" in the big, blue square and selecting the image from your own uploaded photos or images. 

How to Add a Top Photo to a Zazzle Collection



How to Reorganize Your Items in a Zazzle Collection


Reorganizing the items in your collection is very easy.  Simply click the "organize" button at the top of the collection, then drag and drop your items where you wish.

How to Reorganize Your Items in a Zazzle Collection



How to Add a Zazzle Collection to Your Wordpress or Blogger Site


Adding a Zazzle collection to Wordpress or Blogger is very easy.

  1. Simply click the "share" button at the top of the collection page on Zazzle. 
  2. Select the "link" option
  3. Select Your Display Preference
  4. Copy the html code
  5. Paste the html code in your article under the html (blogger) or text (wordpress) option ~  not under compose or visual

 




How the Collection Appears




Note:  To get a larger display on your site like I have above, go to the "html" of your article and change the 325.jpg standard size to 525.jpg.  That size should not distort your image and will give you a larger display of your collection photo.



Why Use a Zazzle Collection in Your Website Article 


There are actually a couple of very important reasons to us the Collection link provided by Zazzle in your site article.


  1. It is only one affiliate link on your article.  
  2. Links to the entire Collection page which could easily feature dozens of additional related items.
  3. From your Collection page, the reader may well be tempted to explore more of your Zazzle store items.
  4. The Collection image makes a great sidebar ad or a fast addition to a related article for an easy update of the article.

What do you think?  Can you add to that list of why we should use a Zazzle collection in our website articles?

Please leave your thoughts, suggestions and comments below.


Zazzle Collections Can Include Items from Other Zazzle Stores


You are not limited to featuring only your store items in one of your collections.  You can add items for other Zazzle stores to your collections.  This is especially helpful if you don't have enough of a particular item to make a nice size collection presentation.  You will earn 15% in affiliate income when a buyer clicks through your created collection link in your published article!

However, if they access your collection via Zazzle instead of your published article, your referral code is not included in each individual link in the collection.  Therefore, I would not recommend checking the "visible in stores" option when creating collections that include a lot of items from other stores, unless you don't mind not receiving the commission for items sold.   Hopefully, that will be corrected in the future.




Note: I changed the size of these collection displays from 425.jpg to 625.jpg. I also added the words "Collection Curated" to the blanket collection since all of the throw blankets featured in this collection are not items in my store.



See the Collection Images in Action on a Wordpress Article


Here is an example of an article I recently published that uses the collection image links instead of individual product links.  I have featured 3 different Zazzle Collections in this article.

Mugs by Sylvestermouse

I would love to add your articles here too.  If you have used a Zazzle Collection in one of your published articles, please leave the link in the comments section below.


From Our Readers


This Mug Collection was created by Jasmine who, within an hour of reading this article, had used the instructions here to create her first collection and I wanted to share it with everyone. Review This is, and always has been, dedicated to promoting others as well as our own work. Thank you for being one of our loyal followers Jasmine!

Our own Contributor, Bev, also created a collection by using the instructions in this article. Likewise, we are featuring her new Zazzle collection.

Flower Mugs by Annie (Raintree Designs)

Throw Blankets Curated Collection by Sylvestermouse

Clematis Mugs by GramsBe


If you use these instructions to create your first Zazzle collection, simply leave me a note in the comments section below. I would love to feature your collection too. (The throws would be happy to move out of the way for your collection to be included here.)



Note: The author may receive a commission from purchases made using links found in this article.