How to make a custom latest Tweets / Twitter updates Gadget for your blog

| | 5 comments
How to make a custom latest tweets / Twitter updates Gadget for your blogTwitter can be a major source of traffic for Bloggers and the evedince can be seen on some top blogs giving their twitter gadgets and widgets prominent positions on their Blogs.Not only can Twitter bring you new unique traffic it's a great way to keep potential return visitors updated.

While most bloggers are using the bland default Twitter Updates gadget you will have seen a few more custom stylish gadgets on your travels.The gadget i have for you in this post will add some spice to your blog and is a step away from the default.

I have used the light blue colors used in the Twitter layout and some nice Twitter icons.

You Can See A Demo / Sample of the gadget on my Demos blog here : Demo Blog

Heres The Steps to get your Latest Tweets Gadget :

1.Click Layout-> Add a gadget for your blog.

Blogger layout

add a gadget blogger


2.Choose Html/Javascript

add html javascript blogger


3.Copy all of the code below into the area provided :
<a href="http://www.twitter.com/YOUR TWITTER USER HERE" target="_blank"><img border="0" src="http://i631.photobucket.com/albums/uu40/paulcrowe/twitter.png"/><img border="0" alt="Twitter" src="http://i941.photobucket.com/albums/ad259/spiceupyourblog/twitter.png"/></a><font color="#49C8F0"><br/><br/><b><center><u>Latest Tweets</u></center></b></font><br/>
<div id="twitter_div"><font color="#49C8F0"><i>
<h2 style="display:none;" class="sidebar-title">Twitter Updates</h2>
<ul id="twitter_update_list"></ul>
<a id="twitter-link" style="display:block;text-align:right;" href="http://twitter.com/YOUR TWITTER USER HERE">follow me on Twitter</a>
</i></font></div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/YOUR TWITTER USER HERE.json?callback=twitterCallback2&count=3" type="text/javascript"></script>

<a href="http://twitter.com/YOUR TWITTER USER HERE" target="_blank"><font color="#49C8F0">Twitter.com/YOUR TWITTER USER HERE</font></a> <br/><br/>
Edits:

You MUST now make the following changes to set gadget to your Twitter :

If you need more help or have an opinion or suggestion Please leave a comment Below..
This is a Do-Follow Blog so leaving a comment will also help Your blogs Google rank.

1.Were you see YOUR TWITTER USER HERE replace with your twitter User name
(Make sure to change all 5)

Example : http://twitter.com/paulcrowepro

2.Were you see 'count=3' in the code this can be changed to set how many tweets will be displayed in the gadget.

Example: count=4 count=5 count=6

Once you have made the changes click save and your done.

Your gadget has been added you can now drag and drop it into place on the layout page.

You can Find Me On Twitter Here : @PaulCrowePro

If you get stuck help is only a comment away.What do you think?
Continue Reading

My Top Ten Artistic Style Free Blogger Templates

| | 0 comments
My Top Ten Artistic Style Free Blogger TemplatesThere are now thousands of blogger templates available.A lot of them are very similar and quite boring so in this post i have my top ten templates that are a bit different.All the template are free to use and have been tested on all browsers.

The following templates will get you well on the way to spicing up your blog.

Included are templates with built features like :

►Social bookmark buttons ►Re-tweet buttons
►Email subscriptions ►Search bars
►Read more functions ►Featured content sliders
►Menu bars and more..

Lets look at the top ten, click on the title of each template for the demo and download details.

Top 10 Artistic Blogger Templates

1. Victorian - Elegant Blogger Template




2. Creative By Nature - Gallery Blogger Template





3. Kids Style - Bright Blogger Template





4. Back To School - Education Template





5. Puppet - Blogger Template





6. Night Tales - Unique Blogger Template





7. Design Blog - Amazing Sketch Blogger Template





8. Stars - Stylish Three Column Template





9. Vector Flower - Blogger Template





10. Daisy Says - Artist Work Bench Template




