How to make Secret Pages on your blog - PART 1

INTRODUCTION

I have done a lot of researching on the Internet to find out how to create secret blog pages but I always end up on tutorials that tell you how to add a static page to a linkbar, then remove the tabs navigation menu bar and replace that with just a normal link. Unfortunately, I've done that with many of my static pages already, and sure it saves space if you add all your static pages into a dropdown menu but really, there is nothing secretive about that. You can still find the static pages. But that is also limiting because on Blogger you are only allowed 10 (recently updated to 20) static pages. I want, and maybe you want, 100 or more secret blog pages.

Well, the good thing about Blogger is you literally have millions - the potential is there in reality - of pages to use on Blogger. Each blog post page is a separate page on your blog, and is just as good as a static page. A lot of people whinge about Blogger because this is not right, or that is not right, or the Navbar is a nuisance, or there is not enough pages on Blogger to use, etc. Unfortunately, most people do not see the potential of Blogger as I do. I see just one blog as having the potential of being as large as any website out there on the internet. If you have, let's say, 10 blogs on Blogger all up, you literally can have one website as large as Facebook - and its all free. All you do is have one of the 10 blogs as your main blog then just link them all together.

But anyway, what I propose here today is to separate, or divide your blog in half. One half contains your normal, every day posts, and the other half contains secret content that cannot be normally accessed. The secret posts content will be invisible to everyone in the beginning because you will remove all links and all visual signs of their existance on your blog. I'm talking about normal blog posts that you can hide from any visitors that visit your site. The potential for this is huge on Blogger whether you realize it or not.

This subject became my biggest challenge when I first discovered the need for having secret pages on my old blog. The problem I had facing me was to place certain blog posts in my blog that only could be found via one specific link on my blog. This specific link also had to be hidden, and it had to be displayed on my home page so it was not an obvious link. With secret pages you need a starting point, and without it no-one, except yourself, will ever know there are even secret pages on your blog.

So, what is the purpose of having secret pages on Blogger? Well, the possibilities are endless really. Let's say you want to add content to your blog that you don't want just any visitor to find. Let's say you have top secret videos you want to display on your blog, or top-secret recipes you have found on the internet, or trade secrets of certain individual's careers you want to add but don't want to share it with just anyone. You don't want, let's say, to set your blog to private and you don't want these secret blog posts to be displayed within your normal blog posts only to show up in your blog archive. What do you do?

HOW TO GET STARTED!

With all that in mind, you first need to write down what you want your secret pages to contain. The contents of your secret blog post pages are important to figure out, especially considering it will be a secret. That is something you need to work out for yourself, as to what the contents of your secret pages will be. If I tell you what my old secret pages were then it wouldn't be a secret anymore, would it?

For arguement's sake, let's say you have top-secret recipes you wish to display on your blog. So, you will need to organize your blog's secret post pages in a different manner than your blog posts would normally be displayed. Because you will be adding secret content to these secret post pages you need to write all the urls, titles, and basic contents of each post down into a journal - basically so you know where everything is.
But why write it all down into a journal? You need to write it all down so you can keep a record of where all your secret pages are. You see, when you begin to put this tutorial into practice on your blog, you will soon learn that there are no widgets or obvious links displaying these secret post pages on your blog anywhere. The only way you, as a blog author, can truly locate each secret post page quickly is to locate the posts in your "Edit posts" section of Blogger.

What we will be doing to create these secret blog post pages is to link them together. The first link will be displayed on your homepage somewhere but it can only be found by placing a clue on your homepage somewhere. Once the clue on your homepage has been found it then needs to be clicked on. So, I will teach you how to create a link that will turn into a pop up window, and all your secret blog post pages will only be displayed and, hopefully only viewed, in pop up windows. The first pop up window linked page will be your very first secret page. That first pop up window secret page will then contain a second clue and a second pop up window link that leads to your second secret page, and so on. However, once the first pop up window secret page's link has been clicked on, the only way to get out of the whole secret pages section of your blog is to close down the pop up windows. You then have to start all over again.

