Blogspot Vision

Wednesday, November 25, 2009

How to add a site logo/watermark to your Blogger

This is a site logo/watermark script that allows you to display a static image at any of the four corners of the browser, never going out of sight. This can be useful for branding purposes, or just to offer your readers an easy way to jump back to your site’s homepage with a click of a button. The logo can also be set to disappear after X seconds.

Click here to see the demo

1. Login into your Blogger dashboard > Layouts > Edit HTML

2. Insert the following section code below into your template right before the closing of head. </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="staticlogo.js">
/*********************************************
* Site Logo script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
*********************************************/
</script>

Note: The above code references the external .js file "staticlogo.js", which you need to download (right click, and select "Save As").

Configuration

The section code is taken from the staticlogo.js file, you should configure the following if you want to customize your logo/watermark.

setting: {orientation:4, visibleduration:20000, fadeduration:[1000, 500]}, //orientation=1|2|3|4, duration=millisec, fadedurations=millisecs offsets: {x:10, y:10},//offset of logo relative to window corner logoHTML: '<a title="Blogspot Vision" href=http://www.blogspotvision.com><img style="border-right-width: 0px; width: 50px; border-top-width: 0px; border-bottom-width: 0px; height: 47px; border-left-width: 0px" src="logo.gif" /></a>', //HTML for logo, which is auto wrapped in DIV w/ ID="mysitelogo"

Note: Most of them are fairly self explanatory. For setting.orientation, it sets the orientation of the logo relative to the window edge, and should an integer from 1 to 4 (1=top left corner, 2=top right corner, 3=bottom left corner, 4=bottom right corner). The option setting.visibleduration sets the duration (in milliseconds) before the logo disappears. For perpetual, enter 0 instead.

** Tutorial completed

Tuesday, November 24, 2009

How to add a digital clock to your Blogger

This digital clock script attempts to mimic that cool “glow in the dark” look of a LCD watch when it comes to its interface. This clock can also display the time in standard 12-hour format, with a “AM” and “PM” indicator. Note that in non IE4+/NS6+ browsers, a regular form clock is displayed instead.

Click here to see the demo

Steps to follow:

1. Login into your Blogger dashboard > Layouts > Edit HTML

2. Insert the following section code below into your template right before the closing of head. </head>

<style>

</style>

3. Next, go to Layouts > Page Elements > and Add an HTML/JavaScript Gadget. Insert the following section code below as the HTML and after saving, move the gadget where you want the calendar to appear.

<span id="digitalclock" class="styling"></span>
<script>

</script>

** Tutorial completed

Monday, November 23, 2009

Top 7 weekly fonts

1. anglo te.0.1

2. babykruf.0.1

3. bloodofd.0.1

4. chi_ttf.0.1

5. oldeengl.0.1

6. sabrina.0.1

7. sadfilms.0.1

Sunday, November 22, 2009

How to add a basic calendar to your Blogger

If you need a simple, elegant calendar to display the current days of the month, Basic Calendar is an excellent script for the purpose. Uses CSS to allow easy changing to its appearance, everything from calendar dimensions, colors, down to the font used to highlight the current day.

Click here to see the demo

Steps to follow:

1. Login into your Blogger dashboard > Layouts > Edit HTML

2. Insert the following section code below into your template right before the closing of head. </head>

<style type="text/css">
.main {
width:200px;
border:1px solid black;
}
.month {
background-color:black;
font:bold 12px verdana;
color:white;
}
.daysofweek {
background-color:gray;
font:bold 12px verdana;
color:white;
}
.days {
font-size: 12px;
font-family:verdana;
color:black;
background-color: lightyellow;
padding: 2px;
}
.days #today{
font-weight: bold;
color: red;
}
</style>
<script type="text/javascript" src="basiccalendar.js">
</script>

Note: The above references an external .js file. Download basiccalendar.js (by right clicking, and selecting "Save As"), and upload to your webpage directory.

Note: Within the above code, you may customize the CSS rules to change all visual aspects of the calendar.

3. Next, go to Layouts > Page Elements > and Add an HTML/JavaScript Gadget. Insert the following section code below as the HTML and after saving, move the gadget where you want the calendar to appear.

<script type="text/javascript">

var todaydate=new Date()
var curmonth=todaydate.getMonth()+1 //get current month (1-12)
var curyear=todaydate.getFullYear() //get current year

