Popular Posts With Automatic Numbering - Bubbles!

When blogger released Popular Posts widget back in 2011, we leaked out its stylesheet so that you can customize it to blend it perfectly to your BlogSpot templates. Today we will learn how to display the list of popular posts using CSS3 auto increment property. You can style the numbers in variety of shapes, we styled them in square/rectangular and circular shape. you guys were the first to display threaded comments with Comment Counts and today you will again learn something more interesting. You can see a practical demo of this implementation on our sidebar. Lets add this effect to blogger in fairly easy steps using pure styles with no use of JavaScript.

Popular posts widget is an effective tool to increase your blog pageviews and engage readers more on your blog. It fetches and ranks posts based on most visited pages using your Google analytics data.

Add Popular Posts Widget

1. Go to Blogger > Layout
2. Click "Add a Gadget"
3. Choose "Popular Posts"  from the list
4. You will need to configure its settings as shown in the image below: uncheck "image thumbnail" and also "snippet"   Its better that you display at most 7-9 posts. Less is good and clean.

 

       5.  Save it

 

Customize Popular Posts Plugin

Now you need to change the default styles and change its look to our desired design using Custom styles.

1. Go To Blogger > Template
2. Backup your Template
3. Click Edit HTML
4. Search for </b:skin>.  Click the black arrow to expand the code.

   5.  Paste the following Styles just above </b:skin>

/*--- MBT Popular Posts --- */
.popular-posts ul {
padding-left: 0px;
counter-reset: popcount;
}

.popular-posts ul li:before {
list-style-type: none;
margin-right: 15px;
padding: 0.3em 0.6em;
counter-increment: popcount;
content: counter(popcount);
font-size: 16px;
background: #292D30;
color: #ffffff;
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border: 2px solid #dddddd;
box-shadow: 1px 2px 9px #666666; }

.popular-posts ul li {
border-bottom: 1px dashed #dddddd;
}

.popular-posts ul li:hover {
border-bottom: 1px dashed #696969;
}

.popular-posts ul li a {
text-decoration:none; color:#5A5F63;
}

.popular-posts ul li a:hover {
text-decoration:none;
}

Customization:

• To change the background color of the Square bubble edit #292D30
• To change the text color of the bubble edit #ffffff
• By default the shape of the bubble is Square. To change it to Circle simply add the following code just after box-shadow: 1px 2px 9px #666666;

border-radius:15px;

 

    6. Save your template and you are all done!

Visit your blog to see it working just perfectly.

If you would wish to add it inside a Multi Tab Widget just like we have done on our blog, then you can find several tutorials on our blog that were released years ago on Multi Tabs. Please read one below:

• Install a Switchable Multi Tab Widget

Need Help?

I just hope you would find this tutorial easy and yet exciting. Please let me know if you need any help. I just hope you continue adding more colors and flavors to your beautiful blogs. Wish you success and peace buddies. :)

Drawbacks of JQuery Lazy Load Plugin For Posts and Images

Jquery and CSS3 has enabled front end developers and even designers to create amazing effects but unless you check the compatibility of the code, never play with such plugins and tools because there are still people who don't use JavaScript in their browsers and your blog will look no less than a mess to them. This effects both your readership and blog pageviews. We are observing a growing trend of Jquery implementation on both Blogger and Wordpress blogs. A Famous known plugin is Lazy Load for images (inspired from Yahoo plugin) and Lazy Load for blogger posts (Also called infinite scrolling). Lazy load for images delays loading of images in long web pages and makes the page load faster, on the other hand Infinite Scrolling plugin for Blogger keeps on loading posts as you scroll down the page just like you scroll down to load more tweets in twitter.

Note: Jquery is a library of JavaScript which is a simplified version JavaScript. It simplfies calling complex functions and saves time.

Most of MBT readers often complain why we don't publish such plugins and why we don't write tutorials on blogger Dynamic Views. The answer is simple, we are very careful when we suggest widgets and resources to our readers and we will never encourage them to apply a script on their blog that may cause harm to them in one way or the other. Even a Google employee himself commented on our post when we openly discouraged readers not to apply Dynamic views unless they are willing to accept its pitfalls behind the attractive AJAX look.

One of the bitter truth is that blogs using Dynamic views don't even load if JavaScript is disabled on a page! Imagine those thousands of views that you might be loosing because of using a Jquery script that does not take care of what-to-do if-JavaScript disabled scenarios. Today I will talk from development perspective and I really recommend that you read and understand this post clearly and clear your doubts.

How to view your blog by disabling JavaScript?

In order to check if your blog at least is loadable and provides fair interface to your visitors with JavaScript-disabled browsers, I will guide you by giving several examples. Lets take an example of the Gmail blog which uses the Jquery Easy Load effect and also runs on a Dynamic Theme.

• View it and keep scrolling down : Gmail blog with Lazy Load

What did you observe?

You observed a lazy loading effect as you kept on scrolling down. The posts kept on loading infinitely. Interesting isn't it? But now lets viist the same blog with JavaScript enabled.

Disable JavaScript:

For simplicity I am assuming you are using Google Chrome Browser. Following these steps to disable JavaScript in chrome.

1. Go To Settings
2. Click Advanced Settings
3. Click Content settings under Privacy
4. Then inside the popup window you will find an option to turn Off  JavaScript as shown in the image below:

   5. Hit the Done button

Now visit the same Gmail blog again. Refresh the page and tell me what do you see?

You see a blank page! This explains everything to you. In Custom Blogger templates which are using Infinite Scrolling effect and if JavaScript is disabled by user then only the first post or second post will display and the remaining posts wont even show up on your homepage . Consequences are such that you lose precious Page Views.