In order to really be successful with creating secret pages you need to give your blog an overhaul. You will need to reorganize your blog and all its links so no secret page urls are displayed as links but at the same time you still need to make your blog's normal content visible to your visitors. It will be hard work, and time consuming, but once completed it will be worthwhile having made that effort to reorganize your blog.

In Part 2 of this tutorial I will discuss the basics of reorganizing your blog, to allow for your secret pages to be added to your blog. In the meantime think about what you want to add to your own secret blog post pages, write it all down and make a plan on how to execute the order of that content.

Embed RSS feeds into a blog post or static page

The iframe containing the RSS Feeds above is the live-demo for this post.

This is really a great idea if you don't want to clutter up your blog with RSS feeds in your sidebar. You can actually create a new post or a static page, and add all your RSS feeds to it in iframes. The code for adding the RSS Feeds iframe to a blog post is below.

<iframe frameborder="0" height="350" marginheight="0" marginwidth="0" scrolling="yes" src="http://abductedbyets.blogspot.com/feeds/posts/default" width="600"></iframe>

You paste the code into the "Edit HTML" section of your post. Simply change my url in red to the one you want to display and change the width of the iframe to match that of your own post's width (and height to suit your own taste). It couldn't be any simpler!

Add a background image to an individual post.

Sometimes we just want to do something different and adding a background image to an individual blog post can style the post. The background image itself can compliment the visual effect of the post content, giving it more appeal to the readers, or yourself. So here is the code for adding a background image to an individual post.

<div style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9NAce1txa9rOI_4JoA0-DJlHa_IgE0xZd66XtuPEOmEqdgUC4yg2U9iRMPi5zrBFaEZ5NvEMr4KRI8Orb3Vy2N7Mxkad0ybtnqz2WYfstAVZ1DZlKkp2CpNm9bRqJYDQG4ceQrcwdpM0/s620/798px+wide.jpg) #000 no-repeat; color: white;padding:5px;"> ADD YOUR POST TEXT AND OTHER THINGS YOU WANT TO ADD TO YOUR POST HERE</div>

Just change the background url for your own and change the colour of the text to your own colour. Don't forget, this code is supposed to be added to the "Edit HTML" section, not the "Compose" section of your blog post.


If you have a really big picture you want to use as a background, like this one I am using, it is best to write a fairly long post so all the image shows up.  Have fun!

5 things to use marquees for on your blog

Commonly known as scrolling text, marquees can literally be used for almost anything. Today I will list 5 things which you can use marquees for that have been in use on blogs and websites.

1.  SITE UPDATES AND WELCOME TO MY BLOG INFORMATION
Adding important information that your visitors will hopefully read, I've noticed, needs to be eye catching and uniquely styled. If you just put a normal marquee with normal text on your blog your messages will probably be overlooked by everyone.

These days people tend to pay more attention to visual aides. By adding visually appealing content to marquees will help your visitors to look at it. Your information not only has to be unique that you add to a marquee, if you are bored with looking at it, the chances are other people will be too. Make the content of your marquee/s so YOU want to keep looking at it, as if it is hypnotic. How to achieve that result depends on your ability to be creative. Below is an example of a boring looking marquee and content.

WELCOME TO BLOGGER TUTORIALS FOR EVERYONE! Enjoy reading through the tutorials.

2. ADVERTISING LINKS OR POSTS
A lot of people like to use a marquee for displaing specific posts on their blog, which can be a good thing as marquees catch your eye over content that does not move. So supplying visual moving links on your blog has a much better chance of attracting visitors to click on the links rather than on, say, a recent posts link. Below is an example of blog post links added to a marquee with a pause on mouseover function added to it.

My blog post link 1    My blog post link 2    My blog post link 3    My blog post link 4

3. USING MARQUEES FOR DISPLAYING CLICKABLE IMAGES
Clickable images are great but not so great using a marquee because of the jerky scroll behaviour. It is very off putting to say the least. However, just one example for clickable images could be for displaying your Photo albums on your blog. Below is an example of some of my Picasa Web albums as I don't have any Photo Albums for this blog. All images are clickable in this example.

    

