Blogger TrickZz

How to Add and Use SyntaxHighlighter 3 for Blogger

noreply@blogger.com (Tanmay Kapse) — Sun, 03 Jun 2012 13:27:00 +0000

The latest version of Syntax Hihglighter has been released and there are quite a few changes in the way things work now. This version was named Syntax Hihglighter 3.0.83.

NEW FEATURES IN 3.0.83

Dynamic Brush Loading

SyntaxHighlighter comes with almost 30 brushes out of the box. One of the most requested feature has been the ability to dynamically load them without having to load them all on the same page.

No Flash Copy to Clipboard

Earlier, Flash was being used to copy the code to clipboard. This has now been removed and a simpler & better way to do this has been implemented. Also, the user can now simply double-click anywhere in the code to select it and then use the standard CTRL+C to copy it.

Code Selection

This is also now part of the SyntaxHighlighter as it allows you to select the code with your mouse and then copy and paste it without straight into your code without any additional effort.

Add Title

Now you can add a title to the code block by title="title name" parameter to the <pre> tag.
More under the hood
More improvements and changes under the hood like better CSS support, easier integration with CommonJS & node.js, etc.
Earlier, Flash was being used to copy the code to clipboard. This has now been removed and a simpler & better way to do this has been implemented. Also, the user can now simply double-click anywhere in the code to select it and then use the standard CTRL+C to copy it.

Code Selection

This is also now part of the SyntaxHighlighter as it allows you to select the code with your mouse and then copy and paste it without straight into your code without any additional effort.

Add Title

Now you can add a title to the code block by title="title name" parameter to the <pre> tag.
More under the hood
More improvements and changes under the hood like better CSS support, easier integration with CommonJS & node.js, etc.

INSTALLATION

Before you could get in to the process, I recommend you to back up your template.
Navigate to Dashboard > Design > Edit HTML
Find </head>
Copy below code and paste it just before the </head> tag

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script language='javascript' type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

Save your template.

NOTE:

Whenever you have to write some codes in your posts, click on "Edit HTML" tab of your post editor and write the codes between the following tags

<pre class="brush: js">
Your code here
</pre>

To add title in your code add title="Title Here" it's look like the code below:

<pre class="brush: js" title="Title Here">
Your code here
</pre>Your code here</pre>

For an example :

<pre class="brush: js" title="This is a title, check it out!">
<b:includable id='comments' var='post'>
  <div class='comments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>
      <h4>
        <b:if cond='data:post.numComments == 1'>
          1 <data:commentLabel/>:
        <b:else/>
          <data:post.numComments/> <data:commentLabelPlural/>:
        </b:if>
      </h4>
</pre>

Will display like the below image on your blog post.

I hope you were able to implement this in your blog.

Pls do share this post .

Enjoy :)

Stop Your Articles From being copied with Simple CSS

noreply@blogger.com (Tanmay Kapse) — Sat, 02 Jun 2012 12:01:00 +0000

Consider you are working hard in creating articles and someone just copy and paste your content on their website without adding any credit link,then how would you feel ? Here I have an unique and simple trick to stop your post stealing.The biggest advantage of this trick is you don't have to put any scripts or any other things in your template it totally works with pure CSS3.You just have to put a little snippet of CSS code in your template which will prevent users to copy text from your articles.And I hope this small trick will surely help you to prevent your articles from republishing/redistributing on other websites.

How To Stop Your Post Stealing

Go to Your Blogger Dashboard > Design > Edit HTML.
Take a backup of your template.
Now find for below code in your template

]]></b:skin>

add below code just above/before of above code

.post-body {
-webkit-touch-callout: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
}

Now save your template and you are done....

Follow my blog to get more tricks like dese.... :)

How to Choose Brilliant Images for Your Blog Posts

noreply@blogger.com (Tanmay Kapse) — Sat, 02 Jun 2012 10:13:00 +0000

We are living in a world that rewards instant gratification; people do not want to take the time to read a book, if the movie is available. In other words, "a picture is worth a thousand words." It should not be difficult to see why illustrations are important when keeping readers interested in your blog posts. Pictures can help readers to follow your writing more easily, breaking up the text so that it doesn't look like one long, tedious piece of work.
Here are some tips on how to choose the best images for your blog posts:

