Display Blogger Labels In A Drop Down Menu Gadget

In this post we have an excellent tutorial showing you how to display your blogger labels, tags, category's or what ever you like to call them in a drop down menu.There are a number of reasons this Blogger trick is useful.First of all by displaying your labels as a drop down menu you can have them placed in prime position at the top of your blog without taking up too much room.Some blogs i have seen have up to 50 different labels and even more, these labels in a list or cloud would take up a huge amount of space in the sidebar.Secondly we will add the hack to only one labels gadget, so you can have a drop down list of your blogs labels and still have the option to add a list or cloud version elsewhere on your blog.To make this as easy as possible for everyone we will add a new labels gadget and then add the code needed to make it a drop down menu.

Live Demo - Scroll to the end of this blog to see the drop down labels gadget in the footer section.

OK lets add a Drop down labels gadget to your blog , you might want to back up your template before you start.

Drop Down Labels Menu Gadget For Blogger

Step 1. In Your Blogger Dashboard Click > 'Design' > 'Add A Gadget'





Step 2. From the pop up menu scroll to find 'Labels' and click the 'Add' icon.
Important - The gadget will have the title 'Labels' change this to zzzzz and save the gadget.



Step 3. Now advance to your 'Edit Html' page - Do not tick the 'Expand Widget Templates' box.



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

Step 5. When you locate zzzzz it will be in a section of code like this :

<b:widget id='Label1' locked='false' title='zzzzz' type='Label'/>

Step 6. Replace that full line of code with the following code :

<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'>
<br/>

<select onchange='location=this.options[this.selectedIndex].value;' style='width:200px'>
<option>Labels</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
</option>
</b:loop>
</select>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Note - The text in red is what will be seen on drop down menu and can be changed to Tags, Category's etc..

Step 7. Save Your Template - The labels gadget is now in drop down form.You will want to change the name of the gadget from zzzzz, to do this just return to your Design page > Edit Gadget and change to Labels or Category's etc..

That it you have a very useful drop down list of your blogger labels for readers to easily navigate.Remember only this labels gadget will be in drop down format and if you remove it you will have to start from step 1 again.We have lots more Similar Blogger Tips and Hacks for you to check out and don't forget to leave your comments below.

AddThis Social Bookmarking Tool Bar For Blogger

Now that almost all custom templates have removed the Blogger Navbar lots of Bloggers are adding different Toolbars to their blogs.In this post i will show you how to add the New Share Bar from AddThis Labs.The AddThis Share Bar is a Social Bookmarking tool bar that's compact and transparent so it wont disturb readers and can be added to your blog in seconds.The Share Bar also has a search that will automatically connect to your blog.The search and share options have a tool tip style hover titles and the Share bar can be closed with a click.The bar has buttons for Facebook, Twitter, Digg, Email, Bookmark and more with the option to open and share your blog posts on every social website imaginable.

Live Demo - Check out the AddThis Share Bar Here

AddThis Share Bar For Blogger

Step 1. In Your Blogger Dashboard Page Click 'Design' > 'Add A Gadget' > Choose Html/Javascript from the pop up menu.

Step 2. Copy The following code and paste it into the Html/Javascript Gadget :

<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaYqm6xBxp5E1rd4O1aT12fj-dLN-q80OAJ6XqEuhA3xy8Z9sq5bB5SLPNsaP6BSHYZWCHG3fizpfJbCqFftz-1evmQcUCbupu_I-TekVKuOM7HEggqFjkT97zU6gkD78Cm0OcDAJuLX6K/s1600/best+blogger+tips.png'/></a><script src="http://sharebar.addthiscdn.com/v1/sharebar.js" type="text/javascript"></script><a href="http://www.spiceupyourblog.com"/><small>Blogger Tips And Gadgets</small></a><div class="addthis_sharebar_config" style="display:none;">
</div>

Step 3. Save The Gadget - The position of the gadget on your design page is not important so you can drag and drop it to the bottom of your sidebar or into your footer.

Simple ! You Should check out more of our Blog Gadgets and Social Bookmarking Gadgets.Drop a comment to let us know what you think of the AddThis Share Bar.

5 Awesome Featured Post Sliders For Blogger

Featured Sliders or Slide shows have become very popular with Blogger users over the last few months.They have becomes so popular that over 50% of the New Templates have featured post sliders already added.The featured posts sliders originally appeared on News websites and Blogs.As the news sites were constantly adding new content the Big story's would get pushed down the order on the home page.The featured post or Featured article slider was seen as a way to keep the big story's at the top of the home page.

I guess the same can be said for using a featured post slider on Blogger, you can display your best posts or the posts you want people to see in prime position at all times.There are many types of Featured sliders with lots of different designs and features.In this post i will show you five different types of sliders and how you can add them to your blog with your content.

5 Featured Posts Sliders For Blogger

1. A Simple Stylish jQuery Featured Slideshow For Blogger

Screenshot :



Demo : See This Slider In Action

Tutorial : Simple jQuery Slider Tutorial

2. Amazing Blogger jQuery Featured Slideshow Slides Images And Videos

Screenshot :



Demo : See This Slider In Action

Tutorial : jQuery Anything Slider Tutorial

3. A Cool Any Size jQuery Powered Featured Posts Slider For Blogger

Screenshot :



Demo : See This Slider In Action

Tutorial : Any Size jQuery Slider Tutorial

4. Mootools Featured Post Slider

Screenshot :



Demo : See This Slider In Action

Tutorial : Go To The Installation Steps

5. Smooth jQuery Featured Posts Slider

Screenshot :



Demo : See This Slider In Action

Tutorial : Go To The Installation Steps