document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1));
</script>

** Tutorial completed

Saturday, November 7, 2009

How to install font packets to Windows

Fonts add style to your blog and can be appealing to your readers. Fonts can even make graphic design a lot easier and can save a good amount of time when you’re trying to produce multiple templates in a short amount of time. To install downloaded font packets to Windows for your use, start off by downloading font packets. You can find fonts anywhere online and in our fonts section.

Steps to follow:

1. Once you’ve downloaded the font packets to your computer, you will need to use WinZip to extract it’s files to your Fonts folder in Windows.

2. Extract all files to your Windows fonts folder. Windows fonts folder are usually located at C:\Windows\Fonts

3. After you’ve extracted all files to the Windows fonts folder, you should be able to start using this type of font anywhere on your computer where fonts are contained. For example, the font packet extracted above is bazaroni. This font can now be used in photoshop, word, etc.

** Tutorial completed.

How to create a new page in Blogger

As we all know, Blogger doesn’t provide an option for users to create new pages for their blogs in their dashboard. This can be inconvenient for publishers trying to monetize their blogs for higher revenue or just optimizing their blogs for a better user experience. Fortunately, users can create new pages, even with Google’s Blogger service, but the reason Blogger doesn’t provide an option for this feature is because since it’s a free service with millions of other Blogger blogs out there, Blogger tries to reduce space usage in this type of manner. There are two ways you can create new pages in Blogger, and if you’ve made a post, you’ve just discovered the first method.

Here’s the first method for creating a new page in Blogger

1. You can actually create new pages with postings. When you make a post, your individual post pages are considered as a new page. For example, let’s say you’ve added a navigation menu to your blog and you want to link a page to one of the menu’s link, take “Tools”, for example.

2. Make a post, but in this post, make it about your “Tools” section. We know that postings can handle HTML, so you can stylize your “Tools” page to how you want it. Next, publish your post, and there’s your new page. You can now link that posting link to your navigation menu’s link. Here is a screenshot of how I linked the Blogspot Vision’s Tools link to it’s navigation menu bar.

Here’s the second method for creating a new page in Blogger

1. If you choose not to create a new page by post, you can create a new page by changing your archive link to whatever you want it to be. Let’s take the Blogspot Vision’s “Tips” link for example. The tips link was created and named tips, for example, this is the link I created for tips: http://www.blogspotvision.com/search/label/tip

2. After you created this link, you can go ahead and link it to your navigation menu link, in this case, I linked it to the tips menu link. When you actually click on your newly created link, you will have a new page with no content in the post section, but you can easily add content by using the “Add a Gadget” > HTML/JavaScript option.

3. Once you’ve added your content using the HTML/JavaScript gadget, you’ll need to move it to the Blog Post section of your layout and then add the IF conditional tags to your content in the Edit HTML section under the Layout tab of your dashboard. Here’s a screen shot of mine:

4. Preview your template before you save, and if all works fine, save your template.

** Tutorial completed.

How to add related posts with thumbnails using LinkWithin

LinkWithin is a free service offered by a small team based in New York. With LinkWithin, users can display related posts linking to the related stories from your blog archive under each individual postings. Related posts is a good thing to have on your blog because it keeps your readers engaged with your content, thus, increasing page views on your blog. The LinkWithin related posts widget generates a minimally styled design to blend in with your site and best of all, its free, ad-free, and only takes a minute to get the widget up and running on your blog with no signup required.

Steps to follow:

1. Visit the LinkWithin website here.

2. Enter your email, blog link, and under platform option, select “Blogger”, and for the width, choose how many items you want to display for your related posts (3, 4, or 5 stories). Select the “My blog has a light text on a dark background” if that pertains to your template and then hit the “Get Widget!” button. Here’s a screen shot of mine:

3. After you clicked the “Get Widget!” button, LinkWithin takes you to the installation page. Select the “Install Widget” button to open Blogger up in a new window.

4. Next, select a blog, if you have more than one, then click “Add Widget”

5. Once your LinkWithin widget has been added to your blog, it will appear on the sidebar widget, but move it under your “Blog Posts”. Here’s a screenshot of mine:

6. Next, select save and your done. Your LinkWithin widget should now appear on your blog.

** Tutorial completed.