(#1.) Relevance - blog posts are generally there to persuade readers to show interest in a certain topic, product, or service. Adding pictures to help illustrate those concepts can only help, but don't go overboard. Shy away from adding pictures for the sake of adding pictures. Make sure that you are putting up illustrations that are going to add to the relevance of your text, not take away from it. It is easy to add too much, so try to keep it straight forward and to the point, just like the text.

(#2.) Copyrights - always remember that not all images are available for your use. There are copyrights for images that are on the internet as well as copyrights for images that are in print. If you want to avoid any problems that you might encounter with copyrighted materials, use your own images. Go looking for images that give relevance to your post and take the pictures yourself. If that doesn't seem like a viable option for you, there are public image sites that you can locate off of any search engine. Most search engines will provide you with an image option; type in the object or term that you are looking for and browse through the hundreds of images that are available to use without objection. If you find an image on another blog or site that you would like to use, remember to be courteous. It is polite to send a short email or contact the owner of the site asking for permission to use the image.

(#3.) Editing - it is important to do minor (and sometimes major) editing on your images before just sticking them up on your blog. It is more than aggravating to have to wait an eternity for a page to load because the file is too large. In fact, in this "instant gratification" world, no one waits for a page to load for very long without just moving along. If you have a file to add that is of larger size, put a thumbnail up on the page. If users want to wait to view the full photo, they have that option. If not, it doesn't create problems when loading. When finalising photos or images for your blog post, keep clarity in mind. A clean and crisp image gets the point across a lot better than an unclear one. Photoshop is a great tool to use before putting pictures up on your blog; you can add or subtract from an image as needed, and sometimes it is needed.

(#4.) Avoid - there are some things that you should try and avoid when choosing images for your blog post. For instance, animations are great and can potentially add just the right ingredient to your post, but it is important to think about internet connections. Some people don't have the fastest connections, and you don't want to alienate parts of your audience. It is also a good idea to stay away from background images; they can slow the process of loading your page down to snail pace. Account for those readers who may want to print your post without the background attached.

(#5.) Include - there are images that are better to use than others and should be highly considered. You want to make sure that you are using unique illustrations. If people have seen the image a thousand times, it loses its weight. People associate certain objects with a product or service and you want your readers to associate illustrations with your work. Include pictures that capture the essence of what you are trying to relay to your readers, it doesn't have to be completely literal. Capitalise on reader satisfaction by using photos that mean something to them; use pictures of people, kids, animals. Everyone likes to laugh, so adding a humorous image is a tool that will keep readers returning to your page. This is your chance to shine, to set yourself apart from similar blogs or from those that are selling the same product or service. Images can very easily turn into a mascot for a particular product, site or service. Mascots can be very beneficial to a business and finding a good one starts with searching through images that are relevant to your end goals.

Optimize Your Headings For more Traffic

noreply@blogger.com (Tanmay Kapse) — Sat, 02 Jun 2012 09:59:00 +0000

What are Heading Tags?
H means "Heading" tags. They starts from H1 to H6 in descending order of importance. The words written in H1 tags are most important words in our whole blog and the search robots give first search priority to these H1 Tags. H2 tag are less important than H1 and so on to H6. These tags plays very important role in our SEO. They are used to tell the search robots about the most important words in our blog which should be crawl first. Headline tags are also used to organize our posts. They are very useful for our posts visibility in search engines.

How To Use Headline Tags In Your Blog?
As already said, H1 tag is the most important tag in our whole blog, so it should be used only once per page of your blog to avoid duplicate contenting. In every blog (including Blogger), H1 tags are used as Blog's title. Search robots also consider the words written in H1 tag as your blog's title. So the most important thing after Blog's title is your Posts Title which should be written under H2 tags. But, I noticed that most of the Bloggers are using H3 tag as post title which is tremendously reducing the post visibility in search engines.

Increase Traffic :
Convert Your Posts From H3 to H2 Tag

Go to Blogger Dashboard >> Your Blog >> Template.
Backup your template.
Now click Edit HTML and check the box of expand widget template.
Search for h3.post-title.
Now replace it with h2.post-title. (Replace all h3.post-title in your template).
Now find the following code:

<h3><data:title/></h3>

And replace it with the following:

<h2><data:title/></h2>

Now you've successfully completed the job!

ADD FLOATING +1, TWEET AND FACEBOOK LIKE BUTTON IN BLOGGER - Add This

noreply@blogger.com (Tanmay Kapse) — Sat, 02 Jun 2012 09:50:00 +0000

These days bloggers are giving stress on floating share buttons because of their permanent visibility. They are always on the screen of reader and available for like and sharing. It is a fast and easy way to spread your blog.

This share plugin include floating facebook like, tweet and google +1 button in a simple and good style which makes it easy to like and share your pages.

Add Floating Social Share Widget

Go to Blogger > Layout.
Click Add a Gadget and select HTML / Javascript.
Now paste the following code in it.

<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:50px;top:50px;"> <a class="addthis_button_facebook_like" fb:like:layout="box_count"></a> <a class="addthis_button_tweet" tw:count="vertical"></a> <a class="addthis_button_google_plusone" g:plusone:size="tall"></a> </div> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4fc4b1e85de9796e"></script>

To change the position of the widget change the following values

Change the value " 50 " to your desired number.

left:50px

top:50px

Also have a look at the modified look of this widget : Click here

" Stay Connected " Widget for Blogger Sidebar

noreply@blogger.com (Tanmay Kapse) — Sat, 02 Jun 2012 08:05:00 +0000

Having sharing buttons in your blogger sidebar is very useful . It helps you get your blog shared . Today I am showing you some cool looking share buttons for blogger.

How to add the widget ?

Login to your blogger account
Dashboard - Layout - Add a gadget - Html / JavaScript
Copy the Code in it .

<table border="0"><tbody>
<tr><td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDmA1QmwidmAYdD3F8TqHKsKXZOPoW2uyvYkU5BkpbsSRvl-d5b2G7PtBiAaUp4VW7mXPqE_nDu0h8gEi4PuSYD2VLaZhKCc-88WnCUWwLihJLCkWtbMYracgcNcMxR56PEnN6aKvva0xB/s1600/stay+connected.png" /></td><td>
<a target="_blank" href="http://feeds.feedburner.com/btzz" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyFPDqZ2HlgG-g0VZ0g_a8mNf1jAZwImduytnmII0eXRNNjbc5NFzPnHyipDNg4nahb4efkDTUvsurTXdOB7Rw87KS0ywTdXp3WHVKJzbCQou8mc_yK4npQz1oGey3d6PPdyyd6dTIbFw/s1600/connect-rss-feed.png" /></a></td><td>
<a target="_blank" href="https://twitter.com/#!/shipsocker" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjQsST3fedh2OXBh5jKtzVhLrQP9PwESeXWrSBvB-Irrcd7VbubzN58ZZsybMCXH43WLsLVVaO51q1Uw-5F17v3h2f0zi_4_VPp9PyI19DfTFzO_w__7HsUCOtE6Vcg-5bBDs02GcIzss/s1600/connect-twitter-follow.png" /></a></td><td>
<a target="_blank" href="http://www.facebook.com/BloggerTrickzz" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-1J6Xxphj5Oz7iOYJi-M1xi5EZy1K7m3hwu69gwTSNeN9oEY2gML_M0CspVMIYPEMVfVT4r1Hx9p3oL9bDG8l7UXKRazbuhg0g73af0R0Y1AeJn7HARBnS8AvlkxiiX7Rt3W969HUQFU/s1600/connect-facebook-follow.png" /></a></td></tr>
</tbody></table>
<a href="http://www.bloggertrickszz.blogspot.com/"><img alt="Best Blogger Tips" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6sYCnnqTwyDYTR5QLFdIViNUZBkuv4nPrS9S-BIm46aj5FePCaZvx4MNsBGwBpuqg839BE34dNiMY0xgL9jF8QZ2cu41XZYq_NjpLhXDKQiUvmQ9QEwVM9ZZjjVx9mE7T13xlTeoMcaRG/s1600/best+blogger+tips.png" /></a>

Customizations :

Change btzz to your feedburner account name
Change Shipsocker to your twitter account name.
Change BloggerTrickzz to your facebook page name.

Save your template and you are done.

----------------------------------------------------------------------------------------------------------------------------------

Demo > >

---------------------------------------------------------------------------------------------------------------------------------------------------

Having problems ? Do comment below .

Attractive " Table Of Contents " Page

noreply@blogger.com (Tanmay Kapse) — Fri, 01 Jun 2012 18:42:00 +0000

It's very important for a publisher To insert Sitemap (Table of Contents) in his blog to make it look more professional. Basically Sitemap (Table of contents) is a place in your blog where all of your post are arranged according to their type.This is the reason why today we will going to Insert a Table of Contents in Blogger.

We have designed a table of contents for blogger which will update automatically so you don't need to just edit it every time when you publish a new post.If you publish a new post on your blog it will automatically added to your Table of Contents Page so it really saves lot of time.This Table of Contents widget will display all of your post well arranged under their specific categories (LABELS).

This widget is designed and optimized with CSS so it looks really attractive and has some Jquery which do attract your eyes.So let us start our fingers rolling over the tutorial.

But first I know you would love to see the preview of the widget,so first see the widget which we are going to apply on our blog

Live Demo >>

( Its My other Blog )

Adding a Table Of Content in Blogger:

To insert an Attractive Table Of Contents (Sitemap) in Blogger Follow these Steps
Go To Blogger >> Template >> Edit HTML >> Proceed
Now search For ]]></b:skin> in Your Template with (CTRL+F)
when you find ]]></b:skin> just above it place the following code

/*--------Blogger TricksZz-----*/ .judul-label{ background-color:#E5ECF9; font-weight:bold; line-height:1.4em; margin-bottom:5px; overflow:hidden; white-space:nowrap; vertical-align: baseline; margin: 0 2px; outline: none; cursor: pointer; 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: 1px 1px 4px #AAAAAA; box-shadow: 0 1px 2px rgba(0,0,0,.2); color: #e9e9e9; border: 2px solid white !important; background: #6e6e6e; background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757)); background: -moz-linear-gradient(top, #888, #575757); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757'); } .data-list{ line-height:1.5em; margin-left:5px; margin-right:5px; padding-left:15px; padding-right:5px; white-space:nowrap; text-align:left; font-family:"Arial",sans-serif; font-size:12px; } .list-ganjil{ background-color:#F6F6F6; } .headactive{ color: #fef4e9; border: 2px solid white !important; background: #1C8DFF; background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2)); background: -moz-linear-gradient(top, #9dc2e7, #438cd2); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2'); }

Now save the template by pressing Save Template button
Now we will create a new page for our Table of contents Remember:we will create a new page not post.To create a new page go to Blogger >> Pages >> New Page >> Blank Page
Now Give title to your page i.e "XYZ Table Of Contents" and now under EDIT HTML tab (button) paste the following code

<script src="http://nurulimaminfo.googlecode.com/files/daftarisiv2-pack.js"></script> <script src="http://www.bloggertrickszz.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script> <script type="text/javascript">var accToc=true; </script> <script src="http://deroc.googlecode.com/files/accordion-pack.js" type="text/javascript"></script>
Now after pasting the code above look for http://www.bloggertrickszz.blogspot.com and replace it with your blog URL and Publish the page now go and view your Amazing Table of Contents with Drop down style.

Top 6 Alternatives For Adsense

noreply@blogger.com (Tanmay Kapse) — Fri, 01 Jun 2012 18:26:00 +0000

When ever it comes to earn online, Google Adsense is the only platform which makes sense. Google Adsense is the single online advertising program which is vastly use by countless users all across the globe. Google Adsense allows its users to monetize their blog/website with most desirable advertisements. But on the other hand Google is not allowing small publishers to apply for new Google Adsense account due to the increase in violation of rules and regulations. If any one applies for Adsense account from his blog or website which is of low quality, then they might face detention in form of getting permanently banned from Adsense. So it’s better to stay away from Google Adsense until you establish a high profile blog or website.

This is the major reason why Small Publishers are looking for an alternative for the blogs and website. So today we will share the hottest Google Adsense alternatives. So all the small publishers can get what they richly deserve.

Infolinks – Intext Advertising:

Infolinks is the top most Advertising program after Google Adsense. It provides Intext advertising for all kind of text based websites and blogs. If you have decent traffic on your site then you can make handsome revenue with Infolinks. If you want to use Infolinks you don’t need a high profile website or blog. All you need to do is to apply for a new Infolinks Publisher account and within 24 hours your account will be approved.

How To Get Started – Infolinks:

And after you get approved from Infolinks you can integrate it with your site by simple 3 minutes integration guide. Once you integrated Infolinks with your site, the bots will crawl your site and according to your content will display matched keywords ads. At any time you can sign in to your Infolinks Publishers account to track each and every click that you had received.

Withdraw Rates – Infolinks:

Infolinks has the finest payout rates. You can withdraw your money from PayPal, BankWire Transfer or by using Infolinks debit cards. The minimum payout rates are 50 dollars for PayPal and Debit Cards but for BankWire transfer minimum payout rate is 400 dollars

Clicksor – Deliver where it Matters:

Clicksor.com offers webmasters the opportunity to earn additional income by simply underlining a selection of clickable text or displaying targeted contextual banners on their websites or blogs. Clicksor is the best alternative for Adsense as they have the third largest publisher network after Infolinks and Adsense.

Withdraw Rates – Clicksor:

Another plus point of Clicksor is, like Adsense it doesn’t have a minimum payout of 100$. If your account balance reaches 50$ then straight away you can withdraw it. You can also earn some extra revenue by referring your friend to Clicksor. You can choose to get paid with PayPal, Check or Wired Transfer.

AdBrite – We Serve Your Ads:

AdBrite is very similar to Buysellads.com. It does not provide any automatic advertisements. Instead of showing ads it shows a link Text “Your Ads Here” which allows advertiser to advertise on your site. By using this link users can buy ads from AdBrite which they want to display on your site.

Other Adsense Alternatives:

So These are the remaining hottest Adsense alternative programs.

Chtika: Best CPC website with high paying ads
BidVertiser: Bidvertiser is an excellent alternative to Adsense
Kontera: These are in-line contextual ad networks just like infolinks

So Now what are you waiting for? Just choose among the best Adsense alternatives and start earning equal to what Adsense publishers are earning.This is it for now, till then peace

jQuery Scrolling Image Gallery Widget for Blogger

noreply@blogger.com (Tanmay Kapse) — Fri, 01 Jun 2012 18:13:00 +0000

A Blogger always dream to present his blog in a gorgeous manner. This is the reason why he used different widgets to make it look ideal as widgets play vital role in attracting eyes of their audience. An Image Scroller is becoming essential need of approximately every successful blogger as they use it to present their featured posts. There are many image Scrolling widgets which are available on internet but they either lacks in speed or are unable don’t draw your attention towards them.

Features of Stunning Image Scroller:

Capable of Scrolling Images in both left and right directions
Build with eye catching styling CSS.
Easy to optimize with HTML
No Compromise on Speed
Scrolling Images with JQuery Effect
Scrolling Stops on Image Hover
Title Appear on Image Hover

Inserting Image Scroller Style Sheet CSS in Blogger:

To insert CSS style sheet simply follow the instructions.
Step# 1: Go To Blogger.com >> Your Blog
Step# 2: Then Click on Template >> Edit HTML >> Proceed
Step# 3: Now Search for the following code in your template.

]]></b:skin>

