This tutorial, part of my series of tutorials, will show you how to get this awesome and handy widget.
Showing posts with label tutorial. Show all posts
Showing posts with label tutorial. Show all posts
Monday, 1 November 2010
Tina's Tutorials: "Sharing is" Social Networking Widget
Many of you might have seen the awesome "Sharing is Caring" buttons under many blog posts, including mine. You can see a demo of what it does at the bottom of this post. By clicking on one of the pop-up buttons, people are able to share your post via social networking systems.
This tutorial, part of my series of tutorials, will show you how to get this awesome and handy widget.
This tutorial, part of my series of tutorials, will show you how to get this awesome and handy widget.
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:
Alternatively, access the Design page with the NavBar on your blog.
Step 2:
Step 3:
Step 4:
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
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
- How to access and add symbols and text art to spice up your posts
- How to make pages on your blog
- How to edit the header linking to pages
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
Monday, 19 July 2010
Tina's Tutorials #5: Change your blog icon (favicon)
Tips/Tricks #5:
How to change your blogger icon (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.
✂ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Step 3:
Go to PicPanda.Click on Browse, find your .ICO image. Select it and click Open.
Then click on Upload.
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:
- T&T 1: Links, Coding and Video Embedding
- T&T 2: Symbols and Ascii Art
- T&T 3: How to make Pages
- T&T 4: How to make a 2 column/3 column layout
Subscribe to:
Posts (Atom)