Blue Shinobi Template: How To Install and Edit

If you have any HTML or CSS experience, you may find it easy to install and edit the Blue Shinobi template. However, for those who don't have any experience with these coding languages, it could be a bit tricky. So, to help make this easier for you, I'll demonstrate how to properly install and edit Blue Shinobi.


Installation
First, download the Blue Shinobi template and extract the file. Go to the "Edit HTML" page of the "Design" tab in your blogger account. Click the "Browse" button, a dialog box will appear. Find and select the .xml file you've just extracted, then click "Open". Now that you've chosen the file, click the "Upload" button. After a few seconds, the page should load and show something like the following.

This is not a major issue. You may choose to keep the widgets of your previous template or not. However, you should know that keeping the widgets may cause the new template to restruction them on your blog. Also, it is important to know that the "Attribution1" widget cannot be moved manually. So, if you choose to keep the widgets and it is placed in your header by mistake, you won't be able to move it. It's recommened that you choose "Delete Widgets".

Most widgets are easy to add so removing them won't be much of an inconvenience, just a precaution. HINT: If you have an "HTML" widget, I suggest you copy and paste the contents of that widget into Notepad before deleting it.

Once you're done with that, click the "View Blog" link at the top to check out your new Template.

Editing Blue Shinobi
If you ever get a headache when looking at HTML codes, I'll be your Asprin for the rest of this tutorial. In this version of Blue Shinobi, the navigation menus and advertisements can only be edited via HTML code. Below, I'll demonstrate how to edit these items quickly.

Navigation Menu
To edit the main menu of this template, open the "Edit HTML" page of the "Design" tab. Press "CTRL+F" on your keyboard to open the "Find" toolbar/dialog box. NOTE: If you're using a Mac, you will press "Command+F". In the text box, type in the following...

<DIV id='NavbarMenu'>

This will take you to the main menu's code. From there, you can change the name of the menu items as well as their links. If you want to remove a menu item, select and delete the code as shown below.

<LI>
    <A href='http://blue-shinobi.blogspot.com/'>Blue Shinobi Template</A>
</LI>

To add a submenu to a menu item, copy the code below and paste it before the </LI> of the item you want to edit. Replace the # symbol with the url of the menu item.

<UL>
    <LI><A href='#'>Name of Item</A></LI>
    <LI><A href='#'>Name of Item</A></LI>
    <LI><A href='#'>Name of Item</A></LI>
</UL>

To add a submenu (3rd tier) within a submenu, just add the code above right before the </LI> tag of the submenu item you wish to place the new submenu in. Here's an example of what that would look like.

<UL>
    <LI><A href='#'>Name of Item</A>       
        <UL>
            <LI><A href='#'>Name of Item</A></LI>
            <LI><A href='#'>Name of Item</A></LI>
            <LI><A href='#'>Name of Item</A></LI>
         </UL>
    </LI>
    <LI><A href='#'>Name of Item</A></LI>
    <LI><A href='#'>Name of Item</A></LI>
</UL>

Sub-Navigation Menu
To edit the sub-navigation menu, go back to the "Edit HTML" page and find the following code.

<DIV id='subnavbar'>

Follow the steps above to make changes to the submenu such as adding and deleting items.

Advertisement 728x90
To edit the advertisement at the top of the template, find the following code.

<DIV class='headerright'>

Replace the <A> tag code with your own or you can add a Google Adsense banner.

Advertisement 468x60 (bottom of posts)
On the "Edit HTML" page, click the "Expand Widget Templates" link. Find the following code and replace the <A> tag with your own banner ad or Adsense code.

<DIV class='gapad'>

Search Box
Customize the search box by making your own in Google Adsense. (NOTE: You must set your search results to open in a new window.) After you've created your search box, copy the code and return to the "Edit HTML" page. Find the following code.

<DIV id='NavbarMenuright'>

Replace the <FORM> code within that div tag with your Google Adsense search box code.