What would you see on blogs where Image Lazy load effect is used?

You will see only first image or second image being displayed the other image wont event appear. If the plugin developer was clever enough to set conditional statements for JavaScript Disabled browsers, all your images will display just fine else your readers would be lost with no image being displayed.

When and How to use JQuery?

With all that being said, we leave the decision on you whether you wish to use this trending Loading effect for your blogger posts/image or not, but at least this explains now why we don't write tutorials on such tools.

You can surely add Jquery to add some cool effects to your blog design as long as the object using it loads fine even if JavaScript is disabled. Normally you can use JavaScript to create widgets like Recent comments, Popular Posts, Related Posts etc. because even if they don't load, they will at least not return a blank Page or effect your pageviews.

If you are developer then I recommend to add conditions to how your code may react in case of No JavaScript support. Instead of using just the display:none property in your stylesheet also add an extra div section for your object and control its behaviour using JQuery. Follow this Psedudo code:

If JavaScript Supported

Do this

Else

If JavaScript not supported

Do this

Now you would wonder how to check whether a browser supports JavaScript or not. If a browser supports it then it will surely execute the code else it wont. So if you don't want a div section to display when Jquery is supported simply add display:none property to it using Jquery AddClass() function. This Jquery function won't execute if JavaScript is disabled and thus the div section will show up correctly on screen  but this div section will not display if Javascript is enabled because the Addclass() function will execute and hide it on screen. That's how I personally handle this problem. You can surely apply different logics.

An Honest Advice:

The number of internet users are turning into publishers at a fastest rate, therefore you must be careful when applying a tutorial to your blog and extra careful when the tutorial talks of Jquery and SEO. I am observing baseless SEO tips coming from new bloggers that causes more harm to blogs at long term then a short term relief. Almost every new blogger has started sharing his own ideas of SEO and writing codes. This is surely encouraging but on the other side incorrect knowledge has caused several blogs to be hit by Google penalties such as Panda and Penguin. Be extra careful whom you read and follow. I am here for any help you may need and wish to hear your views on this topic. Wish you good health and peace buddies. :)

The same problem is seen with latest GooglePlus comments Plugin!

Create a Custom Contact Form For Blogger - Part 2

In the first part of our series you learnt how to add a contact Form to your BlogSpot blog and control its display settings. Today you will learn how to change its stylesheet to reflect your custom styles with a more appealing design. You will learn today how to customize the Form input fields, add icons to it, add a "Clear Button"  and play several tricks with your custom form. The form is built using XHTML Get or Post Methods unlike PHP Forms which are used widely today. If you have not referenced the first part of our tutorial then kindly read it first:

• Customize Blogger Contact Form - Part 1

3. Customizing The Contact Form - The Fun Part!

Now you will need to create a Static Page where we will add the HTML code for our new contact form.

1. Go To blogger > Pages
2. Choose a Blank Page
3. Give it any title you like. I recommend "Contact Us"
4. Switch to its HTML mode and paste the following HTML code inside it:

<div class='form'>
<!-- Custom Contact Form By MBT Starts -->

<form name='contact-form'>

<!-- Name Field -->

<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}' onfocus='if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}' />
<p></p>

<!-- Email ID Field -->

<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID"  size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email ID&quot;;}' onfocus='if (this.value == &quot;Email ID&quot;) {this.value = &quot;&quot;;}'/>
<p></p>

<!-- Message Field -->

<textarea class='contact-form-email-message'  id='ContactForm1_contact-form-email-message' name='email-message'  value='Leave Your Message..'  onblur='if (this.value == &quot;&quot;) {this.value = &quot;Leave Your Message..&quot;;}' onfocus='if (this.value == &quot;Leave Your Message..&quot;) {this.value = &quot;&quot;;}'></textarea>
<p></p>

<!-- Clear Button -->
<input class='contact-form-button contact-form-button-submit MBT-button-color' type='reset' value='Clear'/> 

<!-- Send Button --> 
<input class='contact-form-button contact-form-button-submit MBT-button-color' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<p></p>

<!-- Validation -->
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>

<!-- Custom Contact Form By MBT Ends -->
</div>

    5.  Don't switch to Compose Mode of your Blogger Editor else the code will get messed up due to your Editor settings. Save and Publish your Page.

   Now if you visit your contact page you will see the default contact form with blue button. Its time to customize its default styles.

Customizing The Form:

1. Go To Blogger > Template
2. Backup your Template
3. Click "Edit HTML"
4. Update: Search for </head>  and just above it paste the following CSS code:

 

<style>

/*---- Compatible contact Form by MBT -----*/

.contact-form-name, .contact-form-email, .contact-form-email-message {
max-width: 220px;
width: 100%;
font-weight:bold;
}

     
.contact-form-name {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGoUGLs6AX1b3z2T_hAZlMsuWnQF0TTF24QAKG0PvvIKArmrXJ372tHBZFnfrfz7Lc3Va4GgzGVtBpPJX57LuhDXNHea5Tk9Mp7AXFfwNlaYR9FrhcFg4K-EZeBBCPaTmAF8fOSReulF0/s320/name.png) no-repeat 7px 8px;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: Arial,sans-serif;
font-size: 12px;
font-weight:bold;
height: 24px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
vertical-align: top;

}
     

