Showing posts with label blogging. Show all posts
Showing posts with label blogging. 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:

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

Monday, 20 September 2010

Tina's Tutorials #5: How to change your blog icon (favicon)


Tips/Tricks #5:
How to change your blogger icon (favicon)

See this? It's called a favicon. And you can change it.

By default, every blog on Blogger has that orange favicon. A favicon is located next to your blog name, and is displayed on tabs, next to the URL on the address bar and on blogrolls.
It's frustrating that Blogger doesn't have a default function for bloggers to easily change their favicon. And I was frustrated by constantly seeing that unanimous orange logo next to my blog name. So I put on my glasses and set to work trying to change it. And now I have a cute little cupcake next to Book Couture. Much prettier and much more individual, wouldn't you agree?

Most book blogs I see don't have their own favicon. And this tips and tricks tutorial is my attempt to try and change that: by teaching everyone to change their favicon.

So if you are successful in changing your own favicon through this tutorial, please spread the word by linking this tutorial in a blog post. Hopefully, everyone can learn to get their own favicon.

Tuesday, 7 September 2010

Tina's Tutorials #4: 2 column/3 column layouts

How to change your layout: a step by step guide

This tutorial will teach you how to change the layout of your blog to one with two, or three, columns.

Step 1:

Sign into your blog, and when you access it, click on the Design button on the top right corner of your blog.


Alternatively, go into your Dashboard, and click on Design under your blog.


Step 2:
It should lead you to this page:


Click on Template Design.


Step 3:

That will lead you to the Blogger Template Designer.

In the first column, click on Layout. Then select Body Layout.


In the picture above, you will notice that I have labelled four of the eight various layouts.

Layout 1: No columns - just the main body of your blog

Layout 2: Two column layout, with all your gadgets on the right.

Layout 3: Three column layout, with your gadgets on both the left and right.

Layout 4: Two column layout, with all your gadgets on the left.

The other layouts are variations that you are free to try out. I wouldn't advise using the two in the last column; they make the bady of your posts too narrow, and it is often difficult to place large graphics.

Click on each of them to see how they affect your blog. For the type of layout that I have here on Book Couture, use Layout 3.


Step 4:
 
Remember to save your progess by clicking on Apply to Blog. Then click on View Blog to view the changes made.




And that's it! I hope that helped you.

If you have any questions, feel free to leave a comment below.

For more blogger tips and tricks, check out:

Blogging Tips & Tricks 1: Links, Coding and Video Embedding 
  •  How to post links to your blog, email, and sites in general.
  •  How to add a video to your post 
Blogging Tips & Tricks 2:  Symbols and Ascii Art
  • How to access and add symbols and text art to spice up your posts
Blogging Tips & Tricks 3: How to make Pages
  • How to make pages on your blog
  • How to edit the header linking to pages
Visit this page to find more tips and tricks.

Thursday, 19 August 2010

Tina's Tutorials #2: Symbols

Blogging Tips and Tricks #2: Symbols and ascii art

If you need to beautify your posts or layouts, symbols are a great way of adding elegance and refinement without the need for complicated flashy graphics.

Note: If you DO use these symbols, please link to this page, so others will know where to get some too.


To put symbols onto your blog:

1. In Windows XP or lower, go to:
Start> All Programs> Accessories> System Tools> Character Map.

2. In the scroll down menu, select a font that you would like to use.  I would suggest Webdings or Wingdings for symbols.

3. Double-click on a character you would like to use, and click on "copy" in the bottom right-hand corner of the window. The symbol has now been copied to your clipboard.

4. Paste it anywhere you like.

For detailed instructions, go here.


Here's a compilation of useful symbols that I have found on the net:
(credits: compiled from this handy site)