Step# 4: When You Found ]]></b:skin> just above it paste the following code.

/* MBL Stunning Jqury Image Scroller For Blogger*/.js-disabled img { width:100px; height:100px; display:block; float:left; margin:30px 0 0; }
#outerContainer {width:900px;height:202px; margin:auto;position:relative; }
#imageScroller{width:900px;height:202px;position:relative;background:#000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiPzCIWYt4mnQ6i_9XPS96zIlOmNKp0kMEis5Qia_2eLLpHcE3eM6U4GCu5GvKsXkP9Sc3J__bvznxp7R__QlzAPOf9FwfHg1_5V7CjOTh0eu0hiOsJGWTOGVuhbq8si2hviWJkGFV4dk/s1600/1.png) no-repeat; }
#viewer { width:880px;height:182px;overflow:hidden; margin:auto;position:relative; top:10px; }
#imageScroller a:active, #imageScroller a:visited { color:#000000; }#imageScroller a img { border:0; }#controls {width:900px;height:47px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3DkOLA_34PS80AyXvwxdhBWIzqTp0-PTRipytmxGWRYvQYSB8buTCx0T1a-PYvcAqU9CBseEQ4b2ONP8kiRgYkmSEP4LewbszW9-ApQoIvRHtEN_FrUosMl4ukNnT5LVTBddElIwdEqU/s1600/1.png) no-repeat; position:absolute;top:4px; left:4px; z-index:10;}
#controls a { width:37px;height:35px;position:absolute; top:3px; }
#controls a:active, #controls a:visited { color:#0d0d0d; }
#title { color:#ffffff; font-family:arial; font-size:23px; font-weight:bold; width:100%; text-align:center; margin-top:10px; }
#rtl {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3cmbCTGAU-cSSEkzbqY3vGQNqzx7ldJ1JoHdYiQSf7Tp9r5sWQ7z0t3AcrbzLNq_VDg-VzHFoCmyQvxETGkegpmH7lGtTiueONTwR63YhqJ1XeGjerc_FJSEuD53rY2IEycUZu-mQMyY/s1600/rtl.png) no-repeat; left:100px; }
#rtl:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3cmbCTGAU-cSSEkzbqY3vGQNqzx7ldJ1JoHdYiQSf7Tp9r5sWQ7z0t3AcrbzLNq_VDg-VzHFoCmyQvxETGkegpmH7lGtTiueONTwR63YhqJ1XeGjerc_FJSEuD53rY2IEycUZu-mQMyY/s1600/rtl.png) no-repeat; left:99px; }
#ltr {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6yZbl5vX0xmICf86reIsTrGD6ATwdw4d9u4b_cKNZxpyX0sW36EvF6GUOPAAznS5rR1kY440Qbu_m3rPojrY-H1RRrG0Liwkx-EgykfJvmHNVIyAV9Hf49ztlEmTlcshmm8XntIkKgoc/s1600/ltr.png) no-repeat; right:100px; }
#ltr:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4vLJvJ_XPXoq3JhRcqcv76B4dxr_s1Djj-jtnW95xR_X2GPonegbEYjBxcYNNIdtP80lh5w6WGRNVmDZjS3CLKXqh2oY3mStSnFNmgNU_Zegv4X2mjWVTSjY8ykKnaJ86OOmZt4pMAfo/s1600/ltr_over.png) no-repeat; }

