ALL BLOGGER TIPS: June 2011

Thursday, June 30, 2011

Google Changed Search Results Format and Design

June 2011 saw a rapid change in Google's development performance. We heard of Google +1 Button, then the +1 Project, the +1 Metrics, then Social Plugins tracking in Analytics and

Add Cool Floating Feedback Buttons in Blogger

FEEDBACK-BUTTONS Here is yet another PNG set for Feedback buttons which can be added in a similar method as we did for the previous Feedback Buttons set. This time we will mouse hover effect to these buttons. The buttons will change color on mouse hover. You can do that using a simple code as shared below,

Disadvantages of Pinging Servers With Windows Live Writer

Windows Live writer offers an option where you can ping social networks and search engines whenever you publish a new post. Pinging is not a bad thing unless you do it frequently like 3-4 times a day. According to some previously asked questions WLW team has confirmed that the Ping function if turned on can put unnecessary burden on the servers that can cause you getting banned by search engines, blog directories and social networks.

Password Protect Widgets In Blogger Blogs!

Password Protecting widgets sometimes becomes necessary when you want to share the content inside the widget with selected people. You can lock the widget completely and it can be accessed only with a correct password. The text inside the widget will be in encrypted form which can not easily be cracked. This works exactly the same as we did for password protecting Posts in Blogger. For this tutorial to understand you must first read the earlier one.

+1 Report Stats added to Google Webmaster Tools & Analytics

+1 metrics With the successful invention of the +1 Button and the +1 Project, Google released the +1 stats reports in Google Webmaster Tools. This new integration was made today.The +1 reports will tell web owners and bloggers how much traffic value the button is bringing to their site. You can now track the number of times your pages have been +1 'd by your visitors on your web pages as well as on your Adword Ads or search results. Fortunately you can now also track the performance of other social plugins by using Social Plugin Tracking in Google Analytics. The +1 Metrics menu can now be found on your webmaster account. It contains three important features which are:

Floating Twitter Buttons With auto Sliding

I recently shared a floating widget that contained Twitter, Google +1 and Facebook Counters and it would slide up and down with the movement of the page. Some Twitter lovers amongst you asked for just a twitter button so the script below will help you add a floating twitter button with count on your blogger blogs. The Demo is the same as the previous one but this time with only one button:

Floating Feedback Buttons Set for Blogs

I had sometime in evening so designed some Feedback PNG buttons which is an important tool to receive advices and suggestions from your readers. You have seen a floating feedback button on almost all major websites and its time that you add one too. The set below consists of 10 PNG buttons along with the PSD file if in case you wanted a color of your choice.

Change Syntax Highlighter Color Theme In Blogger

Syntax highlighter is the big name that you see on major tutorial sharing blogs may that be Wordpress or Blogger. Web Owners who use it are growing in numbers. In the last post we discuss how to add Syntax Highlighter to your Blogger Blogs and today we will learn how to change its look and feel and customize it to some extent with 7 different color themes available so far.

Add Syntax Highlighter To BlogSpot Blogs

Most bloggers use the standard blockquote to share tutorials based on scripts and codes with their visitors but Alex Gorbatchev has created an amazing fully functional Highlighter that neatly displays web technologies such as HTML, CSS, JavaScript, Php, Python, Sql, xml etc. The codes are displayed line by line number wise. It also provides the user with options to Print the code, copy it to clip board or to see the code Source.

How to Write and Submit a Guest Post?

Guest Posting can be really fruitful if you do it wisely. Today I will be discussing some key factors that you may want to implement in order to achieve a better guest posting experience. You should aim to write a post that appeals every one and is pleasing to the eye of the reader.

How To Update Public Stats In BuySellAds?

BSA updates your Alexa Rank and PageRank very slowly and often you see the same old compete ranks for weeks. Keeping your public stats updated is be very effective for selling Ad spots. You can manually update your twitter, facebook, Subscribers number, Yahoo Inbound inks along with Alexa and PageRank. To do this follow the steps below:

Password Protect Posts In Blogger!

Now you can password protect widgets too!

An extremely useful and secure script for password protecting blogger blogs has been introduced by vincentcheung .

Fixing Facebook Like Box Rendering Errors

The Custom Facebook Like box will soon be adopted everywhere soon InshAllah however there is something you must know before adding it to your blogs. Most of you might have observed that upon adding the custom like box, you often receive that the plugin can not be rendered with this and that parameters.

Design Update For MONOP Blogger Template