♋ 웃 유 Σ ⊗ ♒ ☠ ☮ ☯ ♠ Ω ♤ ♣ ♧ ♥ ♡ ♦♢♔ ♕ ♚ ♛ ★ ☆ ✮ ✯ ☄ ☾ ☽ ☼ ☀ ☁ ☂ ☃ ☻ ☺ ۞ ۩ ♬ ✄ ✂ ✆ ✉ ✦ ✧ ∞ ♂ ♀ ☿ ❤ ❥ ❦ ❧ ™ ® © ✗ ✘ ⊗ ♒ ▢ ▲ △ ▼ ▽ ◆ ◇ ○ ◎ ● ◯ Δ◕ ◔ ʊ ϟ ღ 回 ₪ ✓ ✔ ✕ ✖ ☢ ☣ ☤ ☥ ☦ ☧ ☨ ☩ ☪ ☫ ☬ ☭✖✗✘♒♬✄ ✂✆✉✦✧♱ ❤ †♰♂♀☿❤❥ ❦❧ ♡♦ ♢♔♕♚♛★ ☆✮ ✯☄☾☽ ☼☀☁☂☃☻ ☺☹ ☮۞۩ ☎☏¢ ☚☛☜☝☞☟✍ ⌘

Currency:
¢€£¥

Circled numbers and alphabet:
➀➁➂ ➃➄➅ ➆➇➈ ➉
➊➋➌➍ ➎➏➐➑➒➓
ⒶⒷⒸⒹⒺⒻ ⒼⒽ ⒾⒿⓀ ⓁⓂⓃ ⓄⓅⓆ ⓇⓈⓉⓊⓋ ⓌⓍⓎⓏ
ⓐⓑⓒⓓⓔⓕⓖⓗ ⓘⓙⓚⓛⓜⓝ ⓞⓟⓠⓡⓢⓣ ⓤⓥⓦⓧⓨⓩ
e.g. 

Chess
♚ ♛ ♜ ♝ ♞ ♟
♔ ♕ ♖ ♗ ♘ ♙

Hands
☚ ☛ ☜ ☝ ☞ ☟

Cross
☩ ☨ ☦ ✙ ✚ ✛ ✜ ✝ ✞ ✠

Snow/Star
✦ ★ ☆ ✰ ✮ ✯ ❇ ❈ ❅ ❄ ❆ ╰☆╮

Flowers
❃ ❀ ✿ ❁ ✾

Music
♪ ♫ ♩ ♬ ♭ ♮ ♯

Weather (sun, rain, snow)
☼ ☀ ☁ ☂ ☃ ☄ ☾ ☽ ❄

Religion
☯ ✡ ☨ ✞ ✝ ☮ ☥ ☦ ☧ ☩ ☪ ☫ ☬ ☭ ✌ 卐

Gender, love
♋ ♂ ♀ ☿ ❤ ❥ 웃 유 ♡

Messaging/Writing
✉ ✍ ✎ ✏ ✐✑✒ ⌨

Zodiac signs
♈ ♉ ♊ ♋ ♌ ♍ ♎ ♏ ♐ ♑ ♒ ♓

Blocks

▀ ▁ ▂ ▃ ▄ ▅ ▆ ▇ █ ▉ ▊ ▋ ▌ ▍ ▎ ▏ ▐ ░ ▒ ▓

Copyright: ™ © ®

Quotes: ❝❞


Text Boxes:
Feel free to experiment with the symbols above to create ascii art that is uniquely you.

▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄
              Your text goes here                     

▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄

●▬▬▬▬๑۩۩๑▬▬▬▬●
       Your text goes here
●▬▬▬▬๑۩۩๑▬▬▬▬●

╔════════════════╗
        Your text Goes here
╚════════════════╝

        *•.¸(*•.¸♥¸.•*)¸.•*´