.contact-form-email {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiueFx3HtJ_mueRiN_wx4_Xp-eVMDcJRSX9YRFKLtetxxSmRSPOpMXIgNWxSRCjLuqk-vDQa3kDe5xdPOlB4peSQaCuO8NJmbH8DTNPAWz7zHq46lDzurhkxTuDURmdliC3_Oqh398rC9c/s320/email.png) no-repeat 7px 10px;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: Arial,sans-serif;
font-size: 12px;
font-weight:bold;
height: 24px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
vertical-align: top;

}

 

.contact-form-email:hover, .contact-form-name:hover{
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);

padding: 5px 15px 5px 28px;

}

.contact-form-email-message:hover {
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
padding: 10px;
}

.contact-form-email-message {
background: #FFF;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: arial;
font-size: 12px;
margin: 0;
margin-top: 5px;
padding: 10px;
vertical-align: top;
max-width: 350px!important;
height: 150px;
border-radius:4px;
}

.contact-form-button {
cursor:pointer;
height: 32px;
line-height: 28px;
font-weight:bold;
border:none;
}

 

.contact-form-button {
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.contact-form-button:hover {
text-decoration: none;
}
.contact-form-button:active {
position: relative;
top: 1px;
}

.MBT-button-color {
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.MBT-button-color:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
border-color: #F47C20!important;
}
.MBT-button-color:active {
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

</style>

      <!--[if IE 9]>
    <style>
   
.contact-form-name {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGoUGLs6AX1b3z2T_hAZlMsuWnQF0TTF24QAKG0PvvIKArmrXJ372tHBZFnfrfz7Lc3Va4GgzGVtBpPJX57LuhDXNHea5Tk9Mp7AXFfwNlaYR9FrhcFg4K-EZeBBCPaTmAF8fOSReulF0/s320/name.png) no-repeat 7px 0px;
}

.contact-form-email {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiueFx3HtJ_mueRiN_wx4_Xp-eVMDcJRSX9YRFKLtetxxSmRSPOpMXIgNWxSRCjLuqk-vDQa3kDe5xdPOlB4peSQaCuO8NJmbH8DTNPAWz7zHq46lDzurhkxTuDURmdliC3_Oqh398rC9c/s320/email.png) no-repeat 7px 6px;
}

    </style>
    <![endif]-->
   
    <style>
@media screen and (-webkit-min-device-pixel-ratio:0) {

.contact-form-name {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGoUGLs6AX1b3z2T_hAZlMsuWnQF0TTF24QAKG0PvvIKArmrXJ372tHBZFnfrfz7Lc3Va4GgzGVtBpPJX57LuhDXNHea5Tk9Mp7AXFfwNlaYR9FrhcFg4K-EZeBBCPaTmAF8fOSReulF0/s320/name.png) no-repeat 7px 6px;
padding: 15px 15px 15px 28px;

}

.contact-form-email {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiueFx3HtJ_mueRiN_wx4_Xp-eVMDcJRSX9YRFKLtetxxSmRSPOpMXIgNWxSRCjLuqk-vDQa3kDe5xdPOlB4peSQaCuO8NJmbH8DTNPAWz7zHq46lDzurhkxTuDURmdliC3_Oqh398rC9c/s320/email.png) no-repeat 7px 8px;
padding: 15px 15px 15px 28px;

}

 

.contact-form-email:hover, .contact-form-name:hover{
padding: 15px 15px 15px 28px;
}

.contact-form-button {
height: 28px;

}

}

</style>

The above Stylesheet will work just fine with all browsers including Internet Explorer. The code has been made compatible to work fine with all major browsers like IE, Mozilla and Webkit browsers.

• To change button colors edit the class .MBT-button-color
• To change the button color on mouse hover edit the class .MBT-button-color:hover  and for active mode edit .MBT-button-color:active

 

     5.  Save your template and you are all done!

4. Add the Form anywhere you like!

Now if you wish to add the form to your sidebar or post  then simply follow these steps:

• To add the form to sidebar. Copy the HTML code in Step#4   and paste it inside HTML/JavaScript Widget
• To add the form to Post editor, switch to HTML mode and paste the code in Step#4  inside it

Your Views:

I just hope this tutorial would be helpful for all of you. The steps are extremely simple and the codes are carefully written. You can now create a contact form to let your clients request you for a price quote or add it to let your readers contact you in person. Wish you all the best with your blogging endeavors. I will make sure you enjoy it to your fullest. Peace and blessings buddies :)

How to add Cool Responsive Sitemap Widget for blogger blogs

Most of the bloggers who has a blog on blogspot want to make a cool sitemap like WordPress, unfortunately the table of content/Sitemap widgets designed for blogger can't compete with WordPress sitemap. Few days ago we published a sitemap widget(by Ankit) but that's also not look much attractive and it can be only added for specific label. So, Today we're going to see how to add an stylish three column blogger sitemap with responsive design. This widget is easy to add and it has a cool look when compared to other sitemap widgets.
Read more �

Customize Blogger Contact Form! Part 1

So most of you are aware of the recent gadget added to blogger widget directory and that is a small contact form with two input fields for name and Email and a text area for writing the message. We use a complex PHP Form for our contact page but blogger has made it extremely easy for you guys. Ever wondered how to customize this simple form into a professional looking contact form that may give a complete new boost to your overall blog look? Fortunately all MBT readers will be the first to learn this trick today. Plus you will also learn how to add this form anywhere on your blog! I had sometime today so I designed a custom version of this contact form by adding several new CSS3 effects and also added an additional button called "Clear" that will reset and erase the message for your visitors if incase they wish to rewrite a new message. Kindly view the Demo below:

DEMO

Note: We have added the contact Form to a static page and also the sidebar. Just to show that you can add this Custom Form anywhere you want. On static page the Form on sidebar wont display but it will display on all other pages.