Some complained that the footer widget in MONOP Blogger Template is not properly aligned with the rest of the blog post body. I have fix the design alignment with some changes that you can make your self. You just need to make these changes in your templates,

Google +1 Button will start appearing on search pages Globally

Google's recently introduced +1 Button is now going to be displayed worldwide on all Google domains. Previously this new plugin was added to English search results only but now all Google owned domains from India, Japan, till New Zealand and Australia will be equipped with this great tool giving publishers a better chance to improve their traffic. +1 Button is now available in 44 different languages. An amazing fact is that the +1 button will not only be added to search results but on Google Ads also. Following are the mega sites that are indirectly sponsoring and using the +1 button at the moment:

Google PageRank Update June 2011

Google PageRank updated just an hour ago and thanks to all my loyal and highly valuable readers MBT BLog is now a PR 4.0 Blog with 24K Alexa Rank Alhamdulillah!. I am thankful to Allah Almighty for all His support and blessings. I wish and pray that you guys may too hear a good news day and night for the hard work that you do. It's a day to celebrate! Spent every day of my summer vocations trying to bring something new to blogosphere and a gift like PR and Alexa is a wish come true.

Add Facebook Like Button Below Post Titles - New

I previously shared a Facebook Like button that included a send button by default. One of the problems I noticed with it was the load time. I then shifted to this new like button which loads like a flash at my internet connection speed. If you wish to add this new like button code just below the post titles of your blogger blogs then follow these easy steps:

Styling Facebook plugins is unfortunately not an easy job because very limited details are shared on the Facebook Developers page. Custom plugins help you to stand out as a brand and promote your business well. In April 2010, Daddydesigns published a tutorial on how to style and apply modifications to Facebook Fan box. Their tutorial was well entertained but with the introduction of Facebook Like Box instead of Fan Box, the change in algorithms made it difficult to modify the plugin using the same guide. After several trials and errors, we managed somehow to make the necessary small changes made by DaddyDesigns to fully customize the Like box with custom flavors of fonts and colors. This would surely have not been possible with their brilliant help.

I have made this tutorial as easy to implement as possible. You just need to carefully follow the easy steps below. I have divided the tutorial in two parts:

Creating The style sheet for Like Box

Creating a custom Like Box code

This Method works 101% till today :)

Update: We only showed you what you can do. You can edit the CSS to try your creativity and make any design you like. See Likebox with mouse hover effect

1. Creating the Stylesheet For Like Box

Creating a style sheet is really easy. Just do this,

1. Copy and paste the code below inside a notepad

/*---------------MBT's Custom Like Box Start--------------*/

.fan_box a:hover{

text-decoration: none;

}

.fan_box .full_widget{

height: 200px;

border: 0 !important;

background: none !important;

position: relative;

}

.fan_box .connect_top{

background: none !important;

padding: 0 !important;

}

.fan_box .profileimage, .fan_box .name_block{

display: none;

}

.fan_box .connect_action{

padding: 0 !important;

}

.fan_box .connections{

padding: 0 !important;

border: 0 !important;

font-family: Arial, Helvetica, sans-serif;

font-size: 11px;

font-weight: bold;

color: #666;

}

span.total{

color: #0080ff;

font-weight: bold;

}

.fan_box .connections .connections_grid {

padding-top: 10px !important;

}

.fan_box .connections_grid .grid_item{

padding: 0 10px 10px 0 !important;

}

.fan_box .connections_grid .grid_item .name{

font-family: "lucida grande",tahoma,verdana,arial,sans-serif;

font-weight: normal;

color: #289728 !important;

padding-top: 1px !important;

}

.fan_box .connect_widget{

position: absolute;

bottom: 0;

left: 0px;

margin: 0 !important;

}

.fan_box .connect_widget .connect_widget_interactive_area {

margin: 0 !important;

}

.fan_box .connect_widget td.connect_widget_vertical_center {

padding: 0 !important;

}

/*---------------MBT's Custom Like Box End--------------*/

To keep it simple make these changes:

To change the font size edit font-size: 11px;

