When you want to search for a code in the HTML editor, click inside the editor and press CTRL + F on your keyboard, then enter what you want to find in the search box that appears inside the editor.


Finally, hit the "ENTER" button on your keyboard and it should take you to the requested code.

If you want to be taken to the section of code that belongs to a particular widget, just click on the Jump To Widget button at the top of the editor, choose the widget's name from the list and it will take you directly to that portion of code. 


The CSS rules can be found folded at the top of the template, between <b:skin>...</b:skin> and <b:template-skin>...</b:template-skin> tags. To expand them, you have to click on the sideways arrow next to the line number.


Another great functionality is that now we can Preview Template in the same window without needing to leave the page and we can easily go back to customize our template by clicking on the Edit Template button.

Finally, Format template re-orders the code, adding indentation automatically.

As always, we must use the Save button for the changes to take effect or we can Revert the changes.

And that's it. With a bit of effort, we can easily familiarize with this new HTML editor. Surely as usual and even reasonable to be something inherent in the human condition, this change does not appeal to many. Same with the Lightbox for images, the new template designer, the new desktop and other new things that have been added in the past.
READ MORE - Edit HTML Tips on New Blogger Template HTML editor


Before you try out any tutorial on this blog  it's a really good idea to BACK UP YOUR BLOG!

The first thing to do is to work out the categories that you want to divide your content into.

We need to create a marker in the page for each category. In the example below, I have created markers for  three of my learning through play categories: Science, Maths and Imagination.

The yellow code is the URL of the page or post where you want the index to appear. Notice that you need to add a hash - # - after the URL.

The blue code is the category as you want it to be displayed on the page.

The green code is the name of category you want to add. The name won't be displayed on the page but it will be added to the URL so it's best to keep it as close as possible to the category but also short and sweet.

The purple code just says to display these categories as sub-headings.

<h3>
<a href="http://edit-html.blogspot.com/p/time-to-play.html#" name="Science">Science</a>
</h3>

<h3>
<a href="http://edit-html.blogspot.com/p/time-to-play.html#" name="Maths">Maths</a>
</h3>

<h3>
<a href="http://edit-html.blogspot.comk/p/time-to-play.html#"name="Imagination">Imagination</a>
</h3>


Create the Index

You can now create the index using the categories you have defined. This is very simple - we are just going to create text links to the categories. 

The pink code is the URL of your page, plus a hash sign, plus the name of the category. Theorange code is the value that you want to be displayed in the index - it doesn't have to be the same as the category that you defined in blue above, but it makes sense if it is.

<a href="http://edit-html.blogspot.com/p/time-to-play.html#Science">Science</a>
<a href="http://edit-html.blogspot.com/p/time-to-play.html#Maths">Maths</a> | 
<a href="http://edit-html.blogspot.com/p/time-to-play.html#Imagination">Imagination</a>

Although, we created the categories first we actually want the code for the index to be right at the top of the page.


Add the Post Links to the Categories

We are now going to add links to individual posts into the categories.

In the example below, I have used text links as on Six Sisters Stuff but you could also use image links as I do in my index pages.  If you're not sure how to create image links, check out this tutorial how to add buttons to your blog.

<h3>
<a href="http://edit-html.blogspot.com/p/time-to-play.html#" name="Science">Science</a>
</h3>
<a href="http://edit-html.blogspot.com/2013/02/does-it-always-sink.html">Sink and Float Experiments</a><br />
<a href="http://edit-html.blogspot.comk/2013/01/20-early-years-static-magnetism.html">Static and Magnet Experiments</a><br />
<a href="http://edit-html.blogspot.com/2013/03/10-experiments-that-go-fizz.html">Fizzy Potions</a> <br /> <br />


<h3>
<a href="http://edit-html.blogspot.com/p/time-to-play.html#" name="Maths">Maths</a>
</h3>
<a href="http://edit-html.blogspot.com/2013/01/how-many-birds-are-there-in-garden.html">Learning Simple Maths with Charts</a> <br />
<a href="http://edit-html.blogspot.comk/2013/02/a-question-for-you-which-of-five.html">Capacity and Volume</a> <br />
<a href="http://edit-html.blogspot.com/2013/02/my-mums-maths-manifesto.html">A Maths Manifesto</a> <br /><br />


<h3>
<a href="http://edit-html.blogspot.com/time-to-play.html#"name="Imagination">Imagination</a>
</h3>
<a href="http://edit-html.blogspot.com/2013/03/5-dressing-up-ideas-you-can-make.html">Dressing Up Clothes</a> <br />
<a href="http://edit-htmlblogspot.com/2013/02/i-want-one-like-you-mummy.html">Make Believe Toys</a> <br />
READ MORE - Edit HTML for Create an Index for Your Blogspot


Keep static information such as galleries, indices, about information, disclosure statements and just about anything else you want readers to access easily, separate from your posts.


The only problem is that by default Blogger puts all the pages in the main menu which can make it very cluttered.

It is much better to be able to hide some of the pages from the main menu and access them from for example, a blog indexsub-menu or sidebar button.

When you create a page there isn't any obvious way on the page itself to prevent it being displayed in your main menu, but it is actually super easy to configure the Blogger menu to do this.

1. Go to Layout within Blogger.

2. On the Pages gadget near the top of your layout click the Edit link.




3. A list of all your pages will be displayed.



4. Un-check any that you want to be public but don't want in the main menu & click Save.