Customization:

To Change The width oF the Image Scroller Replace all 900px present in the coding. If you change the width of Scroller then it's must that we change the viewer width 880px and it should be 20px less then the width of Scroller.
To change font size Replace 23px
To change font style Replace arial

Step# 5: Now after customizing according to your choice save template by pressing Save Template button

Inserting Stunning Image Scroller Coding in Blogger:

Simply follow these instructions
Step# 1: Go To Blogger.com >> Your Blog >>
Step# 2: Now Select Layout >> Add a Gadget
Step# 3: Then Click on Add HTML/JavaScript >> and Paste the Following Code

<div id="outerContainer">
<div id="imageScroller">
<div id="viewer" class="js-disabled">
<a class="wrapper" href="First-Image-Destination-URL" title="First-Image-Title"><img class="logo" id="apple" src="First-Image-URL" alt="First-On-Hover-Title" /></a>

<a class="wrapper" href="Second-Image-Destination-URL" title="First-Image-Title"><img class="logo" id="firefox" src="First-Image-URL" alt="Second-On-Hover-Title" /></a>

<a class="wrapper" href="Third-Image-Destination-URL" title="Second-Image-Title"><img class="logo" id="jquery" src="Second-Image-URL" alt="Third-On-Hover-Title" /></a>
<a class="wrapper" href="Forth-Image-Destination-URL" title="Third-Image-Title"><img class="logo" id="twitter" src="Third-Image-URL" alt="Forth-On-Hover-Title" /></a>
<a class="wrapper" href="Fifth-Image-Destination-URL" title="Forth-Image-Title"><img class="logo" id="jqueryui" src="Fourth-Image-URL" alt="Fifth-On-Hover-Title" /></a> <a class="wrapper" href="Sixth-Image-Destination-URL" title="Sixth-Image-Title"><img class="logo" id="jqueryui" src="Sixth-Image-URL" alt="Sixth-On-Hover-Title" /></a> </div> </div> </div> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(function() { //remove js-disabled class $("#viewer").removeClass("js-disabled"); //create new container for images $("<div>").attr("id", "container").css({ position:"absolute"}).width($(".wrapper").length * 170).height(170).appendTo("div#viewer"); //add images to container $(".wrapper").each(function() { $(this).appendTo("div#container"); }); //work out duration of anim based on number of images (100 second for each image) var duration = $(".wrapper").length * 3000; //store speed for later (distance / time) var speed = (parseInt($("div#container").width()) + parseInt($("div#viewer").width())) / duration; //set direction var direction = "rtl"; //set initial position and class based on direction (direction == "rtl") ? $("div#container").css("left", $("div#viewer").width()).addClass("rtl") : $("div#container").css("left", 0 - $("div#container").width()).addClass("ltr") ; //animator function var animator = function(el, time, dir) { //which direction to scroll if(dir == "rtl") { //add direction class el.removeClass("ltr").addClass("rtl"); //animate the el el.animate({ left:"-" + el.width() + "px" }, time, "linear", function() { //reset container position $(this).css({ left:$("div#imageScroller").width(), right:"" }); //restart animation animator($(this), duration, "rtl"); //hide controls if visible ($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ; }); } else { //add direction class el.removeClass("rtl").addClass("ltr"); //animate the el el.animate({ left:$("div#viewer").width() + "px" }, time, "linear", function() { //reset container position $(this).css({ left:0 - $("div#container").width() }); //restart animation animator($(this), duration, "ltr"); //hide controls if visible ($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ; }); } } //start anim animator($("div#container"), duration, direction); //pause on mouseover $("a.wrapper").live("mouseover", function() { //stop anim $("div#container").stop(true); //show controls ($("div#controls").length == 0) ? $("<div>").attr("id", "controls").appendTo("div#outerContainer").css({ opacity:0.7 }).slideDown("slow") : null ; ($("a#rtl").length == 0) ? $("<a>").attr({ id:"rtl", href:"#", title:"rtl" }).appendTo("#controls") : null ; ($("a#ltr").length == 0) ? $("<a>").attr({ id:"ltr", href:"#", title:"ltr" }).appendTo("#controls") : null ; //variable to hold trigger element var title = $(this).attr("title"); //add p if doesn't exist, update it if it does ($("p#title").length == 0) ? $("<p>").attr("id", "title").text(title).appendTo("div#controls") : $("p#title").text(title) ; }); //restart on mouseout $("a.wrapper").live("mouseout", function(e) { //hide controls if not hovering on them (e.relatedTarget == null) ? null : (e.relatedTarget.id != "controls") ? $("div#controls").slideUp("slow").remove() : null ; //work out total travel distance var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width()); //work out distance left to travel var distanceLeft = ($("div#container").hasClass("ltr")) ? totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width())) : totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left")))) ; //new duration is distance left / speed) var newDuration = distanceLeft / speed; //restart anim animator($("div#container"), newDuration, $("div#container").attr("class")); }); //handler for ltr button $("#ltr").live("click", function() { //stop anim $("div#container").stop(true); //swap class names $("div#container").removeClass("rtl").addClass("ltr"); //work out total travel distance var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width()); //work out remaining distance var distanceLeft = totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width())); //new duration is distance left / speed) var newDuration = distanceLeft / speed; //restart anim animator($("div#container"), newDuration, "ltr"); }); //handler for rtl button $("#rtl").live("click", function() { //stop anim $("div#container").stop(true); //swap class names $("div#container").removeClass("ltr").addClass("rtl"); //work out total travel distance var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width()); //work out remaining distance var distanceLeft = totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left")))); //new duration is distance left / speed) var newDuration = distanceLeft / speed; //restart anim animator($("div#container"), newDuration, "rtl"); }); }); </script>

Customization:

Replace First-Image-Title with the Title of your image
Change First-Image-URL With the URL of your image
Replace First-On-Hover-Title with the Text you want to see on Image hover
Replace First-Image-Destination-URL with the URL of your Post
And simply follow the same steps to change Second, Third, Fourth, Fifth and Sixth image Scroller

To insert more Image Scollers simply just after <div id="viewer" class="js-disabled"> paste this code in the coding.

<a class="wrapper" href="Sixth-Image-Destination-URL " title="Sixth-Image-Title"><img class="logo" id="jqueryui" src="Sixth-Image-URL" alt="Sixth-On-Hover-Title" /></a>

Step# 4: After customizing the we will save the widget by pressing Save button

And That's it guys not go view your blog it will give you picture perfect results.

So guys easy enough, but if you still feel any difficulties or errors then feel free to drop down your problem via commenting. I would love yo assist you till then peace Blessing and Happy Scrolling.

Add Some Unique Sharing Buttons to Blogger.

noreply@blogger.com (Tanmay Kapse) — Fri, 01 Jun 2012 17:23:00 +0000

Today's post is very rare. These sharing boxes are very difficult to find.So add this widget in your blog and enjoy. Use my widget generator.

Add a Loading effect to your Blog

noreply@blogger.com (Tanmay Kapse) — Fri, 01 Jun 2012 16:59:00 +0000

Animating your blog really makes your blog stand out from the other blogs . Today i am going to show you an awesome loading effect for your blog. Let me clarify you about this effect. Your visitors just sit there while your blog loads. But not anymore. This loading effect adds an animated loading image as shown above. You can reload this page and see the animated image in work.

How to add a loading effect to your blog ?

Log in with your blogger account.
On the dashboard → Design → Edit HTML.
Now backup your current template.
Tic on Expand Template Widget.
Search for the following code

<body>

Delete this code and replace it with

<body onLoad='init()'><div id='loading' style='position:absolute; width:100%; text-align:center; top:300px;'> <img border='0' src='http://i1220.photobucket.com/albums/dd456/cybersahrul/loading.gif'/></div> <script src='http://loading-js.googlecode.com/files/loading.js' type='text/javascript'/>

Save the template and you are done :)

Cool Hiding Share Buttons for Blogger with Hover Effect

noreply@blogger.com (Tanmay Kapse) — Fri, 01 Jun 2012 11:10:00 +0000

Want some cool sharing buttons for your blog ? This post could be your answer.
This sharing bar floats in your lower left hand side . Its a cool horizontal bar with a CSS effect. You must try this .

Live Demo >>;>

So lets begin !

How to implement this in your blog ?

Go to Blogger → Design → Edit HTML
Search for the following code

</head>

Copy and paste below code just above </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="https://rafiblog.googlecode.com/svn/trunk/css3sharebar1.js" type="text/javascript">
</script>
<script src="https://rafiblog.googlecode.com/svn/trunk/css3sharebar2.js" type="text/javascript">
</script>
<link href="https://rafiblog.googlecode.com/svn/trunk/css3sharebar.css" rel="stylesheet" type="text/css"></link>

This widget should help you get your blog shared by your visitors. So try it !

Translate Widget for your Blog

noreply@blogger.com (Tanmay Kapse) — Mon, 28 May 2012 17:53:00 +0000

Once your blog is popular , it becomes necessary for you to make it user friendly .The first step towards the making of a user friendly blog is the language.

This widget will allow your blog to be converted into 54 different languages. Have a look in the right hand side of my sidebar. Its with the name " Translate "

Steps :

Click on the following Button and add it to your blog.

I hope you liked this post .
Plz share this page :)

