Blogging Ethics

MBT Tube


Showing posts with label Blogger Widgets and plugins. Show all posts
Showing posts with label Blogger Widgets and plugins. Show all posts

May 23, 2014

Fancy Ribbon Backgrounds For Blogger Sidebars!

12 Comments so far

Ribbon backgrounds with CSS3

Looking for a cool Design Change for your blog sidebar's Headlines instead of that dull plain text headlines? Today we will learn an interesting way of customizing the sidebar Headline Backgrounds in BlogSpot templates. You have seen Photoshop Graphic designs in Ribbon, Canopy or Curtain Style but the problem with them is that you need to have good designing skills to in order to create them further they also slow down the load time of your webpage. Therefore we are bringing forward the simplest solution by designing Ribbon style backgrounds with the help of pure CSS3 rules without using a single image! The method described below can be used to create ribbon backgrounds in any platform, may it be wordpress or Blogger. All you need to do is add up some CSS styles. We are sure this will add an extra ordinary look and feel to your online diaries! The Demo can be seen live on our blog sidebar. Its time to get into your blogger factory and be creative. Lets get started!

May 21, 2014

Most Commented Posts Widget for Blogger with Comment bubbles!

7 Comments so far

most commented widget for bloggerMost of you requested how we created the Most commented widget that shows the list of Top10 most popular posts sorted by comment bubbles. You can see this widget on our sidebar under the heading "Most Discussed". What we did here was using existing script from Yahoo! Pipes that uses json to parse and display each post with highest number of comments posted on it. Using CSS3 pseudo properties, we then styled the comment count with comment bubbles. This widget is simply a copy-paste tool that can be installed within seconds. Lets add this dynamic and fast loading widget to your blogger blogs!

January 21, 2014

17 Best 'Label' and 'Feed' Search Techniques in Blogger

24 Comments so far

search techniques in bloggerToday we will discuss various interesting ways of doing effective search in BlogSpot blogs. You will learn how to do search by category, by query or even doing effective search inside feeds. You will also learn how to run a query for searching posts with multiple labels and you will discover how to search for a particular keyword inside posts tagged under a specific label using its Feed data. We will also learn how to sort search results by Date and index count. There is too much learning today!
In wordpress we call labels as Categories and sub categories as Tags but in blogger we are limited only to Categories which are termed as Labels.

December 31, 2013

"Happy New Year" jQuery Popup with CountDown Timer & Cookies!

25 Comments so far

New Year Popup with counterHappy New Year 2014 our beloved readers! How can I forget wishing my family a splendid new year? :D Today marks the sixth consecutive year of serving you all since 2008! That is indeed a long journey for a school going boy to a university graduate and the credit goes to this cute little family that I have online. We wish you all a new year full of abundant new zeal and joy, a year full of honest commitments and a year full of pleasant surprises. May you all have the best in life and I sincerely wish you all the Holy blessings that I wish for myself. You guys are the best! In order to dress up your blogs with beautiful near year greetings, we crafted a new year version of the Christmas jQuery popup we published last week. And guest what? It has the same unique 4 features that not even a premium popup would have! You got us. It is a highly advanced light weight jQuery popup that comes with a default count down or countup timer, comes with 3 animations, Falling snow flakes and most importantly it is fully controlled via HTML5 LocalStorage cookies. So lets buzz up our blogspot blogs with something worth trying out!

December 30, 2013

Show Next & Previous Post Titles in Blogger with jQuery Navigation

119 Comments so far

jquery pager navigation in bloggerYou can see that we have replaced Older/Newer Pagination buttons with Post titles. This trick is not a new one and already many developers proposed different solutions using JavaScript or using jQuery. We will also use jQuery but in a more neater and optimized fashion using jquery to fetch URL parameters instead of running long js queries. Blogger blogs are neither optimized nor structured in a user friendly manner. Same applies to default wordpress themes. The pagination buttons make no sense when placed at the bottom of comments container. Anything that provides usability to readers should be placed straight in front of eyes and not pushed down to the page where one would rarely scroll. After checking our analytics stats, I found that Next/Previous buttons placed just at the bottom of post body generates more pageviews compared to placing them down below comments section. They become even more useful if instead of showing just buttons pointing to succeeding or preceding posts, show your readers the blog post titles. We will learn today how to create this professional looking pager navigation in blogspot blogs.