5.  Go to Pages within Blogger.

6. Click on the View link for the page you want to link to and copy the URL.

7. You can now create a link to this URL in for example ..

  • any blog post or other page using the standard blogger Link tool
  • an image or button on your side bar
  • blog index
  • mini-menu in your side bar

That's it ... super simple!

Example
To see an example of how hidden pages can be used, check out the Blogging page in my main menu.

I have shared a large number of different posts and resources for other Bloggers including ...

  • Tips on blog design & growing your blog
  • Simple edit html that show bloggers how to code & configure their blog
  • An enormous link party directory
  • Brilliant blogger directories that list great bloggers in particular niches & regions

I don't want separate pages for each of these in the menu but if I include all the links in a single page, it becomes enormous and slow to load. 

So I've put the link party directory and brilliant blogger directories in separate hidden pages that I link to from my main blogging page. 
READ MORE - Configure Your Pages Menu in Blogspot

Copyright CollegeDegrees360 2012 - Creative Commons
I do mean to back up whenever I post or tweak the template but somehow. I get distracted by other stuff.


Which is unbelievably stupid as:

1. Risk = ENORMOUS and 
2. Effort = TINY!

To make it as easier to do quickly, I have written out instructions for myself on how to backup in Blogger. 



I thought others might find them helpful so am sharing them here.


1. Back-up Content

  • In Blogger click on Settings and then Other
  • At the top of the page click Export Blog
  • In pop up window click Download Blog
  • A file in the format blog-MM-DD-YYYY.xml will be created in downloads directory
  • When download complete click Close on pop up window
  • Move the file to a directory specifically for your back-ups
  • Copy the file to a secure remote storage e.g. Google Drive or Dropbox


2. Back-up Template and Gadgets

(You only need to do this if you've changed the template, layout or gadgets in any way)
  •  In Blogger click on Template
  • At top right click on Backup / Restore
  • In pop up window click Download full template
  • A file in the format template-[uniquenumber].xml be created in the downloads directory
  • When download complete click Close on pop up window
  • Rename the file to include the date
  • Move the file to a directory specifically for your back-ups
  • Copy the file to a secure remote storage e.g. Google Drive or Dropbox
READ MORE - Back-up Your Blogspot Before Edit HTML



Jump Breaks allow you to display snippets of lots of blog posts on your home page.


They're great because they give readers a good overview of all your most recent posts. Plus, they are really easy to insert via the Blogger tool bar. Just put your cursor where you want the break and click the icon circled red below.






The only problem is they are displayed in your default link font so they don't jump out, grab readers around the collar and shout "come and read this post".

For this Customize Your Jump Break in Blogspot you are going to edit your blog template so please back-up first.



Change the Default Jump Break Text


The first thing to do is to change the default jump break text. 



In Blogger layout click on the Edit link at the bottom right of the Blog Posts box as below.



A pop-up window will be displayed. The second field down is your jump break text.

Write whatever you like in the field and click the Save button at the bottom of the pop-up.



All your jump breaks will now be displayed with the new text - fabulous!



But ... the text still doesn't jump up and grab readers so now we want to style it.



Style Jump Break Text

We are now going to edit your blog template, so if you haven't already please back up!



1. Now copy the code below into note pad so you can edit it safely.


The first bit of code tells the jump break to display on the right hand side - because we read top left to bottom right, this is the best place to put it for optimum impact.


The next bit of code defines how big we want the text to be (font-size), what colour we want it to be (color), which font we want it in (font-family) and that we want it to be in bold (font-weight). The final bit of code - .jump-link a:hover - defines the colour to be displayed when a reader hovers over the link.

Decide the font-size, color and font-family you want and change the values in note pad ...

.jump-link { float: right;   }



.jump-link a, .jump-link a:visited {
font-size:15px;
color: #a91a00;
font-family: "Georgia";
font-weight: Bold; }

.jump-link a:hover { color: #000000; }


Now the bit where you MUST be careful. 


2. Click on the Template link and then on the Edit HTML button highlighted below.








3. Now click carefully inside the scroll box displayed and press Ctrl-F on your keyboard. Asearch field will be displayed at the top right of the scroll box.

Enter the following code into the search field and press enter: ]]></b:skin>

The code you searched for will be highlighted as shown below.






4. Copy the code you edited in notepad and paste it just above the highlighted code as shown below and then click Save Template.









5. Now view your blog and check out the new Jump Breaks.


6. If you want to tweek the size, colour or font, just go back to steps 2 and 3 and change the values of font-sizecolor or font-family. Remember to click Save Template when you have finished.

If you don't want the jump break bold just delete the following code: font-weight: Bold;

7. Once your happy with your changes back-up your blog.


More Jump Break Styling


Once you've added this code to your template, it's very easy to style it further by adding simple borders.



These are a few examples of what you could do in just a few lines of code ....

To underline the jump break with a dotted line just
Click for more

 add the code: border-bottom: dotted 1px black;

Click for more

To add some stylish brackets just add the code:
border-right: dotted 2px black;
border-left: dotted 2px black;
border-radius: 15px; 
padding: 4px 12px;

Click for more
To create what looks like a button add the code:
border: solid 2px black;
border-radius: 15px; 
padding: 4px 12px;
background-color: #a91a00;
READ MORE - Customize Your Jump Break in Blogspot

PageRank Checking IconMy Ping in TotalPing.com