Horizontal Floating Share Bar With Close Button For Blogger

noreply@blogger.com (Tanmay Kapse) — Mon, 28 May 2012 17:39:00 +0000

Today we are sharing another cool social bookmarking for blogger.This is a horizontal floating share bar containing AddThis share buttons.This gadget is created by AddThis.com and we bloggerized this gadget to work perfect with your blog.It contains a close and plus buttons,when any visitor hits the close button then the bar goes inside and shows the plus button.When again he/she clicks the plus button then it appears.I have kept the installation easy as possible as you just have to copy and paste the two pieces of code.Now lets go to tutorial,before adding it to your blog see the demo first.

Live Demo >>

How To Add Horizontal Floating Share Bar To Blogger?

Go to Blogger Dashboard > Design > Edit HTML (In new User Interface it is Dashboard > Template)
Now find for </head> tag in your template.
Add below code just before </head> tag.

<script type="text/javascript">
var addthis_config = {
bar_show_below : 150
}
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>

Now find for </body> tag.
Add below code just before </body> tag.

<div class="addthis_bar addthis_bar_medium">
<label>Share This Page:</label>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<span><a class="addthis_button_preferred_1"></a></span>
<span><a class="addthis_button_preferred_2"></a></span>
<span><a class="addthis_button_preferred_3"></a></span>
<span><a class="addthis_button_preferred_4"></a></span>
<span><a class="addthis_button_compact"></a></span>
<span><a class="addthis_counter addthis_bubble_style"></a></span>
</div>
</div>

Now save your template and you are done..

Go to your blog,you will see this floating horizontal share menu.

Remove Border And Shadows From Your Blogger Images

noreply@blogger.com (Tanmay Kapse) — Mon, 28 May 2012 17:29:00 +0000

If you want to remove borders and shadows of your images in your blog then here I have a simple trick to remove border and shadows of your blogger images.We will do this with using a small piece CSS code.Just follow my steps carefully,

How To Remove Border & Shadows Of Your Blogger Images?

Go to Blogger Dashboard > Design > Edit HTML
Download/Backup your template
Now search for ]]></b:skin>
Add below code just above ]]></b:skin>

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,.BlogList .item-thumbnail img { padding: none !important; border: none !important; background: none !important; -moz-box-shadow: 0px 0px 0px transparent !important; -webkit-box-shadow: 0px 0px 0px transparent !important; box-shadow: 0px 0px 0px transparent !important;}

Now save your template and refresh your blog.Now your blog should appear without any borders and shadows.

Enjoy !

How to find out Gadget ID's ?

noreply@blogger.com (Tanmay Kapse) — Mon, 28 May 2012 12:19:00 +0000

Sometimes you need to find out your blogger's widget Id to customise that particular widget.

To find out the widget Id , follow the given steps :

Steps :
1.Go to Design-->Page Elements.
2. Click the Edit Option on the Widget/Gadget.
3. Once the Widget/Gadget Opens you should see something like this below.

For this gadget I have here my ID is HTML14.

This is case sensitive so copy it just as you see it.

Add Simple Scroll To Top Button With jQuery To Blogger

noreply@blogger.com (Tanmay Kapse) — Mon, 28 May 2012 11:56:00 +0000

In this post I will give you a tutorial about adding the simple scroll to top button to your blog.Here I have used CSS and jQuery.When any visitor clicks on it the Scrolling Starts from bottom with a Certain speed and it Ends with Gradually Decreases the speed,this effect is looks more attractive.Now lets see how to add this button to your blog.

How To Add Simple Scroll To Top Button To Blogger :