• Read Part2: Create a Custom contact Form For blogger!

Tutorial Guide:

We have divided this tutorial in 4 parts:

1. Adding the Normal Contact form widget to sidebar
2. Controlling Widget Display
3. Customize the Contact Form
4. Finally Add the Customized contact Form to Sidebar, Post or Static Page

 

1. Adding contact Form to Sidebar:

By default blogger will allow you to add this widget to your sidebar only but you can easily embed its code on any post or static page easily by copying the HTML code by viewing the browser source file (Ctrl + U). I have taken all the headache so you will only need to follow these easy steps below:

1. Go to blogger > Layout
2. Click Add a gadget
3. Next click on "More Gadgets"  and then choose the first widget as shown below:

     4.  Now you have successfully added or in other words registered your contact form widget with blogger.

     5.  Don't Remove this gadget and leave it intact. If you tried to ever remove it then the Customized contact form that we will code wont work. We will surely Hide this widget from sidebar.

 

2. Controlling Widget Display

The contact form that you created has an ID #ContactForm1   , using this ID you can easily locate the HTML code of the normal form in your blog source file. Well we have already done all the work so you simply need to follow these easy steps:

Hide The Normal Form on sidebar

1. Go To Blogger > Template
2. Backup your template
3. Click Edit HTML
4. Search for </head>
5. Just above it paste the following conditional statement that will hide the widget on sidebar:

<b:if cond='data:blog.pageType == "static_page"'>
  <style>
#ContactForm1{ display:none!important;}
  </style>
</b:if>

The above code will hide the Normal Contact Form on a Static Page only. If incase you wish to add the Custom contact Form to a Post then you may use the following code instead:

<b:if cond='data:blog.url == "URL OF Selected Post"'>
  <style>
#ContactForm1{ display:none!important;}
  </style>
</b:if>

Replace URL OF Selected Post  with the URL of the Post where you will add the contact form.

In our DEMO we have added the contact form to a static page therefore we have used the first code in step#5.

3. Customizing The Contact Form - The Fun Part!

To Keep the tutorial easy, this part will be discussed in Part2 of the tutorial.

• Read Part2: Create a Custom contact Form For blogger! 

Share your views below and stay tuned for the amazing tricks coming tomorrow! Peace and blessings buddies :)

Automatic Numbering for Blogger Threaded Comments

Today's tutorial will take blogger comment system one step more closer to wordpress commenting engine. I was amazed today when I discovered that W3 has already introduced an excellent way of automatically numbering lists in a HTML structure using pure CSS3 properties like counter-reset and counter-increment. Both these functionality provide a non-JavaScript approach to show comment counts for threaded and nested comments in blogger. MBT has contributed a lot in changing Blogger's Comment-body Styles for the past three years and this time we are introducing an interesting trick to add more spice to your blog comments. We are using a non-JavaScript approach unlike Wordpress's popular plugin called Greg's threaded Numbering

 

DEMO

 

How it works?

Like any ordered list, BlogSpot blogs uses the <ol> tag  for displaying comments in hierarchal order. Each comment holds a separate <li> tag. The counter-reset Property sets the value to zero as soon as the loop ends and counter-increment property increases the value by one unit depending on the number of li tags used inside the parent loop. Well enough of theory, now its time to implement this effect on your blogs!

Note: This tutorial can also be applied to Wordpress blogs. you just need to change the name of CSS classes to that used by twenty12 theme used by WP engine.

Lets Count Comments in Blogger!

For this tutorial to work you must be using threaded comments in your blogger templates. If you have not yet switched to that then please do so by reading the following tutorial:

• Show threaded comments in Custom templates

1. Go to blogger > template
2. Backup your template
3. Click Edit HTML
4. Search for </b:skin>.  Click the black arrow to expand the code.

    5.  Paste the following Styles just above </b:skin>

/*----- Comment Counter by MBT -----*/

.comment-thread ol {
counter-reset: mbt-comments;
}
.comment-thread li:before {
content:counter(mbt-comments);
counter-increment: mbt-comments;
font-size: 30px;
float:left;
position:relative;
top:0px;
left:-10px;
margin-right:0px;
height:100px;
margin-right:0px;
font-weight:bold;
font-family:arial, georgia;
color: #666;
}
.comment-thread ol ol {
counter-reset: mbt-comments-sub;
}

.comment-thread li li:before {
content: counter(mbt-comments) "." counter(mbt-comments-sub,lower-latin);
counter-increment:mbt-comments-sub;
font-size: 12px;
color: #666;
position:relative;
top:10px;
}

.comments .comments-content .comment-header, .comments .comments-content .comment-content {  margin:0px 0px 8px 28px!important;}

Customization:

• You can adjust the font size and color of comment counts for Main section using the yellow highlighted regions
• To edit the font size and color of sub sections (nested replies) change orange highlighted regions
• lower-latin: Nested replies for first comment are counted in this order 1.a,  1.b,  1.c ... If you wish to display them in roman like 1.I, 1.II, 1.III, 1.IV... then replace lower-latin with Upper-roman,  if you wish to display them as integers then change it to decimal. Following are some other styles you can use for nested replies: lower-greek, circle, square, disc, lower-roman

       6.   Save your template and you are all done!

Visit your blog to see it working just fine! :)

Must Read:

Following are some posts that you would surely like to read:

• 1000+ background patterns for Blogger comment box
• Expand/collapse the comment form
• Facebook comments + blogger comments inside tabs
• Add GooglePlus comments system in blogger
• Much more.. Use our search box!

