Mashable like Share Buttons using Socialite and Sharrre

Mashable share buttons
Mashable-like Share Buttons Widget. This widget mimics the design and functionality of the social media buttons of Mashable.com . It uses Sharrre jQuery plugin for getting the counts for various social Networks and Socialite for asynchronously loading the buttons. The Sharrre plugin has been modified a bit to return values inside a data- attribute . Also unlike Mashable , a single hover event triggers all the buttons to be loaded so that the user doesn't have to hover over each button to make them load.
[click to continue reading]


20 Great Resources for Blogger Users

20 great resources for blogger users
If you just getting started with Blogger platform , these are some great blogs to include in your reading list. Each one of them is full of unique tutorials and pro tips that can keep you hooked for days together. Every blog in the list has a different focus , with some focussing on Tips and Tricks while other writing about Widget Creation and Tutorials. Nonetheless each resource is full of quality stuff that will help you with various aspects Blogger platform
[click to continue reading]


Random Post Widget for Blogger

Random Post Widget for Blogger blogs. A simple way to display arbitrary posts from your blog's archives. This widget comes with loads of customizable options which can be easily configured using the Widget Generator found later. This is inspired from Aneesh Joseph's Random Post Gadget using the Blogger API. That gadget failed unexpectedly sometimes due very large iFrame URLs and the browser's incapability to render them. So I tweaked and converted it into a purely json based widget with no chance of that kind of failure occurring

Demo

Note : There is some problem with GoogleCode as of now which might have rendered the widget useless. To solve this problem , Open up the HTML/JavaScript widget and replace the following line
[click to continue reading]


Lazy Loading Floating Share Bar Widget for Blogger

Lazy Loading Floating share bar Presenting the Lazy Loading Floating Social Sharing Bar Widget for Blogger. It provides easy sharing options to your readers without the disadvantage of slow page load times attached with these buttons. The widget uses Socialite to asynchronously load all the scripts and styles related to the buttons as and when the user hovers over the widget. The widget comes in mainly two versions , one with small buttons and the other with large buttons
[click to continue reading]


Lazy Loading Social Share Buttons in Blogger using Socialite

Every Social Network's share buttons effect page load speed and size badly. Asynchronously loading the resources is one way to get around this problem. The lazy loading buttons I shared previously had a problem which only allowed single instance per page. Socialite addresses that issue and is much more versatile than the previous script. It has all the awesome features and still manages to keep its size under 5KB. Lets get started and see how to integrate it into your Blogger blog
[click to continue reading]


Installing IntenseDebate Comments in Blogger

Intense Debate for BloggerIntenseDebate is feature-rich comment system which can be used in place of the default Blogger commenting system. The Blogger's commenting system is improving by the day with features like Threaded Comments being introduced but still it lacks some features that are inherent in many other commenting systems available across the net. In this tutorial we will seeing how to install Intense Debate on your blog and then some options that can be customized. Also we will be seeing how to enable IntenseDebate Comments on the Mobile Version of the blog
[click to continue reading]

Five CSS3 Breadcrumb Designs

breadcrumb designs showcaseBreadcrumbs are an alternative navigation. Not only do they act as a visual aid to inform the reader about their position in the blog's hierarchy but also give a more structured feel. The previous post was about how to integrate Breadcrumbs into Blogger and this one is a showcase of 5 designs which you can use in place of the default design provided before. All of these designs use CSS3 extensively with no use of images anywhere. Each of them is beautifully styled and should integrate well with your blog's current design.
[click to continue reading]

Breadcrumbs for Blogger

breadcrumbs bloggerBreadcrumbs are navigational elements that are used to display the depth at which a user currently is in a website. Normally they are present near the top preferably just above post heading or the main heading of a page. In Blogger there are no real sub-directories for which you can show a hierarchical path so we will be using Labels as workaround. We will also be discussing how to display single or multiple Labels in Breadcrumbs and how you make them appear in Google Search Results using Microdata specification

[click to continue reading]

Blogger Label Widget Style #3 and #4

Tag Cloud design
Tag Clouds are used to display all the categories or labels present in a blog. The inherent design of this widget in Blogger is very minimal and has a lot of space for creativity. In this post we will be showcasing two Label Widget designs which you can easily integrate within your blog. Both these use :after and :before selectors to manipulate the tag's design at the edges. Also CSS3 Gradients and Box-Shadow properties are also used to give it more sophisticated and peppy look . Lets get started then
[click to continue reading]