Add Google Buzz "Follow on Buzz" and Counter Button To Blogger

To add the Buzz Counter above use the code below,

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<a title="Post to Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>

</b:if>

Or if you wish to use the Buzz counter above then use this code,

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<a title="Post to Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="small-count" data-locale="en_GB"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>

</b:if>

 

     6.  Save your template and view you blog to see it working just fine.

 

How To Add "Follow on Buzz" Button To Blogger?

To let people follow your buzzes, first you will need to create a Google profile page. Please read this post if you don't have an existing profile,

• [a href="http://www.mybloggertricks.com/2011/05/how-to-create-google-profile-page.html" target="_blank"]Learn How to Create a Google Profile[/a]

 

Now to add the Follow button above any where in your blog kindly use the code below,

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<a target="_blank" title="Follow on Google Buzz" class="google-buzz-button" href="REPLACE THIS WITH YOUR GOOGLE PROFILE LINK" data-button-style="follow">Follow on Buzz</a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>

</b:if>

• Make sure to make replace the bolded green text with your Google Profile Link.
• To add the Follow button below or at the top of Blog Posts then use the same technique as we discussed earlier for the Google Buzz Counter Button.

Google Buzz Guidelines

I hope you must read this in order to understand the Do's and Don'ts of using this button service.

• [a href="http://www.google.co.uk/buzz/help/intl/en-GB/branding.html" target="_blank"]Google Buzz Guidelines[/a]

Follow MBT's DAILY BUZZES!

If you liked the tutorial above then I hope you would love to be kept updated with all the latest Blogger tutorials and Goodies. To follow our Cute Buzzes kindly click the button below,

[a class="google-buzz-button" title="Follow on Google Buzz" href="https://profiles.google.com/Mustafa.stc" target="_blank" data-button-style="follow"]Follow on Buzz[/a]

Please do not hesitate to ask a question. Have fun! :>

Source: http://www.mybloggertricks.com/2011/06/add-google-buzz-on-buzz-and-counter.html

60+ Free "Advertise Here" 125 by 125 Banner Images

 

Advertisements are the soul source of income for any web owner. Attracting advertisers is an art that must be learnt the early the possible. We have compiled a collection of some great static "125 by 125" Advertise here banners that you can use to attract as many advertisers as possible. The collection includes a total of 60+ splendid well designed banners. Kindly submit your email ID in the subscription form below to receive free updates of MBT blog plus receive tons of such coolest blogger goodies straight to your inbox.

[a name='more'][/a]

 

 

name="loc" type="hidden"/>
type="submit"/>

 

 

After subscribing, activate your feeds and then post your Email ID with which you subscribed so that I could send you the banners immediately. You will also find these tutorials helpful,

• [a href="http://www.mybloggertricks.com/2009/08/releasing-125-by-125-animated-ad.html"]125 by 125 Animated Ad Banners For Blogs – Biggest Advertising Collection Ever![/a]
• [a href="http://www.mybloggertricks.com/2010/07/random-ad-banners-widget-for-blogger.html"]Random Ad Banners Widget For Blogger[/a]
• [a href="http://www.mybloggertricks.com/2009/09/125-by-125-ad-banner-widget-for.html"]125 by 125 Ad Banner Widget For Blogger/Blogspot Blogs.[/a]

Source: http://www.mybloggertricks.com/2011/06/60-free-here-125-by-125-banner-images.html

FUNNY GOOGLE SONGS ON YOUTUBE!

I was just searching for some funny songs so that I could chill out my mood when suddenly I stopped at a GOOGLE SONG. And trust me after hearing some of these songs I got so refreshed that I am now writing a post on it. :p I hope the songs people composed by some brilliant musicians will really help in setting up your off mood.

 

 

[a name='more'][/a]

GOOGLE Translate Song

A video composer from Taiwan tweaked the GOOGLE Translate tool in such a way that he made a song out of the robot voice.. With over 7 million views, this great video is still playing on YouTube.

 

 

jQuery Image Slider For Blogger - V3

As per your requests we are glad to present yet another stunning version of Image slideshow Widget for BlogSpot blogs. This widget is different from its previous versions with regard to speed, load time, navigation and control options. You can use it to display even your Featured Posts using the Featured post title and description. This widget is again an extracted code from a WordPress template. The slider is coded such that it will appear on your homepage only. So lets first see a demo,