That's the top 10 and they all Look awesome.Make sure to check out our top 10 Magazine Blogger Templates and Top 10 Dark And Black Blogger Templates.

Drop Your Comments, Views And Questions below.
Continue Reading

How to make a Rollover / Mouse Over image link

| | 23 comments
A rollover or mouse over image is a great image effect you will have seen used on lots of blogs and websites.When you use this effect with an image you add to your blog the image will change to differant image once you hover your cursor over it.It's also a very easy to use and can have so many uses.

Here's a preview of a rollover image :

Place your cursor over the image to see it change:



The image is also a clickable link so you can use it as a link on your blog.

More Examples : Kate the author of Cronicles Of A Country Girl has used this effect to display two versions of photos.In her words "Basically, what I wanted to show on my blog was the original photo, but if you move your mouse over it, you’d be able to see the SOOC version. (SOOC means Straight Out Of Camera). "You can check out how the results here - Kates Mouseover Images

Making a rollover image is quick and easy heres the steps :

This is the code we use to make the image.

<a href="TARGET URL GOES HERE"><img src="URL OF FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF FIRST IMAGE GOES HERE'" /></a>

You now need to customize the code by adding the images you want to use and the address you want it to lead to when clicked.

In the above code change the following:

1.TARGET URL GOES HERE

Place the address you want the image to lead to when it's clicked.
Example : http://www.spiceyupourblog.com

2.URL OF FIRST IMAGE GOES HERE (x2)

Place the URL of the first image here this is the image shown before you hover over it.
Example: http://i941.photobucket.com/albums/ad259/spiceupyourblog/info.jpg

3.URL OF SECOND IMAGE GOES HERE
Place the URL of the second image there, this is the image that appears when your cursor hovers over it.
Example : http://i941.photobucket.com/albums/ad259/spiceupyourblog/Blogger-2.png


We Are Nearly Finished - If you need more help or have an opinion or suggestion Please leave a comment Below.
This is a Do-Follow Blog so leaving a comment will also help Your blogs Google rank.

Once the changes are made your done you can place the image in your blog posts/sidebar or anywhere html can be used.

Another Cool Effect For Your Images Is The Opacity Blurred Hover Effect Check It out.

Thats it a nice easy trick that can be used in so many ways, Do you like it ?
Continue Reading

Add A Fixed Floating Image To The Corner Of Your Blog

| | 7 comments
A floating image is an image that will always appear in the corner of your blog even when you scroll up and down the page.In this post i will show you how you can add a fixed floating image to your blog.The image will also be a hyperlink so people can click it and go you any page you want.You may wish to have an Rss Icon for your feed or a link back to your blogs home page.

Live Demo - You Can See An Rss Image In the Top Left Corner Floating Image Demo

Add Fixed Image To Your Blog


1.In your Blogger dashboard Click Design > Edit Html > Tick The Expand Widget Templates Box.

2.Find the following piece of code in the html:

]]></b:skin>

3. Copy And Paste the following code directly Below / Under ]]></b:skin>

#float_corner {
position:fixed;_position:absolute;bottom:0px;left:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}

Note - You can change the following attributes bottom :left to place the image in different corners :

top left
top right
bottom left
bottom right

4.Find the following code in your blogs html :

</body>

5. Copy And Paste the following code directly Above </body>


<div id="float_corner">
<a href="ENTER TARGET URL HERE">
<img src="ENTER IMAGE URL HERE" border="0" /></a>
</div>

Note - You Must change the following attributes :

ENTER TARGET URL HERE - Place the address you wist the image to lead to when clicked here.

Example: http://www.spiceupyourblog.com/

ENTER IMAGE URL HERE - Place the URL of the image you want to use here.

Example : http://i941.photobucket.com/albums/ad259/spiceupyourblog/info.jpg

Add A Second Floating Image To Your Blog


If you want to have a second image you will first of course have it in a different corner but you must also slightly change the code.In steps 3 and 5 change float_corner to float_corner1 for a third image you would use float_corner3 and so on.

Drop Your Comments And Questions Below.
Continue Reading