December 23, 2013

Christmas Popups with Falling snow & Countdown Timer!

16 Comments so far

Free Christmas popupsTo keep our tradition alive, we are releasing our premium set of jQuery Popups as Holiday gift to all MBT readers. This Popup plugin is specially designed and developed with Five Unique Features! It is completely customizable, has a countdown timer that can be set to any date and time, has 3 different animations, 2 attractive Christmas Background themes and most importantly it is the first popup plugin of its kind introduced for blogger blogs that comes with HTML5 sessionStorage functionality to set cookie in order to control the popup display. You can decide whether to show the popup only once to your visitors or on every new visit. It is perfectly compatible with all major browsers. Interesting part of it is that the scripts are stored on our servers so no headache  on your part thus making the installation extremely easy. You can add it easily to your blogspot or wordpress blogs or on any webpage you may have. Lets view a Live demo first on Blogger and then on two simple webpages.

December 22, 2013

Automatically Open all External Links in a New Window in Blogger!

24 Comments so far

automatically open links in new windowJust today a client requested us that he wish to open all his external links in new window or new tab when clicked and he is not willing to manually do it for each post by adding target="_blank" inside each hyperlink. We wrote down a simple jQuery script that will check all hyperlinks inside your blog pages and will only add the target="_blank"  attribute to links which are external links. It wont  put any effect to internal links of the blog. The script will only detect external hostnames and the moment it finds one, it will insert into the html a target attribute that tells the browser to open the link in a new window. Thus preventing your blog readers from leaving your blog and also helps in increasing your overall pageviews and bounce rate. We thought we shall also share the script with all of you. 

December 20, 2013

How to Use LocalStorage in Blogger to Set Cookies?

13 Comments so far

how to create cookies in blogger?In our last post we learned the difference between a web cookie and HTML5 Local storage. Now when you are cleared what are the benefits of using HTML5 Local and Session storage methods to store data on a client's browser, lets now learn how to implement these functions to any HTML DOM in Blogspot blogs. This method is not limited to Blogger but can also be used in exact same procedure in Wordpress blogs. Lets learn this interesting new technology with this extremely easy first time guide.

July 20, 2013

Show Random Headlines Inside Sticky Floating Bar

25 Comments so far

Floating sticky Bars
Ever wondered to create a Sticky Floating Bar to show Random headlines on your blog? We recently developed a small plugin in wordpress which we have implemented on our third blog hosted on wordpress and also on BlogSpot blogs of our existing clients. We introduced several versions of sticky bars for blogger blogs in 2012 but this one adds an extra functionality. It will show a random post on each page refresh! It uses Feedburner JavaScript snippet to fetch recent headlines from your Feeds and then displays a title randomly when user refreshes the webpage or navigates between pages. Also contains a toggle button to show and hide the headlines. You can customize it easily and change its location to top of page or at footer. Works best with fluid and responsive designs. The analytics for our newly launched blog has shown an amazing 30% increase in Pageviews just after we installed this plugin. I have developed both static and dynamic versions of it for both Blogger and Wordpress Genesis Framework.

July 14, 2013

50 Handpicked Blogger Plugins and Widgets!

69 Comments so far

50 popular blogger widgetsBlogger is emerging as a powerful opponent to rest of the CMS platforms like wordpress and all. MBT has always created and promoted widgets and plugins for sites on blogger. So as a regular MBT reader myself, I have selected some of the best widgets developed so far for BlogSpot blogs, which I believe every blog must have. We are presenting a collection of 50 handpicked most trending plugins and widgets exclusively for blogger. I bet You can't afford to miss this post! ;)

June 5, 2013

Fancy Blogger Threaded Comments with Comment Counter!

93 Comments so far

blogger threaded commentsBlogger threaded comments are everywhere now and its time you redesign the style and format of your comments. A good blog commenting system helps to build a strong readership and help readers to engage more into discussion. Since 2009 we have been introducing various ways of customizing comment forms on blogger blogs. We introduced Facebook Comments Plugin, Customized BlogSpot comment Forms, then Blogger nested comments, Google+ comments and now finally a more appealing and advance version of BlogSpot threaded comments to make your blog stand out. You can see a practical demo of this feature on our blog. You will find a beautiful header with comment policy, total comment count and anchor link to comment form. The nested comments and parent comments are both styled differently. Author comments are styled using a  ribbon that hangs on top-right corner. 