Go to Blogger Dashboard > Design > Edit HTML.
Now find for tag </body> in your blog.
Add below code just above/before </body> tag.

<style type="text/css">#hb-gotop{-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;}</style><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script><script type='text/javascript'>$(function() {$.fn.scrollToTop = function() {$(this).hide().removeAttr("href");if ($(window).scrollTop() != "0") {$(this).fadeIn("slow")}var scrollDiv = $(this);$(window).scroll(function() {if ($(window).scrollTop() == "0") {$(scrollDiv).fadeOut("slow")} else {$(scrollDiv).fadeIn("slow")}});$(this).click(function() {$("html, body").animate({scrollTop: 0}, "slow")})}});$(function() {$("#hb-gotop").scrollToTop();});</script><a href='#' id='hb-gotop' style='display:none;'>Scroll to Top</a>

Change the wordings Scroll to Top if you wish to .

I hope you liked the post .

Please share it with your blogging friends.

Always Redirect Your Blogger Blog To blogspot.COM

noreply@blogger.com (Tanmay Kapse) — Mon, 28 May 2012 09:49:00 +0000

Recently Google changed a lot of things along with their policies. Google started redirecting blogger blogs to country-specific URL.Lets consider that you have open anyblog.blogspot.comin your browser, you might be redirected to anyblog.blogspot.in if you are located in India or to anyblog.blogspot.com.au if you access the same blog from Australia.It is not a new thing since few days that your blogspot.com blog may redirect to a country based domain. Perhaps it is worldwide. Every blogger blog owner may have the same problem of automatic redirection. So here in this post, we have a tweak that enables your blog to stay on blogspot.com URL.

How To Redirect Your Blogger Blog To .Blogspot.Com?

We will apply this hack with using very short JavaScript.

Go to Blogger Dashboard > Design > Edit HTML.
Take a backup/download your template.
Find for </head> tag.
Add below piece of JavaScript code just above </head> tag.

<script type="text/javascript">
var blog = document.location.hostname;
var slug = document.location.pathname;
var ctld = blog.substr(blog.lastIndexOf("."));
if (ctld != ".com") {
var ncr = "http://" + blog.substr(0, blog.indexOf("."));
ncr += ".blogspot.com/ncr" + slug;
window.location.replace(ncr);
}
</script>

Now save your template.
Now your Blogger Blog will always redirect to the blogspot.com URL.

That was the simple solution for a big problem. I hope you all will like this hack.

How To Introduce A Free Loyalty Program On Your Blog

noreply@blogger.com (Tanmay Kapse) — Sun, 27 May 2012 17:50:00 +0000

Loyal readers form the backbone of a blog. Making that loyalty a rewarding experience can do wonders to your blog's reputation as well as its traffic. The first thoughts about these so called "Loyalty Program" might be about their hefty costs but here PunchTab comes into the picture.

More about PunchTab

PunchTab is a instant loyalty platform that allows blog owners to create loyalty program for free in minutes. Using it you can integrate a reward program for your readers without any hassles of costs or coding.

How it Works

PunchTab requires that user to authenticate through Facebook to enroll into the loyalty program. After that they can start earning reward points for the following activities:

Visiting – for their first visit to your site every day your users will earn 100 points

Liking your content– for their first Like on your site every day your users will earn 100 points

Tweeting your content – for their first Tweet on your site every day your users will earn 100 points

Google +1 your content – for their first Google +1 on your site every day your users will earn 100 points

Commenting – for their first comment of the day your users will earn 100 points

After they reach a certain points level, they can select a coupon from the catalog and redeem their points.

Is it Free?

Hell yes !! , the default catalog which contains three coupons (Including Amazon gift card) is absolutely free But in case you decide that these rewards don't meet your goals ,then you are free to make a Custom catalog which contains rewards of your choice and at the points of your choice. In custom catalog you have option to add your own actions for which points are given like following a account,voting for a poll,etc

How Do I integrate it into my Blog

1. Go to PunchTab.com and sign up with a valid email and blog address. (You have to confirm that email ,but you can do that later.)

2. After that you will be redirected to a page asking whether you want to create a Loyalty Program or a One time Giveaway. Select the loyalty program option.

3. Now you will be asked to choose your platform, Choose Blogger and continue.

4. Now you will be asked to select various things about the loyalty program like where the ribbons is to be placed, about the catalog,etc. After selecting the options click on "Install Loyalty program".

5.Again click on the Install PunchTab button and you will be redirected to Blogger for adding the Widget.After you have added the widget successfully , you will see a ribbon on your Blog named "Rewards"

6. Now click on the Reward ribbon and become the first Loyal reader of your own blog after authenticating yourself through Facebook

Some things to Note

As you might have thought in the last step, you can yourself become a point earner on your own blog and then redeem those too.
As of now, third party sharing widgets like ShareThis ,AddThis are not supported by PunchTab. Only default Like,Tweet and Plusone button are supported.
The Plusone button requires that you add a <div class='punchtab-plusone' ></div> ,where you want the Plusone button to appear.
The Plusone buttons has some defects too. In case the Reader Un+1 any content and then again +1 that content , then they get points even if they had +1ed it earlier.
You get either the option to add a Ribbon or a Sidebar Gadget. In the ribbon option you have 4 default placement options. In case they overlap with your content, you can move it easily with CSS. For example if you wanted to move the ribbon 50px up then this is the code

#red_tab{top:-50px !important;}

A small red ribbon appears before every Share button telling your readers that they earn points by doing that action (like Tweet ,Like ,Plusone and Comment) . In case you don't want it appear before the share buttons then in the widget add the following line of code. More Info here

earningmap: false
Blogger comments are supported but only the embedded once and not the Popup once

4 in 1 floating share buttons .

noreply@blogger.com (Tanmay Kapse) — Sun, 27 May 2012 16:52:00 +0000

No place for sharing buttons ? Don't worry add this widget and make you blog look cooler and also save some space for your other widgets.

Live Demo >>

Instructions :

Log in to blogger
Go to layout > add a gadget > html/javascript
Copy the code below and paste it in the box.