Need Help?

I just hope this new addition to blogger tricks brings a delightful change to all of you who have been looking for a way to count comments in threaded list. I would really appreciate hearing form you all. Take good care of yourselves buddies. Peace and blessings be upon you all! :)

Download counter : A Plugin for blogs!

This is the first plugin of its kind created for websites which share downloadable resources. The plugin amazingly works with all major blogging platforms like wordpress and blogger blogs. It can even be used in static Sites or any CMS you may be using. This tool will count and display download stats whenever a visitor downloads a resource form your site. The data is stored at your firebase free account. Luckily we are amongst very few who have started developing tools using the newly introduced Firebase system that allows developers to create dynamic and data-driven tools without worrying about backend development. You do not need to worry about server code or managing databases, firebase does it all for free. All you need is to code some delicious scripts that does half the work.  This plugin is a custom alternative to Dstats download tracking service. Lets add this amazing tool to your blogger blogs!

Demo

The following link will take you to our first plugin created with Firebase.

• Read: Display Post Views in blogger

Note: If you have already followed our first tutorial on firebase then ignore steps marked as (*)

1. Create your Firebase Account *

To store your data for downloads, you will first sign up for a free account at Firebase.

• Click here to sign up now!

Fill up the easy steps sensibly and then once your account has been activated, you must create your first Firebase database as guided below in step#2.

2. Create a Firebase Database

Previously you could only create 2 firebases but now you can create a total 5! So create one for your download stats data

1. Towards the bottom right side of your account, you will find the following submit box.

  2.  Give your firebase a short name. In my case I named it mbtblogstats. This name will be used as your unique Identification.

  3.   Hit create and note down your firebase URL because we would need it later in this tutorial.

Installing Download Counter Plugin:

The steps below are for blogspot blogs. Wordpress users may simply note down the method and apply accordingly on their WP powered blogs.

1. Go To Blogger > Template
2. Backup your template
3. Click Edit HTML
4. *Search for </b:skin>.  Click the black arrow to expand the code.

   5.  Paste the following Styles just above </b:skin>

/*----- download counter by MBT-----*/

.mbtloading {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVe4OP1u0jhzDCPsOkt0CfvTXTTKtkbuOF4HmEQmqDFz7yIU6nuptqgAUAyolURpwHYSOA25JwR9e9ynxSXxFvQQ4gW5Q58hR__370wXet-FkX56jidtMew9-seXwmryvrfRJHVd0d7wG9/s320/mbtloading.gif') no-repeat left center;
width: 16px;
height: 16px;
}

.blog-stats {
color: #289728;
font: bold italic 18px georgia, arial;
float: right;
}

You can easily change the color and size of the Numeric Text count by editing   #289728

Tip: Use our color generator Tool to pick a color of your choice

6. Now search </body> and just above it paste the following script:

<!-- Download Counter by MBT starts-->