What is social bookmarking /How does it work / How can it help my blog ?

| | 3 comments
Unless you have been living under a rock you will have seen these icons in the blogs and websites you visit.
These are the links to the webs fast growing list of social bookmarking websites.The social bookmarking phenomenon began in the later stages of the 90's with the appearance of Del.icio.us and has kept growing at pace.At the foot of this blog check the list of the most popular Social Bookmarking websites.

So what does it do?


You could see Social bookmarking as "search engine marketing" with a human touch. The information is seen as relevant due to the fact that it has been provided by a human being, rather than assessed by search engines like google for relevancy by a robot and through search engine algorithms.
As most of the individuals who use social bookmarking sites often give points to the content based on its relevancy and usefulness, this human touch is emphasised even further.


How can it help me and my blog?

Social bookmarking can be an awesome S.E.O (Search Engine Optimisation) tool for bloggers.
As bloggers most of us don't have the capital to invest in expensive tools to bump us up the rankings in search results but if you post relative content your readers enjoy with the help of social bookmarking websites you can create a kind of "Word of mouth" Buzz that will
as it feeds off the networking capabilities of the web. The most famous sites have incredible numbers of active followers who are essentially establishing a new trend by getting their news on any particular subject or niche online instead of through other more traditional methods. Social bookmarking sites can be linked and an RSS feed set up, thereby creating an aggregate of news that can be delivered efficiently with very little necessary effort.

Social bookmarking is a relatively new phenomenon. While we can look back to the mid-to-late 90’s for a predecessor, social bookmarking didn’t spring onto the unsuspecting world until the forerunner site Delicious appeared. Social bookmarking sites gather together information, articles and blog posts which are stored, organised and managed according to relevancy, or tags

While it is not always the case, you can build back links to your site by attaching URL’s to your content. There are quite a few social bookmarking sites out there that have a “no follow” policy, which means that the managing personnel involved attach tags to your links that neutralise any SEO advantage you may have otherwise achieved. This does not stop people from clicking through to your site and becoming a potentially valuable visitor, of course, but it means that you won’t gain any advantage in terms of the search relevancy ranking for your page.

If you’re savvy about your online marketing and website development

You can
use social bookmarking to great effect. Put meaningful content out there with valid and informative material, and people within the social bookmarking arena will rate it highly. Sharing of content is actively encouraged, and as a user’s network is informed of the existence of your content, the potential to go viral appears.

Make s
ure that your marketing message is subtle, as with any Internet marketing initiative. Blatant advertising is frowned upon, but relevant links when displayed in a soft-sell way will result in an increase in visitors. Make sure that you accurately attach your tags or keywords, to ensure that your message can be found within this vast Internet world!

Thereare hundreds and hundreds of social bookmarking sites, and you should try and include a plug-in within your site to allow people to easily and quickly bookmark your content. Sites such as WordPress make this very easy for you. RSS feed aggregators essentially summarize blogs and content and allow users to categorize things they find of interest into one easy to find place.


We Are Nearly Finished - First A Quick Reminder:
If you need more help or have an opinion or suggestion Please leave a comment Below.
It also really helps me with future posts if you let me know if a tip has worked on your blog.
This is a Do-Follow Blog so leaving a comment will also help Your blogs Google rank.
OK Back to business....


List of social bookmarking websites available :

Social Bookmarking List

Phew...So there it is and i really hope this post has informed you as much as researching and writing it has helped me learn more on the subject!
Continue Reading

How To Automatically Share Your Blog Posts On Facebook And Twitter

| | 1 comments
In this post i will show you how to have your blog posts automatically sent to your Twitter and Facebook profiles.This is a great way to keep your friends on both sites up to date with your blog and bring more traffic to your blog.

This is how it works :

Once you publish a new post on blogger, Twitterfeed gets notified via your feed.Twitterfeed now forwards your new post to Facebook or Twitter or both if you wish.

What does it send?

Here's a screenshot of my Twitter page (It looks the same on Facebook) as you can see all the updates / tweets are from Twitterfeed:

Connect blogger and facebook / twitter

Here's how its done:

1.Go to www.Twitterfeed.com

2.Sign up for your free TwitterFeed account.

3.Submit your blogs Rss Feed URL

Don't have a feed for your blog? You should get one: Go to www.Feedburner.com

Follow the easy steps to connect your Facebook and Twitter accounts.

Drop Your Comments And Questions Below.
Continue Reading

How To Add A Cool Image Divider Between Your Blog Posts

| | 19 comments
Blogger Tutorial Video PostVideo Post - For Extra Help See The Video Tutorial Below The Post.

There are a number of reasons why you may want to place a divider between your blog posts.From the tidy professional look it adds to having a handy clickable image link as your divider or maby your blog looks very cramped or overlapping and you want to space it out a bit.If you don't want to add an image i will also show how to add a simple colored horizontal line as your divider.

Were can you place it ?


You can have your divider directly below the post and before the labels, posted by and comment information or you can place the divider anywhere below your post including below the comment area as the very bottom or before your posts.

Your divider can also be a hyperlink (a clickable link) that when clicked leads to for example you blogs rss feed.

I will show you how to make your divider a hyperlink or just have a decorative divide thats not 'clickable'.


So lets get it done :

First Here are some examples you could use :

Photobucket
Image URL:


Photobucket
Image URL:


Photobucket
Image URL:


Photobucket
Image URL:


You can use any of these images or find your own image on image hosting websites like Photobucket.

Adding the divider to your blog.


1.Click 'Layout'-->'Edit Html' for your blog
(Tick 'expand widget templates' box)

Blogger layout

edit html blogger

Expand widget templates blogger

2.Here you have two options

- To put your divider below the post content find this code :

(Basically after the last word of the posts)
Note:If this code is in your template twice place your divider after the second.
<data:post.body/>

If you cant find that just look for data:post.body without the enclose < > tags.

- To put the divider below the complete post find this code:

(Below the labels ,post time,auther..)
<div class='post-footer-line post-footer-line-3'/>

(Press ctrl f for a search bar to search for the code)

3.Add the following piece of code Directly Below the code you found from above.

<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a><br/><center><a href='PLACE YOUR TARGET URL HERE'><img border="0" src='PLACE YOUR IMAGE URL HERE'/></a></center>

You now must make two change to the code:

1.Were the code above has PLACE YOUR TARGET URL HERE add the address you want the image to lead to when clicked

Example : http://www.spiceupyourblog.com

2.Were the code above has PLACE YOUR IMAGE URL HERE add the link to the image you wish to use such as the image URLs above

Example :http://i941.photobucket.com/albums/ad259/spiceupyourblog/divider.jpg

If you dont want the image to be a clickable link just use this code:

<center><img border="0" src='PLACE YOUR IMAGE URL HERE'/></center>

As above : Were the code above has PLACE YOUR IMAGE URL HERE add the link to your image.

To use a simple horizontal line as your divider use this instead of the image code:
<br/><hr color='red'/><br/>

It will look like this:


You can change the color 'red' to suit your blogs appearance.

Image Divider - Video Tutorial


More Video Tutorials | Spice Up Your Blog On YouTube

Once code you choose is added click save and your done !!

Drop Your Comments And Questions Below.
Continue Reading

How to Round The Edges Of Images In One Click

| | 1 comments
Want to do something a bit different with your images? The gadget below lets you easily round off the corners of your images.Further below i will give you the code to place the widget on your blog to provide the same service to you visitors.

Example :



Round The Edges Of Your Images In 1 Click

Enter An Image URL or browse for an image you have saved.

Click Button To Round Instantly.





Image:
or URL:


And here's the code to place the widget in your blog:

 
You can place the gadget in html areas your sidebar,posts etc...