<style>
img,a {
border: 0;
}
#on {
visibility: visible;
}
#off {
visibility: hidden;
}
#facebook_div {
width: 196px;
height: 340px;
overflow: hidden;
}
#twitter_div {
width: 246px;
height: 353px;
overflow: hidden;
}
#google_plus_div {
width: 152px;
height: 97px;
overflow: hidden;
margin-left: 50px;
margin-top: 10px;
}
#knfeedburner_div {
width: 300px;
height: 97px;
overflow: hidden;
margin-top: 5px;
margin-left: -4px;
}
#kakinetwork_div {
width: 300px;
height: 97px;
overflow: hidden;
}/* right side style */#facebook_right {
z-index: 10005;
border: 2px solid #3c95d9;
background-color: #fff;
width: 196px;
height: 353px;
position: fixed;
right: -200px;
}
#facebook_right img {
position: absolute;
top: -2px;
left: -35px;
}
#facebook_right iframe {
border: 0px solid #3c95d9;
overflow: hidden;
position: static;
height: 360px;
left: -2px;
top: -3px;
}
#twitter_right {
z-index: 10004;
border: 2px solid #6CC5FF;
background-color: #6CC5FF;
width: 246px;
height: 353px;
position: fixed;
right: -250px;
}
#twitter_right_img {
position: absolute;
top: -2px;
left: -35px;
border: 0;
}
#google_plus_right {
z-index: 10003;
background-color: #F2F2F2;
border: 2px solid #006ec9;
border-top: 2px solid #0056a0;
border-bottom: 2px solid #0056a0;
border-right: 2px solid #0056a0;
border-left: hidden;
width: 152px;
height: 97px;
position: fixed;
right: -154px;
}
#google_plus_right_img {
position: absolute;
top: -2px;
left: -33px;
border: 0;
}
#feedburner_right {
z-index: 10003;
background-color: #fefefe;
border: 2px solid #5b5b5b;
border-top: 2px solid #5b5b5b;
border-bottom: 2px solid #5b5b5b;
border-right: 2px solid #5b5b5b;
border-left: hidden;
width: 300px;
height: 97px;
position: fixed;
right: -303px;
}
#feedburner_right_img {
position: absolute;
top: -2px;
left: -33px;
border: 0;
}
#kakinetwork_right {
z-index: 10003;
border: 2px solid #303030;
background-color: #fff;
width: 300px;
height: 97px;
position: fixed;
}
#kakinetwork_right img {
position: absolute;
top: -2px;
left: -101px;
}/* left side style */#facebook_left {
z-index: 10005;
border: 2px solid #3c95d9;
background-color: #fff;
width: 196px;
height: 353px;
position: fixed;
left: -200px;
}
#facebook_left img {
position: absolute;
top: -2px;
right: -35px;
}
#facebook_left iframe {
border: 0px solid #3c95d9;
overflow: hidden;
position: static;
height: 360px;
right: -2px;
top: -3px;
}
#twitter_left {
z-index: 10004;
border: 2px solid #6CC5FF;
background-color: #6CC5FF;
width: 246px;
height: 353px;
position: fixed;
left: -250px;
}
#twitter_left_img {
position: absolute;
top: -2px;
right: -35px;
border: 0;
}
#google_plus_left {
z-index: 10003;
background-color: #006ec9;
border: 2px solid #006ec9;
border-top: 2px solid #0056a0;
border-bottom: 2px solid #0056a0;
border-left: 2px solid #0056a0;
border-right: hidden;
width: 152px;
height: 97px;
position: fixed;
left: -154px;
}
#google_plus_left_img {
position: absolute;
top: -2px;
right: -33px;
border: 0;
}
#feedburner_left {
z-index: 10003;
background-color: #fefefe;
border: 2px solid #5b5b5b;
border-top: 2px solid #5b5b5b;
border-bottom: 2px solid #5b5b5b;
border-left: 2px solid #5b5b5b;
border-right: hidden;
width: 300px;
height: 97px;
position: fixed;
left: -303px;
}
#feedburner_left_img {
position: absolute;
top: -2px;
right: -33px;
border: 0;
}
#kakinetwork_left {
z-index: 10003;
border: 2px solid #303030;
background-color: #fff;
width: 300px;
height: 97px;
position: fixed;
}
#kakinetwork_left img {
position: absolute;
top: -2px;
right: -101px;
}
.box-title1 {
border: 1px solid #ddd;
/*border-radius*/
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
/*box-shadow*/
-webkit-box-shadow: 5px 5px 5px #CCCCCC;
-moz-box-shadow: 5px 5px 5px #CCCCCC;
box-shadow: 5px 5px 5px #CCCCCC;
padding: 10px;
margin: 10px 0;
}
.enteryouremail {
background: #fff !important;
border: 1px solid #d2d2d2;
padding: 0px 8px 0px 8px;
color: #a19999;
font-size: 12px;
height: 25px;
width: 165px;
/*border-radius*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 0px;
}
.submitbutton {
background: #F2F2F2;
border: 1px solid #F66303;
/*box-shadow*/
-webkit-box-shadow: 3px 3px 3px #666;
box-shadow: 3px 3px 3px #666;
font: bold 12px Arial, sans-serif;
color: #000000;
height: 25px;
padding: 0 12px 0 12px;
margin: 0 0 0 5px;
/*border-radius*/
-webkit-border-radius: 5px;
border-radius: 5px;
cursor: pointer;
}
</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); }); jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); }); jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); }); jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); }); });</script>
<div id="on">
<div id="facebook_right" style="top: 18%;">
<div id="facebook_div">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRS7WC6EKnlC3cGi_JKlXUwhLpuLX3pOEZq7jf3493xcEpu-qgnNFMdGCrFZrjwmxFUByM_aA9zutPDNs8kita9BgI_nPLMN2dJijByeKsezEGTPpR7zezOXdaJ0P5Iayf9qT06pwh8Ec/s1600/shipsocker.com-facebook-icon.png" alt=""/>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbloggertrickzz&width=200&height=346&colorscheme=light&show_faces=true&border_color&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:346px;" allowtransparency="true">
</iframe>
</div>
</div>
</div>
<div id="on">
<div id="twitter_right" style="top: 35%;">
<div id="twitter_div">
<img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrfO8_7EYoZ720Ra5CHUahmspKoHjt1wK9lXeCxZhkANMv8iwaeiAcWAGOENxfwl1PfLqnaylupxiIbEWlSmikC99-SqTanaWrQL6vK5n0twCuI1acikcvpBgsGLNu0N18jnNR_QztIQ8/s1600/shipsocker.com-twitter-icon.png"/>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 265,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }}).render().setUser('shipsocker').start();</script>
</div>
</div>
</div>
<div id="on">
<div id="google_plus_right" style="top: 52%;">
<div id="google_plus_div">
<img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ2tN1ps10HjvpSpphXgOTdU9IfyXLFENZCUKzna7970PFceuklVSkFyumRnWq5Z-BD5_viP5D82mf9dkI6MNd9pTRtA-_uOlNRzSHu4s4RsX6QlLlwlJJgcCFwmfp0T4fSN-VyHBQJLs/s1600/helperblogger.com-google-plus-icon.png"/>
<div style="float:left;margin:10px 10px 10px 0;">
<g:plusone size="tall" expr:href="data:post.url"></g:plusone>
</div>
</div>
</div>
<div id="on">
<div id="feedburner_right" style=" top: 69%;">
<div id="knfeedburner_div">
<center>
<h4 style="color:#F66303;">You can also receive Free Email Updates:</h4>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=btzz', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text"/><input value="btzz" name="uri" type="hidden"/><input value="Submit" class="submitbutton" type="submit"/>
</form>
</center><img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUbzHyDjriuAUYxM4N-rHTIHxtsv8OaCfpWVaFpPWkgqiUCHaeowm8dl-_0czNLJfHBwzG2oYBAbaRfDnJFeSJe8oMs_tBKx1qGgFo2yHj7PMvDamzXgqrIGOu-ipI3VcSI5sqDvVGIaY/s1600/helperblogger.com-subscribe-icon.png"/>
</div>
</div>
</div>
</div>

Change the highlighted links to your respective links .

I hope you liked the post.

Popping Share Buttons for Blogger - Easy Method

noreply@blogger.com (Tanmay Kapse) — Sun, 27 May 2012 15:54:00 +0000