[a rel="nofollow" href="http://bloggertricks-testblog.blogspot.com/" target="_blank"]Live Demo[/a]

Adding the Slider To Blogger:

Kindly follow these steps:

1. Go To Blogger > Design > Edit HTML


2. Backup your template


3. Search for </head>


4. Just above it paste the jQuery code in this page -> [a href="https://sites.google.com/site/mybloggertricks/Home/MBTSlider.txt?attredirects=0&d=1" rel="nofollow" target="_blank"]Slider jQuery Code[/a]


5. Then search for ]]></b:skin>


6. Just above it paste the CSS code below,

/*-------------------- MBT jQuery Image Slider -------------*/

.featuredposts{border:1px solid #E9E7DE;width:608px;background:#FFF;margin:0 0 10px 0;height:400px;overflow:hidden;}
.fp-slides{}
.fp-post{padding:13px;}
.fp-thumbnail{border:3px solid #dddddd; width:580px;height:266px;margin-bottom:10px;overflow:hidden;}
.fp-thumbnail:hover{border:3px solid #CAC9C9; width:580px;height:266px;margin-bottom:10px;overflow:hidden;}
.fp-title{color:#787878;font:bold 14px  Arial, Helvetica, Sans-serif;padding:0 0 4px 0;margin:0; text-transform:uppercase;}
.fp-title a{color:#000;text-decoration:none;}
.fp-title a:hover{color:#0080fF;text-decoration:none;}
.fp-label{color:#504D4D;margin:15px 15px 0 15px;padding:0;text-transform:uppercase;font:bold 16px/16px Arial,Helvetica,Sans-serif;}
.fp-post p{color:#504D4D;padding:0;margin:0;font:10px Arial,Helvetica,Sans-serif;height:32px;overflow:hidden;}
.fp-more,.fp-more:hover{color:#F77C04;font-weight:bold;}
.fp-nav{width:590px;padding:0px 10px;height:14px;}
.fp-pager a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPqqQF2i_YqjJXTgNTC3GH9fzeI8WbOZT5UnlVIm7smgfzY-5BYLEmwQsAt3E_yscFLaPZvSTpCfylv9CkhNWiT54R2iGJ8r7yPGO66pS2F4jzC9OEX4GpwX7gUBM0WMWurLMpxpYP0H8/s1600/featured-pager.png);cursor:pointer;margin:3px 6px 0 0;padding:0;height:10px;width:10px;display:block;float:left;overflow:hidden;text-indent:-999px;background-position:0 0;}
.fp-pager a:hover,.fp-pager a.activeSlide{text-decoration:none;background-position:0 -110px;}
.fp-prev{float:right;margin-right:4px;width:15px;height:17px;opacity:0.7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg09TeC14HWnHi0S3SKjGtA8Zh_WmvNSXT9ZV0O1VDxuGb6V_CtfHLvQ7vqK3WM29LDZBshOvWhTnNX4-ErblDwvLtYJBe_Q2028Rwr1mhhTtzFwFq13keq1jrmTC0jqKNHN4qqQS8TbSo/s1600/featured-prev.png) top left no-repeat;}
.fp-prev:hover{opacity:1;}
.fp-prev:active{opacity:0.7;}
.fp-next{float:right;width:15px;height:17px;margin-left:4px;opacity:0.7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsJV595Tzpx0h60KN4VyNbCTqt39Ou3SEljtwOsjeq4SDQ4BmWgDPKcMAjO-FOkpePXumKL8SYlJhnYtxPiIvotsYZvh2KP8TM5d_8zcOSfUvFZcNAd6g-WOaz3Eg0InoQi55_XDWPudQ/s1600/featured-next.png;) top left no-repeat}
.fp-next:hover{opacity:1;}
.fp-next:active{opacity:0.7;}

          7.   Now Search for this,

<div id='main-wrapper'>

Hint: This code is located near <div id='content-wrapper'>

PS: In this part most of you will face problems as the coding for each template differ. If you could not find this code then do not panic and simply post your Blog URL in the [a href="http://www.blogger.com/post-edit.g?blogID=8193278726666811965&postID=8988055452569236241&from=pencil#comments"]comments[/a].

   8.   and just below it add the HTML code below,

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>


<div class='featuredposts clearfix'>

<div class='fp-slides'>

<div class='fp-post'>
<div class='fp-thumbnail'><a href='ADD POST URL-1 HERE'><img src='ADD IMAGE-1 LINK HERE'/></a></div><h3 class='fp-title'><a href='ADD POST URL-1 HERE'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </p>
</div>

<div class='fp-post'>
<div class='fp-thumbnail'><a href='ADD POST URL-2 HERE'><img src='ADD IMAGE-2 LINK HERE'/></a></div>
<h3 class='fp-title'><a href='ADD POST URL-2 HERE'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </p>
</div>

<div class='fp-post'>
<div class='fp-thumbnail'><a href='ADD POST URL-3 HERE'><img src='ADD IMAGE-3 LINK HERE'/></a></div>
<h3 class='fp-title'><a href='ADD POST URL-3 HERE'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </p>
</div>

<div class='fp-post'>
<div class='fp-thumbnail'><a href='ADD POST URL-4 HERE'><img src='ADD IMAGE-4 LINK HERE'/></a></div>
<h3 class='fp-title'><a href='ADD POST URL-4 HERE'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </p>
</div>

<div class='fp-post'>
<div class='fp-thumbnail'><a href='ADD POST URL-5 HERE'><img src='ADD IMAGE-5 LINK HERE'/></a></div>
<h3 class='fp-title'><a href='ADD POST URL-5 HERE'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </p>
</div>

</div>          

<div class='fp-nav clearfix'>
<span class='fp-pager'/>               
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</div>
         
</div>


</b:if></b:if>

Make these changes:

• Replace ADD POST URL-1, 2, 3, 4, 5 HERE with the URL of your post pages one by one. These URLs will be added twice for each slide. Once for the image and second time for the Post title.


• Replace ADD IMAGE-5 LINK HERE with the Image link of the Featured post. By default all images have width:580px; height:266px; You can edit the image size by editing the width and height in the CSS code shared in step#6. Make sure all your images must have same size


• Replace WRITE POST TITLE HERE... with the title of your Post Page


• Replace WRITE POST DESCRIPTION HERE with the Post Page description. You can write the first few lines of your post here and the readers can read the full post by clicking the title.


• To Change the Overall size of the slider container then edit in step#6 the following two codes -> width:608px and height:400px

   9.   Save your template and you are done! Visit your blog and say Bingo! :>

Previous Versions:

You can also check the old versions here,

• [a href="http://www.mybloggertricks.com/2010/12/how-to-create-stunning-slideshows-in.html" target="_blank"]Create Slideshow in Blogger -V1[/a]


• [a href="http://www.mybloggertricks.com/2010/12/create-slideshow-in-blogger-with.html" target="_blank"]Create Image Slideshow For Blogger Blogs -V2[/a]

If you faced any problem implementing this tutorial then please do not hesitate to [a href="http://www.blogger.com/post-edit.g?blogID=8193278726666811965&postID=8988055452569236241&from=pencil#comments"]post your question[/a]. Would be a pleasure helping you. Have Fun! :>

Source: http://www.mybloggertricks.com/2011/06/jquery-image-slider-for-blogger-v3.html

How To Put Your Blog Name In "AddThis" Menu?

[a href="http://www.addthis.com" target="_blank"]AddThis[/a] is a great social share widget that contains links to over 350+ social media networks where visitors can share your blog post with friends and can also bookmark it. You can in fact customize the  AddThis menu by putting your website name in it and you can also change its background colour. This will help users know that they are using a service you approve of, and this will help encourage more use of this great tool. The more shares your post receives the better the page views.

[a name='more'][/a]

 

 

Adding AddThis Button To Blogger

You can add different styles of add this widgets to your blog by visiting the [a href="http://addthis.com" target="_blank"]AddThis website[/a]. We later will learn how to put your blog name in it and change the background color. Kindly get your AddThis code and then follow the steps below to add your AddThis button to blogger.

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Check the "Expand Widgets Templates" Box
4. Search for <data:post.body>
5. To add the AddThis button below post titles then add your addthis code above <data:post.body> else paste it below it so that the button may appear at the bottom of your posts.
6. Save your template and you are done!

 

How To Customize The AddThis Menu?

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Search for </head>
4. Just above it, paste the following code,

<script type='text/javascript'>
var addthis_config = {
     ui_cobrand: &quot;MY BLOGGER TRICKS&quot;,
ui_header_color: &quot;#ffffff&quot;,
     ui_header_background: &quot;#0080FF&quot;
}
</script>

• Replace MY BLOGGER TRICKS with your blog name
• Replace #ffffff with Font Color. Our [a href="http://www.mybloggertricks.com/2008/01/color-code-generator-and-color-wheel.html" target="_blank"]Color Generator tool[/a] can help you.
• Replace #0080FF with your preferred background color.

               5.  Save your template and see the branded change. Enjoy! :>

Source: http://www.mybloggertricks.com/2011/06/how-to-put-your-blog-name-in-menu.html

Add "Reply Link" to Blogger Comments

  7.   Save your template and view your blog comments the WordPress way! :>

Source: http://www.mybloggertricks.com/2011/06/add-link-to-blogger-comments.html

How To Make a Mobile Version Of a Blog?

UPDATE:- Blogger has recently Added the Mobile Version Support. [a href="http://www.mybloggertricks.com/2011/06/make-mobile-version-of-your-blogger.html" target="_blank"]Make a mobile version of your blogger blogs now by clicking this link.[/a]

---

People are just now beginning to understand that there is another option for monetizing their websites. There is the mobile option that they are probably lagging behind in.

Consider for a moment just how many people have cell phones today. Smart phones, IPhones, Tablets and such are all taking our communications to the next level. People use these devices everyday for simple things like communication and for a variety of other things like finding information that they need via the Internet. The funny thing is that they say that by the year 2012, there are going to be more phone connected to the Internet than actual computers. Think about that for a minute. Right now there is on average one phone per person per household in comparison to only one computer per household.

[a name='more'][/a]

 

[a href="http://gmbhnews.com/view/MyBloggerTricks.html"]Mobile Version Of MY Blogger Tricks [/a]

It is said that Google activates over 350,000 Android devices each day. That is not surprising considering most people use their phones for much more than just phone calls these days. Now that you are starting to realize how many people there are searching for something on the Internet via their cell phones, you are probably beginning to understand why a mobile website is so important. Normal websites just do not display very well on a hand held device. Besides, what good is having a website that most devices can not access?

A place like the [a href="http://gmbhnews.com/make-mobile-site/" target="_blank"]Mobile Site Maker[/a] is invaluable because they can help you with your [a href="http://www.gmbhnews.com" rel="nofollow" target="_blank"]mobile website[/a], especially since you probably have no idea where to start. In fact, getting a mobile website up and running is as simple as it gets. It does not matter what sort of mobile website you need. GMBHNews.net can help you realize your mobile website plans in very little time at all, no matter how big or small it may be. They will also help you monetize that site with Google Adsense or other advertising. They will use their own [a href="http://gmbhnews.com" rel="nofollow" target="_blank"]popular mobile site[/a] to launch yours as well thereby driving traffic to it in no time! With a 30-day free trial and only $9 per month for the standard plan (that's less than $ 0.50 US per Day) to create and monetize your mobile site, you can't go wrong! Other [a href="http://mobify.me/features-pricing/" rel="nofollow" target="_blank"]sites charge an arm and a leg[/a] for lesser services! You simply can not beat their prices and services!

They also offer a variety of different service plans for those customer that wish to get a little more. Remember, it does not matter how small or how large your operation is. Once your mobile site is up and running you can just let it go on autopilot and make money for you even while you sleep!

The sample Video below will further help you better understand how its done.

 

 

About the Guest Author:

Gmbhnews Mobile Service is a mobile site creation and monetization service that makes it very easy for publishers to create and monetize mobile versions of their websites in less than 60 seconds. Christina Clark Co-founder of [a href="http://www.gmbhnews.com" rel="nofollow" target="_blank"]www.gmbhnews.com[/a] mobile portal and [a href="http://www.gmbhnews.net" rel="nofollow" target="_blank"]www.gmbhnews.net[/a] mobile services Blogger at [a href="http://www.blog.gmbhnews.com" rel="nofollow" target="_blank"]http://www.blog.gmbhnews.com[/a]