<form enctype="multipart/form-data" action="http://www.roundpic.com" target="blank" method="post"><input value="1048576" name="MAX_FILE_SIZE" type="hidden"/><table><tbody><tr><td class="title"><b>Image:</b></td><td class="input"><input name="file" type="file"/></td></tr><tr><td class="title">or <b>URL:</b></td><td class="input"><input value="http://" name="url" type="text"/></td></tr><tr>
<td colspan="2" class="submit"><button onclick="getLoader();" type="submit">Click To Round Image!</button></td></tr></tbody></table></form>
Enjoy...
Continue Reading

How To Easily Add 3D Social Bookmark Buttons To Your Blog Posts

| | 5 comments
In this post i will show you how to add a set of social bookmarking buttons to your posts that requires just adding a simple piece of code to your blog.

Social bookmarking is a vital resourse all bloggers must use.
In an earlyer post i went into detail on the power of social bookmarking Click here for that post.
If you aint got bookmarking buttons under your blog posts Get Them !

They can increase :

  • Your blogs rank in google,bing and other search engines





  • Visitor numbers to your blog





  • Return visitor numbers to your blog





  • These are the buttons we will be adding :


    Photobucket

    In three steps you will be clicking save and your Done :

    1.Click Layout---> edit html for your blog
    (Tick expand widget templates box)

    2.Find this piece of code in your blogs html :
    (Use ctrl f for a search box to find the code)


    <data:post.body/>


    3.Now copy the piece of code below and paste it Immediately AFTER the above code



    <a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a><div style="clear:both; ">
    <div style="width:60px; float:left;">
    <script type="text/javascript">
    digg_url = &#39;<data:post.url/>&#39;;
    </script>
    <script src="http://digg.com/tools/diggthis.js" type="text/javascript"/>
    </div>
    <div style="width:60px; float:left;">
    <script badgetype="square" src="http://d.yimg.com/ds/badge2.js" type="text/javascript"><data:post.url/></script>
    </div>
    <div style="width:65px; float:left;">
    <a expr:href="&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" target="_blank" rel="external nofollow"><img alt="Stumble" style="padding:0;margin:0;border:none;" src="http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/stumble.gif"/></a>
    </div>
    <div style="width:65px; float:left;">
    <a expr:href="&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" target="_blank" rel="external nofollow"><img alt="Delicious" style="padding:0;margin:0;border:none;" src="http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/delicious.gif"/></a>
    </div>
    <div style="width:65px; float:left;">
    <a expr:href="&quot;http://technorati.com/faves?add=&quot; + data:post.url" target="_blank" rel="external nofollow"><img alt="Technorati" style="padding:0;margin:0;border:none;" src="http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/technorati.gif"/></a>
    </div>
    <div style="width:65px; float:left;">
    <a expr:href="&quot;http://twitthis.com/twit?url=&quot; + data:post.url" target="_blank" rel="external nofollow"><img alt="Twitter" style="padding:0;margin:0;border:none;" src="http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/twitter.gif"/></a>
    </div>
    <div style="width:65px; float:left;">
    <a expr:href="&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title" target="_blank" rel="external nofollow"><img alt="Facebook" style="padding:0;margin:0;border:none;" src="http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/facebook.gif"/></a>
    </div>
    </div>


    Click save and your done !

    I have lots more social bookmarking options Click Here To see a list.
    Do you like these ones ?
    Continue Reading

    Top 8 Ways To Get Readers To A New Blog

    | | 10 comments
    Getting New Visitors To Your BlogI suppose there is no point in spicing up your blog if you get no visitors.Getting your blog noticed is not an easy task but there are steps you can take to give your blog a push in the right direction.

    Remember you need to keep posting to your blog, this is one of the most used phrases but 'content is king'.Try to publish a post once a day or at least five time a week if you are posting more than once a day try leave a gap between the posting times.

    Here is the list of Eight ways to get started :
    1. Submit your blog to search engines
    2. Click here to add your blog to Google Click here to add your blog to Bing
    3. Get a feedburner for your blog :
    4. Click here to see how
    5. Join and submit you blog to Blog Directories :
    6. I will cover Blog Directories in a later post for now here's a great post by Loren Baker on the subject :20 Essential Blog Directories to Submit Your Blog To
    7. Leave your link :
    8. Were ever you go on the Internet leave your link. When you Comment on other blogs,Forums etc.. leave a link to your blog. Don't spam when commenting if you don't leave proper relevant comments most will be deleted.
    9. Traffic Exchange
    10. If your willing to go the extra mile a resource rarely taken advantage of by bloggers is Traffic exchanges. This will automatically drive traffic to your blog. (Don't use traffic exchanges if your blog has AdSense it is against their T.O.S. and could get you banned)
    11. Press Release
    12. Why not create a free press Release. A Press release can get you a good result but only when you do it the right way. If you want to try press release, Click Here for an article on how to write a quality Press Release Here's a list of free press release Distribution Sites
    13. Tell your friends online on offline !
    14. Twitter-Facebook-Myspace-Bebo-Friendster there are so many social networks were you can connect with friends and let them know about your blog.Check these two posts to have your blog automatically connect with social networks : Feedburner Connect Twitterfeed Connect
    15. Leave your blog link at the foot of all your Emails.
    16. If you like me send lots of funny Emails you can add your blog URL at the bottom of the Email.Most of these emails get sent on again and again and now a link to your blog is been sent with them. Most Email providers like Gmail have a setting to automatically leave a link at the bottom of all your Emails just check out your Email settings.

    These are just a short list of ideas and suggestions try to cover as many as you can.I have are more tips to help get visitors to your blog Search Engine Blog Tips.And keep posting make sure there is content there for people to see and remember only good content will bring them back.

    Drop Your Comments, Views And Questions Below.
    Continue Reading

    How to add a random post link to your blog.

    | | 0 comments
    There are many different random post widgets available but i quiet like this one.This is a simple text random post link that can be added to any part of your blog.

    You will have this link up in a few seconds.

    1.In the Layout section of your blog click "Add a gadget"

    2.Select HTML/Javascript

    3.Paste in the code below:


    <div id="myLuckyPost"></div> <script type="text/javascript"> function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Feeling Lucky? Click Here For A Random Post'; document.getElementById('myLuckyPost').appendChild(a); } </script> <script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"></script>


    If you need more help or have an opinion or suggestion,
    Please leave a comment Below.

    Click Save You Done !

    The text "Feeling Lucky? Click Here For A Random Post" can be changed to whatever you want displayed.

    Easy Huh...
    Continue Reading

    How to add a Digg button to the bottom of all your blog posts

    | | 0 comments
    How to add a Digg button to the bottom of all your blog posts
    Adding a Digg this button to all your blog posts is easily achieved.One simple piece of code will put the button below all your posts including your previous posts.

    What is Digg? - Digg is one of the coolest websites known to man. Digg is a way for the public to filter through blog posts/images/videos/articles/websites/whatever and determine which ones are cool or not. Digg is also completely free to use. Can u dig it?

    How does Digg work? - Digg is like a ginormous voting system for web information. The more people who vote or “Digg” any specific item… the higher it will rise in the Digg rankings.

    You can have a digg button in your blog posts in three quick steps :


    1.Click Layout-->Edit html for your blog

    2.Click the box next to Expand Widget Templates and Find the following piece of code in your html :

    <p><data:post.body/></p>

    (To quickly find code click "CTRL and F" on your keyboard a search box will appear use it to search for the code)

    3.This is the code to be added:


    <div style='float:right; margin-left:10px;'>
    <script type='text/javascript'>
    digg_url=&quot;<data:post.url/>&quot;;
    </script>
    <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
    </div>


    Placement Options:

    Place the code ABOVE <p><data:post.body/></p> for the digg button to appear at the top of your posts.

    Place the code BELOW<p><data:post.body/></p> for the digg button to appear at the bottom of your posts.

    Move The button across your blog?
    To move your button across blog simply change the part of code in blue to "right" "left" or "center"

    I use the button and You can see it at the bottom right of this post.

    More info on Digg:


    We Are Nearly Finished - First A Quick Reminder:
    If you need more help or have an opinion or suggestion,
    Please leave a comment Below.It also really helps with future posts if you let me know if a tip has worked on your blog.
    This is a Do-Follow Blog so leaving a comment will also help Your blogs Google rank.
    OK Back to business....


    What is Digg? - Digg is one of the coolest websites known to man. Digg is a way for the public to filter through blog posts/images/videos/articles/websites/whatever and determine which ones are cool or not. Digg is also completely free to use. Can u dig it?

    How does Digg work? - Digg is like a ginormous voting system for web information. The more people who vote or “Digg” any specific item… the higher it will rise in the Digg rankings. Sounds rather simple, huh?

    Who uses Digg? - Anyone and Everyone. Digg is a system which is powered by the people. We choose what gets submitted and ultimately we choose which submissions are cool or not. This means that no website is too big or small, even your lame website about windows vista can make it into the Digg rankings.

    How can I make money using Digg? - Here is the really cool part, so pay attention my friend… Submissions that make it to the front page of Digg get massive amounts of traffic. So much traffic in fact, that there is actually a new term called the “Digg Effect” - Digg effect is “the term given to the phenomenon of a popular website linking to a smaller site, causing the smaller site to slow down or even temporarily close due to the increased traffic.
    Continue Reading

    Change The Blogger Navbar To Hover Effect / Peek A Boo Effect

    | | 20 comments
    In an earlier post i covered Removing the blogger navbar completely.This is quiet a popular post as many dont like the navbar, but it can be useful.The navbar has progressed over the years to include extra options such as bookmarking and of course has the quick links into your account.So how about a hover effect navbar ?.Basically the navbar will only appear when you place your cursor over the space were it sits.Take a look at the demo below and place your cursor over the area were the navbar should be.



    Removing navbar and setting peek-a-boo effect are not against blogger T.O.S.We set navbar to hover effect in three easy steps.

    Have Hover Effect Blogger Navbar



    1.Select 'Design' then 'Edit Html' for your blog.

    2.Find this piece of code in your blogs html :

    ]]></b:skin>

    3.Add the code below just BEFORE ]]></b:skin>

    #navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
    #navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}


    Click save template and that's it check out your blog with its new hover navbar.

    Just remove the code to set the navbar back to standard or to see how to remove it completely - Remove Blogger Navbar

    If You Have Any Questions Drop A Comment Below !
    Continue Reading

    How to make an easy email me or mailto link or picture link for your blog

    | | 4 comments
    How to make an easy email me or mailto link or picture link for your blogIf you would like to give your blog readers the option to email you, a quick and safe why to do this is with a email me or mailto link.In this post i will show you how to make a mailto link, mailto picture link or mailto button and add it to your blog.It's easier than you may think.

    All three are made up of just a short piece of code and are very easy to add to your blog.You could place one in your sidebar of footer or even in a post if required.

    How To Make A Mail To Link


    1.Mailto Link

    Here's a preview of a mailto link :

    Click Here To Contact Me By Email

    And here's the code:


    <a href="mailto:spiceyourblog@gmail.com.com">
    Click Here To Contact Me By Email
    </a>

    Note

    Simply change my email in Bold above to your email address.

    change the text 'Click Here To Contact Me By Email' in Bold above to the text you want displayed.

    2.Mailto Picture Link

    Here's a preview of a mailto Picture link:

    Click to email me

    And here's the code:


    <a href="mailto:spiceyourblog@gmail.com"
    ><img src="http://i631.photobucket.com
    /albums/uu40/paulcrowe/email-3.png
    " alt="Click to email me" /></a>

    Note: change my email in bold to your email address.

    You can change the picture link in bold to another picture if you want.

    3.Mailto Button Link

    Here's a preview of a mailto button link:


    Here's the code:


    <form>
    <input value="Email Me"
    onclick="location.href='mailto:spiceyourblog@gmail.com'"
    type="button">
    </form>

    Note: - Simply change my email in bold to your email address.

    You can change the Text 'Email Me' in bold to the text you want displayed on your button.

    To add one to your blog copy the code add your Email and paste the code were you want it.The code can be placed anywere Html is accepted.
    To add one to your sidebars in your dashboard click 'Layout' > 'Add a gadget' > Choose 'Html/Javascript' from the pop up menu > paste in the code and save.

    Another option is to add a contact me form to your blog Click Here to see how.

    Drop Your Comments And Questions Below.
    Continue Reading

    How to create two types of easy drop down menus for your blog

    | | 1 comments
    Drop Down menus can be used in so many ways in your blog from creating a menu for your visitors to linking to past posts.Their popularity is mainly down to how tidy they are taking up little room yet displaying an infinite amount of links that would otherwise fill your blog.Here i will cover two types of html drop down menu
    .Both these menus can be added in your posts/sidebar are anywhere you want them.

    1.A drop and click menu.

    2.A drop down menu with a go button.

    Drop and click :

    Here is how the menu looks:



    And here is the code that makes the menu:

    <select id="Select1" onchange="window.open(this.options[this.selectedIndex].value,'_blank');this.options[0].selected=true" class="text_noresize" name="select">
    <option selected="selected">Change This To Title You Want</option>
    <option value="http://Spiceupyourblog.com"> This is the title of your first link</option>
    <option value="http://Spiceupyourblog.com"> This is the title of your second link</option>
    <option value="http://Spiceupyourblog.com"> This is the title of your third link</option>
    <option value="http://Spiceupyourblog.com"> This is the title of your forth link</option>
    <option value="http://Spiceupyourblog.com"> This is the title of your fifth link</option>
    </select>


    Just copy the code above paste it were you want your menu and you just have to make a few quick changes.

    1.The text in red is displayed on the front of your menu just change to suit.
    2.Change each of the URLs in green and their corresponding titles in blue to suit.
    3.You can of course add more links or remove links.


    This is a drop down menu with a GO button:







    And this is the code:



    <form title="jump">
    <select name="menu">
    <option value='URL ------- 1 here' > title 1</option>
    <option value='URL ------- 2 here' > title 2</option>
    <option value='URL ------- 3 here' > title 3</option>
    <option value='URL ------- 4 here' > title 4</option>
    <option value='URL ------- 5 here' > title 5</option>
    <option value='URL ------- 6 here' > title 6</option>
    </select>
    <input type="button" onClick="
    location=document.jump.menu.options
    [document.jump.menu.selectedIndex].value;" value="GO">
    </form>


    This menu has two differences,
    First it has a go button
    Second the title of the first link is the title displayed on the front of the menu.


    If you need more help or have an opinion or suggestion,
    Please leave a comment Below.

    You an change GO in red to select/advance etc....
    Add your UR L's and Ti tiles as shown with the first menu.
    You don't change name="menu"

    Job Done !

    Both very effective and both very simple.

    Continue Reading

    Change The Blogger Title Format For Improved Search Rank

    | | 11 comments
    In this post i will show you how to get more visitors to your blog from search engines by changing how you blog is seen.Improving your blog and working on getting more traffic from search engines is called 'Search Engine Optimization'(S.E.O.).This is a very easy yet extremely effective way to improve your blogs search engine ranking and move you towards the top of search results.

    To change how search engines see your blog you must change the default setting in your blog template.

    What we are doing is making your post titles appear ahead of your blog title in search results, as people will be searching for keywords and phrases in your posts rather than on your home page this is almost a Must change.

    I am constantly looking for ways to improve your title tags for improved S.E.O. and this is the forth edit i have made to this code :Latest Change:05 DECEMBER 2009

    We do this in four simple steps.

    1.Click the layout and then edit html options for the blog you wish to change.

    If you need more help or have an opinion or suggestion,
    Please leave a comment Below.

    2.Near the top of your blogs html you will find this piece of code :


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

    3.Replace that piece of code with the following piece of code :

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

    4.Click save template and your finished !

    You have now changed Blogger's default title tag to help focus relevant keywords to your blog which improve the search engine ranking of your blog.
    Continue Reading