<script type='text/javascript'>
    window.setTimeout(function() {
        document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
      }, 10);
  </script>
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script>
$.each($(&#39;[data-download-count=true]&#39;), function (i, e) {
    var elem = $(e).parent().find(&#39;#download-count&#39;).addClass(&#39;mbtloading&#39;);
    var id = $(e).closest(&#39;.post-body&#39;).siblings(&#39;a[name]&#39;).attr(&#39;name&#39;) + &quot;-&quot; + $(e).attr(&#39;id&#39;);
                          var downloadStats = new Firebase(&quot;https://mbtblogstats.firebaseio.com/downloads/id/&quot; + id);
    var data = {}, isnew = false;
    downloadStats.once(&#39;value&#39;, function (snapshot) {
        data = snapshot.val();
        if (data == null) {
            data = {};
            data.value = 0;
            data.url = window.location.href;
            data.id = id;
            isnew = true;
        }
        elem.removeClass(&#39;mbtloading&#39;).text(data.value);
    });
    $(e).click(function (e) {
        data.value++;
        if (isnew) downloadStats.set(data);
        else downloadStats.child(&#39;value&#39;).set(data.value);
    });
});
</script>

<!-- Download Counter by MBT Ends-->

Replace mbtblogstats with your Firebase name that you created in step#2.

     7.  * Now search for <head>   and paste the following JQuery library just below <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

You may not add the jquery code if you have already linked to Jquery library in your blog.

      8.   Save your blog and you are all done with coding!

Displaying Download stats in Posts

Now whenever you wish to display download stats for a particular file. Simple link to your file using the code below:

<div style="width:120px;">
<a data-download-count="true" href="#">Download Now!</a>
<div class="blog-stats" id="download-count">
</div>
</div>

• Replace the # sign with your File link.
• You can write anything instead of Download Now! If your link is bigger in length then increase the width of the counter so that it shows the count in alignment.

Need Help?

I just hope this new plugin proves helpful for blogger users who are missing a database access. I am sure this plugin is the second best use of FireBase which is indeed a magic hub for developers. I would really appreciate you to use it for your projects. Please ask me any query you may have and feel free to share your precious views. Have fun buddies. Peace and blessings be upon you all always. :)

 

Note: All questions with links will be deleted no matter how important the question be. Avoid Spamming please.

Exams Over! Celebrating Over 58,000 Readers

Its tough being a final year B.E student and yet running blogs. Exams for some may sound horrible but it means a complete two months deadlock to my online activities. I just can't express how great I am feeling at this moment, talking to you after several weeks. It felt more like missing my great family and friends. Internet and technology waits for no one, during my absence I observed tremendous developments across major platforms from Blogger till social Media. I was shocked today when I saw the new layout of Google+ Profiles. Changes are going fast at Google side. Amazingly they have even integrated their comment Plugin with BlogSpot blogs. But what amazed me more was looking at STC Network's two months traffic Analytics and Ranking Details. Unfortunately Alexa for MBT has dropped from 4K to 6K but the good news is that readership has taken a whole new turn out. We are now a big community Alhamdulillah with a loyal readership of over 58,800 Readers  which is indeed a great news for all MBT readers and the team.

We have started getting great public  exposure and have been invited by several renown local universities this year for conducting sessions on "Internet Marketing, SEO and Blogging". Buddies all this was only a dream without your kind support and continuous feedback. I am whole heartedly thankful for your consistent motivation through emails, comments, Home visits and telephone calls. Love you always! :)

Increase in Readership

Readership has always remain one of the fundamental ingredient of a successful blogging career. It's the following that helps you to reach your goals and work hard even better. People track blogs using different sources thanks to growing development in Web technology. They are no more limited to RSS subscription or atom feeds.

Following are some ways you can keep track of our delicious tutorials, plugins, updates and creative piece of resources coming this month.

18,900 Subscribers: Subscribe Now! Email | RSS

25,164 Facebook Fans: Like Us to join the club �

4,320  Twitter Followers: Follow our tweets �

2,348   Google+ Followers: Follow us on Google+ �

5,707    Google+ Profile: Follow my personal Profile!

1,400  Friend connect followers

What are the things I will do first?

The blogs were under mild management for over two months and they have gathered enough dust that needs some serious cleanup. Following are things I often do whenever I get back to work after a long time:

• Blog backup: I periodically make a backup of Wordpress and Blogger blogs on daily and weekly basis respectively. Read:? Backup Wordpress Database and Files 
• Checking Email Accounts: I am really lazy at checking emails during exams so this is one of the first things I do. Since I maintain three email accounts so it becomes necessary to keep a close look at all of them.
• HD backup: I backup all files on my Hard Drive into a safe portable Storage Device to ensure I have a safe backup of client resources, blog resources and personal data incase of Hard disk failure. For this I use a 500GB PassPort USB Disk
• Traffic Strategy:  I discuss monthly list of trending topics with my co-authors and guide them on how to make proper use of Keywords and optimize their posts well. Great focus is given on basic SEO and SMO 
• Fight spam: Both at blogs and Inbox. Spamming blogs have increased so much that we were force to start coding a plugin for this and I will release it this week inshAllah.
• Read my Favorite list! To recharge myself with all the latest developments happening at social media and blogosphere, I visit and read my favorite blogs. 
• Schedule Orders: To server readers and clients parallelly I have to maintain a close relationship with both. for the past three months, I unfortunately failed to serve my lovely readers due to Engagement and Exams. Forgive me buddies :)
• Prepare Resources: I love to code, Design and craft for my readers. This month my head is popping with a lot of ideas! :p
• Buy domains: During every vocations I start experimenting with different domains in order to understand the fluctuating behavior of I-Market and search engines. I rarely sell them but keep them secret before they are grownup enough to be shared with you all. So it's a hint buddies that few surprises are on its way again :)
• Pay bills: Normally I pay on annual basis for Web hosting, Themes and some software tools but Ad campaigns require a monthly checkup to ensure I have paid for solo Ads, contextual Ads and Search ads on time. I often do it for clients who are using our lifetime PPC/CPM service Package.

What were the exams all about?

Time wasn't easy for me this time. Engineering is tough and demands both time and effort. The papers I attempted this semester (7th semester) for my Computer and Information System Engineering Program were:

1. Artificial Intelligence
2. Parallel Processing
3. Computer System Modeling
4. Operating systems
5. VLSI

I am a back bencher and spend most of the time online and attend classes rarely, so for a lazy student like me, preparing for papers during the 11th Hour is surely no less than a nightmare :p

What were you guys up to?

I haven't talked or seen you guys for months so I would really appreciate getting to know your whereabouts. Share all your online experiences, achievements, and even exciting nightmares! I am free for a month now and would reactivate the kitchen Recipes soon. I have some tasty and delicious recipes along with resources this time so make sure you don't miss any! Peace and blessings buddies always :)

Success Secrets of Pete Cashmore who started blogging at age 19

For any field that you might pick for yourself, has its own benchmarks of perfection and if you talk about blogging, Mashable is a winner here. No matter which niche you choose for your blog, there is no doubt that the best place to grab your hands on the latest news related to the online world and social media network is mashable. We have been advising our newbie readers to keep their eyes on sites like mashable as following sites which breaks headlines is something that always brings you not only a boost in readership, but also a quick revenue.

What I now believe after reading many success stories is that entrepreneurs are born that way actually, and a good example here is of Pete Cashmore, the mashable-man!

Mashable-The Inside!

Covering every minute aspect related to social media, technology, news and what not, Mashable is the largest independent online news site. The site that was launched back in 2005 is now enjoying a respectable alexa rank of 361, with more than 20 million unique visitors a month and 6 million social media followers. What makes this site unique is its reliability and quickness when it comes to cracking the latest news. Mashable is now headquartered in New York City and also has an office in San Francisco.

Secret#1 : Pete Cashmore and his childhood!

There is one thing very special about the fortunate people; they experience something misfortunate and that very incident becomes a turning point of life. What made Pete Cashmore what he is now, was his surgery of vermiform appendix at the age of 13. Although the surgery was a complete success, the recovery was even harder and due to his illness, Pete had to skip his school for complete rest. While being at home, he started peeping in to many blogs and started learning from what was shared on those sites.