♥«´¨`•°text goes here°•´¨`»♥
        ¸.•*(¸.•*´♥`*•.¸)`*•

*´¨)
¸.•´¸.•*´¨) ¸.•*¨)
(¸.•´ (¸.•` ♥ Text goes here

ஜ۩۞۩ஜ Your text goes here ஜ۩۞۩ஜ


Falling stars ascii art: (you could replace with symbols from above)

┊  ┊  ┊  ┊
┊  ┊  ┊  ★
┊  ┊  ☆
┊  ★


Tuяn Up Tнe Vσℓυмe♪

: .♬ ♫ılı.——Volume——.ılı.♪ ♫ ♬
: ▄ █ ▄ █ ▄ ▄ █ ▄ █ ▄ █
: Min- – – – – – – – – – -●Max


Faces:
٩(●̮̮̃•̃)۶ ٩(-̮̮̃-̃)۶ ٩(͡๏̯͡๏)۶ ٩(-̮̮̃•̃)۶ ٩(×̯×)۶ ಠ_ಠ
☻♥☻
/█\/█\
⎝⏠⏝⏠⎠
Hope you enjoy these, and don't be afraid to experiment. Feel free to copy and use these symbols as you wish!


*´¨)
¸.•´¸.•*´¨) ¸.•*¨)
(¸.•´ (¸.•` ♥ xoxo Tina

Coming up next - Colour changing tools and text generators


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

Monday, 19 July 2010

Tina's Tutorials #5: Change your blog icon (favicon)

 
Tips/Tricks #5:
How to change your blogger icon (favicon)


See this? It's called a favicon.

By default, every blog on Blogger has that orange favicon. A favicon is located next to your blog name, and is displayed on tabs, next to the URL on the address bar and on blogrolls.

It's frustrating that Blogger doesn't have a default function for bloggers to easily change their favicon. And I was frustrated by constantly seeing that unanimous orange logo next to my blog name. So I put on my glasses and set to work trying to change it. And now I have a cute little cupcake next to Book Couture. Much prettier, and much more individual, wouldn't you agree?

Most book blogs I see don't have their own favicon. And this tips and tricks tutorial is my attempt to try and change that: by teaching everyone to change their favicon.

So if you are successful in changing your own favicon through this tutorial, please spread the word by linking this tutorial in a blog post. Hopefully, everyone can learn to get their own favicon.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Step 1:
First of all, you need to find a square image for your favicon. It should be around 16 pixels by 16 pixels (16x16), or 32x32. Re-adjust it using a paint program such as Paint, Photoshop or GIMP (which is free) and save it as a .PNG file.

Alternatively, you can find one at FaviconsRUs or IconJ. (If you do, proceed straight to step 3.)
You can also make your own using Favicon.cc. Thanks, Raven!
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Step 2:
Go to Convertico.

Click on Browse, find your .PNG image, and click Open.
Then click on Convert.

This will appear:

Right-click on the link and select "Save link as". Find an easily accesible place to save this converted .ICO image to.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 
Step 3:
Go to PicPanda.
Click on Browse, find your .ICO image. Select it and click Open.
Then click on Upload.
 
 This will appear: (just wait for it to finish uploading)


Then a page with several links will appear. Select the "Send to Friends" link, and copy it using CTRL+C.



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

Step 4:
i. Go back to your blog, access your Dashboard, and the Design tab of your blog.
Click on the subtab Edit HTML.

ii. Backup your existing template before making any changes, by clicking on "Download Full Template" and saving it somewhere you will find easily.


iii. In the Edit Template section, click on CTRL+F, and search for </head>.

iv. Place the following code below directly below/after the </head> tag in your template.

<link href='pasteICOlinkhere' rel='shortcut icon' type='image/vnd.microsoft.icon' /><link href='pasteICOlinkhere' rel='icon'/>

v. Paste the ICO link from PicPanda into the two red spaces I have indicated, replacing the text "pasteICOlinkhere". (Note: they will not show up red in your Template HTML)

vi. Your code will look something like this:

http://picpanda.com/viewer.php?file=abcdefghijklimsjkhfk.ico

Replace the "viewer.php?file=" bit in both links with "images/" so that it looks something like this:

http://www.picpanda.com/images/abcdefghijklimsjkhfk.ico

vi. Save your template and view your blog. Your new favicon should appear in front of your blog name.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

If you have any problems, let me know in the comments section below, and I will try my best to help you.

If this works for you, link to this post at your blog, so that others can get their own favicon too.
Or maybe share it with that handy little widget below!

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

For more Tips & Tricks from Tina: