Blog Archive links Collapsed by Default Hack

blog archive widget hack

If you are using the Hierarchy style for your Blog Archive widget then you must have faced the problem of auto expansion of drop-down list of a particular month which is currently in the calendar or to which the opened post belongs. This simple hack solves that problem by making all the nodes in the hierarchy to be collapsed by default(As seen in the above picture ). This can be simply added by the One Click Installer or manually.

Demo


Prerequisites for this to Work
Before you apply this remember that you have to have a Blog Archive Widget present and the Style has to be set to Hierarchy (as shown in picture below )

blog archive widget config blogger


Applying this to your Blog

To add using One Click Installer Method



Or just add the following Code in your Blog (preferably before the </body> tag in the Edit HTML of the Template tab )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
if ( $('.archivedate').hasClass('expanded') )
{
$('.archivedate').removeClass('expanded');
$('.archivedate').addClass('collapsed');
}
</script>


What this code does
It firstly checks if a element having class name "archivedate" also has a class "expanded" present in it. If this turns out to be true then it removes the "expanded" class and adds a class named "collapsed" .

If you face any problem implementing it in your blog then feel free to ask via comments

Auto Pop Email Subscription Widget for Blogger

Auto Pop Email subscription widget for Blogger blogs. A easy way to get more email subscribers. This widget subtly presents a popup for subscribing for Email updates just after a specific trigger element is scrolled through. This trigger element can be changed as per your requirements. By default it is set to the comment section. So when you scroll past the comment section of your blog it will popout from the top. You can add this widget into your blog via the widget generator or manually

Demo



Widget Generator





Note: Currently this will not work . For updates check Blogger Forum

Or you can use the manual method


For that just copy the code from below
<style type='text/css'> /*<![CDATA[*/ #slider{     position:fixed;    top:-125px;    right:0px;    height:120px; width:100%;    background-color:#fff;    opacity:0.98;    -moz-box-shadow:    0px 0px 8px #ccc;    -webkit-box-shadow: 0px 0px 8px #ccc;    box-shadow:         0px 0px 8px #ccc;   }   .syb_footer{margin-top:-10px;font-size:0.8em;} #slider #slider-shell{    width:800px; height:110px;margin:10px auto;    position:relative;   }   #slider #slider-tab{position:absolute; bottom:0px; right:0px;    width:400px; text-align:right; padding-right:10px;    cursor:pointer; font-size:0.6em;   } #syb_embed_signup{ background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }#syb_embed_signup form {display:block; text-align:left; padding:10px 0 10px 3%}#syb_embed_signup h2 {font-weight:bold; padding:0; margin:15px 0; font-size:1.4em;}#syb_embed_signup input {border:1px solid #999; -webkit-appearance:none;}#syb_embed_signup input[type=checkbox]{-webkit-appearance:checkbox;}#syb_embed_signup input[type=radio]{-webkit-appearance:radio;}#syb_embed_signup input:focus {border-color:#333;}#syb_embed_signup .button {clear:both; background-color: #aaa; border: 0 none; border-radius:4px; color: #FFFFFF; cursor: pointer; display: inline-block;font-size:15px; font-weight: bold; height: 32px; line-height: 32px; margin: 0 5px 10px 0; padding:0; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: auto;}#syb_embed_signup .button:hover {background-color:#777;}#syb_embed_signup .small-meta {font-size: 11px;}#syb_embed_signup .nowrap {white-space:nowrap;}     #syb_embed_signup .clear {clear:none; display:inline;}#syb_embed_signup label {display:block; font-size:16px; padding-bottom:10px; font-weight:bold;}#syb_embed_signup input.email {padding:8px 0; margin:0 4% 10px 0; text-indent:5px; width:58%; min-width:130px;}#syb_embed_signup input.button {width:35%; margin:0 0 10px 0; min-width:90px; }  /*]]>*/ </style><script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script><div id='slider' style='top: -108px;'><div id='slider-shell'><div id='syb_embed_signup'><form action='http://feedburner.google.com/fb/a/mailverify?uri=' id='syb-embedded-subscribe-form' method='post' onsubmit='window.open(&quot;http://feedburner.google.com/fb/a/mailverify?uri=&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); return true' target='popupwindow'><label for='syb-EMAIL'>Get my next article in your inbox!</label><input class='email' id='syb-EMAIL' name='email' placeholder='Email Address' required='required' type='email' /><div class='clear'><input class='button' id='syb-embedded-subscribe' style='background-color: #0066cc;' type='submit' /></div></form><div class='syb_footer'><small><a id='syb_email_link' target='_blank' href='http://www.stylifyyourblog.com/2012/12/auto-pop-email-subscription-widget-for.html?utm_src=SYB_email' style='padding: 1px 0px 0px 19px;text-decoration:none;'><img src='http://img1.blogblog.com/img/blank.gif' alt='Email Subscription Widget for Blogger' style='border:none' /></a>Powered By <a href='http://www.stylifyyourblog.com/?utm_src=SYB_email' target='_blank' title='Blogger Widgets and Gadgets'>Stylify Widgets</a></small></div></div><div id='slider-tab'>Wait! I want to get email updates, bring that back...</div></div></div><script type='text/javascript'>$(document).ready(function(){function isScrolledDown(a){var b=$(window).scrollTop();var c=b+$(window).height();var d=$(a).offset().top;var e=d+$(a).height();return(e<=c)}function isScrolledUp(a){var b=$(window).scrollTop();var c=b+$(window).height();var d=$(a).offset().top;var e=d+$(a).height();return(d-200>=c)}function bringSliderOut(){$(f).animate({top:0},'fast');$('#slider-tab').text('hide this...')}function bringSliderIn(){$(f).animate({top:-108},'fast');$('#slider-tab').text('Wait! I want to get email updates, bring that back...')}var f=$('#slider');var g=$('#comments');var h=false;var i=false;$('#slider-tab').click(function(){if(!i){bringSliderOut();i=true}else{bringSliderIn();i=false}});$(window).scroll(function(){if(isScrolledUp(g)){if(h){bringSliderIn();h=false;i=false}}else if(isScrolledDown(g)){if(!h){bringSliderOut();i=true;h=true}}})});  </script>

Now just search for uri= and add your FeedBurner ID after that.

If you face any problems in implementing it , please feel free to ask via the comments

Thanks to Hartley Brody for the idea

This post is sponsored by PaceButler a service to sell your cell phone. Don't forget to check Pacebutler Review before opting for their services.

For Sponsored Post Opportunity Contact Me

How To Create a Timeless Blog

timelessNews stories and big headlines may attract attention to your blog quickly, but they go out of date quickly as well. On the other hand, the information contained in a "helpful tips" style blog lasts longer and is more likely to bring in timeless benefits to blog owners. Listed below are 4 helpful tips on how to create a timeless blog.



Avoid Mentioning Specific Brands or Versions

Of course, if you have a technology blog, this probably won't apply to you, but for all others, take care not to reference specific brands of products or specific versions of products. This advice applies most especially to technological gadgets. While you may feel tempted to review the latest version of the hottest gadget out on the market to date, rest assured that your reference will become outdated quickly, most likely as soon as the next version comes out. When visitors see your blog referencing outdated products, your content seems less relevant.

Avoid Referencing News Stories, Headlines, Political Figures or Celebrities

stack of newspaperAgain, these kinds of stories will bring visitors to your blog in an Internet stampede. Unfortunately, however, it works against you in the long run. You want to create content that's "evergreen" - always fresh - which won't go out of date within a few days, weeks or months. Before a presidential election, for example, news stories about the candidates draw an unprecedented amount of attention. A year and a half into the president's term, however, no one's going to be reading those stories. The same goes with celebrity news and other headline news stories. At the time the stories occur, everyone's scouring the Internet to find out what's going on. A month later, you'll be hearing the sound of crickets emanating from your blog because no one's reading stories that aren't relevant anymore.

Focus on Popular and Universal Themes

When you're coming up with "evergreen" content for your blog, think about popular and universal themes. Cultivate an understanding of what kind of information people always seems to be searching for. Some good timeless business-oriented themes include how to manage effectively and how to deal with stress in a positive way. People have talked about these ideas since the modern business environment came into existence, and it's likely they'll keep talking about them as long as businesses exist.

Give Advice that's Useful Regardless of Year or Season

adviceIf you want your blog to attract attention no matter what year or season it is, give advice that readers can use any time. Good examples for a home-oriented blog include effective ways to clean without chemicals and why pet owners should spay or neuter. While this information certainly would never get called cutting-edge, and it will take longer to attract readers than hot news stories, timeless information is much more likely to help you cultivate a readership and optimize your blog for SEO.

Conclusion

When creating content for your blog, resist the temptation to recycle the hottest stories on the web. Instead, work on making content that will continue to attract readers after the big news story of the week gets replaced with next week's headline. Timeless content works more effectively in the long run to build an audience and help your blog rank high with search engines.



If you would like to find out which host a site is using, you can use the WhoIsHostingThis search engine. Erik Gaandt is a freelance tech writer and SEO enthusiast. He understands the importance web hosting has on a sites search engine rank. He enjoys sharing his insights on various blogs.

The All new Google+ Followers Widget

Google+ Followers widget
Just a couple of hours ago Blogger launched the Google+ Follower widget. Build on the lines of the older Friend Connect Follower widget , it has a Follow button accompanied with the faces of your Google+ Followers. It is now available in the Add a Gadget menu and can be added to your blog with just a single click. The widget currently has no configurable options but this will surely change as future enchantments are made. This can be seen as another step in the direction of integrating Google+ with Blogger. Now lets see some of the other facts related to this widget



Before adding this widget you will have to connect your blog to Google+ if you haven't already done it

To connect your Google+ profile with Blogger

 1. To do that just go the Google+ tab in your Blog's dashboard and click the Upgrade to Google+ button

Upgrade to Google+


2. You will be presented a screen where you will have to tick the check-box and click the Switch Now button

connect with google+ blogger

3. Now you have a choice whether you want to add the blogs you contribute to the About section of your Google+ profile. Whatever you choose , either skip or add the blogs to your profile

add your blogs

4. This completes the integration of your Blogger account with Google+


To add the Google+ Follower widget

1. Go to the Layout tab

Blogger Layout tab


2. Click the Add a Gadget button ( preferable in the Sidebar )

3. Now select the Google+ Followers Widget and click the Save Button

Google+ Followers


4. Check your blog and you will see the widget in your sidebar now .

Hope this tutorial helped and don't forget to follow us on Google+ via the Google+ Follower widget present in the sidebar

Check more about this story on Blogger's official blog - Grow your audience with the Google+ followers gadget

6 Ways To Keep Your Blog Interesting

bored teenager
As you have created a blog for yourself and considering blogging, you are needed to ensure that you keep your blog interesting which will help you get more and more visitors preferably on-going visitors. In this post, I am to list down the 6 different ways to keep your blog interesting. Continue reading and figure out if your blog is good enough or not.






1. Identify The Purpose Of Your Blog

First and foremost step towards keeping your blog interesting is your primary objective behind creating your blog. It does not matter if your aim is to share valuable content or to generate traffic, once you are clear about the purpose of your objective, you need to keep moving forward and work hard to achieve success.

2. Your Blog’s Content

A blog happens to be interesting, when it is sharing worthy and useful information to its readers. In short, you; being the author of your blog will take your readers along. You need to make sure that you have unique and original content on your blog by covering exclusive topics.

3. Choosing A Topic

break through the clutter
Choosing a topic to write on is certainly a tough task as you need to ensure that the topic you choose is interesting and exclusive to your readers. Moreover, you can also try writing about the latest market and industry trends which are yet to be discovered by others. You can even allow guest posts on your blog, and bloggers will help you contribute to the content of your blog. Also, you can consider the older topics and trends and tailor them according to the recent times. This way your readers will get to read new and interesting information that has been made available on your blog.

4. Design

keys tools animated
While you are spending time to create unique and exclusive content for your blog, you should also spend some time choosing an exceptional design for your blog. it is imperative to avoid adding poor and clumsy designs which eventually leave your visitors searching for what they came for. You must incorporate such a design that prompt the visitors to check your site every now and then for latest updates as they liked the way you already presented your content on the blog. If you are using the WordPress platform, you can select and add several different themes that are available on the WordPress dashboard itself. Also, you can add premium and even free themes which are compatible with the latest WordPress version you are currently using for your blog.

5. Be Consistent

Keep posting on your blog frequently; and let your blog stay alive for your readers. Try to have a target which you must achieve per week. This way you will be able to engage more visitors on your blog.

6. Communicate!

You need to ensure that the content you post on your blog is useful in keeping the interest of your regular readers. Utilize the comment section of your blog to effectively communicate with them, engage your audience and share your ideas. Respond to all the comments that have been posted and do answer their queries if any asked.


Author Bio

Rahul GarewalThis guest post was written by Rahul Garewal, writer and researcher for Minerabatkoder.dk.

Polls in Blogger

microphone to voice your viewsGetting feedback from your readers is the best way to know their opinions and what better way of doing this than by using Polls. Polls make your blog look more interactive and  makes your reader feel as being part of a community. In Blogger there is a inbuilt Poll Gadget which comes with basic options. In this post we will also be discussing poll widgets from Polldaddy & Quipol and their features.






Blogger Poll Gadget 
Demo

To integrate the Blogger's own Polling widget you just have to go to the Layout tab and Click the Add a Gadget button . There select the Poll gadget and you will be presented with the following window



You are provided with the basic option like
- Ability to select the Closing date of your Poll
- Selecting whether users are allowed to mark multiple answers

PollDaddy  Demo
Polldaddy provides a lot of options and it allows you to create Surveys , Quizzes and Rating widgets as well.
For getting started with creating a Poll , just go to Polldaddy.com and register if you haven't already . Now in your Dashboard click the Create a new button and select Poll .

Here the options for customization are many as compared to Blogger gadget , Here are some

- Adding MP3 , pictures accompanying your question
- 6 Polling gadget designs to choose from
- Different options to display results
- Ability to dedicated comment threads
- Repeat voters options

After completing the setup just click the Create Poll button and you will be presented with a code that you can simple copy in a HTML/JavaScript gadget.



Quipol Demo
Just a year old but has taken Polling industry by storm . Its restrictive in a sense because it only allows positive or negative feedback for a question but its design is just mind-blowing and makes make for it.

To create a poll , Firstly signup for Quipol here and then create a new poll . You will be presented with the following screen


Once complete , click the Create this Quipol button and then you will be given a code to add to your blog . Or if you like you can direct your reader to the Quipol-hosted poll

Some of its features are
- A dedicated comment thread for each poll
- Adding images or videos ( Youtube and Vimeo ) with question
- A visually appealing result pie chart
- Facebook/Twitter authentication

A word to round-offs all the services
Feature-Rich - Polldaddy
Awesome Design - Quipol
Native - Blogger's own

These are the polling widgets that I found useful and have shared with you . Feel free to voice your opinion about which you like the most out of them

Twitter Vs Other Online Advertising Platforms

Twitter is one of the popular social networking websites with more than 140 million users and 340 million tweets every day. Being very popular in online world, it’s used by many companies as platform through Promoted Tweets, Promoted Trends and Promoted Accounts. The numbers of its users are growing and they keep increasing every minute of the day.


Twitter indeed as a part of social media has emerged as one of the most popular means of free ads advertising for people who establish contacts and use these social channels to promote their products with their lists of followers/friends. This channel also offers an opportunity to stay in touch with customers and build your clientele.

Promoted Tweets

It helps to advertise and communicate with users who are not currently following your account. They are generally shown in timelines rather than amongst contents. They are usually displayed in search on Hootsuite and Twitter which can help reach your target audience when they search for specific keywords.


Promoted Trends

Promoted Trends are displayed on top of trending topics list that contain keywords along with attached hash tags. They help in spotting other users that are interested in same topic. While user selects the hash tag to find out conversation associated with it, Promoted Trends will be displayed above the conversation.

Promoted Accounts

Businesses who want to generate leads through Twitter followers can make use of promoted accounts which will be displayed in “who to follow” section on the homepage of users. Twitter will analyze your account and choose followers based on similarity after which it placed the targeted ads for promoted accounts.

Twitter Vs. Facebook Advertising

In both Twitter and Facebook, target audience is end users, followers, fans and customers. Twitter has 140 million users while Facebook has around 800 million users. The age group of Twitter users falls under 26-44 while that of Facebook is 18-34. In terms of pricing, promoted Tweets in Twitter uses a Cost per Engagement model (CPE) where minimum CPE is 0.10 USD while suggested CPE is 0.50 USD. The Promoted Accounts follow a CPF (Cost per Follower) model and minimum cost is 0.50 USD for a follower and can go up to 2 USD for suggested CPF. Facebook Ads are mostly simple text-based and image ads following cost per click model. Facebook has its own tracking tools but they are not as sophisticated as that of Twitter and cost-per-click is usually around 0.85 USD.

Twitter Vs. LinkedIn Advertising:

LinkedIn is the social network platform especially meant for professionals and business people and has more than ninety million members. They provide various advertising options with affordability and visibility which includes self-service ads known as direct ads with multiple display formats to match your needs. When compared to twitter which is meant for all categories of people, LinkedIn is a very good advertising platform if you are targeting business people and professionals. You can target users based on Company, Industry, Job function and role etc. You can also target business travelers, subject matter experts, Unemployed professionals etc. All these options make LinkedIn an effective platform for B2B advertising.

Twitter Vs. Blog Advertising:

Blogs are ways to express your views to public and it can also be a good platform for advertising. Blogs targeted on specific niche can be used to promote products associated with that category. There are blog advertising networks which help you display ads on blogs with topic related to product you are promoting online.

Final Verdict: Twitter is considered to be very effective platform for online advertising owing to robust tracking tools, easier access for all users and cheaper pricing compared to other platforms. But choosing the platform depends on target audience and niche which you are focusing.

Stylify Minimal Responsive Blogger Template



This is a fully responsive and highly optimized template for every kind of Blogger user. It is centered around the concept of Minimalism hence all the unnecessary stuff like Blogger's Default CSS as well as JavaScript have been shunned. It has lightening fast load times and completely complies with Search Engines heading and title standards. This template requires that you have a little bit of knowledge about HTML/CSS so as to do some customization , rest assured that I will be there to help you out in the comments if you face any unsolvable problem.


Download Demo

Features

- Responsive
- Search Engine Optimized
- Lightening fast Page Load Time (98% in Google Page Speed)
- Exclusive Threaded Comment Design
- CSS3 powered Tilted Header
- Supports All Major browsers
- Uses CSS Sprites for less HTML Requests
- Auto Read More Hack
- Pagination option
- Automatic Related Posts under each Post
- CSS3 powered ReadMore Button and Labels
- Electrolize Web Font
- Attractive Share Buttons and Subscribe options
- Author Bio Box
- Ribbon styled Labels on Post Pages
- Print Friendly
- Captivating Post Title design
- Near W3C Valid
- Four Column Footer
- Widget Ready Sidebar with Stacked effect
- Simple Menu and Social Media Buttons
- Automatic Meta Descriptions
- Stacked Paper feel to Post Body
- Appealing Custom 404 Design
- Simple Search Box


Installing the template

- UnZip the Download Pacakge
- Now Go to Blogger Dashboard > Template > Backup/Restore and click Choose File
- Select the XML file from the Unzipped directory
- Then Press Upload and the template is installed


Configuring the various features

- Firstly After Installing the Template Go to Layout and Edit the Blog Posts Widget. Now untick these options and save.

 

- In the Download package copy all the content of the Widgets.txt file.
  Now create a New HTML/JavaScript widget and place it under the Header widget (Don't forget to press the Save Arrangements button) See image below




In this widget , paste the contents of Widgets.txt file and Save. Now the Search Box , Menu and Social Media Buttons are installed. You will have to manually change the URLs in the Menu as well the Social Media Buttons. The most important URL to change is the action URL of Search box . Make it something like http://www.yourblogURL.blogspot.com/search

- To configure the CSS3 Labels , go to Layout and Edit the Label widget , there Tick Cloud as Display Option and Uncheck the Show number of posts per label


- Now go to the Template > Edit HTML option , Click Proceed and then Tick Expand Widget Templates
Here Search for "Short" . Now remove this whole line and write a small bio about yourself that will be visible under each post. Replace the URL of the Image as well if you like

- Now search for "Stay Connected With Us" , now here change all your Social media URLs accordingly

- Now Search for "home_page" , this will show all the settings related to the Pagination option (Check here for explanation  )

- Now Search for "Your Tag Line" and replace it with your blog's mission or description

- Now Search for "thumbnail_mode" , this will display all the settings related to the Auto Read More Hack

Happy Blogging !

One piece of warning , Other than the Popular Post and Label Widget all the widgets like Blog Archive ,etc don't work . This is because the Deafult JS and CSS files of Blogger have been removed. On the Brighter side Your blog will open like a express train (given that you don't overcrowd it with widgets)

Screenshot


Download Demo


If you liked the template consider donating to us :)

Five Tools That Can Take Your Efforts to the Next Level

tools to make blogging useful
Some blog for fun, others do it for a living. No matter what side of the fence you’re on, there are certain things you must do if you want your blog to grow and start delivering results for the time you put into it. There are also tools available to make your path to success an easier road to travel.


Here are five tools that can be used to take any blog to the next level.



1. Googe Analytics

How are readers to responding to your blog efforts? There is activity to be measured beyond comments and a tool like Google Analytics can help you identify it. With Google Analytics, you can find out where your traffic is coming from, how they’re interacting with your posts, and much more. This tool is easy to implement and best of all, totally free to use. There are many tracking tools out there, but Google Analytics holds it own against the best options on both the free and paid market.

2. Facebook
facebook plate
Say what you want, but the power of Facebook cannot be denied. This social network is used by so more than a billion people, that you are almost certain to have an audience just waiting to be engaged. What makes Facebook so powerful outside of sheer size and reach is all the great features it gives you to work with. For example, you can set up a regular profile or a brand page. You can include links to your blog posts and if they garner interest, fans can like them or share them with friends. Integrating Facebook into the mix is all about creating more exposure for your content.

Although it has a set of unique qualities to call its own, you could easily place Twitter in the place of Facebook. Both tools offer unlimited potential for improving your blogging efforts.

3. Google Alerts

Here’s another of several Google tools that can help take your blog to that next level. Google Alerts allows you to set up email notifications that are delivered to your inbox based on your chosen keywords and phrases. This is perhaps the most versatile tool on the list and thus, one that can be used in a wide variety of ways. Following are just some of the many ways bloggers can use Google Alerts to power their efforts:

- Stay on top of the latest breaking news in their niche

- Generate ideas for fresh topics and content

- Identify similar blogs and websites

- Expand their individual network

- Watch competitors

- Research keywords

- Discover new sites to include in their link building strategy

- Monitor their brand name and reputation

Like many Google products, this one is absolutely free to use. If there is a must-have blogging tool on the list, Google Alerts would be it.

4. CloudFlare

cloudflare logo

If you have a blog that is making noise in the way of a lot of traffic and comments, your content could be at the mercy of unscrupulous thieves who want to steal and use it for themselves. This is why a tool like CloudFlare comes in handy. CloudFlare is a cloud-based platform that can protect your blog from content crooks, hackers, spammers, and a host of other threats. It also offers features that can help you improve performance and understand more about your traffic.

CloudFlare offers three premium packages, but many bloggers will find that its free plan provides adequate protection for their needs.

5. Creative Commons

Every blogger needs a tool like Creative Commons in their arsenal. Creative Commons gives you convenient access to a huge selection of images that can be used for commercial purposes and published on your blog. Of course you can pretty much nab images from anywhere, but you are taking a huge gamble with anything you have not been given permission to use. What makes Creative Commons so valuable is the fact that it allows you to retrieve content from other popular image libraries, including Flickr, Fotopedia, and Google Images

Don’t Go to Work Without Your Tools

Every blogger needs a set of tools they can rely on to simplify what can often be a very grueling process. The internet makes these applications and services easily accessible, so there really is no excuse for going to work without them. You have an endless pool to choose from, but these are a few you can never go wrong with.

What’s your favorite blogging tool these days? Don’t be a Scrooge. Share with the group!

Author Bio

Francis SantosThis is a Guest Post by Francis Santos is a writer for Benchmark Email, a best practices email marketing company .

Changes and Issues with Blogger

changes issuesIn the Past 39 Days there has been no new post and I sincerely apologize for that . Since I have started using Blogger again , I have come across some changes and issues that I would like to share with everybody.








1. Old Interface Shelved
This happened around 20th September. Old Interface has now become fully inaccessible even if you are using direct links to it. This is what is shown instead


no more old ui
This change has been well planned as the New Edit HTML Editor ( which came under the most fire from the users ) is now pretty stable and allows editing at par with the old one. This force upgrade also came in wake of the one-UI-all-across-policy of Google so that every Google Product has a kind of uniformity.

If you are Old Interface fan like me then there are still some glimpse left of it here and there. Like when Uploading Images in the HTML mode of the Post Editor. After you press the Upload buttons , the confirmation screen has Old Interface styles (Screenshot below)

old interface screenshot

2. Extra Control over Link Structure
The ability to change the Link Structure has been around for a couple of months in the Draft Blogger interface but it has been rolled out in the Main interface as well. So now you can easily reword your links and they no longer depend on your post headings alone.

link structure


A more advanced version of this feature would be ability to omit the year and month from the structure as well. But none the less its a step in the right direction

3. Mobile Custom Redirect Issue
This issue was experienced while using a mobile device (This requires that your User Agent is a mobile device like a Android , iPhone , Symbian or any other similar device). Also you must have a Custom Redirect setup to test this. When a user clicks on a custom Redirect URL , they are redirected to the Custom 404 Error Page. This happens because to serve the mobile version of your blog , Blogger attaches a query parameter ( ?m=1 ) which gets directly appended with the custom redirect and  Blogger thinks of its as a URL itself

For example check this URL - http://www.stylifyyourblog.com/contact?m=1 ( I have a redirect in place which redirects /contact to /p/contact.html )


4. Comment Avatar Image and JS File Size and Issue
With the advent of the New Threaded Commenting System in Blogger , it became clear that Blogger comments were second to none when comparing them with third party services like Disqus or IntenseDebate . But while observing some things in the threaded comment system closely , I came across some shocking facts.

Firstly the Avatar Image size of users who had integrated their account with Google+ was of the order of 512X512 px . This led to a lot waste in the bandwidth from Blogger side as well as it slowed down the loading of pages. In extreme cases a single image was wasting 200KB+ . I filed a request with the Blogger Dev Group and got a positive response but no action has been taken till yet. You can see the thread here

Secondly the size of the JS file included inline as well as externally to make to Threaded Comment system work is a whooping 390KB+ as compared to the 15KB file that was included for the old comment system. After discovering this fact I am seriously considering to shift to a third party comment system which are way lighter.


5. Naked Domain Redirect Issue
In the past 2-3 days there was been a widespread issue across Blogger where the non-www version of the Blog has stopped redirecting to the www version of the blog . Blogger team has released a step to step guide to solve this issue . You can check it here

Stay tuned as I will be resuming my daily posting of helpful tutorials and tips

If you have experienced any other change or issues while using Blogger , feel free to share them in the comments

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.



Download Demo


HTML
<ul class="social" >
<li>
<a class="social-stub twitter socialite twitter-share" data-shares="..." data-via="YourHandle" data-text="Google" data-url="http://www.google.com" data-count="horizontal" rel="nofollow" target="_blank">&nbsp;&nbsp;Tweet</a>
</li>
<li>
<a class="social-stub googlepluss socialite googleplus-one" data-size="medium" data-href="http://www.google.com/" data-url="http://www.google.com/" data-shares="..." rel="nofollow" target="_blank">+1</a>
</li>
<li>
<a class="social-stub facebook socialite facebook-like" data-shares="..." data-href="http://www.google.com/" data-url="http://www.google.com/" data-send="false" data-layout="button_count" data-width="60" data-show-faces="false" rel="nofollow" target="_blank">Like</a>
</li>
<li>
<a class="social-stub linkedin socialite linkedin-share" data-shares="..." data-url="http://www.google.com/" data-counter="right" rel="nofollow" target="_blank">&nbsp;&nbsp;Share</a>
</li>

</ul><br/>

A bit overcrowded with classes but required for both plugins to work. Also the data-url attribute would be required for Google+ and Facebook for them to load the buttons for specific page. Also &nbsp; is used to separate the Text in the button from the background. data-shares attribute is where the value of count is returned.

CSS
.social { display: block; list-style: none; padding: 0;  }
.social > li { display: block; margin: 0; padding: 10px; float: left; }
.social .socialite-loaded { background: none !important; }
.social-stub.googlepluss {
background: white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZMqomYq5NxDqSIdRKwHLVGz749XG38qZnOH8vQC5hBcIFDKDLbphpnaQLEjYGTZRb3ezuaZNfb78vhkUcgmGHBN70wgVyT49-EOW5VIK8cLu8ClJ4eydtGVVbEqkW7Lfj1bPYRyfmy0bN/s1600/white_googleplus.png') 0 bottom no-repeat;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZMqomYq5NxDqSIdRKwHLVGz749XG38qZnOH8vQC5hBcIFDKDLbphpnaQLEjYGTZRb3ezuaZNfb78vhkUcgmGHBN70wgVyT49-EOW5VIK8cLu8ClJ4eydtGVVbEqkW7Lfj1bPYRyfmy0bN/s1600/white_googleplus.png') 0 bottom no-repeat,-webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#fff),color-stop(100%,#f0f0f0));
color: #db583b;
text-shadow: white -1px 1px;
border-color: #e3e3e3;
font-family: arial,sans-serif;
font-weight: bold;
font-size: 13px;
}
.social-stub.linkedin {
color: #666;
text-shadow: white -1px 1px;
background: #fefefe url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_PRgkKTFwC62P_x-OvPzDvQmFqgfQR5jpapVvHVhfs0VKcUHVeMefQOoJIWYRylwRqot0QKhrRL8bZ1GMc7ErY1ZVjrtKXpR9Zy-xGIePfN_-2Jgt_duPNCx1VPHnprxeM7OAqf8hJsPU/s1600/linkedinss.png') 0 -1px no-repeat;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_PRgkKTFwC62P_x-OvPzDvQmFqgfQR5jpapVvHVhfs0VKcUHVeMefQOoJIWYRylwRqot0QKhrRL8bZ1GMc7ErY1ZVjrtKXpR9Zy-xGIePfN_-2Jgt_duPNCx1VPHnprxeM7OAqf8hJsPU/s1600/linkedinss.png') 0 -1px no-repeat,-webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#fefefe),color-stop(100%,#ededec));
border-color: #dbe3ef;
}
.social-stub.twitter {
color: #3e8399!important;
text-shadow: white -1px 1px;
background: #f6fafd url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjlHATKUoQeJ3XsTwi2WIyPcXWAUoj7KUr8kQfdVQVwB338AY8Fwn8M7vvdHf8NCJiGMT5GzAgPlX2pUvNFE6Gg0TJMY_9K9sNXJ9hyphenhyphenbtlM07pZ05oB1X8IaFmWY_z1ljpWC0WjBVFW9qM/s1600/blue_twitter_bird.png') -2px center no-repeat;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjlHATKUoQeJ3XsTwi2WIyPcXWAUoj7KUr8kQfdVQVwB338AY8Fwn8M7vvdHf8NCJiGMT5GzAgPlX2pUvNFE6Gg0TJMY_9K9sNXJ9hyphenhyphenbtlM07pZ05oB1X8IaFmWY_z1ljpWC0WjBVFW9qM/s1600/blue_twitter_bird.png') -2px center no-repeat,-webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#f6fafd),color-stop(100%,#dbecf2));
border-color: #c8e2eb;
}
.social-stub.facebook {
background: #edf1f7 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI6kufnZ0O5IrpvC1ldAoNjKg_SF41WMfAswV1BXQoTkI95Urw_LVm5oS_laM0A6othMErQ4sBcJqIU-1PPy7Qwb5cnyzv-VAisWvFjAFepfm0lJI42d1WG14BlgXSOAiDoy3cnEhgENvb/s1600/blue_facebook.png') -4px center no-repeat;
color: #4a68a2;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI6kufnZ0O5IrpvC1ldAoNjKg_SF41WMfAswV1BXQoTkI95Urw_LVm5oS_laM0A6othMErQ4sBcJqIU-1PPy7Qwb5cnyzv-VAisWvFjAFepfm0lJI42d1WG14BlgXSOAiDoy3cnEhgENvb/s1600/blue_facebook.png') -4px center no-repeat,-webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#edf1f7),color-stop(100%,#dbe3ef));
border-color: #cad6e7;
}
ul.social li:nth-child(n+2) > a {margin-left: 47px;}
.social-stub {
width: 61px;
height: 23px;
display: inline-block;
border: 1px solid black;
position: relative;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
text-decoration: none!important;
transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-webkit-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
background-position: left center;
background-repeat: no-repeat;
font-size: 11px;
font-family: Tahoma,Geneva,sans-serif;
line-height: 24px;
text-align: center;
}
.social-stub::before {
top: -2px;
bottom: auto;
height: 20px;
width: 34px;
left: 100%;
margin-left: 6px;
line-height: 20px;
content: attr(data-shares);
display: inline;
padding:1px 5px;
border: 1px solid #E2E3E4;
position: absolute;
top: -1px;
left: 61px;
height:19px;
width: auto;
white-space: nowrap;
color: #777;
z-index: 10;
-moz-border-radius-bottomleft: 2px;
-webkit-border-bottom-left-radius: 2px;
-ms-border-bottom-left-radius: 2px;
-o-border-bottom-left-radius: 2px;
border-bottom-left-radius: 2px;
-moz-border-radius-bottomright: 2px;
-webkit-border-bottom-right-radius: 2px;
-ms-border-bottom-right-radius: 2px;
-o-border-bottom-right-radius: 2px;
border-bottom-right-radius: 2px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
font-family: arial,sans-serif;
font-size: 12px!important;
text-align: center;
text-indent: 0;
}
.social-stub::after {
content: "";
width: 5px;
height: 9px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtSsc46zlY87J8sK809t8qRocMjqyKTpOoI9pI0fNJMh_jwhnql5C1SadG78QPa7O3J3kNqJrgRPRiYnZg-1mSK7ft5KD2idgO0LC_nvYUqYDuaksARN6hZKdMUliyb2Gw8XLjcyukKeeU/s1600/bubble-pip.png) left center no-repeat;
position: absolute;
top: 5px;
left: 100%;
margin-left: 2px;
z-index: 15;
}

JavaScript
<script   src="socialite.js" ></script>
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="sharrre.js" ></script>
<script>
$(document).ready(function()
{

$('.social').one('mouseenter', function()
{
Socialite.load($(this)[0]);
});

});

$('.twitter').sharrre({
share: {
twitter: true
},
enableHover: false,
enableTracking: true,
buttons: { twitter: {via: '_JulienH'}},
click: function(api, options){
api.simulateClick();
api.openPopup('twitter');
}
});
$('.facebook').sharrre({
share: {
facebook: true
},
enableHover: false,
enableTracking: true,
click: function(api, options){
api.simulateClick();
api.openPopup('facebook');
}
});
$('.googlepluss').sharrre({
share: {
googlePlus: true
},
enableHover: false,
enableTracking: true,
click: function(api, options){
api.simulateClick();
api.openPopup('googlePlus');
}
});
$('.linkedin').sharrre({
share: {
linkedin: true
},
enableHover: false,
enableTracking: true,
click: function(api, options){
api.simulateClick();
api.openPopup('Linkedin');
}
});

</script>

The initial JavaScript (Line 4 onwards) loads the buttons on a Mouse Hover event. The rest is configuration for Sharrre plugin. Here one thing to note is that currently as there is no Public API for Google+ so it is not possible to get the +1 count using JavaScript alone. For that Sharrre plugin requires that you put the sharrre.php file in the root of your website. In case you have no server , then no way to get +1 count till the API is released.

For Blogger users

Video Tutorial

Step by Step Guide

1. In the Blogger Dashboard , go to Template > Edit HTML and tick the Expand Widget preview

2. Now search for <div class='post-header-line-1'/> and add the following HTML after it

<ul class="social" >
<li>
<a class="social-stub twitter socialite twitter-share" data-shares="..." data-via="YourTwitterHandle" expr:data-text='data:post.title' expr:data-url='data:post.url' data-count="horizontal" target="_blank" >&amp;nbsp;&amp;nbsp;Tweet</a>
</li>
<li>
<a class="social-stub googlepluss socialite googleplus-one" data-shares="..." data-size="medium" expr:data-href='data:post.url' expr:data-url='data:post.url' target="_blank">+1</a>
</li>
<li>
<a class="social-stub facebook socialite facebook-like" data-shares="..." expr:data-href='data:post.url' expr:data-url='data:post.url' data-send="false" data-layout="button_count" data-width="60" data-show-faces="false" target="_blank">Like</a>
</li>
<li>
<a class="social-stub linkedin socialite linkedin-share" data-shares="..." expr:data-url='data:post.url' data-counter="right" target="_blank">&amp;nbsp;&amp;nbsp;Share</a>
</li>
</ul>


Note: Insert two <br/> after this code

3. Now search for ]]></b:skin> tag and add the following CSS just before it

.social { display: block; list-style: none; padding: 0;  }
.social > li { display: block; margin: 0; padding: 10px; float: left; }
.social .socialite-loaded { background: none !important; }
.social-stub.googlepluss {
background: white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZMqomYq5NxDqSIdRKwHLVGz749XG38qZnOH8vQC5hBcIFDKDLbphpnaQLEjYGTZRb3ezuaZNfb78vhkUcgmGHBN70wgVyT49-EOW5VIK8cLu8ClJ4eydtGVVbEqkW7Lfj1bPYRyfmy0bN/s1600/white_googleplus.png') 0 bottom no-repeat;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZMqomYq5NxDqSIdRKwHLVGz749XG38qZnOH8vQC5hBcIFDKDLbphpnaQLEjYGTZRb3ezuaZNfb78vhkUcgmGHBN70wgVyT49-EOW5VIK8cLu8ClJ4eydtGVVbEqkW7Lfj1bPYRyfmy0bN/s1600/white_googleplus.png') 0 bottom no-repeat,-webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#fff),color-stop(100%,#f0f0f0));
color: #db583b;
text-shadow: white -1px 1px;
border-color: #e3e3e3;
font-family: arial,sans-serif;
font-weight: bold;
font-size: 13px;
}
.social-stub.linkedin {
color: #666;
text-shadow: white -1px 1px;
background: #fefefe url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_PRgkKTFwC62P_x-OvPzDvQmFqgfQR5jpapVvHVhfs0VKcUHVeMefQOoJIWYRylwRqot0QKhrRL8bZ1GMc7ErY1ZVjrtKXpR9Zy-xGIePfN_-2Jgt_duPNCx1VPHnprxeM7OAqf8hJsPU/s1600/linkedinss.png') 0 -1px no-repeat;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_PRgkKTFwC62P_x-OvPzDvQmFqgfQR5jpapVvHVhfs0VKcUHVeMefQOoJIWYRylwRqot0QKhrRL8bZ1GMc7ErY1ZVjrtKXpR9Zy-xGIePfN_-2Jgt_duPNCx1VPHnprxeM7OAqf8hJsPU/s1600/linkedinss.png') 0 -1px no-repeat,-webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#fefefe),color-stop(100%,#ededec));
border-color: #dbe3ef;
}
.social-stub.twitter {
color: #3e8399!important;
text-shadow: white -1px 1px;
background: #f6fafd url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjlHATKUoQeJ3XsTwi2WIyPcXWAUoj7KUr8kQfdVQVwB338AY8Fwn8M7vvdHf8NCJiGMT5GzAgPlX2pUvNFE6Gg0TJMY_9K9sNXJ9hyphenhyphenbtlM07pZ05oB1X8IaFmWY_z1ljpWC0WjBVFW9qM/s1600/blue_twitter_bird.png') -2px center no-repeat;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjlHATKUoQeJ3XsTwi2WIyPcXWAUoj7KUr8kQfdVQVwB338AY8Fwn8M7vvdHf8NCJiGMT5GzAgPlX2pUvNFE6Gg0TJMY_9K9sNXJ9hyphenhyphenbtlM07pZ05oB1X8IaFmWY_z1ljpWC0WjBVFW9qM/s1600/blue_twitter_bird.png') -2px center no-repeat,-webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#f6fafd),color-stop(100%,#dbecf2));
border-color: #c8e2eb;
}
.social-stub.facebook {
background: #edf1f7 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI6kufnZ0O5IrpvC1ldAoNjKg_SF41WMfAswV1BXQoTkI95Urw_LVm5oS_laM0A6othMErQ4sBcJqIU-1PPy7Qwb5cnyzv-VAisWvFjAFepfm0lJI42d1WG14BlgXSOAiDoy3cnEhgENvb/s1600/blue_facebook.png') -4px center no-repeat;
color: #4a68a2;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI6kufnZ0O5IrpvC1ldAoNjKg_SF41WMfAswV1BXQoTkI95Urw_LVm5oS_laM0A6othMErQ4sBcJqIU-1PPy7Qwb5cnyzv-VAisWvFjAFepfm0lJI42d1WG14BlgXSOAiDoy3cnEhgENvb/s1600/blue_facebook.png') -4px center no-repeat,-webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#edf1f7),color-stop(100%,#dbe3ef));
border-color: #cad6e7;
}
ul.social li:nth-child(n+2) > a {margin-left: 47px;}
.social-stub {
width: 61px;
height: 23px;
display: inline-block;
border: 1px solid black;
position: relative;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
text-decoration: none!important;
transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-webkit-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
background-position: left center;
background-repeat: no-repeat;
font-size: 11px;
font-family: Tahoma,Geneva,sans-serif;
line-height: 24px;
text-align: center;
}
.social-stub::before {
top: -2px;
bottom: auto;
height: 20px;
width: 34px;
left: 100%;
margin-left: 6px;
line-height: 20px;
content: attr(data-shares);
display: inline;
padding:1px 5px;
border: 1px solid #E2E3E4;
position: absolute;
top: -1px;
left: 61px;
height:19px;
width: auto;
white-space: nowrap;
color: #777;
z-index: 10;
-moz-border-radius-bottomleft: 2px;
-webkit-border-bottom-left-radius: 2px;
-ms-border-bottom-left-radius: 2px;
-o-border-bottom-left-radius: 2px;
border-bottom-left-radius: 2px;
-moz-border-radius-bottomright: 2px;
-webkit-border-bottom-right-radius: 2px;
-ms-border-bottom-right-radius: 2px;
-o-border-bottom-right-radius: 2px;
border-bottom-right-radius: 2px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
font-family: arial,sans-serif;
font-size: 12px!important;
text-align: center;
text-indent: 0;
}
.social-stub::after {
content: "";
width: 5px;
height: 9px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtSsc46zlY87J8sK809t8qRocMjqyKTpOoI9pI0fNJMh_jwhnql5C1SadG78QPa7O3J3kNqJrgRPRiYnZg-1mSK7ft5KD2idgO0LC_nvYUqYDuaksARN6hZKdMUliyb2Gw8XLjcyukKeeU/s1600/bubble-pip.png) left center no-repeat;
position: absolute;
top: 5px;
left: 100%;
margin-left: 2px;
z-index: 15;
}


4. Lastly Search for </body> and paste the following code just before it.

<script src="https://stylifyyourblog1.googlecode.com/svn/trunk/socialite.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}(';(4($,g,h,i){l j=\'28\',2d={2R:\'28\',Q:{K:D,C:D,x:D,G:D,p:D,H:D,I:D,A:D},26:0,1e:\'\',19:\'\',3:h.2N.1k,w:h.19,1u:\'28.2Y\',z:{},1p:0,1s:r,2Z:r,30:r,23:D,22:4(){},34:4(){},1P:4(){},2o:4(){},8:{K:{3:\'\',17:D,1l:\'35\',11:\'38-3y\',2c:\'\'},C:{3:\'\',17:D,T:\'1E\',Z:\'3V\',F:\'\',1y:\'D\',2u:\'D\',2q:\'\',1A:\'\',11:\'3D\'},x:{3:\'\',17:D,z:\'39\',2f:\'\',15:\'\',1I:\'\',11:\'38\'},G:{3:\'\',17:D,O:\'41\'},p:{3:\'\',17:D,1l:\'35\'},H:{3:\'\',17:D,Z:\'1\'},I:{3:\'\',17:D,24:\'\'},A:{3:\'\',1B:\'\',1r:\'\',Z:\'39\'}}},1o={K:"",C:"P://4B.C.o/?1W={3}&1z=?",x:"P://3W.3Z.x.o/1/40/z.3e?3={3}&1z=?",G:"P://46.G.o/2.0/4a.4c?4e={3}&O=1c&1z=?",p:\'P://4V.p.o/51/3e/3q/m?3={3}&1z=?\',H:"",I:"P://1g.I.o/3E/z/Q?3N=3O&3={3}&1z=?",A:""},3a={K:4(b){l c=b.6.8.K;$(b.q).W(\'.8\').Y(\'<n L="S 4i"><n L="g-1D" m-1l="\'+c.1l+\'" m-1k="\'+(c.3!==\'\'?c.3:b.6.3)+\'" m-2c="\'+c.2c+\'"></n></n>\');g.4T={11:b.6.8.K.11};l d=0;9(y 36===\'E\'&&d==0){d=1;(4(){l a=h.1b(\'N\');a.O=\'w/1c\';a.1m=r;a.16=\'//3Y.32.o/X/1D.X\';l s=h.1d(\'N\')[0];s.1a.18(a,s)})()}J{36.1D.4d()}},C:4(c){l e=c.6.8.C;$(c.q).W(\'.8\').Y(\'<n 1W="1L-4m"></n><n L="S C"><n L="1L-1E" m-1k="\'+(e.3!==\'\'?e.3:c.6.3)+\'" m-1y="\'+e.1y+\'" m-Z="\'+e.Z+\'" m-F="\'+e.F+\'" m-4n-2u="\'+e.2u+\'" m-T="\'+e.T+\'" m-2q="\'+e.2q+\'" m-1A="\'+e.1A+\'" m-15="\'+e.15+\'"></n></n>\');l f=0;9(y 1f===\'E\'&&f==0){f=1;(4(d,s,a){l b,2g=d.1d(s)[0];9(d.4Y(a)){1w}b=d.1b(s);b.1W=a;b.16=\'//55.C.5d/\'+e.11+\'/3g.X#3l=1\';2g.1a.18(b,2g)}(h,\'N\',\'C-3m\'))}J{1f.3n.3o()}},x:4(b){l c=b.6.8.x;$(b.q).W(\'.8\').Y(\'<n L="S x"><a 1k="1C://x.o/Q" L="x-Q-S" m-3="\'+(c.3!==\'\'?c.3:b.6.3)+\'" m-z="\'+c.z+\'" m-w="\'+b.6.w+\'" m-15="\'+c.15+\'" m-2f="\'+c.2f+\'" m-1I="\'+c.1I+\'" m-11="\'+c.11+\'">3u</a></n>\');l d=0;9(y 2n===\'E\'&&d==0){d=1;(4(){l a=h.1b(\'N\');a.O=\'w/1c\';a.1m=r;a.16=\'//1R.x.o/1V.X\';l s=h.1d(\'N\')[0];s.1a.18(a,s)})()}J{$.3F({3:\'//1R.x.o/1V.X\',3G:\'N\',3I:r})}},G:4(a){l b=a.6.8.G;$(a.q).W(\'.8\').Y(\'<n L="S G"><a L="3J \'+b.O+\'" 3K="3L 3M" 1k="P://G.o/2X?3=\'+U((b.3!==\'\'?b.3:a.6.3))+\'"></a></n>\');l c=0;9(y 3P===\'E\'&&c==0){c=1;(4(){l s=h.1b(\'2W\'),1Z=h.1d(\'2W\')[0];s.O=\'w/1c\';s.1m=r;s.16=\'//1V.G.o/8.X\';1Z.1a.18(s,1Z)})()}},p:4(a){9(a.6.8.p.1l==\'3X\'){l b=\'F:20;\',21=\'B:2S;F:20;1A-1l:42;1q-B:2S;\',25=\'B:2P;1q-B:2P;27-5n:1K;\'}J{l b=\'F:4h;\',21=\'2a:4j;2b:0 1K;B:1x;F:4u;1q-B:1x;\',25=\'2a:4v;B:1x;1q-B:1x;\'}l c=a.1s(a.6.z.p);9(y c==="E"){c=0}$(a.q).W(\'.8\').Y(\'<n L="S p"><n 1M="\'+b+\'1A:4C 4G,4I,4J-4L;4N:4P;1N:#4U;2K:4X-3f;2a:2J;B:1x;1q-B:52;27:0;2b:0;w-53:0;54-2h:57;">\'+\'<n 1M="\'+21+\'2I-1N:#2G;27-3h:3i;3j:3k;w-2h:2F;1S:2C 2B #3p;1S-2A:1K;">\'+c+\'</n>\'+\'<n 1M="\'+25+\'2K:3f;2b:0;w-2h:2F;w-3r:2J;F:20;2I-1N:#3s;1S:2C 2B #3t;1S-2A:1K;1N:#2G;">\'+\'<2y 16="P://1g.p.o/3v/2y/p.3w.3x" B="10" F="10" 3z="3A" /> 3B</n></n></n>\');$(a.q).W(\'.p\').3C(\'1P\',4(){a.2x(\'p\')})},H:4(b){l c=b.6.8.H;$(b.q).W(\'.8\').Y(\'<n L="S H"><2T:2t Z="\'+c.Z+\'" 2N="\'+(c.3!==\'\'?c.3:b.6.3)+\'"></2T:2t></n>\');l d=0;9(y 1Q===\'E\'&&d==0){d=1;(4(){l a=h.1b(\'N\');a.O=\'w/1c\';a.1m=r;a.16=\'//1R.H.o/1/1V.X\';l s=h.1d(\'N\')[0];s.1a.18(a,s)})();s=g.3H(4(){9(y 1Q!==\'E\'){1Q.2w();2s(s)}},2r)}J{1Q.2w()}},I:4(b){l c=b.6.8.I;$(b.q).W(\'.8\').Y(\'<n L="S I"><n O="2p/Q" m-3="\'+(c.3!==\'\'?c.3:b.6.3)+\'" m-24="\'+c.24+\'"></N></n>\');l d=0;9(y g.2z===\'E\'&&d==0){d=1;(4(){l a=h.1b(\'N\');a.O=\'w/1c\';a.1m=r;a.16=\'//1R.I.o/2p.X\';l s=h.1d(\'N\')[0];s.1a.18(a,s)})()}J{g.2z.1U()}},A:4(b){l c=b.6.8.A;$(b.q).W(\'.8\').Y(\'<n L="S A"><a 1k="P://A.o/1T/2m/S/?3=\'+(c.3!==\'\'?c.3:b.6.3)+\'&1B=\'+c.1B+\'&1r=\'+c.1r+\'" L="1T-3Q-S" z-Z="\'+c.Z+\'">3R 3S</a></n>\');(4(){l a=h.1b(\'N\');a.O=\'w/1c\';a.1m=r;a.16=\'//3T.A.o/X/3U.X\';l s=h.1d(\'N\')[0];s.1a.18(a,s)})()}},2D={K:4(){},C:4(){1L=g.2E(4(){9(y 1f!==\'E\'){1f.2k.2j(\'2H.2m\',4(a){1h.1i([\'1j\',\'C\',\'1E\',a])});1f.2k.2j(\'2H.43\',4(a){1h.1i([\'1j\',\'C\',\'44\',a])});1f.2k.2j(\'45.1y\',4(a){1h.1i([\'1j\',\'C\',\'1y\',a])});2s(1L)}},2L)},x:4(){2M=g.2E(4(){9(y 2n!==\'E\'){2n.48.49(\'1J\',4(a){9(a){1h.1i([\'1j\',\'x\',\'1J\'])}});2s(2M)}},2L)},G:4(){},p:4(){},H:4(){},I:4(){4 4b(){1h.1i([\'1j\',\'I\',\'Q\'])}},A:4(){}},2O={K:4(a){g.14("1C://1D.32.o/2Q/+1/4f?4g="+a.8.K.11+"&3="+U((a.8.K.3!==\'\'?a.8.K.3:a.3)),"","13=0, 1H=0, F=2v, B=2r")},C:4(a){g.14("P://1g.C.o/4k.2Y?u="+U((a.8.C.3!==\'\'?a.8.C.3:a.3))+"&t="+a.w+"","","13=0, 1H=0, F=2v, B=2r")},x:4(a){g.14("1C://x.o/4l/1J?w="+U(a.w)+"&3="+U((a.8.x.3!==\'\'?a.8.x.3:a.3))+(a.8.x.15!==\'\'?\'&15=\'+a.8.x.15:\'\'),"","13=0, 1H=0, F=2U, B=2V")},G:4(a){g.14("P://G.o/4o/4p/2X?3="+U((a.8.G.3!==\'\'?a.8.G.3:a.3))+"&19="+a.w+"&1I=r&1M=r","","13=0, 1H=0, F=2U, B=2V")},p:4(a){g.14(\'P://1g.p.o/4q?v=5&4r&4s=4t&3=\'+U((a.8.p.3!==\'\'?a.8.p.3:a.3))+\'&19=\'+a.w,\'p\',\'13=1F,F=1n,B=1n\')},H:4(a){g.14(\'P://1g.H.o/2t/?3=\'+U((a.8.p.3!==\'\'?a.8.p.3:a.3)),\'H\',\'13=1F,F=1n,B=1n\')},I:4(a){g.14(\'1C://1g.I.o/4w/Q?3=\'+U((a.8.p.3!==\'\'?a.8.p.3:a.3))+\'&4x=&4y=r\',\'I\',\'13=1F,F=1n,B=1n\')},A:4(a){g.14(\'P://A.o/1T/2m/S/?3=\'+U((a.8.A.3!==\'\'?a.8.A.3:a.3))+\'&1B=\'+U(a.8.A.1B)+\'&1r=\'+a.8.A.1r,\'A\',\'13=1F,F=4z,B=4A\')}};4 R(a,b){7.q=a;7.6=$.4D(r,{},2d,b);7.6.Q=b.Q;7.4E=2d;7.4F=j;7.1U()};R.V.1U=4(){l c=7;9(7.6.1u!==\'\'){1o.K=7.6.1u+\'?3={3}&O=K\';1o.H=7.6.1u+\'?3={3}&O=H\';1o.A=7.6.1u+\'?3={3}&O=A\'}$(7.q).4H(7.6.2R);9(y $(7.q).m(\'19\')!==\'E\'){7.6.19=$(7.q).31(\'m-19\')}9(y $(7.q).m(\'3\')!==\'E\'){7.6.3=$(7.q).m(\'3\')}9(y $(7.q).m(\'w\')!==\'E\'){7.6.w=$(7.q).m(\'w\')}$.1t(7.6.Q,4(a,b){9(b===r){c.6.26++}});9(c.6.30===r){$.1t(7.6.Q,4(a,b){9(b===r){4K{c.33(a)}4M(e){}}})}J{7.1X();7.6.2o(7,7.6)}$(7.q).22(4(){9($(7).W(\'.8\').4O===0&&c.6.2Z===r){c.1X()}c.6.22(c,c.6)},4(){c.6.34(c,c.6)});$(7.q).1P(4(){c.6.1P(c,c.6);1w D})};R.V.1X=4(){l c=7;$(7.q).Y(\'<n L="8"></n>\');$.1t(c.6.Q,4(a,b){9(b==r){3a[a](c);9(c.6.23===r){2D[a]()}}})};R.V.33=4(c){l d=7,z=0,3=1o[c].1v(\'{3}\',U(7.6.3));9(7.6.8[c].17===r&&7.6.8[c].3!==\'\'){3=1o[c].1v(\'{3}\',7.6.8[c].3)}9(3!=\'\'){$.4Q(3,4(a){9(y a.z!=="E"){l b=a.z+\'\';b=b.1v(\'\\4R\\4S\',\'\');z+=1G(b,10)}J 9(y a.37!=="E"){z+=1G(a.37,10)}J 9(y a.2e!=="E"){z+=1G(a.2e,10)}J 9(y a[0]!=="E"){z+=1G(a[0].4W,10)}J 9(y a[0]!=="E"){}d.6.z[c]=z;d.6.1p+=z;d.2i();d.1O()}).4Z(4(){d.6.z[c]=0;d.1O()})}J{d.2i();d.6.z[c]=0;d.1O()}};R.V.1O=4(){l a=0;50(e 2p 7.6.z){a++}9(a===7.6.26){7.6.2o(7,7.6)}};R.V.2i=4(){l a=7.6.1p,1e=7.6.1e;9(7.6.1s===r){a=7.1s(a)}9(1e!==\'\'){1e=1e.1v(\'{1p}\',a);$(7.q).29(1e)}J{$(7.q).31(\'m-2e\',a)}};R.V.1s=4(a){9(a>=3b){a=(a/3b).3c(2)+"M"}J 9(a>=3d){a=(a/3d).3c(1)+"k"}1w a};R.V.2x=4(a){2O[a](7.6);9(7.6.23===r){l b={K:{12:\'56\',T:\'+1\'},C:{12:\'C\',T:\'1E\'},x:{12:\'x\',T:\'1J\'},G:{12:\'G\',T:\'1Y\'},p:{12:\'p\',T:\'1Y\'},H:{12:\'H\',T:\'1Y\'},I:{12:\'I\',T:\'Q\'},A:{12:\'A\',T:\'1T\'}};1h.1i([\'1j\',b[a].12,b[a].T])}};R.V.58=4(){l a=$(7.q).29();$(7.q).29(a.1v(7.6.1p,7.6.1p+1))};R.V.59=4(a,b){9(a!==\'\'){7.6.3=a}9(b!==\'\'){7.6.w=b}};$.5a[j]=4(b){l c=5b;9(b===i||y b===\'5c\'){1w 7.1t(4(){9(!$.m(7,\'2l\'+j)){$.m(7,\'2l\'+j,5e R(7,b))}})}J 9(y b===\'5f\'&&b[0]!==\'2Q\'&&b!==\'1U\'){1w 7.1t(4(){l a=$.m(7,\'2l\'+j);9(a 5g R&&y a[b]===\'4\'){a[b].5h(a,5i.V.5j.5k(c,1))}})}}})(5l,5m,47);',62,334,'|||url|function||options|this|buttons|if||||||||||||var|data|div|com|delicious|element|true|||||text|twitter|typeof|count|pinterest|height|facebook|false|undefined|width|digg|stumbleupon|linkedin|else|googlePlus|class||script|type|http|share|Plugin|button|action|encodeURIComponent|prototype|find|js|append|layout||lang|site|toolbar|open|via|src|urlCount|insertBefore|title|parentNode|createElement|javascript|getElementsByTagName|template|FB|www|_gaq|push|_trackSocial|href|size|async|550|urlJson|total|line|description|shorterTotal|each|urlCurl|replace|return|20px|send|callback|font|media|https|plusone|like|no|parseInt|status|related|tweet|3px|fb|style|color|rendererPerso|click|STMBLPN|platform|border|pin|init|widgets|id|loadButtons|add|s1|50px|cssCount|hover|enableTracking|counter|cssShare|shareTotal|margin|sharrre|html|float|padding|annotation|defaults|shares|hashtags|fjs|align|renderer|subscribe|Event|plugin_|create|twttr|render|in|colorscheme|500|clearInterval|badge|faces|900|processWidgets|openPopup|img|IN|radius|solid|1px|tracking|setInterval|center|fff|edge|background|none|display|1000|tw|location|popup|18px|_|className|35px|su|650|360|SCRIPT|submit|php|enableHover|enableCounter|attr|google|getSocialJson|hide|medium|gapi|likes|en|horizontal|loadButton|1e6|toFixed|1e3|json|block|all|bottom|5px|overflow|hidden|xfbml|jssdk|XFBML|parse|ccc|urlinfo|decoration|7EACEE|40679C|Tweet|static|small|gif|US|alt|Delicious|Add|on|en_US|countserv|ajax|dataType|setTimeout|cache|DiggThisButton|rel|nofollow|external|format|jsonp|__DBW|it|Pin|It|assets|pinit|button_count|cdn|tall|apis|api|urls|DiggCompact|15px|remove|unlike|message|services|document|events|bind|story|LinkedInShare|getInfo|go|links|confirm|hl|93px|googleplus|right|sharer|intent|root|show|tools|diggthis|save|noui|jump|close|26px|left|cws|token|isFramed|700|300|graph|12px|extend|_defaults|_name|Arial|addClass|Helvetica|sans|try|serif|catch|cursor|length|pointer|getJSON|u00c2|u00a0|___gcfg|666666|feeds|total_posts|inline|getElementById|error|for|v2|normal|indent|vertical|connect|Google|baseline|simulateClick|update|fn|arguments|object|net|new|string|instanceof|apply|Array|slice|call|jQuery|window|top'.split('|'),0,{}))
//]]>
</script>
<script type="text/javascript">
//<![CDATA[