That's 5 Awesome featured posts sliders you can add to your blog and direct traffic to the posts you want them to see.Check out our post with a Featured Posts list you can add to your sidebar and we also have lots more Great Blogger Gadgets.Thanks to the designers for their hard work,

Have you a favorite from the list ?

Huge Collection Of Over 5000 Stunning Free Social Bookmarking Icons

Hi Guys, Over the last month i have been putting together a monster list of social bookmarking, social networking and general social media icons.I scanned the designer websites, scanned through the icon sites and set up shop in Deviant Art.At first i thought if i could list maby 20 to 30 sets of cool social bookmarking icons it would be great but the list just grew and grew.The result is 101 (+5) full sets of totally stunning and totally free social bookmark icons.In all it adds up to over 5,000 icons for every social networking site from Facebook to Hi5, every Bookmark site from Digg to Design Float and extras from Email Rss to Favorite, Blogger and Wordpress icons.

The Fluffy Pillow Set

So after countless hours of building the list of icons i checked and re-checked the links, images and spelling ect.. as this would be the largest post published on Spice Up Your Blog.But when i published i realised the D*** Blogger Auto Pagination had kicked in.So my beautifully crafted homepage with the latest 12 posts in easy nav summery boxes was cropped to display only one post.

The Wood Triangle Set

The result is i couldn't publish the list here on Spice Up Your Blog.Instead i had to publish my monster list of icons on my main freelance writing site Info Barrel.I have re posted this here because in an upcoming post i will show you how you can use any of these Bookmark Icons on Blogger (They can be used on any Blog Platform).Yep i will be showing you 106 differant Social Bookmarking Gadgets you can place below all your posts on Blogger !

To check out the 101+ Sets With Over 5,000 icons follow the link :

101 Most Stunning Social Bookmark Icons Sets

The Truck Icon Set

Let us know what you think of the Icons or your Favorite sets in the comments, and look out for the post showing you how you can use any of the sets on your Blogger Blog !

Floating Back To Top Button For Blogger

The 'Back To Top' button is quiet popular on Blogs and websites and i this post we will see how to add a back to top button to Blogger.Once added the Button Will float down the page as the reader scrolls n rest at the foot of the page until needed.Adding the Back to top button to blogger just requires some code added to a html/javascript gadget in your design page.We will be using an image button for the back to top and i will show you how you can change this image to any button you like.

Demo - Check Out A Demo Of The Back To Top Button Here , you should see the button fall as you scroll.

Add Back To Top Button To Blogger

Step 1. In your dashboard click 'Design' > 'Add A Gadget' > Choose 'Html/Javascript' from the pop up menu.

Step 2. Copy The Code Below And Paste It Into The Html/Javascript gadget.

<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaYqm6xBxp5E1rd4O1aT12fj-dLN-q80OAJ6XqEuhA3xy8Z9sq5bB5SLPNsaP6BSHYZWCHG3fizpfJbCqFftz-1evmQcUCbupu_I-TekVKuOM7HEggqFjkT97zU6gkD78Cm0OcDAJuLX6K/s1600/best+blogger+tips.png'/></a><script type="text/JavaScript">
var topMargin = 300
var slideTime = 1200
var ns6 = (!document.all && document.getElementById);
var ie4 = (document.all);
var ns4 = (document.layers);
window.setInterval("main()", 10)

function floatObject() {
if (ns4 || ns6) {
findHt = window.innerHeight;
} else if(ie4) {
findHt = document.body.clientHeight;
}
}

function main() {
if (ns4) {
this.currentY = document.floatLayer.top;
this.scrollTop = window.pageYOffset;
mainTrigger();
} else if(ns6) {
this.currentY = parseInt(document.getElementById('floatLayer').style.top);
this.scrollTop = scrollY;
mainTrigger();
} else if(ie4) {
this.currentY = floatLayer.style.pixelTop;
this.scrollTop = document.body.scrollTop;
mainTrigger();
}

}
function mainTrigger() {
var newTargetY = this.scrollTop + this.topMargin
if ( this.currentY != newTargetY ) {
if ( newTargetY != this.targetY ) {
this.targetY = newTargetY
floatStart();
}
animator();
}


}
function floatStart() {
var now = new Date()
this.A = this.targetY - this.currentY
this.B = Math.PI / ( 2 * this.slideTime )
this.C = now.getTime()
if (Math.abs(this.A) > this.findHt) {
this.D = this.A > 0 ? this.targetY - this.findHt : this.targetY + this.findHt
this.A = this.A > 0 ? this.findHt : -this.findHt
} else {
this.D = this.currentY
}
}
function animator() {
var now = new Date()
var newY = this.A * Math.sin( this.B * ( now.getTime() - this.C ) ) + this.D
newY = Math.round(newY)
if (( this.A > 0 && newY > this.currentY ) || ( this.A < 0 && newY < this.currentY )) {
if ( ie4 )floatLayer.style.pixelTop = newY
if ( ns4 )document.floatLayer.top = newY
if ( ns6 )document.getElementById('floatLayer').style.top = newY + "px"
}
}
//-->
</script>
<div id="floatLayer" style="position: absolute; height:20px; width:15; left:650px; top:400px; z-index: 100"><a href="#"><img vspace="0" border="0" hspace="0" alt="Back to Top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmkESYH2UDOozYq9kIrB6UOB95LNphV6IKPZafuJqvhRROJsaXT3DmzFmd7TCQ1x_PMaIxQKvLdiyr_0KA9KZxXcvVAokSlzChYwJibqwFxAlv8_rooNEmGI69ECxs40zoI8IPmEkqfN_3/s1600/TOP+BUTTON.gif" title="Back To Top Of Page" /></a></div><a href="http://spiceupyourblog.com" target="_blank"><small>Blogger Top Gadget</small></a>

