Showing posts with label tutorials. Show all posts
Showing posts with label tutorials. Show all posts

Friday, 17 December 2010

Tina's Tutorials #9: How to add external links to menubar

This tutorial will teach you how to add external links (links to non-pages) to your menu bar.

e.g. If you click on the link to "About Tina" on my menu bar above, you'll see that it leads to this site:
http://bookcouture.blogspot.com/p/about.html

Notice that there is a "p" there? This indicates that "About" is a Page on my blog.

But what if I want to link to a site that isn't a page? For example, the Book Contest Directory?


Click on the "International" link under my menu bar. Notice that the external website opens up in a new tab or window. This is what this tutorial will teach you to do for your blog.

Step 1:
Go to your blog Dashboard, and access the page Design, and the subtab Edit HTML.
Remember to backup your blog template by Downloading Full Template and saving it somewhere easily accessible.


Step 2:
Check the box Expand Widget Templates.

Using CTRL + F, search for <b:widget id='PageList1'.

You will then see code that looks something like this. Under <b:loop>, add the code in bold.

The parts you need to change are highlighted in red. Where it says URL, replace it with your link. Where it says Link Name, replace it with the name of the link you want visible on your menubar.

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <ul>
      <b:loop values='data:links' var='link'>
        <b:if cond='data:link.isCurrentPage'>
          <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
        <b:else/>
          <li><a expr:href='data:link.href'><data:link.title/></a></li>
        </b:if>
      </b:loop>
      <li><a href='URL' target='_blank'>Link Name</a></li>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

Then click on Save Template and then View Blog to see your external link in your Menu Bar.

You're done! To add more, simply copy that line and repeat it, changing the URL and Link Name when needed.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

More Tips & Tricks from Tina:

Sunday, 10 October 2010

Tina's Tutorials #9: Awesome Text Converter

Hey everyone! It's 10/10/10 and I think that merits something special. I was experimenting on something special, and I found this wonderful text converter from Messenger Freak. I played around with it a little bit and got it to show up on a blog post. How awesome? The conventional use is for MSN Messenger, but you can use it anywhere. I'm filing it under "tricks".


Wacky Text Converter    

This text converter allows you to convert your normal text into ten different styles of awesome text.
Simply type in your text and the converter will automatically generate text for you. Copy and paste it into your blog posts or anywhere else that supports Unicode.


Spread the word...share the love:

Saturday, 2 October 2010

Tina's Tutorials #8: How to add Gadgets

How to add gadgets: a step by step guide

In this tutorial, I will be using the FOLLOWERS gadget as an example, as this tutorial is for Sonj and Nicole at the uncommon nonsense. The advantage to having a followers gadget is as simple as this - you will get more followers, as people have an easy-to-click link.

This tutorial can, of course, be applied to all gadgets/widgets.

Step 1:
In your blogger dashboard, click on Design.



Alternatively, access the Design page with the NavBar on your blog.


Step 2:
You should now be in the "Design" tab.  Go to the "Page Elements" subtab.



Step 3:
Click on "Add a Gadget", in the space where you want your new gadget to be.





Step 4:
This box should pop up. Click on the + button next to the widget you want, in this case, the Followers widget.




Step 5:
You'll now see this: Simply click on Save.




Step 6:
 The widget should now be added to your blog design. Save your Page Elements by clicking on the orange button on the top right hand corner.


 Then click on View Blog to see your brand new gadget!


And you're done!

For more tutorials, check out the page Tina's Tutorials.




255 followers

Tina's Tutorial #7: How to Change from Classic to New Blogger Template

This tutorial is to teach those of you with Classic Template blogs to upgrade to the new format:
 
Do I have a Classic Template? 

Classic Template

If so, in your Dashboard, it'll look like the image above. You'll have a “Template” link or tab instead of “Layout."

New Template

Why should I get a New Template?

You need to switch to the Layout Template to use the Template Designer (see the image below). The Template Designer allows you to do a multitude of things (see Blogger in Draft).

How do I get the new New Template ? 

Monday, 27 September 2010

Tina's Tutorials #6: Get LinkWithin below your posts


This tutorial will teach you how to get the widget LinkWithin below your blog posts.

Step 1:
Go to Link Within. Enter in your email address, blog link, platform (Blogger), and width (3 stories is recommended). If you have light text on a dark background, check the textbox.

Click on Get Widget:





Step 2:

Click on the Install Widget link, and a new tab will open up. Click on the blue button Add Widget.




Step 3:
Drag the LinkWithin gadget in the Edit Layout pages from the left toolbar to a space under your blog.


Step 4:
Click on SAVE and view your blog to see the changes you have made. Congratulations! You have now installed LinkWithin in your blog.



- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

More Tips & Tricks from Tina:


 s

Thursday, 19 August 2010

Tina's Tutorials #1: How to Create Links

Blogging Tips and Tricks #1: Links, code and embedding

As a relatively competent IT nerd, I’ve been experimenting on blogger and have come up with some rudimentary codes/references that will hopefully be of some use to others out there.

Hopefully, this will become a series of posts, as I collect and record knowledge that I find, and share it with you.

●▬▬▬▬▬▬▬๑۩۩๑▬▬▬▬▬▬▬●

To post a link like this:
Tina @ Book Couture

Code:
<a href="websiteaddresshere">text goes here</a>

(replace the blue parts with your links and text)

It should look like:
<a href="http://www.bookcouture.blogspot.com">Tina @ Book Couture</a>

●▬▬▬▬▬▬▬๑۩۩๑▬▬▬▬▬▬▬●

To post an email address link like this:
Email Tina here

Code:
<a href="mailto:emailaddresshere">text goes here</a>

(replace the blue parts with your links and text)

It should look like:
<a href="mailto:readingcouture@gmail.com">Email Tina here</a>


●▬▬▬▬▬▬▬๑۩۩๑▬▬▬▬▬▬▬●

To post code:

1. Before you copy/ type up the code that you want into your post, go to the "Compose" tab while you're editing your post.

2. Move your cursor to the place where you want to put your code, and click.

3. Down the bottom, expand "Post Options".

4. Select the option "Show HTML literally".

5. Copy/type up the code that you want into your post.

 ●▬▬▬▬▬▬▬๑۩۩๑▬▬▬▬▬▬▬●

To embed a Youtube video onto your blog:
1. Go to the video on Youtube

2. Below the video, after the video description, there should be a button that says "Embed". Click on it.

3. Scroll down and customise settings for how you want the video to de displayed on your blog.

4. The changes you make will be automatically added to the code. Click on the code, and press Ctrl+C to copy it.

5. Paste the code into your blog while in the "Edit Html" tab. That should do it!


Hopefully this will help someone out there!
And in the meantime, happy reading! ^-^

xoxo Tina