Tuesday, 12 April 2011

Use Cool Custom Fonts For The Main Text And Headings In Your Blog Posts

Custom Fonts Blogger Blogspot Blogs
In the last post i showed you how to use custom fonts on custom blogger templates.In that post we added some cool fonts to the Blog Title, Post Titles and Sidebar Titles.In this post we will add fonts to the main text in your post and the titles you use within your posts.The main text is of course the actual content like what I'm writing here, The titles within your posts are titles you use between paragraphs as headings for the paragraph to follow.

As with the last post this is a video tutorial so you can see exactly how it's done.There is a summery of the steps along with the tags you will need to find below the video.

Click Here To View Full Post >>

Monday, 11 April 2011

Use Blogger Template Designer Fonts On Custom Blogger Templates


Back in January this year (2011) Blogger added 77 very cool fonts to the Blogger template designer.The fonts they added were from the Google Web Fonts directory and included some awesome bold fonts, handwriting fonts and fun fonts that could give your blog a unique look.If you use a template from the template designer you simply go to the template designer editor then choose and save any font.While this was great news for Bloggers using templates from the template designer unfortunately Bloggers using Custom Blogger templates could not use the fonts so easily.So if you have a custom Blogger Template (A Template You Downloaded Online From A Blogger Template Site) in this post i will show you how you can manually add any of the fonts to your blog.

This is a video tutorial so you can follow the steps in the video.A summery with the extra information you need is below the video.

Custom Fonts For Custom Templates - Video Tutorial



Step 1. Go to Google Web Fonts

Step 2. Choose the font you want to use from the list and click on it.

Step 3. On the next page Click the use this font link.

Step 4. In your Blogger Dashboard click > Design > Edit Html.

Step 5. From Google Web Fonts Copy the first snippet of code and paste it directly below <head> in your templates html.

Note 1 - You must add a forward slash (/) to the end of the code as shown in the video.

Note 2, XML error message: The reference to entity "v1" must end with the ';' delimiter. - If there is more than one version of the font you want to use it will be defined by the tag &v1 or &v2 etc..This will not be accepted in your template so we simply change the & symbol in front of v1 to the following :



Here you can see it using the Artifika font :


Step 6. From Google Web Fonts Copy and paste the second snippet of code directly above ]]></b:skin> in your template.

Step 7. You now need to change H1 in the code to set were the font will be used on your blog watch the video for the options.

And that's it you can now choose from lots of cool fonts to use on your blogs titles no matter what template your using.

In the next post i will show you how to use custom fonts on the titles within your posts and also how to change the fonts use for the main text of your posts.

You can choose from 100's of custom templates on our template site Best Blogger Templates.

Drop Your Comments And Questions Below.

Friday, 8 April 2011

Add A YouTube Subscribe To Channel Gadget To Your Blog

3D YouTube Logo ImageYou may have noticed I'm back making some video tutorials and the last few posts on Spice Up Your Blog  have included videos.Over the last few months i have been making videos for an Ebook I'm working on so had been slacking off on creating tutorials to go with the posts here.The videos i create for Spice Up Your Blog i host on YouTube and then Embed within the posts.You may do the same thing on your blog, if you do you may also like to promote Your YouTube channel on your blog.With that in mind in this post i will show you how you can add a very cool YouTube Subscribe widget to your Blogger or Wordpress blog.

The widget is very user friendly and like the Facebook Fan Page / Like Page widget users can subscribe to your channel without the need to leave the page.You channels image thumbnail, Username, Number of videos and Number of subscribers are displayed along with the YouTube logo.You can also change the width and height of the gadget.

Add To Wordpress - To add this to your Wordpress sidebar copy the code in Step 2 below into a text gadget on your wordpress sidebar.To do this go to Appearance > Widgets > Add the code to a text widget.

Video Tutorial - I Have A Video Tutorial For This Widget At The Bottom Of The Post.

Live Demo

Here is a working version of the YouTube Subscription widget, click subscribe and your done.


Add The YouTube Subscribe To Channel Widget To Blogger


Step 1. In Your Blogger Dashboard Click > Design > Add A Gadget > Choose Html/Javascript :





Step 2. Copy and Paste the following code into the Html/Javascript Gadget :

<center><!--YouTube Subscribe Gadget www.spiceupyourblog.com--><iframe src=http://www.youtube.com/subscribe_widget?p=YOUR-YOUTUBE-USERNAME style="overflow: hidden; height: 130px; width: 260px; border: 0;" scrolling="no" frameborder="0"></iframe></center>

Important: 
 
A- Replace YOUR-YOUTUBE-USERNAME with your YouTube Username.Your YouTube username is displayed in the top right of the page when your logged into YouTube beside the sign out link.It will have no spaces, for example mine is spiceupyourblog as one word.

B- The height and Width are in blue and can be changed to suit your blog.

Step 3. Save the gadget and you can then drag and drop it into position on your blogs design page.



That's your YouTube Subscribe to channel widget, make sure to subscribe to the Spice Up Your Blog YouTube Channel for the latest Video Tutorials.