Important 

If the button stops in the middle of your page and not at the bottom increase the number in red at the start of the code, for example in the demo i had to set that number to 500.

left:650px; = How far from the left the button appears you can increase and decrease it to suit your blog.

top:400px; = How far from the top it appears.

You can change the image used for the button by changing the image URL in blue to any image you wish to use.

Step 3. Save your template - You can drag and drop the gadget to the bottom of your design page as position wont effect the gadget.

That's it your Back to top button has been added to your blog.Check out more of our Gadgets and Resources for Blogger.

Drop Your Comments And Questions Below.

7 Colored Twitter Counter Buttons For Blogger

The basic twitter counter button is probably the most popular social bookmarking tool used by Bloggers.Allowing readers to Tweet and ReTweet blog posts with the numbers displayed you usually find the buttons floating at the top and bottom of blog posts.With so many blogs using the twitter counter button they have almost become invisible to readers so adding a different looking retweet button to your blog seems like a great idea.In this post i will show you how you can choose from a selection of colored  Twitter counter buttons and add one to your blog.We will see how to float the colored Twitter button at the top of your posts wrapped in text, at the foot of your posts or on other sections.These buttons are from Twittley and as an added bonus when readers Tweet your posts they are also listed on the Twittley website.If you just want the standard Twitter Counter Button Click Here.

Add Colored Twitter Counter Button To Blogger

Step 1. In your dashboard click 'Design' > 'Edit Html' > Tick the 'Expand Widget Templates' Box.







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:post.body/>

Step 3. Pick the color Twitter button you want and add the code for your choosen button Directly Above / Before <data:post.body/>

Note - All The Buttons Are Working Try Them Out !

1. Blue Twitter Counter Button.

<div style='float:left; margin-right:3px;'>
<script>var twittleystyle = "0";</script><script src='http://twittley.com/button/button.js'/>
</div>

2. Green Twitter Counter Button.

<div style='float:left; margin-right:3px;'>
<script>var twittleystyle = "1";</script><script src='http://twittley.com/button/button.js'/>
</div>

3. Orange Twitter Counter Button.

<div style='float:left; margin-right:3px;'>
<script>var twittleystyle = "2";</script><script src='http://twittley.com/button/button.js'/>
</div>

4. Pink Twitter Counter Button.

<div style='float:left; margin-right:3px;'>
<script>var twittleystyle = "3";</script><script src='http://twittley.com/button/button.js'/>
</div>

5.Red Twitter Counter Button.

<div style='float:left; margin-right:3px;'>
<script>var twittleystyle = "4";</script><script src='http://twittley.com/button/button.js'/>
</div>

6. Purple Twitter Counter Button.

<div style='float:left; margin-right:3px;'>
<script>var twittleystyle = "5";</script><script src='http://twittley.com/button/button.js'/>
</div>

7. Yellow Twitter Counter Button.

<div style='float:left; margin-right:3px;'>
<script>var twittleystyle = "6";</script><script src='http://twittley.com/button/button.js'/>
</div>

Twitter Button Position

OK i have added code to the buttons to make them float at the top left of your posts.If thats were you want your button save your template and your done.Here are other placement options :

Float the buttons at the top right of your posts - Change float:left to float:right & change margin-right to margin-left.

Position the buttons at the bottom of your posts - Place your button code Below / Under the <data:post.body/> code you found (You can use the same technique as above to move the button to the left and right).

Use the button elsewhere on your Blog - Only use the middle section of code like this : <script>var twittleystyle = "5";</script><script src='http://twittley.com/button/button.js'/>

That's your seven coloured Twitter counter buttons, let us know what you think by adding a comment below !

Add A Unique Reply Button To Blogger Comments

Back in March this year in what has become one of the most popular posts on Spice Up Your Blog i showed you How to add a reply option to the Blogger Comments.Once added the a reply link was added to all the comments and you and your readers can reply directly to a comment.Obviously lots of you have added the reply option to your blogs comments so i thought i would add some extra features to it.In the original tutorial we added the Text '[Reply to comment]' so lets spice it up a little and replace that text with a button or image.Also i have added a title to the reply option and set it to float on the outside of the comment body, a better option with better design.

If you haven't added the old reply option we will show you how all the steps required, If you have already added the text reply option to your blogger comments i will show you how to change the text to an image or button.

Update Jan 2012 - Blogger have added this as default find out more here - Threaded Comment Replies Added To All Blogger Comment Forms.

Live Demo : You can see a working demo of the comments with reply button Click Here.

How To Add Reply Button To Blogger Comments

Step 1. In your Blogger Dashboard Click 'Design' > 'Edit Html' > Tick the 'Expand Widget Templates' box.







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

<data:commentPostedByMsg/>

Step 3. Choose the Reply button you want for your blog and add the corresponding code Directly Below / Under <data:commentPostedByMsg/>

Button 1.


Button 1 Code.

<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaYqm6xBxp5E1rd4O1aT12fj-dLN-q80OAJ6XqEuhA3xy8Z9sq5bB5SLPNsaP6BSHYZWCHG3fizpfJbCqFftz-1evmQcUCbupu_I-TekVKuOM7HEggqFjkT97zU6gkD78Cm0OcDAJuLX6K/s1600/best+blogger+tips.png'/></a><span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID-HERE&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdX5ytvqc8ieSasP4tkYbEDwTtDaadz3xj5PfoXBvVXWDjoTNVeMLfGQ5wC_gq8ZoAvbD-1FC4cWX1rDILWseb5BCN4zdw0hilheeUx6T0E1VMUWdhRI_gNhmgNqFuB3L_Zb-YQ-wjlht4/s1600/Reply+Button+1.jpg' style='float:right;' title='Reply To This Comment'/></a></span>