June 2, 2013

Create Accordion Widget in Blogger

45 Comments so far

Accordion Widget for bloggerUpdate: The Script  has been updated and it will work just perfect!

It is really important to organize your content and make certain sections of your blog to appear only when the visitor is interested in it. We are using an Accordion Widget that you can find at the footer of our blog in order to display a list of Popular Series. Its an effective way for us to display long list of links in a neat and clean way. I created this widget using  JQuery and the Easing Plugin. This Accordion widget is a modified version of the Fresh content Accordion released by Martin Angelov in 2009. We customized its stylesheet and edit some parts of the scripts to make it compatible with blogger blogs. It has a great Expand/Collapse Feature. This widget collapses and hides all content inside it by default but when user clicks it, the content is displayed by expanding that tab section. I am sure you would love to add this Fancy Accordion widget to your BlogSpot blogs.

May 31, 2013

Popular Posts With Automatic Numbering - Bubbles!

47 Comments so far

Popular Posts Widget

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.

May 26, 2013

Create a Custom Contact Form For Blogger - Part 2

72 Comments so far

Custom Blogger Contact FormIn 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:

May 25, 2013

Customize Blogger Contact Form! Part 1

46 Comments so far

Blogger Contact Forms

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:

May 23, 2013

Automatic Numbering for Blogger Threaded Comments

21 Comments so far

Numbering blogger threaded commentsToday'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

May 21, 2013

Download counter : A Plugin for blogs!

36 Comments so far

Download counter for blogsThis 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!

February 26, 2013

Add AdSense right After <!--More--> Tag

121 Comments so far

Adsense positioning in bloggerThis is a great tutorial which will multiply your current click through rate and add a new boom to your over all Adsense earning. With a big repository of plugins for Wordpress blogs like Quick Adsense, WP users never need to worry while adding Adsense to any part of the blog they wish but in blogger we lack plugins that could do the job automatically. Therefore this week my main focus lies in developing more of such plugins that could provide you great front end experience. Thanks our developer Ahmed Nasir the script developed this time will automatically insert your AdSense Ad right after the opening paragraph (Post summary) or the read more button(Jump Break). The read more link is distinguished by the HTML tag "<!--more-->" , we will use a simple Jquery code to tell the browser to append an Ad zone with a unique div ID, right before the more tag. In  browsers where JavaScript is disabled the Ad zone will instead display at the end of post. You can see the demo on our blog, right after reading this line...
(You will see below a 468X60 Adsense for content Ad).
Update: I have disabled the Ad display for browsers where JavaScript is disabled. 

February 24, 2013

Installing Zemanta on Blogger - A New Way to create Blog Posts!

59 Comments so far


Creating quality content is a major concern for bloggers. It is one thing to establish a good-looking and well-optimized website which is SEO friendly, and quite another to update it with fresh, regular content which is of high quality. No matter how well a site is optimized for search engines, content still remains the king, and Google regards content more highly, since it is oriented towards the users more. Creating quality content, and adding value to it isn't an easy job. But don't worry! People who use Google Blogger now have access to an amazing tool, Zemanta, which will help them create quality content, and spice it up with images, links, and more!

UPDATE: If you are not well versed with SEO then we don't recommend that you may use this tool. Please read the following tutorial to know why:

February 20, 2013

Display Post Views Count in Blogger - New!

140 Comments so far

blogger postviews pluginYes you heard it right, all BlogSpot blogs will now be able to display a dynamic count for individual pageviews. We can now easily create this  post view counter without worrying about servers or server code. With a free service like Firebase you can now create dynamic and data-driven plugins for blogger without worrying about backend development. Firebase was launched in April 2012 and since then it had been the hub for developers. Amazingly this free plan gives you 10GB Free bandwidth and 5GB Free storage. Which in our case is more than required! We had been lucky to utilize this free service for blogger platform and create some amazing scripts with the help of our developer Ahmed Nasir. Today's tutorial will help you to install a dynamic script that will automatically increment its initial count value when a visitor views your blog posts. The counter data will be stored on a free database provided by Firebase. Lets first see a demo!

Widgets + Web Designing


SEO Mashup