Drop Your Comments And Questions Below.

Thursday, 7 April 2011

How To Change The Blogger Lables Page Message

Blogger Red Logo
Back in January 2010 i wrote a post showing you how to Remove the labels message on Blogger, The message in question reads "Showing newest posts with label YOURLABEL. Show older posts".Lots of people don't like this message or see the purpose of it so decide to remove it.However there is another option, change it...So in this post i will show you how to change the message to whatever message you like.If you have a search box on your blog (Not The Google Search Box) the message will also be shown above the search results.

Here on Spice Up Your Blog i actually changed the message some time ago to read "Here Are The Awesome Posts We Have In That Category ! ".It's more fun and personal which i always find refreshing.You could use the same message or have any text you like.

Demo And Screenshot


Below i have a screenshot of the message and you can see it on the label page for Gadgets here - Blogger Gadgets

Labels Page Message Blogger

If you have previously removed the Labels Page Message you can still add your own message as i will show you below.

Video Tutorial - I have a video showing the steps at the bottom of the post.

Change The Labels Page Message On Your Blog


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

Design Edit Html Widget Templates

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info)

<data:navMessage/>

If you previously removed the labels page message find this instead :

<div class='status-msg-body'>

Step 3. Simply Replace <data:navMessage/> With The Message You Want To Appear.If you had removed the message previously and found the second code you can write your message Directly Below <div class='status-msg-body'>.

Video Tutorial




And That's It, Gone Is Showing Posts With Label instead Replaced With Your New Genius Message.If you changed the message Let Us Know What You Changed It To.

Drop Your Comments And Questions Below.

Tuesday, 5 April 2011

Use Snipping Tool To Take Screenshots On Windows 7 And Vista

windows snipping tool
On Spice Up Your Blog i use screenshots in nearly every post to make it easier for people to follow tutorials.In the past i have used a FireFox Add-On to take the screenshots but now i use a great tool built into Windows 7 and Windows Vista called Snipping Tool.With snipping tool you have no need to download any plug-ins or add-ons and you can take professional and customizable screenshots.

How To Find And Use Windows Snipping Tool


Snipping Tool is easy to use and i have created a video to show you how to find it and start taking quality screenshots.


That's Snipping Tool a great way to take screenshots for your blog.Make sure to Check out more of our Image Tips and Blog Gadgets.

Drop Your Comments And Questions Below.

Monday, 4 April 2011

Updated Add Colors And Hover Effect To Authors Comments On Blogger

blogger commentsBack In January 2010 i wrote a post showing you how to use a different background color and text color on comments by the blogs author.This is a great way for readers to quickly find comments you make on your blog such as replies or extra information.That code has since become somewhat outdated so i have been working on a new more advanced code.

This week you may have noticed i have being trying out the code on the comments this blog.As with before the authors comments will have a different background color and text color but i have added a few more features.The background color will also have rounded corners and the colors will change when users hover their cursor over the comment.


Video Post - For Extra Help I have A Video Tutorial At The End Of the Post.

Author Comments Screenshot


You can see my comments have a different background and font color.I have set my comments to have a black background with White text.I also have a hover effect so with the cursor over the second comment the color changes to a Grey background with White text.

blogger comments

I have used black and white (Grey And Black On Hover) but you can use any colors you like to suit your template.

This tutorial does include making changes within section of code so make sure to back up your template and take your time.

Add Colored Author Comments To Your Blog


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

Design Edit Html Widget Templates

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info)

]]></b:skin>

Step 3. Copy and Paste the following code directly Above / Before ]]></b:skin>

.comment-body-author {
-moz-border-radius: 15px;
border-radius: 15px;
background: #000000; /* BG color*/
color: #ffffff; /* Font color*/
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;
margin:0;
padding:0 0 0 20px;
}

.comment-body-author:hover {
-moz-border-radius: 15px;
border-radius: 15px;
background: #cccccc; /* BG Hover color*/
color: #000000; /* Font Hover color*/
border-top: 1px solid #990000;border-bottom: 1px solid #990000;border-left: 1px solid #990000;border-right: 1px solid #990000;
margin:0;
padding:0 0 0 20px;
}

Note - The colors (Hex) are highlighted in red above and can be changed.To get the Hex code for the colors you want go to this chart - Hex Code Color Chart.

Step 4. Save Your Template, But we are not finished.

In the next step you need to find a section of code in your template and add two extra snippets of code to it.When testing this i found older and custom Blogger templates are different to templates from the Blogger templates designer.For that reason i have two separate methods.The first is for people with Blogger templates that are not from the template designer the second is for templates from the template designer....Got It ....

Users With Custom And Older Blogger Templates Follow These Steps


Step 1. Now we need to edit the following section of code in your template.Finding a section of code can be hard so the best way is to find the first line (Use The Ctrl F Search Method) and work from there.If you cant find the first line look for the second line, remember Blogger templates can have different code so it might not look exactly the same.

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