Button 2.


Button 2 Code.

<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaYqm6xBxp5E1rd4O1aT12fj-dLN-q80OAJ6XqEuhA3xy8Z9sq5bB5SLPNsaP6BSHYZWCHG3fizpfJbCqFftz-1evmQcUCbupu_I-TekVKuOM7HEggqFjkT97zU6gkD78Cm0OcDAJuLX6K/s1600/best+blogger+tips.png'/></a><span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID-HERE&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVrT39jml5ZvMFJE8hs1g7nGncZ1m8jBbESmpZKI-tv2_Mpr9t4bATfywiys25JBzxuJU3Hl3MnvncVoDZggGCuU328_t4VkIw4syIRAIJfiU5KMDBjLHbrwtrABo1QTjpbIHqUqcl8uz6/s1600/Reply+Button+2.gif' style='float:right;' title='Reply To This Comment'/></a></span>

Button 3.


Button 3 Code.

<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaYqm6xBxp5E1rd4O1aT12fj-dLN-q80OAJ6XqEuhA3xy8Z9sq5bB5SLPNsaP6BSHYZWCHG3fizpfJbCqFftz-1evmQcUCbupu_I-TekVKuOM7HEggqFjkT97zU6gkD78Cm0OcDAJuLX6K/s1600/best+blogger+tips.png'/></a><span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID-HERE&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWg69w56lLejuICilOmEz0Wg7tF8QVNY5E8AiLED3hmtlcMP8gPQcxsWhw_zqMp6BEQEaIGxy-s4fId9WZtrIUKvm2ClR8W1tLIiFxfYyRFJPrOP3VO2bO03H3FB0P6d31mVdkjQjwcQV1/s1600/Reply+Button+3.jpg' style='float:right;' title='Reply To This Comment'/></a></span>

Button 4.


Button 4 Code.

<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaYqm6xBxp5E1rd4O1aT12fj-dLN-q80OAJ6XqEuhA3xy8Z9sq5bB5SLPNsaP6BSHYZWCHG3fizpfJbCqFftz-1evmQcUCbupu_I-TekVKuOM7HEggqFjkT97zU6gkD78Cm0OcDAJuLX6K/s1600/best+blogger+tips.png'/></a><span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID-HERE&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzghpn44GTQbhn9EOeLD-ntxRoYtES2ICo-Bl2c-yeWBTNefshulb6dJxMbzRzpuEK2ATt3jLIjUiNeNA_ZAHeyI8eQHFDzNYDSOyOz6yTY9DXRyt9sW54BZbEo7-6p__xXO_bGjjzea5h/s1600/Reply+Button+4.jpg' style='float:right;' title='Reply To This Comment'/></a></span>

Button 5.


Button 5 Code.

<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaYqm6xBxp5E1rd4O1aT12fj-dLN-q80OAJ6XqEuhA3xy8Z9sq5bB5SLPNsaP6BSHYZWCHG3fizpfJbCqFftz-1evmQcUCbupu_I-TekVKuOM7HEggqFjkT97zU6gkD78Cm0OcDAJuLX6K/s1600/best+blogger+tips.png'/></a><span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID-HERE&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmVZaEBLdFv8J4XDsCq0BEmcSgkwul99sc6nQGPR_PYYyLUclZdpiaAzmnD_BwomAOhOHbktWXWHQCfHqAu_ugJ_YuNIaOyhbh_Dc-sTeUnRpVp0VCkwp5T4P0u98EyvQQIM9HfkeArtE-/s1600/Reply+Button+5.jpg' style='float:right;' title='Reply To This Comment'/></a></span>

Button 6.


Button 6 Code.

<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaYqm6xBxp5E1rd4O1aT12fj-dLN-q80OAJ6XqEuhA3xy8Z9sq5bB5SLPNsaP6BSHYZWCHG3fizpfJbCqFftz-1evmQcUCbupu_I-TekVKuOM7HEggqFjkT97zU6gkD78Cm0OcDAJuLX6K/s1600/best+blogger+tips.png'/></a><span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID-HERE&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0QIngE2DynS5WlpM-P6aVvQZTRaRt1hcqSBUMdSA74OtO48SrfkbeI4EZR8j0AxpmrSq7yUgdNTVNVuBB3aJ-zwE9YZQSsvxzbBYOKaaOrlTF6KUaYb9kq_PzQybAUCYdS5VQiU18fZk_/s1600/Reply+Button+6.gif' style='float:right;' title='Reply To This Comment'/></a></span>

Button 7.


Button 7 Code.

<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaYqm6xBxp5E1rd4O1aT12fj-dLN-q80OAJ6XqEuhA3xy8Z9sq5bB5SLPNsaP6BSHYZWCHG3fizpfJbCqFftz-1evmQcUCbupu_I-TekVKuOM7HEggqFjkT97zU6gkD78Cm0OcDAJuLX6K/s1600/best+blogger+tips.png'/></a><span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID-HERE&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhswMrldLZC410dC6jiavBMGW_zxqhVYb1it8Q2WZ5sFMnDEm2EleNWbZuUb5UyiLE9bMNci3fW6tMRMlJxdnxB3VTsTxhwVzCFPQhMruszCcPH1EGNGKgckKsRGcofpgFvYli-v8JOwq2X/s1600/Reply+Button+7.png' style='float:right;' title='Reply To This Comment'/></a></span>

Button 8.


Button 8 Code.