Secret#2: Pete never told parents until his first success!

Been locked in a room, all busy with your machine and doing something attentively makes parents suspicious, and that�s true, isn't it? However, Pete was a lucky one here; probably some credit goes to his illness too that his parents never questioned him about what he was up to all day long. All that they predicted was that Pete was busy in something and wanted to make some money online.

Secret#3: Mashable born at the age of 19!

In 2005, after learning all that was needed, Pete founded mashable that primarily focused on social media and technology initially. He was only 19 at that time and was living in Scotland with his parents.

Secret#4: Pete hasn't slept at nights since a long time!

After getting a considerable response from his home country, Pete realized that targeting Britain only would not work and for that he planned a different strategy. As much of the work was done in America, he decided to reschedule his life to be available on those hours that could bring better results by targeting audience from America as well. If you are a pro-blogger, you must have understood his logic behind doing so, time really matters!

He started writing and posting at night and used to sleep few hours in the morning. Most of us, whether it be students or bloggers know how bad it really is to be up all night and compensate the loss in daytime.

Pete, in an interview shared:

'Cause I quickly realized, Well, Britain's not gonna be a big enough market, and most of the stuff is happening in America anyway. So, I need to be on those hours. So, maybe I'd go to bed at 6:00 AM, 7:00 AM, maybe I'd be up by mid-day and writing again, and every time that just burned me down. What I would do at weekends, I would... Friday night I would say, okay, there is no news that's gonna happen, I would just sleep all of Saturday, I'd wake up on Sunday morning. And hopefully, I had recovered enough that I could start blogging again, 'cause the news cycle doesn't stop, and I went on for a long time. That was probably 18 months or so, when it was just me up at bizarre hours. Sleeping in the morning, not getting any sunlight, and it really drains you.�

Secret#5: Success in 18 months!

It was amusing for him also to figure out mashable�s popularity and the fact that there were about two million people reading mashable content a month by the end of 18 months.

Secret#6: �Have I beaten Yesterday?�

Every successful man has got his own rules to follow and Pete has this question to answer daily. He revealed once that what matters to him is the fact that whether his today is better than his yesterday or not! If yes, it�s a satisfaction!

Secret#7: Mashable-a team of more than 50 people!

When your work gets recognition, you need to produce even better. Being all alone in a business might help you in keeping all the revenue with yourself, the revenue been generated, however, is pretty less. Pete has now more than 50 people working for him and enjoying a reasonable share in the returns.

So, that�s all for now, but there is one thing for sure, Pete is one of those lucky people on earth who find their talent at initial stages of life and learn how to cash it.

More power to him,

Wishes

Making Money with your New Blog - Monetizing Basics

Most bloggers will start off their venture in the hopes of earning big from their blogs. And not without reason either. Multitudes of people are earning a decent sum online. You can too. Earning money from your blog while sitting at home is like a dream for most, and yet, is a reality for many as well. It isn't difficult, it just needs some dedication, and the right guidance. In this post, well talk about monetizing your blog to make money online.

Before you move on, do take a look at some of the basics of blogging that we've covered so far.

Part 1: How to create your first blog - what platform to choose?

Part 2: Replace your blogspot domain with a Dot com domain From Godaddy

Part 3: Choosing best web-hosting for Blogger blogs

Part 4: 5 most practiced Ways of building Active blog Readership

Part 5: Basic SEO Tips for a Newly Launched Blog - Beginners Guide

Part 6: Making Money with your New Blog - Monetizing Basics

Google AdSense

Google AdSense is perhaps the most widely known advertising network, so much so that a lot of people, especially new bloggers don't know of any others except Google AdSense. So quite naturally, it'll be the first thing they apply to. Agreeably, Google AdSense is a good starter for beginners, and every blogger should try it at one point or another. However, for earning real hard cash, you'll need to look into some other networks.

Google AdSense is mostly a CPC network. CPC stands for Cost Per Click, and means that you get a certain amount for every click you get on your ads. You can also employ CPM (Cost Per Impression) as an AdSense publisher. CPM gives you a certain amount on the completion of a set Impressions target (for example $0.1 for every 1000 Impressions or views on your ads).

Here are some articles that will help you get the most out of your Google AdSense ads.

• 6 Advanced AdSense Optimization tips for increased ad revenue


• Complete list of Google AdSense fatures


• Top tips for optimizing Google AdSense ads


• Protecting against bad click activity

BuySellAds

Google AdSense is good in as far as 'getting-the-wheel-turning' is concerned. But these days, almost every other website is getting approved by Google AdSense, which has driven the ad-space and  competition up, and the cost down. That's why you get so little revenue per click.

This is where BuySellAds comes in. BSA does not operate like Google AdSense. Instead, they are Direct Ads. There's a marketplace where you get listed once you pass the BSA criterion of having over 60,000 unique pageviews per month. Advertisers can then pick you from the list, and choose you for hosting their ads based on your niche. This is one of the reasons why you should have a clearly defined niche, because it'll then be easier for sponsors for your niche to find your blog and advertise with it. Once you get picked, you get paid for putting up an ad for a certain period of time. Simple, yet effective. BSA is one of the biggest source of income for many intermediate to professional bloggers out there.

Read these articles to get a better idea about BuySellAds

• How to find sponsors for your blog?


• How to update public stats in BuySellAds


• The Pros and Cons of Direct Ads


• Style BSA empty Ad spots with CSS

Affiliate Ads