Replace the heading color ( #0080ff ) with a color of your choice. You can use our color generator tool

Replace the Profile Nick Names text color ( #289728 ) with one of your choice.

2. Now save the file by going to File > Save as

Save the file with the extension FB.css as shown below,

      3.   Finally upload the file on your hosting server or you can try any other free hosting service. I recommend Google Code.

You can use our link too: http://mybloggertricks.googlecode.com/files/facebook.css

      4.   Once you have uploaded the stylesheet file, you will be provided with a direct link to it. Keep it safe as we would need it later.

     5.    You are done!

2. Creating a Custom Like Box Code

Instead of using the new code provided on the developers page, we will use and modify a custom code. This is the modified code you need to use:

<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script>

<script type="text/javascript">FB.init("");</script>

<fb:fan profile_id="LIKE PAGE ID" stream="0" connections="10" width="300px" height="200px" header="0" logobar="0" css="STYLE SHEET LINK"></fb:fan>

The above code structure consists of 4 important sections which must be filled properly.

Like Page ID

Connections i.e. Number of Profile Faces/pics

Width and Height Dimensions

Stylesheet link

Make these changes:

Replace with the 12-15 digit numeric ID of your Facebook Like Page. You can find this ID inside your Like Page URL. For example: The URL of my like Page is,

https://www.facebook.com/pages/My-Blogger-Tricks/147104632016744

I have kept the number of profile pics denoted by connections equal to 10. You can reduce it if you want.

Replace STYLE SHEET LINK with the link of the stylesheet your previously uploaded. I will mention later how to create

Your Custom Facebook Like Box is now ready to be served! That's All. Paste this code anywhere you want and your personalized and styled box will show up just perfectly. If you face any problems just let me know. I will publish more designs and tutorials on this topic within this week.

Credits

Readers and developers are requested to kindly link back to this page if they wish to share this working tutorial with their visitors. It's the only tutorial published after daddydesigns tut which provides a modified solution.

Please let us know if you needed any help. Peace and blessings pals. :)

PageRank or Alexa Rank? Which One Is Important?

Google Page Rank and Alexa ranking are two different ways determine your site's performance. Here is a little description of the two,

Google Page Rank

Google Page Rank is a rank from 0 to 10. It is the way Google observes a website. It is mostly dependent upon how many quality backlinks the site has. However there are many other features that also count. Sometimes Google ban people from the ranking due to several reasons like copied content and black hat SEO tactics. . It is calculated from an algorithm (can be seen here :Wiki PageRank. )

Positive Aspects:

A good way to observe sites performance as it uses quality backlinks as a major factor. Follows an algorithm (attach algorithm link here Wiki).

Can ban websites with copied content.

Ranked by the biggest search engine in the world i.e GOOGLE

Mostly Page Rank is considered a major factor when buying or selling a site.

Calculated by Google itself which is major site that sends traffic.

Offers a toolbar named 'Google Toolbar' to check the Alexa ranking of a site

Negative Aspects:
Updated very late (3-4 months)
People can buy quality backlinks and get good Page Rank.
They do not provide a toolbar for their own Google Chrome.

Alexa Ranking

Alexa is a web directory and provides free traffic metrics, search analytics, demographics, and more. Alexa ranking depends upon how many visitors you get daily.
Positive Aspects:

Updated sooner

Calculation is based on a dependable factor i.e visitor count.

Offers a toolbar named 'Alexa Toolbar' to check the Alexa ranking of a site.

Negative Aspects:
You can use a software and get as robot visits to your site and increase your hit count.

Conclusion:

Observing both the two factors it is seen that none of them actually is a perfect way to describe the success of a website. Both of them have their pros and cons. However PageRank gives an idea of how popular a website is in internet in building reputation and Alexa gives an estimate idea of how much traffic a website is receiving. In short both are important to receive handsome sponsorship and attract tons of Advertisers.

Fahad Uddin

About the Guest Author:

Fahad is an Undergraduate Student, pursuing his B.E Degree in Computer and Information System Engineering. He is an excellent programmer and part time blogger. He Writes at My C Snippets. You can always contact him at Facebook

Zoom In/Out Images On Mouse Hover With Single Image

There are many tutorials online which show users how to achieve a hover effect on their buttons and other images using mouse hover and they often instruct to use a second, larger image. Another method used is using jQuery to enlarge the size of the image. But with a little bit of trickery, this can be done solely using Css3 and normal html.

Here is a demo:

Live Demo

Note : This trick is best viewed in the latest version of any browser other than IE.

This tutorial has been split into two parts:

CSS implementation

HTML Implementation

CSS implementation:

1. Go To Blogger > Design > Edit HTML

2. and search for

]]></b:skin>

3. Now right above it, paste this code:

/*------- MBT ZOOM-OUT ZOOM-IN -------*/