Step 2. OK you have located the section of code, we now add two snippets of code to it.You can see the two snippets and were i have added them below in red.

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Step 3. Once your happy you have the code in the right place you can save your template and check it out.

Users With Templates From The Template Designer Follow These Steps


Step 1. Now we need to edit the following section of code in your template.Finding a section of code can be hard so the best way is to find the first line (Use The Ctrl F Search Method) and work from there.If you cant find the first line look for the second line, remember Blogger templates can have different code so it might not look exactly the same.

<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>

Step 2. OK you have located the section of code, we now add two snippets of code to it.You can see the two snippets and were i have added them below in red.

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>

Step 3. Once your happy you have the code in the right place you can save your template and check it out.



We have lots more tips for your Blog Comments.

Drop Your Comments And Questions Below.

Friday, 1 April 2011

Amazing Animated Flying Twitter Bird Gadget For Blogger

animated twitter bird widget blogger
Guest Post - In this post Dasari Harish will show you how to have a stunning Twitter bird Fly around your blog pages, landing randomly in view of visitors to Share your posts and Follow you.

"Twitter", is one of the most popular Social networking sites in the world among Bloggers to promote their blogs.There are a number of twitter widgets, scripts and plugins available to integrate Twitter with your blog.Most of the icons, buttons or badges are stationary or a fixed floating Twitter gadgets.Now here i have a very cool unique Blogger Twitter widget, an actual Animated flying Twitter Bird that flies around your blog.

This Plugin is java script based and it will display an animated Twitter bird that settles on different places of your blogs visible area. If a you scroll the page, the bird will fly towards the visible part and settle in a new place and it takes random paths for each flight.When you place the cursor over the Twitter Bird "tweet this" and "follow me" links appear,through this the visitor can tweet the article or follow you.


Demo:-You can see the Twitter Bird Flying Around this page visible Area, Scroll this Page to see it's Action.

Add The Flying Twitter Bird To Your Blog


There are Two types here is am giving.You can have the Bird on every page of your blog or just on the post pages..

1. Twitter Bird with tweet text has Post title and URL for all post pages Only.
2. Twitter Bird with tweet text has Current Page title and URL for all Blog pages.

Add Flying Twitter Bird To Post Pages Only

1. Go to Your Blogger Dashboard Click > Design > Edit Html

Design Edit Html Blogger

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info)

</body>

3. Copy and paste the following ocde directly Below / After </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Twitter Bird Widget for Blogger by Way2blogging.org -->
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/files/way2blogging.org-tripleflap.js">
</script>
<script type="text/javascript">
var twitterAccount = &quot;Your Twitter User Name Here!&quot;;
var tweetThisText = &quot; <data:blog.pageTitle/>: <data:blog.url/> &quot;;
tripleflapInit();
</script>
<span style="font-size:11px;position:absolute;"><a title='Blogger Widget by Way2blogging.Org' href="http://www.way2blogging.org" target='_blank'><img border='0' src='http://img1.blogblog.com/img/blank.gif'/></a></span><a href="http://www.spiceupyourblog.com" target="_blank">Twitter Bird Gadget</a>
<!-- Twitter Bird Widget for Blogger by Way2blogging.org -->
</b:if>

Important Note:-
Replace Your Twitter User Name Here! with your twitter user name.You add just the username not the entire URL of your Twitter profile.For example twitter.com/paulcrowepro , paulcrowepro is the username.


4. Save Your template And Check Out Your Twitter Bird.

Add Flying Twitter Bird To All Pages


1. Go to Your Blogger Dashboard Click > Design > Edit Html :

Design Edit Html Blogger

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info)

</body>

3. Copy and paste the following code Directly Below / After </body>

<!-- Twitter Bird Widget for Blogger by Way2blogging.org -->
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/files/way2blogging.org-tripleflap.js">
</script>
<script type="text/javascript">
var twitterAccount = &quot;Your Twitter User Name Here!&quot;;
var tweetThisText = &quot; <data:blog.pageTitle/>: <data:blog.url/> &quot;;
tripleflapInit();
</script>
<span style="font-size:11px;position:absolute;"><a title='Blogger Widget by Way2blogging.Org' href="http://www.way2blogging.org" target='_blank'><img border='0' src='http://img1.blogblog.com/img/blank.gif'/></a></span><a href="http://www.spiceupyourblog.com" target="_blank">Twitter Bird Gadget</a>
<!-- Twitter Bird Widget for Blogger by Way2blogging.org -->

Important Note:-
Replace Your Twitter User Name Here! with your twitter user name.You add just the username not the entire URL of your Twitter profile.For example twitter.com/paulcrowepro , paulcrowepro is the username.

4. Save Your template And Check Out Your Twitter Bird.

Final Words

I Hope you Liked this post and don't forget to share this article with your network. :).Thanks to Paul Crowe for inviting me to write a Guest post on his Great Blog.



guest blog postBy Guest Author -Dasari Harish is the Author of Way2Blogging.org, were he provides Blogger Gadgets and Tutorials. You can also follow Dasari Harish On Twitter.