<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaYqm6xBxp5E1rd4O1aT12fj-dLN-q80OAJ6XqEuhA3xy8Z9sq5bB5SLPNsaP6BSHYZWCHG3fizpfJbCqFftz-1evmQcUCbupu_I-TekVKuOM7HEggqFjkT97zU6gkD78Cm0OcDAJuLX6K/s1600/best+blogger+tips.png'/></a><span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID-HERE&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6wQEB2ZdjRbGYpOu4QpQtQtEsYEggYhhhmUU46EvAnrGkll3y6iMb4C9U4wrltd-XjX34vMz1HkqAsS9oC3CsK0WHMCNIhF7HCnh1FOFDF7jL9Y2TalXrCeeX-CUGqo5n8hsnkxkBCn1Z/s1600/Reply+Button+8.gif' style='float:right;' title='Reply To This Comment'/></a></span>

Button 9.


Button 9 Code.

<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaYqm6xBxp5E1rd4O1aT12fj-dLN-q80OAJ6XqEuhA3xy8Z9sq5bB5SLPNsaP6BSHYZWCHG3fizpfJbCqFftz-1evmQcUCbupu_I-TekVKuOM7HEggqFjkT97zU6gkD78Cm0OcDAJuLX6K/s1600/best+blogger+tips.png'/></a><span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID-HERE&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwp7rBbiTx7BlSJVRW6fNfibkxAlhlqjRYh1dBHESi7cv9kXO5P9b5Bnw2QckC6XgeorhlKi7-TphOm71f5dOT3Q0FRDknrmoT7ZuCVFORjma1IfwDsWreQZTzPxrwjJdiuzbxRe1hrOsw/s1600/Reply+Button+9.gif' style='float:right;' title='Reply To This Comment'/></a></span>

Button 10.


Button 10 Code.

<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaYqm6xBxp5E1rd4O1aT12fj-dLN-q80OAJ6XqEuhA3xy8Z9sq5bB5SLPNsaP6BSHYZWCHG3fizpfJbCqFftz-1evmQcUCbupu_I-TekVKuOM7HEggqFjkT97zU6gkD78Cm0OcDAJuLX6K/s1600/best+blogger+tips.png'/></a><span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID-HERE&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-fnBfIRiON4iL5msBr_LS7uQo_jRolJnoPWDhK_-TFddvQw6sd0M8iKhf_kq7WJoTfr4acrF8CzZIAhl7MykU0dbTv6k1hUYiDPeZgtqBK1RIX_CJILqXXC-QJtZDK8bZHK9WLDaC4GCU/s1600/Reply+Button+10.gif' style='float:right;' title='Reply To This Comment'/></a></span>

Important

You must now add your blogs ID to the code, replace YOUR-BLOG-ID-HERE in red with your blogs ID.You can get your Blogs ID by going to your blogs Design Page, Posting Page, Settings Page or any page accessed from your dashboard.

Your Blogs ID will be in the address bar like this :



Once you have added your Blogs ID save your template and the reply button has been added to your Blogger comments.

OK the next tutorial is Only For People that have already added the text reply from our previous post.For everybody else the button should now be on your blog so check it out..

Replace The Text Reply With An Image

If you added the text reply you can change it to a Button.
To do this follow the steps as above then find this code in your template :

[Reply to comment]

Now Replace that code with one of the fllowing (See The Button Demos Above) :

Button 1

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdX5ytvqc8ieSasP4tkYbEDwTtDaadz3xj5PfoXBvVXWDjoTNVeMLfGQ5wC_gq8ZoAvbD-1FC4cWX1rDILWseb5BCN4zdw0hilheeUx6T0E1VMUWdhRI_gNhmgNqFuB3L_Zb-YQ-wjlht4/s1600/Reply+Button+1.jpg' style='float:right;' title='Reply To This Comment'/>

Button 2

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVrT39jml5ZvMFJE8hs1g7nGncZ1m8jBbESmpZKI-tv2_Mpr9t4bATfywiys25JBzxuJU3Hl3MnvncVoDZggGCuU328_t4VkIw4syIRAIJfiU5KMDBjLHbrwtrABo1QTjpbIHqUqcl8uz6/s1600/Reply+Button+2.gif' style='float:right;' title='Reply To This Comment'/>

Button 3

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWg69w56lLejuICilOmEz0Wg7tF8QVNY5E8AiLED3hmtlcMP8gPQcxsWhw_zqMp6BEQEaIGxy-s4fId9WZtrIUKvm2ClR8W1tLIiFxfYyRFJPrOP3VO2bO03H3FB0P6d31mVdkjQjwcQV1/s1600/Reply+Button+3.jpg' style='float:right;' title='Reply To This Comment'/>

Button 4

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzghpn44GTQbhn9EOeLD-ntxRoYtES2ICo-Bl2c-yeWBTNefshulb6dJxMbzRzpuEK2ATt3jLIjUiNeNA_ZAHeyI8eQHFDzNYDSOyOz6yTY9DXRyt9sW54BZbEo7-6p__xXO_bGjjzea5h/s1600/Reply+Button+4.jpg' style='float:right;' title='Reply To This Comment'/>

Button 5

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmVZaEBLdFv8J4XDsCq0BEmcSgkwul99sc6nQGPR_PYYyLUclZdpiaAzmnD_BwomAOhOHbktWXWHQCfHqAu_ugJ_YuNIaOyhbh_Dc-sTeUnRpVp0VCkwp5T4P0u98EyvQQIM9HfkeArtE-/s1600/Reply+Button+5.jpg' style='float:right;' title='Reply To This Comment'/>

Button 6

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0QIngE2DynS5WlpM-P6aVvQZTRaRt1hcqSBUMdSA74OtO48SrfkbeI4EZR8j0AxpmrSq7yUgdNTVNVuBB3aJ-zwE9YZQSsvxzbBYOKaaOrlTF6KUaYb9kq_PzQybAUCYdS5VQiU18fZk_/s1600/Reply+Button+6.gif' style='float:right;' title='Reply To This Comment'/>