$(document).ready(function()
{

$('.social').one('mouseenter', function()
{
Socialite.load($(this)[0]);
});

});

$('.twitter').sharrre({
share: {
twitter: true
},
enableHover: false,
enableTracking: true,
buttons: { twitter: {via: '_YourTwitterHandle'}},
click: function(api, options){
api.simulateClick();
api.openPopup('twitter');
}
});
$('.facebook').sharrre({
share: {
facebook: true
},
enableHover: false,
enableTracking: true,
click: function(api, options){
api.simulateClick();
api.openPopup('facebook');
}
});
$('.googlepluss').sharrre({
share: {
googlePlus: true
},
enableHover: false,
enableTracking: true,
click: function(api, options){
api.simulateClick();
api.openPopup('googlePlus');
}
});
$('.linkedin').sharrre({
share: {
linkedin: true
},
enableHover: false,
enableTracking: true,
click: function(api, options){
api.simulateClick();
api.openPopup('Linkedin');
}
});
//]]>
</script>


5. Check the Preview for errors and Save your template

Note: As I mentioned before it is currently not possible to display the +1 count with JavaScript alone. Whenever a Public API will be released for Google+ , I will update this tutorial. Feel free to share your suggestions for improving this widget.

Download Demo
 
© 2009 Blogger Tips 2013 | Powered by Blogger