.mbtzoom {
padding:5px;
position:fixed;
bottom: 35px;
right:10px;
cursor: pointer;
text-decoration: none;
border: 0px solid transparent;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

.mbtzoom:hover {
zoom: 2;
text-enlarge: 2;
-moz-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}

Same procedure as the other option, edit the values to your picture, and change the zoom to how big you want the picture after the transition.

HTML Implementation:

Now whenever you wish to apply the zoom effect to any image you want simply use this code,

<a href="URL OF PAGE" class="mbtzoom"><img width="60px" height="60px" src="IMAGE LINK" alt="back to top" /></a>

Replace URL OF PAGE with the page link. On clicking the image the user will be taken to that page

Replace IMAGE LINK with the link of the picture

Make sure to Keep width and height equal to half the size of original image. For example if the image size is 100px by 100px then set width="50px" and height="50px"

That’s it! Your image should be zooming/enlarging beautifully on your blog/website!

DEMO

As a DEMO simply paste this code on MBT HTML Editor

<style>
.mbtzoom {
padding:5px;
position:fixed;
bottom: 35px;
right:10px;
cursor: pointer;
text-decoration: none;
border: 0px solid transparent;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

.mbtzoom:hover {
zoom: 2;
text-enlarge: 2;
-moz-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}
</style>

<a href="#" class="mbtzoom"><img width="60px" height="60px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_6dPw7PIzlrYoCJfkTWbW0QiDc5kvssBisQ7ZsVIu6-zhSZtx7HSwY0RQfG49sUm5EdM2aN-WFTfSOSyU2jQM0BUDtxgCD9AWjijQN5BJnl3CKK35HyQ1iQUpYedE9KODX_ULxY8gyK4/s800/rss-128.png" alt="back to top" /></a>

Anims

About the Guest Author:

Anims is freelance web designer and enjoys playing around with and learning coding in his free time. He likes to write about Web Technologies such as HTML, CSS and SEO.

Saturday, June 25, 2011

Good News! Facebook Like Box Can Now Be Customized

After the beautiful Facebook Iframe tabs experience, I started understanding on how to customize Facebook plugins. Due to tons of helpful online support from forums and blogs, MBT blog is proud to announce that the new Facebook Like Box can now easily be customized using pure CSS. Detail Info on this will be shared on my next post. For the time being see it appearing in action at the top with complete custom look and feel. Thanks for being a great support and motivation.

Releasing The Priceless "MONOP TEMPLATE"

UPDATE: All templates and resources can be download for free without waiting from our download page

Whether it is EID, Christmas, New Year or Summer Vocations, I have always tried to gift my loyal friends and readers with the best resources possible. Since 60% of you requested a two Column Blogger Template, I therefore kept the word and designed a highly MONetized and OPtimized template. Joining the starting few letters of both these words will coin up MONOP and that's how it took its name! This template can become the best turning point of your blogging careers and revenue. My main focus this time was to code it as search engine friendly as possible so that search engine spiders may love to crawl it and advertisers may love to buy an Ad spot on it.

The navigation menu is specially designed for high CTR AdSense earning by providing a beautiful section to 728 by 15 AD Link unit. I wont keep your awaiting any further, please see the Demo below,

Live Demo

What are the new Features?

As usual keeping alive the "Be Unique motto" following are the new features:

The Template is coded using familiar Blogger CSS classes and HTML Tags using the minima template as the structure.

It is compatible with all browsers including IE

It is highly Optimized making it smoother for search engines to crawl your content

It is highly monetized keeping High Click Through rate and Advertisers Likes and dislikes in mind. A 468 by 60 Banner next to Header and Adsense Link unit above navigation are the best Ad placements of this theme.

It is equipped with all widgets that any blogger would wish for. May that be the beautiful Drop Down Menu, Split Header, Multi Tabs widget, Three Colum Footer, Customized Comment Form, Customized Author Comments, Flapper Social Share Widget, Related Posts, Reply link, Read More Link, Newer Older Home Links, comment count, WordPress style RSS Form etc. etc. etc.....

The header title uses Google Fonts so you don't need Photoshop any more to create a nice logo.

All tutorials published on this blog or anywhere else, can easily be applied to it without getting any error

Download MONOP

We serve resources to subscribers only. If you are a current subscriber then kindly post your Email ID in the Comments Box, else if you are new a MBT reader then kindly submit your Email ID below to receive all such useful resources for free,

After submitting your Email ID, kindly check your inbox and activate the feeds, then submit the same Email ID in the comments box below to receive the download copy instantly.

Respect Copyright

This Template is not for sale and should not be redistributed without permission from MBT. Kindly respect the hours of hard work put in coding this template and providing it for free. The template contains a link to MBT Blog as attribution. Kindly do not remove it. In case of any violation I would be compelled to report that Blog URL to DMCA. The violator will be ignored as a reader and deleted from the subscription list. No question of the violator will be answered on any tutorial published so far.

Customization

Below are some simple important changes that you must make:

Navigation:

To change the navigation menu links find and edit this code,

<div id='subnavbar'>
      <ul id='subnav'>
        <li>
          <a expr:href='data:blog.homepageUrl'>Home</a>
        </li>
        <li>
          <a href='#'>About</a>
        </li>
        <li>
          <a href='#'>Contact</a>
        </li>
<li>
           <a href='#'>Sitemap <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh09x1dKHqXdk8B38SlhWujWlvYVFRffqtBnzrqR3O7JBiIY-vQRbDvxdXHCLoPGraqcOGLGmNgO5piM8ULLCLLTScY3FCLrUEV4s49JgHENE3uGkkehsxcPPxSgmXuKl2qSnvq9xP-8zk/s400/arrow-down.png'/></a>

             <ul>
                <li><a href='#'>Sub Page #1</a></li>
                <li><a href='#'>Sub Page #2</a></li>
                <li><a href='#'>Sub Page #3</a></li>
              </ul>
        </li>
<li>
          <a href='#'>Download This Theme</a>
        </li>
      </ul>     </div>

Replaced the bolded black texts with your link titles and the # sign with link URLs

You can also add more menu tabs by adding this code as many times as you want just above </ul>

<li><a href='#'>Title</a></li>

If you wish to add a drop down menu to any tab then simply add the code below before the </li> tag of any tab (for example see carefully how I added it to the Sitemap tab),

<ul>
                <li><a href='#'>Sub Page #1</a></li>
                <li><a href='#'>Sub Page #2</a></li>
                <li><a href='#'>Sub Page #3</a></li>
              </ul>

AdSense:

This part is the most important reason behind designing this template. I will discuss its customization and integration method on my coming post because I want to explain it in detail.

Multi Tab:

To change the titles of tabs simply find them in your template and replace them with whatever title you like. For more details on this read the Menu Tabs tutorial

RSS Form:

To add the rss form paste the code below inside a HTML/Javascript widget,

<style>

    .mbtbar{width: 100%; float: left; padding:0; margin:0;}

    .mbtbar .count{color:#333; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial; background: none; line-height: 35px; vertical-align: middle; width: 300px; padding: 0 10px 0 4px;}

    .mbtbar .count span.bigcount{color:#BF0100; font-size: 24px; font-family: Helvetica, Arial; line-height: 35px; vertical-align: top; padding-right:3px;}

    .mbtbar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 14px;}
    .mbtbar .subicons a{text-decoration: none; color:#333333;}
    .mbtbar .subicons a:hover{text-decoration: underline; color:#333333;}

    .mbtbar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2IMGfNjnegbgJ_PCKMn45sNVgx2pqppECg0I5JWyN7hoQe9w3Z0aDxqspjsj-TIY8XpZzTiPunFk0uRUss_ZA1ZSL0KcfLjECVmokPEnxDzpJVV9I5J8cNnyRwO2fRF5ta5zfAMyqrtc/s400/rss.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}

    .mbtbar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfr63YdPp_ZJ33uGt9Thvvu_vlxoswAUH-uoIJyCWU-EOg9HBj7IuI7MLePqS8zBt-ekvK_2t63KOKANs4ckobwnoU4eX5KkxRpI0B69IwPpqPzzIf4gc5hqq8AAdWsvk4Srs0K5sH3Rg/s400/facebook.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}

    .mbtbar .subicons .twittericon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmNz1XBG7XDQf1YkS-D6yhwJ5Ig0-bzebQlYx4uARqwKsmb2376Lz1emjuPQFMDCrUlrAHpk65nH1mATskcBSkuhW653M9sjoGjfMuq2QZV2XrfiFkMWynpYjAE2Va_VtxsRa6b6KJN0w/s400/twitter.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}

    .mbtbar .emailsub{border-bottom: 1px solid #e6e6e6; padding: 15px 0 20px 0; float: left; width: 100%; font-family: Helvetica, Arial;}

    .mbtbar .emailsub .emailicon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSFDinTFnEMn_pAvi7VJyt4luEv6S34smlPICn7zKADDYoyJaa0j868yMA5ol7zHnKzSgwwSf4Z3Cg89i0ZqeiVVx8_51gt1zzpnLjwLLK6AL2FmozJtlAX87eZm9bVlpRQiqhTlp-pOc/s400/email.png) no-repeat left center; float: left; padding: 5px 15px 0px 35px; margin: 0 0 0 5px; width: 300px; height: 28px; line-height: 28px; vertical-align: middle; font-size: 14px; color: #333; }

    .mbtbar .emailsub .emailupdatesform{margin: 15px 0 5px 5px; width: 300px; float: left;}

    .mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 200px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}

    .mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#bf0100 0%,#ac0100 100%); background:-webkit-gradient(linear,left top,left bottom,from(#bf0100),to(#ac0100)); border: 1px solid #ac0100; text-transform: uppercase; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}

    </style>

    

    <div class="mbtbar"><div class="count">Join <span class="bigcount">1807+</span> People Following MBT</div><div class="subicons"><div class="rssicon"><a href="http://www.mybloggertricks.com/feeds/posts/default" target="_blank">RSS</a></div><div class="fbicon"><a href="http://www.facebook.com/pages/My-Blogger-Tricks/147104632016744" target="_blank" rel="nofollow">Facebook</a></div><div class="twittericon"><a href="http://twitter.com/mybloggertricks" target="_blank" rel="nofollow">Twitter</a></div></div>
    <div class="emailsub">
    <div class="emailicon">Stay Updated via Email Newsletter</div>
    <div class="emailupdatesform">
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=tntbystc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email..." onblur="if (this.value == '') {this.value = 'Enter your email...';}" onfocus="if (this.value == 'Enter your email...') {this.value = '';}" type="text" /><input value="tntbystc" name="uri" type="hidden" /><input value="Join" class="joinemailupdates" type="submit" /></form></div></div></div>

To customize the above code with your twitter, facebook and Feed links then read this tutorial: Create RSS Form

Let me know how you liked it!

Please let me know if this new design came up to your expectation. What suggestions can you give for the next design and what ideas do you have that you wish to add. It would be a pleasure answering all your queries and customization questions related to this template. Download and install it now! Start blogging with a new zeal and enjoy happy earnings as a reward. Peace and blessings buddies. :>

Wednesday, June 22, 2011

Facebook comments Box Instead of Blogger Comments Form

The previous post on Facebook comments box did not replace your blogger comment form but if you wish to completely remove the blogger form and use this new plugin then steps are even more simple. However I may assure you one important thing here. I am soon going to publish a script that will automatically count and display Facebook and blogger comments beautifully and will show only one form at a time. For the time being apply this new trick.

Replace Blogger Comments Form With FB Comments Box

All the steps are exactly the same as mentioned in the earlier tutorial except step#7

1. Instead of searching for this code,

<b:includable id='comment-form' var='post'>

Search for this code,

<data:post.body/>

2. Just after it, paste the same code we used earlier as shown below,

<b:if cond='data:blog.pageType == "item"'>
<div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div> <fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='520'/></div>
<div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:510px;'>Facebook Blogger Plugin: Bloggerized by <b><a alt='blogger templates' href='http://www.allblogtools.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger templates'>AllBlogTools.com</a></b> Enhanced by <b><a alt='blogger widgets' href='http://www.mybloggertricks.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>MyBloggerTricks.com</a></b></div></div>
</b:if>

If you want to use the dark scheme then simply replace light with dark

To change the Comments box size, change this value width='520'

To change the footer credits size, change this value width:510px

Keep a difference of 10 pixels between the box size and footer size. For example if you set box-size to width='600' then set footer-size to width:590px

3. Save your template

Hide or Pop-up Blogger Comment Form

Here you have two options. Either you can,

Hide the comments box but not the comments. The box will appear only when visitors will click the Post comment link. or

Hide both Blogger comments and comments box

For the first option:

A pop-up link will display both Facebook and blogger comments but will hide the Blogger comment form as shown below, SEE DEMO ALSO

To do this go to Blogger > Settings > Comments and in the comment form placement option choose the pop-up option as shown below,

Save and you are done!

For The Second Option:

If you wish to hide both blogger comments and the comment box? In that case, set comments to hide

As mentioned by Blogger Hiding the comments will not delete them but temporarily hide them from visitors.

Hit save and you are done again!

What to Do Hide or Popup the form?

The best SEO and productive advise that I can give is that you may hide the Blogger comment box only but you must display blogger comments and give users the chance to comment with any platform they may like. In short the popup option is the best. Blogger comments are crawled by search engines and they are an important part of your content so its better that you don't hide them.

With coming days I will come up with more tweaks related to this brilliant traffic gifting Facebook plugin and will try to make it more blending with some customization tips.

You must know:

7 advantages of facebook comments Form

Change Text Selection Highlighting Color in blogs

Another way to stand out from the crowd is to have a customized blog Text Highlighting color. This can ensure that when users highlight text on your blog, it matches your blog’s theme, and may also look professional at the same time.

Most Viewed Posts Widget With Thumbnails by Blogger

Blogger recently introduced there Most Viewed Widget which is also called Popular Posts widget. This gadget displays the posts which has the maximum number of pageviews in three ways i.e. All time, monthly or weekly. It is a great tool to engage your readers more and increase your page views. It will also help you know which of your posts leads the row.

Design and Create Blogger Widgets - The Secret!

Design blogger Widgets Developing widgets, gadgets or plugins has become a productive hobby for all. Technology is changing its face rapidly with enhancements and better updates. Technologies once dreamt off are fast becoming realities. Till now you kept on following tutorials on this blog and several others.

Post ASCII Comments in Blogger - Grab Attention!

ascii-COMMENTS If it is possible on Orkut, MySpace, MSN, YAHOO then why not Blogger! ASCII is a character encoding scheme that helps you to draw characters which are not available on normal keyboards. Most modern character-encoding schemes are based on ASCII now. I have shared some examples below to give you an idea what a Blogger ASCII code will look like and I will also post the first comment to make sure no one takes my turn. =p This way is although not SEO friendly but sometimes you need to grab the authors attention! But please don't post ASCII comments on MBT as I will reply on time always! :>

9 Facebook Social Plugins For Blogs

facebook-social-plugins Facebook social plugins are widely used online today. The most famous is the "like" button which is used by millions of webmasters to promote their sites. How many of these social plugins do you use on your blog? I'll try to provide brief information about these great tools that might help you to achieve your online endeavors.

Add "NoFollow" Tag to all Links in Table Of Contents

UPDATE: Please ignore this post and read this instead Never Tag internal links as No follow

One of the biggest mistakes that almost everyone does is not properly applying Google's webmaster guidelines while optimizing blogs. Almost on all blog hosting platforms, bloggers create a page where they add all the Post links so that the visitors may find it easy to navigate their site. It is a good thing but unknowingly you are risking yourselves into keyword spamming. In 2003 Google mentioned it clearly that a single page can contain no more than 100 links else the website will be penalized. That condition though is removed by Google but it is still recommended that the number of links on a single page should be kept as low as possible. However if you still wish to add thousands of links on a single page for better site navigation then you must nofollow them. Confused? Follow up.

What are the Disadvantages?

Take an example of these two pages at our blog :

Blogger Tricks

Blogger Widgets

You will find many links there but all these internal links are tagged as nofollow. This is an important SEO strategy to keep you blog optimized. Google spiders give a lot of value to hyperlinks and some even say that whenever a robot sees a link it enters automatically into that page to index it. Suppose you have added too many internal links on a single page without the nofollow tag. When the robot indexes that page it will be confused with too many links pointing to different subpages of a common domain. As a result your page will become doubted. The robot will treat that page as one where you are trying to linkback all your pages into to distribute the PR. You won't suffer at first but when you continue adding more links, your search engine reputation will keep on dropping.

Most experienced bloggers have experienced a PR drop from Pagerank 5 to 4 and PR4 to PR3 or even PR6 to PR3 ( I have seen them myselves with all domain names in my mind but can't disclose them) This happens because as soon as you reach PR-4 or PR-5 the indexing and crawling criteria for your blog takes a more serious turn. Your pages will be more better crawled and indexed but with more a more serious eye from the robot.

What is a No Follow Tag?

In easiest terms it is a small HTML code that tells the search engine robots not to crawl the link. This tag locks the link and robots treat the link more like a text without caring where the link points. The linked will not be crawled but indexed. The Text will still be stored in Google databases. The Page to which the link points will get no PR benefits.

This tag looks like this,

rel="nofollow"

How To NoFollow All links In Table Of Contents Page?

A link looks like this,

<a href="htpp://xyz.com">LINK TEXT HERE</a>

To make the link nofollow just add the nofollow tag before href like this,

<a rel="nofollow" href="htpp://xyz.com">LINK TEXT HERE</a>

Do this for all your links and make your blogs and pages better optimized. Hope this info proves helpful to most of you. Rest God knows best. Peace and blessings.

Anyone Can Earn Online and Be a Blogger, Just Go For it! Part-2

blogging skills Hope you liked the first part of this article where I discussed how can you make better use of your skills by writing blogs. That post and today's post is for those, who are enthusiastic about writing and testing their skills, enriching and elevating the talent that is hidden in them. So, for who have started blogging its well and good, but those who haven’t, there might be some reason then? why still waiting?? Do you think you can’t write properly? or you don’t know what topic to write on? If you think like that then I must say that almost everyone of us had this natural fear but it does not prove that you can not write!

Lost AdSense Account? How To Get it Back?

Banned-Adsense AdSense Ad service is the most generous service when it comes to Web Marketing. Nearly every new blogger or web owner can apply for an AdSense Account without any hard registration conditions like page impressions, traffic etc. Anyone can apply for AdSense with a decent content and blog design. Unfortunately many newbies misuse this great earning opportunity by violating AdSense Terms and conditions in negligence. As a result they end their blogging careers with Permanent Adsense Account Ban due to invalid activity. Fraud clicks are often the main cause and these clicks are made when people under-estimate Adsense's tracking algorithm. AdSense Team is very strict with regard to their terms and conditions. Google has spent millions of dollars in gathering world's best computer engineers to make their AD service reliable and beneficial to Google clients.

Facebook Like and Send Button In 108 Languages

Facebook-International An International Facebook Like and Send Button Plugins can not directly be created at Facebook Developer page however we can tweak the code to change the language of the buttons to any country we choose. I previously shared a tutorial on how to add Facebook Like and Send buttons in blogger but those buttons were by default in English USA. Now suppose you live in England but run a Spanish blog. When you go to the Facebook developer page, you will be given a code that will let your users to share your posts in English but your users are from Spain and they will be much more satisfied with your work. In order to make things smoother for your visitors follow the simple steps below:

Top 10 Featured Google Friend Connect Gadgets

Google Friend Connect lets you easily add robust, social features to your website Indeed Google Friend Connect has a lot to offer. You can add these cool gadgets to your blog and grow you community. There are a bunch of gadgets as a part of this Friend Connect program but for now we will be discussing the best ones which can be installed on both blogger blogs and WordPress.

How To Remove or Delete Labels In Blogger?

remove-labels Add tags or labels to your posts is an important SEO step for letting spiders to better understand the content and categories of your blog. Due to unfriendly user interface of the Edit Posts section of blogger dashboard, most people find it difficult to remove, apply and add new labels to the posts. I was going to write a post on it but I have found an easy video tutorial created by Blogger team themselves. I am sure you will enjoy understanding todays tutorial via this video.

Remove Read More Link or Jump Break Link Provided by Blogger

DELETE-READ-MORE Half an hour ago I published 10 ways of customizing Read More links. However some of you might be facing a problem in styling the read more link in official blogger Designer templates. In order to apply the style effects to such templates you will first need to delete the read more link provided by blogger and install a custom read more link or button in less then 3 minutes.

10 Ways To Style and Create "Read More" Links In Blogger

readmore-buttons Creating 'After the jump' summaries using Read More Link makes your homepage load fast and keep things organized and well managed. Till now I shared many tutorials on free "Read More" Buttons and Continue Reading Links but today we will learn to create beautiful Read More buttons without using any image at all. We will use pure CSS to make this happen. I have styled a total of 10 buttons which I hope you will find interesting to further customize. Please see a demo first:

TOP TEN RICHEST MEN ONLINE 2011

richest men 2011 The world of internet was a revolution and this revolution has seen many revolutions in itself. Those who had nothing but few dimes in their pockets in the past are now enjoying luxuries that only Royals can afford.
It may be a little bit humorous that some people, we have in the list are those who are without degree or couldn’t afford the money to do so. However they now have funds enough to build and establish colleges, universities and can even grant scholarships to others for degree. Strange isn’t it?

Link Nudging To Animate Images Using CSS3

link-nudging Many bloggers make the mistake of not fully customizing their links and images. In fact, customizing the two can help you stand out from the competition! However, rather than using some JavaScript to enhance our blogs, which increases loading time and is not accessible to users who disable JavaScript, we are going to use pure CSS3 to let your links and images swing from left to right and vice versa! Let's get further into it shall we? Take a look at this demo:

Rotate/Animate Images Using CSS3 Without JavaScript!

animated image CSS3 has many new powers with which we can further enhance our websites, without extensive knowledge of JavaScript, or without really effecting our website’s loading time. With less than ten lines of CSS coding, we can achieve each of the following effects. Changing CSS properties on mouse-hover and using CSS3 transitions were used for these enhancements. You can now easily animate the images on your WordPress or Blogger blogs using the simple image opacity effect below that rotates the image on mouse hover.