Sunday, August 23, 2009

How to add a favicon to your blogger

finalfavico

From this tutorial, you will be able to add your very own favicon to your blogger. Like most of the top dogs in the industry today, having a favicon separates you from the rest of the crowd and allows you to stand out like a cover letter. You’ve probably heard most of the today’s blogger gurus talk about creating a brand for yourself and how that contributed to their success. That’s because brands stand out much more than people’s names or keywords do. Blogs like Shoemoney, John Chow, and thomasnjr are brands, even though there might be some big personalities behind them.

Steps to follow:

1. Once you have your favorite icon image, visit genfavicon.com and upload it to step 1 one the page. (1. Select your image)

favico1

2. Next, you will need to adjust your images width and height to its size. This is step 2(Cut & Preview). After you have adjusted the size of the image, select 16 x 16 in the size form and click Capture & Preview.

favico2

3. Next, click on Download Favicon in step 3(Favicon resulting) and save the image on your computer as favicon.

favico3

4. Login to your Blogger dashboard

5. Go to Layout > Edit HTML (Do not click on “expand widgets” box)

6. Add the following code below:

<link href='http://favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/>

right before…

<b:skin><![CDATA[/*

Note: You will need to replace the link in red with the link you uploaded your favicon to.

7. Preview your template, and if all works fine, Save Template.

Note: It may take some time to load your favicon.

Labels: ,

Monday, August 17, 2009

How to add a flash tag cloud to your blogger

tagcloudicon From this tutorial, you will be able to add a flash tag cloud to your blogger, but before you start this tutorial, make sure you have the latest flash player downloaded, enabled, and working properly. Having a tag cloud can save you a hefty amount of space on your blog and the loading time length for your readers. Before attempting any tutorial, make sure you back-up your existing template just in case it doesn’t turn out as expected.


Steps to follow:

1. Login to your Blogger dashboard

2. Go to Layout > Edit HTML (Do not click on “expand widgets” box)

3. Search for the following section code:

<b:section class='sidebar' id='sidebar' preferred='yes'>

copy and paste the following section code below immediately it…

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

4. Next, click Save, and preview your template. If all works fine, Save Template.

Note: This script contains the following preset variables. To modify width(240) or height(300):

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

Note: To modify background color(#ffffff):

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

Note: To modify font size(12):

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

Note: Please keep all credits intact.

Labels: , ,

Tuesday, August 11, 2009

Add Google’s translator to your blog

mapimage From this tutorial, you will be able to add Google’s translator to your blog. Having a translator on your blog is a smart thing to do for your readers and visitors, considering they come from all around the world and speak all different types of languages. And while they might not be able to read or recognize the language you may speak, they can often recognize their country’s flag, and at that point, you would have already increased your visitors time on site, bounce rate, and pageviews.

Steps to follow:

1. Login to your Blogger Dashboard.

2. Go to Layout > Page Elements

3. Click “Add a Gadget” and copy and paste the following section code in the box.

<form action='http://www.google.com/translate' class='translate'>

<script language='javascript' type='text/javascript'>

<!--

document.write ("<input name=u value="+location.href+" type=hidden>")

// -->

</script>

<noscript><input name='u' type='hidden' value='your blogspot address'/></noscript>

<input name='hl' type='hidden' value='en'/>

<input name='ie' type='hidden' value='UTF8'/>

<input name='langpair' type='hidden' value=''/>

<input height='15' name='langpair' onclick='this.form.langpair.value=this.value' src='http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/358406/gse_multipart12399.png' title='Arabic' type='image' value='en|ar' width='25'/>

<input height='15' name='langpair' onclick='this.form.langpair.value=this.value' src='http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/546049/gse_multipart12397.png' title='中文(简体)/Chinese (Simplified)' type='image' value='en|zh-CN' width='25'/>

<input height='15' name='langpair' onclick='this.form.langpair.value=this.value' src='http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/208681/gse_multipart12398.png' title='中文(繁体)/Chinese (Traditional)' type='image' value='en|zh-TW' width='25'/>

<input height='15' name='langpair' onclick='this.form.langpair.value=this.value' src='http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/327620/gse_multipart12413.png' title='Français/French' type='image' value='en|fr' width='25'/>

<input height='15' name='langpair' onclick='this.form.langpair.value=this.value' src='http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/734899/gse_multipart12400.png' title='Deutsch/German' type='image' value='en|de' width='25'/>

<input height='15' name='langpair' onclick='this.form.langpair.value=this.value' src='http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/306145/gse_multipart12401.png' title='Italiano/Italian' type='image' value='en|it' width='25'/>

<input height='15' name='langpair' onclick='this.form.langpair.value=this.value' src='http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/443122/gse_multipart12402.png' title='日本語/Japanese' type='image' value='en|ja' width='25'/>

<input height='15' name='langpair' onclick='this.form.langpair.value=this.value' src='http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/581031/gse_multipart12403.png' title='한국어/Korean' type='image' value='en|ko' width='25'/>

<input height='15' name='langpair' onclick='this.form.langpair.value=this.value' src='http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/670301/gse_multipart12404.png' title='Português/Portuguese' type='image' value='en|pt' width='25'/>

<input height='15' name='langpair' onclick='this.form.langpair.value=this.value' src='http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/111692/gse_multipart12405.png' title='Русский/Russian' type='image' value='en|ru' width='25'/>

<input height='15' name='langpair' onclick='this.form.langpair.value=this.value' src='http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/998398/gse_multipart12407.png' title='Español/Spanish' type='image' value='en|es' width='25'/>

</form></div>

4. Preview your template, and if all looks fine, click Save Template.

Note: You can modify all flag images by replacing all hyperlinks above with yours.

Final Product:

translatorfinal

Labels: ,

Monday, August 10, 2009

Increase search engine traffic

Chart Here’s a little tweak for your blog’s template if you’re looking to increase traffic through searches by optimizing your blogger’s title for search engines. Not until recently, your Blogger’s blog titles were displayed before the name of your post, making keywords from your post titles appear after your blog title, resulting in poor performance for SEO. Luckily, there’s a way to fix that with a simple tweak and about five minutes of your time.

Steps to follow:

1. Login to your Blogger Dashboard in a new browser window.

2. Go to Layout > Edit HTML (Don’t click on “expand widgets” box)

3. Next, you will need to search for the following section code below:

<title><data:blog.title/></title>

replace the whole code with the section code below:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

4. Preview your template, and if all works fine, Save Template.

Note: If you have customized your template or uploaded a third party template, you will need to change the original <data:blog.pageTitle/> to the new <data:blog.pageName/> tag for this change to take effect. For example:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

replace the section code in red with…

<data:blog.pageName/>

Final product:

seoiconpost

Labels: , ,

Sunday, August 9, 2009

Traffic booster using twitthis!

twitthisposticon Here’s a proven traffic booster for not only your blog but twitter followers as well. Twitthis is a suggested user system that allows you to be suggested to other twitter user by earning twitpoints. To obtain points, all you have to do is submit a url you want to share to twitthis or follow a suggested user. The more points you accumulate, the more points you can spend to increase your site’s chance of being suggested to other users. Here’s how to implement twitthis to your blogger.

Steps to follow:

1. Visit http://www.twitthis.com and click Tools in the top right hand navigation. (you will need to navigate to this page later to copy/paste the section code you want to your xml template.)

twitthisicon

2. Login to your Blogger Dashboard in a new browser window.

3. Go to Layout > Edit HTML (Click on “expand widgets” box)

4. Next, search for the following section code below:

<div class='post-footer'>

and paste the following section code right after it…

<!-- Footer Button Codes BEGIN -->
<div>
<p><span id='footer-buttons'>
<!-- things placed after this line will show on all pages -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- things placed after this line will only show on post pages –>

<!-- TwitThis Button BEGIN -->
<a href='javascript:(function(){TwitThisPop=window.open(%22http://twitthis.com/twit?url=%22+encodeURIComponent(location.href)+%22&amp;title=%22+((document.title)%20?%20encodeURIComponent(document.title.replace(/^\s*|\s*$/g,%27%27))%20:%20%22%22),%20%22TwitThisPop%22,%20%22width=600,%20height=500,%20location,%20status,%20scrollbars,%20resizable,%20dependent=yes%22);%20setTimeout(%22TwitThisPop.focus()%22,%20100);%20})()'><img alt='TwitThis' src='http://s3.chuug.com/chuug.twitthis.resources/twitthis_grey_72x22.gif' style='border:none;'/></a>
<!-- TwitThis Button END –>

<!-- Do Not Paste Any Code Below This Line -->
</b:if>
</span></p>
</div>
<!-- Footer Button Codes END –>

5. Preview your template, and if all is working fine, Save Template.

Note: Your Twit This! button should appear on all posts pages ONLY, and not the main page. Test the button by clicking it on a post and sharing one of your posts on twitter.

Labels: , , , ,

Saturday, August 8, 2009

How to add breadcrumbs to your posts

breadcrumbposticon From this tutorial, you will be able to add breadcrumbs navigation to your posts. Having breadcrumbs on your blog will make it easier for your readers to navigate through your page without having to re-search something they might’ve found useful while reading but went ahead and navigated away, planning to come back to it later. Breadcrumbs will provide a route back so your readers won’t get lost while reading and also show their current location.

Steps to follow:

1. Login to your Blogger dashboard

2. Go to Layout > Edit HTML (Click on “expand widgets” box)

3. Search for the following section code: ]]></b:skin>
and add the following section code below right before it:

.breadcrumbs {
float: left;
width: 100%;
font-size: 11px;
margin: 10px 0px 10px 0px;
padding: 0px 0px 3px 0px;
border-bottom: double #EAEAEA;
}

Note: You can modify the appearance of your breadcrumbs using the section code above after you have completed this tutorial.

4. Next, you will need to search for the following section code below:

<b:includable id='main' var='top'>

5. Replace the entire section code with the following section code below:

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>

with…

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<!-- disable default status message<b:include data='top' name='status-message'/>default status message disabled -->
<b:include data='posts' name='breadcrumb'/><data:adStart/>

6. Now immediately before the section code:

<b:includable id='main' var='top'>

copy and paste the following section code:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on front page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> » <a expr:href='data:label.url' rel='tag'><data:label.name/></a> </b:if> </b:loop>
» <span><data:post.title/></span> </b:if> </b:loop> </div>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/> </div> <b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » All posts <b:else/>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> »
Posts filed under <data:blog.pageName/>
</b:if> </div> </b:if> </b:if> </b:if>
</b:if></b:includable>

7. Next, Preview you template, and if all is working fine, Save Template and your done!

Labels: , ,

Decorative simple designed fonts collection

usa_3_1Here’s a collection of some clean decorative simple designed fonts to add to your font collection. These icons are designed to catch your readers or viewers attention, they add style and uniqueness to your blog, and with a touch of photoshop, these fonts become remarkable designs.

dopplera_0_1
Preview | Download

edgewate_0_1
Preview | Download

inked_0_1
Preview | Download

interpla_0_1
Preview | Download

pseudo_0_1
Preview | Download

usa_3_1
Preview | Download

Labels: ,

Coquette icons collection

Here’s a collection of coquette icons that you might find pretty handy, courtesy of dryicons.com. If you haven’t already, you need to bookmark their page and check out some of the stuff on their website. This is a collection of one of their most popular icons set. Each set contains 50 high quality, free icons in sizes: 16x16px, 32x32px 48x48px, 64x64px, and 128x128px.

coquette_part_6_icons_set_1_5 
Preview | Download


coquette_part_7_icons_set_1_5
Preview | Download


coquette_part_5_icons_set_1_5
Preview | Download


coquette_part_3_icons_set_1_5
Preview | Download


coquette_part_2_icons_set_1_5
Preview | Download


coquette_icons_set_1_5
Preview | Download

Labels: ,

Wednesday, August 5, 2009

How to display a photo gallery

From this tutorial, you will be able to display a photo album for your viewers to browse through. This is good for blogs that offer free or ecommerce templates, icons, designs, or photos. This photo album script v2.0 is brought to you by dynamicdrive.com and modified by Blogspot Vision for blogger blogs. The photo album script is ideal for displaying multiple images at once, with links to cycle through additional batches of images.templatedisplayicon

Highlights of script:

  • - Customize the album’s dimensions as desired, such as 3x2 images, 4x5 images, etc.
  • - For each image, specify an optional description, link, and link target.
  • - Script automatically builds navigational links to allow the viewers to cycle between batches of images within the album
  • - Ability to run your own code whenever an image within the album is click on, enabling you to modify the default the behavior when a user clicks on the images, such as load their associated links in a pop up window instead

You will need the following for this tutorial:

js_file photogallery.js

Steps to follow:

1. Login to your Blogger dashboard

2. Go to Layout > Edit HTML (Click on “expand widgets” box)

3. Search for the following section code: ]]></b:skin>
and add the following section code below right after it:

<script src='/photogallery.js' type='text/javascript'>

/***********************************************
* Photo Gallery Script v2.0- &#169; Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<style type='text/css'>

.photogallery{ /*CSS for TABLE containing a photo album*/
}

.photogallery img{ /*CSS for images within an album*/
border: 1px solid green;
}

.photonavlinks{ /*CSS for pagination DIV*/
font: bold 14px Arial;
}

.photonavlinks a{ /*CSS for each navigational link*/
margin-right: 2px;
margin-bottom: 3px;
padding: 1px 5px;
border:1px solid gray;
text-decoration: none;
background-color: white;
}

.photonavlinks a.current{ /*CSS for currently selected navigational link*/
background-color: yellow;
}
</style>

Note: You will need to replace the link in red with the link you uploaded the javascript to. For example:

<script src='http://www.blogspotvision.com/bspotvision/photogallery.js' type='text/javascript'>

4. Next, Preview you template and if all works fine, Save Template.

5. Then you will need to click over to page elements under the layout tab.

photogallerytutorialicon

6. Click Add a Gadget and select HTML/JavaScript

1. addagadget

2. htmljavascripticon 

7. Next, copy and paste the following section code in the html/javascript option:

<script type="text/javascript">

//Define your own array to hold the photo album images
//Syntax: ["path_to_thumbnail", "opt_image_title", "opt_destinationurl", "opt_linktarget"]

var myvacation=new Array()
myvacation[0]=["../photo1.jpg", "", "photo1-large.jpg"]
myvacation[1]=["photo2.jpg", "Our car", ""]
myvacation[2]=["photo3.jpg", "Our dog", "photo3-large.jpg"]
myvacation[3]=["photo4.jpg", "Our hotel", "http://www.blogspotvision.com"]
myvacation[4]=["photo5.jpg", "Our Computer", http://www.blogspotvision.com, "_new"]
myvacation[5]=["photo6.jpg", "Our house", "photo6-large.jpg"]
myvacation[6]=["photo7.jpg", "Our Friends", "http://www.blogspotvision.com"]

//initiate a photo gallery
//Syntax: new photogallery(imagearray, cols, rows, tablewidth, tableheight, opt_[paginatetext_prefix, paginatetext_linkprefix])
var thepics=new photogallery(myvacation, 3, 4, '700px', '600px')

//OPTIONAL: Run custom code when an image is clicked on, via "onselectphoto"
//DELETE everything below to disable
//Syntax: function(img, link){}, whereby img points to the image object of the image, and link, its link object, if defined
thepics.onselectphoto=function(img, link){
if (link!=null) //if this image is hyperlinked
window.open(link.href, "", "width=800, height=600, status=1, resizable=1")
return false //cancel default action when clicking on image, by returning false instead of true
}

</script>

Note: You will need to replace all .jpg links with your photo links and all links that you want your image to link to. For example, replace the http://www.blogspotvision.com in the section code above.

8. Your done! Save and view your blog.

Labels: , ,

Monday, August 3, 2009

7 clean square calendar icons for your use

Here are 7 unique calendar icons ready to be apart of your blogger’s template. They can be used for professional blogs, to personal ones, and even to business style blogs, and all are pre-made ready for customization. Imagination and creativity can make your post header even more appealing to your viewers. Enjoy :)

iPhone_PNGs_by_borncold
Preview | Download

CalendarIcons_by_magicmac 
Preview | Download

calendar-icon
Preview | Download

Blog_Calendar_Icons_by_alexjames01
Preview | Download

 iPhone_styled_Calendar_by_Mulberry24
Preview | Download

 Calendar_Icon_by_evographics
Preview | Download

teneo_calendaro 
Preview | Download

Labels: , ,