Button 7

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhswMrldLZC410dC6jiavBMGW_zxqhVYb1it8Q2WZ5sFMnDEm2EleNWbZuUb5UyiLE9bMNci3fW6tMRMlJxdnxB3VTsTxhwVzCFPQhMruszCcPH1EGNGKgckKsRGcofpgFvYli-v8JOwq2X/s1600/Reply+Button+7.png' style='float:right;' title='Reply To This Comment'/>

Button 8

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6wQEB2ZdjRbGYpOu4QpQtQtEsYEggYhhhmUU46EvAnrGkll3y6iMb4C9U4wrltd-XjX34vMz1HkqAsS9oC3CsK0WHMCNIhF7HCnh1FOFDF7jL9Y2TalXrCeeX-CUGqo5n8hsnkxkBCn1Z/s1600/Reply+Button+8.gif' style='float:right;' title='Reply To This Comment'/>

Button 9

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwp7rBbiTx7BlSJVRW6fNfibkxAlhlqjRYh1dBHESi7cv9kXO5P9b5Bnw2QckC6XgeorhlKi7-TphOm71f5dOT3Q0FRDknrmoT7ZuCVFORjma1IfwDsWreQZTzPxrwjJdiuzbxRe1hrOsw/s1600/Reply+Button+9.gif' style='float:right;' title='Reply To This Comment'/>

Button 10

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-fnBfIRiON4iL5msBr_LS7uQo_jRolJnoPWDhK_-TFddvQw6sd0M8iKhf_kq7WJoTfr4acrF8CzZIAhl7MykU0dbTv6k1hUYiDPeZgtqBK1RIX_CJILqXXC-QJtZDK8bZHK9WLDaC4GCU/s1600/Reply+Button+10.gif' style='float:right;' title='Reply To This Comment'/>

OK that's your new Improved Reply Option added to your comments ! We have lots more tips on Making Blogger Comments Better.Let us know what you think...

Add The Compact Facebook Like Icon Button To Your Blog

Back in April i wrote the post 'Add The New Facebook Like This Share Icon To Your Blog Posts' showing you how to add the then new Facebook Like Icon to your blog.This has been a very popular post and in this post i will show you how to add a New compact version of the button to your blog.The great thing with the Facebook Like Button is how easy it make it for readers to share your posts on Facebook.All that's required is one click and readers don't need to leave your blog, or get a pop up and have to fill in details.The differance between the default button and the compact button is the Compact button does not have any text just the button.

Live Demo - Here is a working version of the button i will be showing you how to add to your blog.

Try It Out :

Add The Compact Facebook Like Button To Blogger

As with the default Facebook Like Button i will show you how to place the button At the top of your posts and below your posts.

Step 1. To have the button anywhere on your blog you must first add a little javascript to your template.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)

</head>

Step 2. Paste This code Directly Above/Before </head>

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>

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

<data:post.body/>

Note - If this code is in your template more than once find the last occurrence.

Step 4. Copy the Like button code below :

<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaYqm6xBxp5E1rd4O1aT12fj-dLN-q80OAJ6XqEuhA3xy8Z9sq5bB5SLPNsaP6BSHYZWCHG3fizpfJbCqFftz-1evmQcUCbupu_I-TekVKuOM7HEggqFjkT97zU6gkD78Cm0OcDAJuLX6K/s1600/best+blogger+tips.png'/></a><a class="addthis_button_facebook_like"></a>

Above Posts - To place the Compact Like Button at the top of your posts paste the button code Above <data:post.body/>

Below Posts - To place the compact like button at the bottom of your posts paste the button code Below <data:post.body/>

You can also add the button code to a Html/Javascript gadget in your sidebar or elsewhere in your design page.

Tip - If you have Images, Video or other media in your posts add the button code below them in the post.This will get more people sharing yor posts, however add the button code just before you publish and publish when viewing the post editor in Html view.

That's you compact Faceook Like Icon, check out more great Facebook tips for your blog.Let us know what you think or if you need extra help in the comments.

Why Alexa Rank Is Important How To Increase Your Blogs Alexa Rank

Alexa has been around for 14 years checking and ranking the traffic levels for every site online.Alexa use toolbars installed on millions of users browsers to track the hits sites are getting.Every time someone with the Alexa Toolbar installed lands on your Blog it increases your Ranking.That's all interesting and it's fun to check out the top 10 sites online or the top 100 in your country but why is it important to have a high Alexa Rank and what can you do to improve your blogs Alexa rank ?

Why Alexa Rank Is important

The major advantage of a high Alexa rank comes into play when you look to sell ad spots on your blog.Ad Networks and Advertisers take Alexa rank very seriously when it comes to buying advertising on your site.Webmasters and Blogger also take Alex rank into consideration when it comes to linking to your site, exchanging links, submitting posts and connecting in other ways with you.Even if you don't currently sell direct Advertising on your Blog you will more than likely want to in the future so working on improving your rank now will be of great benefit.

How To Increase Your Alexa Rank

When i researched for this post i found lots of articles with huge lists of Alexa Tips And Tricks.However as i looked deeper and even in the comments for these posts a lot of these tips were shown to be bull....The first ting to do and a guaranteed way to increase your Blogs Alexa rank is Install the toolbar.

Install The Alexa Toolbar

Chances are nobody visits your blog more than you, once you install the toolbar all those visits will be ranked on Alexa.The toolbar is quiet compact and on the Chrome browser you wouldn't even know it's there.Once installed it's actually quiet interesting to have an instant ranking on every site you visit - Get the Alexa Toolbar here.

Make Your Blog Your Homepage