Affiliate Ads are yet another form of advertising, and they are based on compensations/commissions. The idea is, you promote a product or a service, get people to actually buy it, and then you get a certain sum as a reward for 'referring' that buyer.

This concept is pretty widely used now. Companies need to grow, and for that, they need customers. They'll do anything to get customers, which is why most online products and services, and even some offline companies too offer rewards for referrals. If you do it right, affiliate marketing can become your single largest source of income.

We here at MBT often share discount coupons from HostGator with our readers. HostGator in this case is acting as the host company, and will reward anyone who can bring in customers for it. If you visit their homepage, you will see how you can even earn $2000+ in one month just from referrals!

Here are some posts that ought to help you out with Affiliate Marketing

• Why is Affiliate marketing better than Google AdSense?


• 7 Important Affiliate marketing tips


• Are affiliate ads better than direct ads?

Got questions? Please feel free to ask in the comments section below. And please, try to keep it relevant. Thank you :)

How To Add BTNT Responsive Slider Widget for Blogger Blog

Today I'm going to publish a Simple Responsive Slider for blogger blogs. As you may already noticed in the title that this a responsive sliderBut let me explain about it what is a responsive slider responsive slider is a slider widget which can adapt it's size to the resolution of the browser. It's easy to add and use. The main features of this slider is it's responsive, easy to use and the size of the script is just 1kb So, It's easy to load. :D
Read more �

11 Most Popular Female Bloggers of 2013!

Today when the biggest competitor of man out there in industry is woman, even the online earning medium too is equally availed by the powerful ladies who know how to cash their talent. It was once perceived that women lack in technical skills and it was somehow true too when the technical work was all limited to the real world, thanks to the online earning strategies, now the chances to make money online are equally available for both-man and woman.

When it comes to blogging, women are a sound contestant of the race and are generating good revenue with their blogs.

Being a female blogger myself, here are a few inspirational women who are known for their work. All data is latest for 2013 especially.  Have a look!

List of Most Popular Female Bloggers

1. Gina Trapani

Blog: www.lifehacker.com

Alexa Rank: 625

Niche: Self-improvement

The lady who has made it to the top 10 richest bloggers of the world is the owner of Life hacker. The site has always been an inspiration for me where the main focus is given to how actually one can improve his personality. Gina is an active social blogger and the founding editor of her blog. She earns about $110,000 a month with her blogging skills.

Impressive!

2) Rita McGrath

Blog: Harvard Business Review Blog Network

Alexa Rank: 4068

Niche: Marketing

  Rita started her blog in 1994 as a not-for-profit blog with an aim of improving the practice of management and its impact in the changing world. Although initially the blog focused on Hardvard University only, now the blog has turned into an organization where there are 30 employees, having offices in New York City, India and UK.

3) Ree Drummond

Blog:  The Pioneer Woman

Alexa Rank: 7,645

Niche: Food

When it comes to mixing some ingredients and making the best out of it, the Pioneer woman has no comparisons. Whether you are a housewife or a business woman, your interest in cooking is something most evident. Ree Drummond provides all what you might be looking for in food on her blog which is widely followed across the globe.

4) Heather & Jessica

Blog: Go Fug Yourself

Alexa Rank: 18,000

Niche: Fashion and Style

Heather & Jessica have been keeping an eagle�s eye on every move taken in the fashion industry to share it all with their readers. A good site to follow.

5) Jenny Lawson

Blog: The Bloggess

Alexa Rank: 28,433

Niche: Humor

If you are looking for some great fun to laugh on, you must visit Jenny�s blog. The blog contains every aspect of life, giving it a new touch, making it hilarious. The site has a relatively good traffic rank in the cities of Hartford and Washington (DC).

6) Julie, Janet, Francesca, & Sarah

Blog:  Remodelista

Alexa Rank: 31172

Niche: Design

If you are looking for a platform to learn more about interior designing and wish to give your home a new look; then this site will provide you some decent ideas to follow.

7) Sara K. Smith

Blog: Wonkette

Alexa Rank: 32,975

Niche: Politics

Women were never behind in the field of politics and Sara Smith has proved it through her work. Wonkette is a popular political site owned by this female blogger. The blog covers all the highlights and latest political affairs

8) Ariel Meadow Stallings

Blog:  Offbeat Bride

Alexa Rank: 50,404

Niche: Fashion

Offbeat Bride is most popular website for brides who dare to walk off the beaten aisle. The site is all about fashion, advice, photos, and more for couples who think differently about their weddings. The site is viewed by over 170,000 unique visitors a month and has over 1.2 million page views each month.

9) Martina Zavagno

Blog: Adverblog

Alexa Rank: 62,968

Niche: Marketing

Matrina is working as an insider in an integrated marketing firm and is more than willing to share all her knowledge with her readers through her blog.

10) Danielle LaPorte

Blog: White Hot Truth

Alexa Rank: 73,342

Niche: Branding

She�s positive, slightly spiritual, avant, and fully facing the possibility of every day, which is probably why so many people turn to her for guidance on how they can expand their brands, their campaigns, their work, and their minds!

11) Tamar Weinberg

Blog: Techipedia

Alexa Rank: 87,000

Niche: Social Media

The lady whom we know as a Community & Marketing Manager at Mashable, Tamar has been all up in social interactions for 15 years. Although her personal blog needs more than what she is contributing at mashable, it is likely to expect techpedia one of the biggest rivals of mashable in the coming months.

So you see, women can make it all possible no matter which ever field you pick to compare the capabilities of a man with a woman. One thing that is common in all of these women is their consistency and high spirit.

Hope that you enjoyed reading about the magnificent ladies of the blogging world,

Wishes