This new Pop up Share buttons by shareholic is just beyond words for it to be described. Shareoholic has always been famous for its sharing buttons. This times it's no different. This new sharing widget is bound to get some attention from the visitors. See it in action here :

Live Demo >>

Installation :

Login to your blogger account
Layout > Edit Html
Now find the following code in your blogger ( Ctrl+f )

</body>

4. Below it add the following code

<div class="shr_ss shr_publisher">
</div>


<script type="text/javascript">
var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark", "link":"","service":"5,7,2,313,38,201,88,74","apikey":" b87f5899d80a5edce8b5e55f58542ef0f","localize":true," shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color": "black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
</script>


<script type="text/javascript">
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script>

Now save your template and you are done

I hope you will like this gadget.

Flash Animated Label Cloud Widget For Blogger

noreply@blogger.com (Tanmay Kapse) — Sun, 27 May 2012 09:14:00 +0000

Flash Animated Label Cloud Widget(Blogumus) for blogger was awesome widget to show blogger labels in alternatively.With this widget we access label tags randomly by your mouse over the Flash object to see the animation begin, the labels are animated around Sphere.

You can see the demo at the end of the page in the footer .

Installation :

Login to blogger
Layout > Add a Gadget > Html / Javascript
Copy the below code in it and save .

<div id="mdFlashContent"><p style="display:none;">Flash Labels by<a href="http://www.gj37765.blogspot.com/">Making Different</a></p></div><script type="text/javascript">/*<![CDATA[*/var mdFlashLabelSettings = { blogurl : "http://yourpcgenie.blogspot.com/", color : "000000", hoverColor : "333333", backgroundColor: "FFFFFF", size : 12, speed : 100, width : 250, height : 300};/*]]>*/</script><script type="text/javascript"src="http://dl.dropbox.com/u/40342393/md_new_flash_label_cloud.js"></script>
<a href="http://www.bloggertrickszz.blogspot.com/2012/05/powered-by-blogger-hover-effect.html"><small>Get It </small></a>

Change the link to your blog url.

Save Arrangement

Drop Your Comments and Questions Below.... :)

How to Get more Likes for your Blog ?

noreply@blogger.com (Tanmay Kapse) — Sat, 26 May 2012 12:30:00 +0000

Visitors seem to trust on your posts more if they see your posts being shared a wide number of times. And if they start trusting your posts they are bound to do something more for the promotion for your blog.Hence its the trust energy we have to provide to them.And this trust energy comes from the number of times your blog has been shared.

Talking of sharing , the only name that come's up is Facebook.Placing like buttons for your blog is a good idea to use. Previously facebook share buttons were used. But now facebook like buttons are on a roar.This time we are going to take help from your facebook friends.

So how exactly can you increase the number of likes for your facebook fanpage ?

Assuming you have created a account on facebook page of your blog , we begin with the instructions. If you haven't created it is highly recommended you do make one.

So let's begin :-

Login to your facebook profile .
Go to your facebook fanpage
There you will see " Admin Panel "
Below that look for a box with its heading as " Invite Friends "
Click on Invite button
Click as many as you can .

This usually results in 5-8 likes in a day. You can keep doing so as many times you want. After all numbers do matter !!

As you would like your blog to be promoted even i want to . Please help me do so .

It takes only 5 mins to share .......

Add Fully Customizable Scrolling Posts

noreply@blogger.com (Tanmay Kapse) — Fri, 25 May 2012 10:27:00 +0000

Want to draw attention of your visitors on your recent posts? Adding animations to it can help your cause. This widget exactly does the same thing . It adds a an animated scrolling posts lists. Its fully customizable. Have a look at the widget below.

Live Demo >>

How To Install This Widget On Blogger?

Add a Gadget > Html/Javascript

<script type='text/javascript'> var mdWidth="100"; var mdScrollAmount="10"; var mdScrollDelay="150"; var mdDirection="left"; var mdtargetlink="yes"; var mdnumPosts="10"; var mdBulletchar =">>>";
var mdimagebullet="yes";
var mdimgurl="https://lh5.googleusercontent.com/_Ew0x_ybA53U
/TbqItqHQDjI/AAAAAAAAAk4/etWxg7lxrWk/JerryAni.gif";
var mdfontsize="16"; var mdbgcolor="FFFFFF"; var mdlinkcolor="FF0000"; var mdlinkhovercolor="3366CC";</script>
<script type='text/javascript' src='http://gj37765.googlecode.com/svn/trunk/h
tml/mddemo/making
different2.js' ></script>
<script type='text/javascript' src="http://bloggertrickszz.blogspot.com/feeds/posts/defaul
t?alt=json-in-script&callback=
mdAdvRecentPostsScrollerv3&max-results=10"
></script><a href="http://goo.gl/
yu486">Get This</a>

Customize :

You can change the look of the widget by changing certain values. They are highlighted in various color's.
Use the color code generator to change colors.

var mdWidth="100"; - Change the value 100 to change the width of the widget

var mdScrollAmount="10"; - Change the value of number of scrolls

var mdScrollDelay="150"; - Change 150 to change the speed of scrolling

var mdDirection="left"; - Change left to right for the scrolling to start from right hand side.

var mdtargetlink="yes"; - Change to no if you don't want clickable links.

var mdnumPosts="10"; - Minimum number of posts ( change 10 )

https://lh5.googleusercontent.com/_Ew0x_ybA53U/TbqItqHQDjI/
AAAAAAAAAk4/etWxg7lxrWk/JerryAni.gif - Change the link for your own custom image. Its a good idea to use your blogger favicon ( size - 36x48 )

Change the font properties by changing the values below :

var mdfontsize="16";

var mdbgcolor="FFFFFF";

var mdlinkcolor="FF0000";

var mdlinkhovercolor="3366CC";

Drop your comments and questions below :)

If You Enjoyed This Post Please Take 5 Seconds To Share It.

Automatic Read More Hack For Blogger

noreply@blogger.com (Tanmay Kapse) — Thu, 24 May 2012 17:46:00 +0000

By default Blogger shows all the contents from your post on your blog homepage. Having everything on your homepage will make your blog homepage load slower. This might result in getting lower page views as your readers can read all your posts on a single page. So, it’s better to give a summary of your posts on your blog’s homepage and then add a ‘read more’ link below that post summary.

"Automatic Read More Hack For Blogger" i.e an expandable post hack for blogger with thumbnail of image used in blogger posts. It automatically creates a teaser instead of showing the entire post on the front page of your blog. If your readers like a post, then they can click the ‘read more’ link to view the full post.

How To Install Automatic Read More Hack To Blogger?

Log in to Blogger, go to Template-->Edit HTML
Tick the "Expand Widget Templates" checkbox.
Search for </head> in your blog HTML
Copy and paste the following code immediately before/above it.

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Note : You can change the numeric numbers according to your need

summary_noimg = 430; is post cut height without image
summary_img = 340; is post cut height with image
img_thumb_height = 100; is thumbnail image height
img_thumb_width = 120; is thumbnail image width

Next find (CTRL+F) <data:post.body/>
Replace it with below codes.below.

<b:if cond='data:blog.pageType == "static_page"'><br/>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>

Save the template.

Live Demo

I hope you liked the post.Dont forget to share this with your friends