Once you install the toolbar set your blog to your homepage to ensure even more hits.If your family or friends didn't mind you could install the toolbar on their browser and set your blog to the homepage also.

Write A Post About Alexa

By writing a post about Alexa you may convince some of your regular readers to install the toolbar.Now when they visit your blog it's helping your blogs rank.

Others - Most of the people using the Alexa Toolbar are experienced Internet users,Webmasters and fellow Bloggers, Submit your blog to Digg, Stumble, Design Float, Reddit and other bookmarking sites these guys hang out.It's suggested adding the Alexa gadget to your blog will help but i have seen this refuted.It's suggested getting people to write a review of your blog will help, i have also seen this refuted.

That's it, Since i installed the Alexa Toolbar only 2 weeks ago i have seen Spice Up Your Blog climb from over 110,000 to under 95,000.You can find many more Blogging Resources Here, If you have any tips you think are worth considering let us know.

Drop Your Comments And Questions Below.

How To Add A Free Forum To Blogger Blogs

A forum is a great way to interact with the readers of your blog and let them connect with each other.In this post i will show you how easy it is to add a free forum to your blog using Nabble and Blogger Static Pages.Nabble allow you to create and customize our forum then provide you with a snippet of code, by adding the code to a static page you can have the the forum within your blog.OK so lets look at the steps to add a forum to your blogger blog.

Add A Forum To Blogger

1. Follow this link to Nabble.Com and click 'Start A Free Forum' in the right sidebar.

2. You will be brought to the registration page, add the required details.The Forum Name will Appear above your Forum and the description just below the name so pick something good.You will receive a confirmation Email with a link to finalize the registration process go to your inbox and click the link.



3. Once you click the Email link you will return to your forum within the Nabble Website.You can use the 'Options' link to edit your forum Name, Description appearance etc..

4. Now we will bring your forum into your blog.Click the Embedding Options in the top right corner of your forum page and copy the Javascript code.

5. Back in Blogger create a Static Page for your blog and paste your forum Javascript code into the post body while in Html mode.Name your static page and publish.

Note you can add the forum to a post but it will work better in a page.For more info on Pages Check out this post - Complete Guide To Static Pages.

That's it check out your cool new Forum ! Check out more of the Awesome Blogging Resources we have covered.Any Questions, Have you added a forum to your blog ?

Rss Graffiti - Automatically Share Your Posts On Facebook

In previous tutorials we have seen how you can automatically share your latest blog posts on you Facebook profile and Pages.One of the options we looked at was Twitter Feed which has since added a 'Paid Pro' option making the free option poor at best.Twitter Feed and other options we previously looked at were outside websites that you granted permissions to update your wall.In this post we will see how you can use Feed Graffiti to automatically grab your latest posts and share them on Both your Facebook profile and Fan Pages.Feed Graffiti is an application on Facebook making it much easier to use and more reliable and in my opinion the best auto update app available.Rss Graffiti give you the option to share three types of update to your profile and pages walls.Standard - Publishes a text excerpt and any available media (image, audio or video).Compact - Intended to publish short stories from microblogs like Twitter without changing your Facebook status.Status Updates - Similar to "Compact" style, but instead of just writing on your wall it will also update your Facebook status.

How To Connect With Rss Graffiti On Facebook

1. First make sure you are logged into the Facebook profile you want to automatically update, or the account that controls your Fan Page.

2. Follow this link to the Rss Graffiti app page - Rss Graffiti On Facebook.

3. You are now required to grant Rss Graffiti permissions to your profile (You can add your pages later).Click the authorize button and follow the steps.

4. Once returned to the Rss Graffiti page you can choose to update your Profile or Pick a fan page from the sidebar (If you choose a fan page you need to grant some extra permissions).

5. Once you have selected your page or profile click the 'Add Feed' button then add your blogs Rss Feed, Name, URL and choose the style.You can generate a preview of the way the updates will appear on your Facebook profile or page.

6. Once everything is entered save and your Latest Blog Posts will be automatically shared on your Facebook profile and pages !

That's it now all your Facebook friends see your posts as soon as you publish, you might want to check out How To Automatically Digg Your Blog Posts.Let us know what you think of Rss Graffiti or if you need more help, we have lots more Facebook Tips To Help Your Blog.Enjoy !

Professional Twitter Feed Gadget With Thumbnails

There are many Twitter updates and Twitter feed gadgets you can use on your blog to display you latest Tweets.In this post we will look at the gadget available from Publitweet, a brand new gadget that has a more in dept professional look.This Twitter gadget is easy to generate and use on your blog and you can place it in your sidebar, footer etc..One of the factors that make this Twitter gadget unique is it generates a Thumbnail from the links you share if available.So if you share a link to your latest blog post to Twitter Publitweet will grab a thumbnail from the post and add beside the tweet in the gadget.Also there is a re tweet button and a facebook share button beside your tweets, now people can re tweet your updates from the gadget ! Sounds Great lets look at a screenshot and see how you can get yours.

Screenshot - Here is a screenshot of a gadget with my Twitter updates :



You can see the live gadget here - @PaulCrowePro Twitter Updates

Get Your Publitweet Gadget

Step 1. The first step is to generate the Twitter gadget displaying your Twitter updates.To do this copy the URL below and put it in the address bar of your browser.Change YOUR-TWITTER-USERNAME with your actual Twitter username and click enter or go :
(Place The Link In The Address Bar At The Very Top Of Your Screen)

http://beta.publitweet.com/YOUR-TWITTER-USERNAME

Here is how it looks with my Twitter username :

http://beta.publitweet.com/paulcrowepro

Once you click Enter you will go to the same page as the screenshot and preview above but it will have your Twitter updates.On the right you will see 'Embedd This Feed' with some code below.Copy the code and head back to your blog..