4. TO GRAB PEOPLE'S ATTENTION TO SOMETHING SPECIFIC
I've noticed on some websites that specifically advertise something to sell there are these and similiar marquees to grab your attention. As annoying as they are, they do grab your attention but generally are not clicked on. It depends upon what people are trying to sell you as to whether they will be clicked on or make the people more curious about the content. Here is one example that I made below:



STOP | | |GET IT NOW| | |STOP

5. MAKING A STATEMENT
If you truly want to do something different with your blog then you can simply make a series of marquees where you can voice your own opinion about something that you believe in.

Because I am so passionate about nature I created this image below using 4 marquees and 3 images I found on the internet. It is just one way to use marquees to voice your opinion or to express your deepest concerns. If you decide that this has a lot of potential, then I'd love to hear your thoughts.
RESTORE NATURE BY GROWING NATIVE PLANTS IN YOUR GARDEN.

There are probably many other things you could use marquees for but these are just a few. If you have any ideas for using marquees that I didn't mention in this post, feel free to leave a comment.

Create a basic photo gallery image

Let's say you'd like to do something a bit more fancy to your post images, and create something like a photo gallery design. Let's say you'd like to do this to your photo. See example 1.

My image for this tutorial example.

Example 1

Looks nice, doesn't it? So, how did I make it look like this? The first thing I done was to add an image without resizing it or aligning it. Then I clicked on the image and then selected the "Add caption" option. I replaced "Add caption" with the text "Example 1" and highlighted my text and selected the bold option for that text. That was just in the "Compose" tab. I then clicked on the "Edit HTML" tab. In the "Edit HTML" tab there is a caption code for where the "Example 1" text is. It looked like this in the beginning:

<tr><td class="tr-caption" style="text-align: center;"><strong>Example 1</strong></td></tr>

I then copied this code and placed it directly above the <tr></tr> code for the image. I then deleted the text "Example 1" and typed in "My image for this tutorial example." I highlighted those words and selected the italic option. Italic and bold options are best done in the "Compose" section - its just less confusing that way and quicker too. This then gave the entire code 3 table rows with the potential to add more code to each row. Next, in the above captions code example, I added some additional code to the "style" code area. I simply added a background colour, and a font colour to it. I also added a background colour (black which is #000) for the middle row where the image is located. Below is the end result of all the code for my example image (Example 1).

<table align="center" border="0" cellpadding="4" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>

<tr><td class="tr-caption" style="background: orange; color: black; text-align: center;"><strong><em>My image for this tutorial example.</em></strong></td></tr><tr><td style="background: #000000; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHVnAVBWlHSlpT0dY7JzX4g9BghvV1X3z5kV8RUI4lnsLRUwwLZ8x9J2ins7LKrVlOMIqkv_o_7KXYR-ypB_C1NyeSnWrtdbjJLVwk-ZJ2sZogeqtltPHDVom5vsa-oK9hTi9dnvpjjFs/s1600/70239.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="256" mda="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHVnAVBWlHSlpT0dY7JzX4g9BghvV1X3z5kV8RUI4lnsLRUwwLZ8x9J2ins7LKrVlOMIqkv_o_7KXYR-ypB_C1NyeSnWrtdbjJLVwk-ZJ2sZogeqtltPHDVom5vsa-oK9hTi9dnvpjjFs/s1600/70239.jpg" width="320" /></a></td></tr>

<tr><td class="tr-caption" style="background: #000; color: white; text-align: center;"><strong>Example 1</strong></td></tr>

</tbody></table>

As the image's background was not visible I added the number "4" to the entire table's cellpadding. That then displayed the black background behind the image. Everything in bold red is what I added or changed to the above code after the basic first image caption had been added. All these changes were done in the "Edit HTML section" except for the bold and italic options that were added to the captions text. They were done in the compose section. And there we have it. By simply adding a second caption row above the image and adding a bit of additional code to the "style" area and some table padding, we get a nice looking, almost gallery stylized looking image effect.