Add The Twitter Gadget To Blogger

Step 1. In your Blogger dashboard click 'Design' > 'Add A Gadget' > Choose 'Html/Javascript' from the gadget list :








Step 2. Paste the code for your Twitter gadget into the Html/Javascript gadget and save.Now drag and drop the gadget into place on your design page.

Note - Here are some of the elements you can change in your gadget, they explain themselves :

headerBackground : '#white',
borderColor : '##CCC',
width : 500,
height : 600   

Make Sure To Follow Me On Twitter Here @PaulCrowePro

That's it you now have a professional Twitter feed gadget on your blog letting readers see your latest tweets, retweet and share you updates and Follow you.Check out our other Twitter Gadgets and Tips. Enjoy !

jQuery Animated Welcome Message For Blogger

One of the popular plugins for Wordpress blogs is the Blog Welcome Message which is displayed above or below the post titles on blogs.In this post i will show you how to add a similar welcome message to Blogger.The Blog welcome message uses an animated effect, it fades in and out when the reader first lands on your page to grab their attention.You can add any text to the message along with a thumbnail image, also readers can collapse and hide the message.I have created three welcome messages you can use and i will show you how to add them to your blog.I will also show you how to edit every part of the message like text, colors, image and more.

I have created 3 samples to give you an idea of how you can use the message on your blog.

Working Demo 1 - See a demo of a Rss Feed welcome message above post titles Here

Working Demo 2 - See a demo of a Twitter Welcome message below post titles Here

Working demo 3 - See a demo of a Facebook Welcome message below posts Here

Adding The Welcome Message To Blogger

Rss Feed Welcome Message - Below is the message with the Rss Feed link, you can use this message and simply change the feed link to yours.Instructions are below to completely change the message and use another image and different text.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaYqm6xBxp5E1rd4O1aT12fj-dLN-q80OAJ6XqEuhA3xy8Z9sq5bB5SLPNsaP6BSHYZWCHG3fizpfJbCqFftz-1evmQcUCbupu_I-TekVKuOM7HEggqFjkT97zU6gkD78Cm0OcDAJuLX6K/s1600/best+blogger+tips.png'/></a><style>

#info{

border: 1px solid;

margin: 10px 0px;

padding:15px 10px 15px 50px;

background-repeat: no-repeat;

background-position: 10px center;

position:relative;

color: #00529B;

background-color: #BDE5F8;

background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg8NpOy_On4luAZR7v_VPYmnpDb4DPOYlyNSQp1Lb84Vn9wyFQREzd6JLEHOHtisLIEBJJJxPHiGKIK6u37aD76DtxO-PBfETKPc3ERYURneFL4wkADGWGfEDGEf1jItq4LRf1_gvEII51/s1600/rss-mini.png');

}

</style><script src="http://code.jquery.com/jquery-1.2.3.min.js" type="text/javascript">

</script>



<script type="text/javascript">

$(document).ready(function(){

$(".close").click(function(){

$("#info").animate({left:"+=10px"}).animate({left:"-5000px"});

});

$("#info").fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400)

.fadeOut(400).fadeIn(400);

});



</script>

<div id="info">

<a class="close" href="#close" style="float: right;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu3h-f96LDCEt1zWAvJx18vt2ryxYBVWWEyBrqeYta963mnNiCZxThYLgwBvV1JeqdRy8Iot3ZdNa1-D6pIgqV5QdB3CH6oVX5jLr5RwhmVEo-Jq8X8dc8Bxp4Nnct-fHl5FJu-0P2QUVs/s1600/close+message.png" /></a>

<center><b>Welcome</b> - If Your New Here You Wont Want To Miss Another Article.<br />Why Not Subscribe To Our <a href="http://feeds2.feedburner.com/spiceupyourblog" target="_blank"><b>Rss Feed</b></a> !</center></div>
</b:if>

*To change the Rss Mini image replace the Image URL in red.
*The code in orange is the Text Message and Rss link replace them with your own message and image.
*Change the text color edit - color: #00529B;
*Change the background color edit - background-color: #BDE5F8;
Get color codes here - Color Code Generator

Images from demos - If you want to use the facebook or Twitter images from the demos here are the codes :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaslRuzgRFb_sbjQjC5C6fIS3_P3slQ7WdymZeeosJIOXadxfoJDJs7Fcj4Be7YVZ5KK99CYMa3aUR1EWZq3BjNNTKQnwSVykYjq7WKVRfutAzaqfJzLfSwFerqFJtOPQJ2qjzqtLiOvTT/s1600/fb-mini.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBmlzq9r_alzUzYecKZdqvcqm8ZQTx-tFRr4TuzUplgmbYwU_fYOajHSQW4-7TKj-sjsCcGJzncHQHygPKYX3bwm27vil2Xs92WNvTnNNvthIqJgiODTUyLtASwFZWPtzjajGrV1sNa9Mw/s1600/twitter-mini.png

OK so you have the code for your message lets add it to your blog !

How To Add Message To Blogger

Add Message Above Posts

Step 1. In your dashboard click 'Design' > 'Add A Gadget'





Step 2. From the pop up menu choose Html/Javascript



Step 3. Paste the code for your message into the Html/Javascript area and save.Now drag the gadget to the area above the posts as shown below.

Add Message Below Post Titles

Step 1. In your dashboard click 'Design' > 'Edit Html' > Tick the 'Expand Widget Templates' box.







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)

<div class='post-header-line-1'/>

Step 3. Paste you message code Directly Below <div class='post-header-line-1'/>

Save your template.

That's it you have a cool welcome message to greet visitors to your blog and hopefully get some subscribers and followers.