11 April, 2015

Customize Labels Cloud in Blogger

Customize Labels Cloud in Blogger

Back in the year 2008 when Blogger.com was moving through several update phases, third party developers would often take the golden opportunity of creating widgets for BlogSpot blogs but as soon as Google rolled out massive changes to their online services, several official widgets popped out which load fast and perform well because the scripts are served by Blogger servers. Page List and label cloud/list enabled designers to create dynamic menus. Since the stylesheet was made accessible. therefore we all got a chance to play with these widgets and transform them completely in look and appearance. We shared tutorials first time on how to create dynamic menus with page list and an automatic menu with label list and today we would share a simple stylesheet that will transform the labels cloud into organized small blocks that rotate on mouse over. I must ensure you that the styles are perfectly compatible in all major browsers including IE8+.

DEMO: Look at the label cloud on the sidebar of this blog

This is how labels look in cloud display:

This is how it will look after you apply the new style.

How it works?

Each label link is nested inside a span tag followed by a class named label-size. If the font-size is not specified the widget changes font-size of each label according to its post-count. Therefore showing big and small clouds. Introducing custom styles would over-ride the exiting styles thus changing the entire look. 
Turn Random Cloud display into Blocks

The code below can be customized in several ways to create exciting label designs. You can also add background images to them.
Follow these easy steps:
  • Go to Blogger > Settings> Layouts
  • Click add a gadget and choose Labels                     
  • Inside the settings make sure to choose the cloud display. You may set other options as per your requirement. See the screenshot below as example 

Please choose to display at most 25 labels. Too much labels on homepage look awkward. Showcase your best categories only.

4.    Now save the widget and go to settings > Template
5.     Backup your template
6.     Click Edit html > Proceed  and search for this


7.   Just above it paste the following CSS code:

  /*-----Custom Labels Cloud widget by www.publishdocs.com----*/
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
.label-size a  {
text-transform: uppercase;
text-decoration: none;
.label-size a:hover  {
text-decoration: none;

 8.  Save your template
 9.    All done!
Visit your blogs and see the labels completely transformed to small neatly crafted rectangular boxes. If in case you want the label boxes to be of random sizes depending on the post-count then simply delete font-size:10px; from the above code. 
Need help?

I am sure the installation of this tweak wont trouble you a lot, if in case you needed help in changing the font colors on active, hover and visited modes then let me know. By default the visited link will turn black, unlinked and would also not rotate. Click any of your label links and see that page to check this effect.
I will be posting normal tutorials on plugins and widgets and I have got some new SEO tweaks for blogger blogs that would further improve your SERP ranking. I am sure you would love to try them out. Peace and blessings pals :)

15 February, 2015

How To Add Adsense Inside Blogger Post

How To Add Adsense Inside Blogger Post

Sometime you must be worried about your less google adsense revenue and try to be the best to increase the revenue but all in vain and can never be successed in such situation. Although we know that google adsense highly revenue mosltly depands upon the SEO of your blog "highly seo rank of your blog better will be the google adsense income" So in today post we will give you some amazing tips through which you can easily increase your google adsense revenue.

One of the best way to increase the google adsense revenue is to change the locations for your adsense banners and insert it into proper area where visitors come a across. Now to do this we will add the adsense code in below every post, after in every post title and in sidebar. In this way you will get maximum clicks on your ads once used it in proper area.

How To Add Adsense Ads Inside Your Blogger Post

Now you can easily put your ads inside blogger post just follow these simple steps:

We will have to parse our AdSense code>>>(Parse It Here )  Or (Parse Here )
Now you will add your parse code in the below piece of code and then use it in template

Add Your Adsense Inside Post Left Side

<b:if cond='data:blog.pageType == "item"'>
<div style="float:left;">
your adsense code goes here </div>

Add Your Adsense Inside Post Right Side

<b:if cond='data:blog.pageType == "item"'>
<div style="float:Right;">
your adsense code goes here  </div>

Now Put Your Adsense Customize Code In This Way

  • Go to blogger dashboard >>edit html>>expand widgets:
  • Press (ctrl+F) and search this  <data:post.body/> if you find it twice in your template <data:post.body/> then try for both and check the result which is one is correct.
  • If you want to add adsense ads at the top of post then simply past your code just above it  <data:post.body/>
  • If you want to add adsense ads at the bottom of post then simply past your code just below it <data:post.body/>
  • If you have any query then feel free to ask your response will back in an hour.
  • Join us your choice here Facebook, Twiter, Google Plus, Blogger.  

06 February, 2015

How to remove Labels number (counter)

How to remove Labels number (counter)

In default Blogger templates, in your Label list, you can see the counter (number) beside each label. If you would like to get rid of this, read on. It takes a minute....

Ok. Let's remove them. Before you do anything Back up your template.
Go to:
DASHBOARD ► LAYOUT ► EDIT HTML ► click on EXPAND WIDGET TEMPLATES in the upper right corner:

You have to find the following line of code:


Delete it. Save the Template. View your Blog. Ta-dam!

Remove Quickedit Icons in Blogger-Pencil, Wrench

Remove Quickedit Icons in Blogger-Pencil, Wrench

These quick edit icons are very useful in fact. You can edit your Posts and all the Widgets (Gadgets) in one click...
They do mess up the looks a little bit, but only for your eyes. Nobody else can see those icons...
But, if they are unnecessary to you, there's a way to remove/hide them.

To do this, you will have to go to: LAYOUT ► EDIT HTML ► and paste the code:


...paste the code in orange ABOVE the existing code (in white)...

Sign in to your blogger account, then go to: DASHBOARD ► SETTINGS ►BASIC, select "No" beside "Show Quick Editing on your Blog?".
Save Settings. And that's it.

First, back up your template. Then go to:
DASHBOARD ► LAYOUT ► EDIT HTML ► click on the EXPAND WIDGET TEMPLATES, and find the following line in the code section (use CTRL + F for searching):

<b:include name='quickedit'/>

...you have to delete that line. Sometimes, you have to do it for every widget. For example, if you have 3 "screwdrivers", that means you have 3 widgets, and you have to delete a line for each..

29 January, 2015

Easy Navigation by Adding back to top button on your Blog

Easy Navigation by Adding "back to top" button on your Blog

Today, you will be getting a Back to Top button from this tutorial; which you can apply to your blog. I wanna explain a story behind dish up this tutorial for you. I was visiting an online shopping store before couple of days. I scrolled down for watching stuff, it was a long page. Unexpectedly, I changed my mind to see category of goods. I scrolled up to home but the web page got hanged due to long way scrolling. I literally stuck and wanted to get out of that site; but it has taken 3-5 mins. And these 5 mins were enough to probe questions in my mind.

That's what I thought;

  • What if someone faces the same trouble with our blog? 
  • What If my readers are reading a long article on our blog and suddenly they decide to go to Sitemap which is on top.
  • What if visitors are on the bottom and they don’t want to waste their time for scrolling up?

The Answer is;

Readers will move from our blog to another, nobody has time to stay on a blog or website for a long time especially when, there are many other blogs available online to provide the solution you are searching for.

Well, a lightning bulb popped up on my head :)

I decided to offer an easy navigation to my readers so that they can roam our blog freely and read a long article without much hoo-hah

So guys, this is the reason, I added a back to top button in left bottom of our blog. You can also use it for providing ease to your readers.


The back to top which we are gonna tell you about is floating. Means, it will remain in the bottom even if you scroll the page. It can be visible all time. We are going to add this, with the help of HTML code inside the Blog Template along with showing two options to get back to top on your blog. So here we go..

1st Option;

1. Login to your account on Blogger

2. Backup/Restore your Blog template

3. Go to Blogger Dashboard > Template > Edit HTML

4. Find </body> with the help of CTRL+F

5. Paste below code just after </body>

<a href='#' style='position: fixed; bottom:5px;left:5px;' title='Back to Top'>
<img src='http://i998.photobucket.com/albums/af109/dp2115/Back%20to%20Top%20Button/rbbacktotop9_zpse996d896.png' style='border: none;'/></a>

6. Replace blue highlighted image URL with your desired back to top button URL.

- You can use back to top images by clicking on our Photobucket account

Recommended: To get image URL, you can take reference from our Pin It button tutorial (read the example after 2nd point in Pin it Tutorial)

7. Save Template and View Blog.


2nd Option;

If you want to show only Text “Back to Top” instead of image on your blog bottom, so paste below code after following 5th step and use 7th step.

<a href='#' style='position: fixed; bottom:5px;left:5px;' title='Back to Top'>
<img src='' style='border: none;'/>Back to Top</a>

You can go for any one of the given options. if you go with 1st option then see your Back to Top navigation button in bottom left corner of your blog. If you want to get it in right side of your blog, you can replace the green highlighted area with “right”

See how I added PayPal Donate button to my Blogger blog within 5 minutes.

See how I added PayPal Donate button to my Blogger blog within 5 minutes.

Hello my dear readers,

There are many good hearted people in this world who visit your site, read your contents and mark your hard work behind the writing. Those people understand the worth of your work and do not shy away to support your travail. Adding a PayPal donate button to your blog provides them an opportunity for showing their appreciation. This means, you can get enough surplus cash to keep your blog or website alive and pay the bills.

In order to that, today we are gonna share about PayPal donate button which you can add to your blog within 5 minutes. Adding a donate button, doesn't mean to daunt visitors with a pay wall. It is up to you, how you display your PayPal donate button on your blog! For example; You can add as a gadget in sidebar or in your Static page.

But we would suggest you to add it an effective way so that your visitors can see it and understand your concern. Well, PayPal does not require getting an introduction, we all know it is a most popular way to transfer money online and secure as well.
So, do you want to add this on your blog too? Then, read below requirements before proceeding.

  • You should have a PayPal account, if you haven’t made yet, so Sign up PayPal first.
  • Make sure, you have a premier account instead of a personal account. (You can upgrade from personal to premier free of cost at PayPal)

Note: Although, this tutorial is not about PayPal account or activity, so we will not go for swimming in it. But, If you need any guidance, you can simply draw comments below, we will definitely respond you. On the other hand, you will be getting tutorials over PayPal and related topics in upcoming working days. You can Subscribe Us to get updated with latest post also.

Now, come on let’s go to tutorial.

Generate PayPal Donate Button Code


If you are tired to search donate button option with PayPal, then follow each step of this tutorial correctly; you will be getting success in catching it for your blog.

1. First of all, confirm you are not signed in to the PayPal account, if you are, then Log out.

2. Click on this PayPal link

3. Click on “Create your button now” as shown below.

4. You will be redirecting a window page, where you will need to have filled the required columns, see below image.

5. Write you Organization name and Donation Id (optional)

6. Select Currency, If you are an Indian then choose the USD option as INR is not available.

7. Click on any one option below Contribution Amount

8. Most importantly enter the email id of your PayPal account. 

9. Do not go for 2nd and 3rd option, click on ‘Create Button’ directly.

10. Copy the HTML code of PayPal button from the window as shown below.

Process to Add PayPal Donate Button on your Blog

1. Go to your Blogger Dashboard

2. Go to Layout > Add a gadget > Select HTML/Java Script. 

Must read: How to Add a gadget to your Blog?

3. Give a title and paste copied code in content section as shown in below.

4. Save the gadget, that’s it. 

View Blog you can see your PayPal Donate button there. 

You can also create a separate page for it, and write the genuine reason for getting donation like we did. You can see our donate page.
If you want to show donate button on a post, then you can paste the generated code in HTML mode of the post rather than compose mode. For example; we have added below this post.

28 January, 2015

Prevent your blog posts from plagiarism-want to disable right click on Blogger?

Prevent your blog posts from plagiarism-want to disable right click on Blogger?

Hello there all,

What do you think about plagiarism? Probably you are afraid of!
Suppose, "you have researched a topic, spent your precious hours and as a final out put, you have generated an awesome post for your blog so that people can read it and appreciate your work. One day, while searching on the internet, you reach at a site where you find the contents which you have displayed over your blog. All of a sudden your attention goes to the comments, where so many visitors are leaving their gratitude to the website owner’s work". How would you feel?

This is the common scenario on the web, we cannot stop plagiarism completely but we can prevent our blog posts from being copied.

Today, we will learn about the process which will Disable Right Click on a Blogger blog. But, make sure this is what you want to apply to your blog! Because, it can be a problem for some bloggers. How? Please read the following features included pros and cons.

Disable Right-Click Features

  • It will protect your all blog contents along with the pictures. Anyone who will try to copy, get your clever wink ;)
  • It will not foray on Pin it Button if applied to images.
  • It is good for the bloggers who share the information only, but do not permit to use their stuff.
  • It can be a trouble for the bloggers like me, who provide technique and tricks over the particular topic and display codes (like HTML, JavaScript etc.) for others so that they can copy for their use.
  • You cannot open a link in another tab in a browser where right click is disabled on the certain blog.

So, after reading above features, would you like to come with us to experience this tutorial? Oh, come on we know the answer… :)

This tutorial is like a copy paste job :) you can see the effect within 3 minutes.

1. Go to Blogger Dashboard > Layout > Add a Gadget

Must read: How to add a gadget on Blogger?

2. Select HTML/JavaScript widget and paste below code in it.

<script language=JavaScript>
//Disable right mouse click Script
//source code,  http://www.publishdocs.com/
var message="Permission Denied!";
function clickIE4(){
if (event.button==2){
return false;
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
return false;
if (document.layers){
else if (document.all&&!document.getElementById){
document.oncontextmenu=new Function("alert(message);return false")
// -->

3. Click on Save and see the result on your blog. That’s it.

Note: Do not alter the code for positive result.
For Demo purpose, We used it on our Testing Blog and it is working fine; after clicking on right, a message will pop up like below;

Instead of Disable Right Click on Blog post

This is my personal opinion; if you really know someone has stolen your contents and using to get full credit of the author, better to ask the taker to display your blog link and name as a source, that way you get an organic traffic also. 

On the other hand, if you want to include an excerpt from the specific blog or website, we should always ask to the owner through their comment section or contact us page that way our blog and name will catch their attention. By this method they will give the permission to publish their link on our blog and we can ask to drop our link on their blog as well.

More to Say

Although, the hackers can steal the contents in any way they have an evil eye and target of their choice, don't worry, it happens rare with every blog. If you have proof that hundreds of users are stealing your contents you can Disable Right Click straightaway. It is all up to you to use this on your blog. I am always there to provide experienced tutorials for you. 

What do you think about it?

Please leave your comments and feedback below so that we can continue with the improvement.
Thanks and have a nice day ahead.

27 January, 2015

sidebar gadgets widgets in separate

sidebar gadgets widgets in separate

In the article Each Post in the separate box, we've learned how to divide our posts in the boxes using the same style that's present in the template.
Now, we'll do the same for the Sidebar elements - widgets (gadgets). The idea is the same. We'll separate one from another, and each of them will have a house :]

You should keep in mind:

► this is the example for the Blogs that already have a customized (stylized) Sidebar (colorized, borderized..)
► this example was made in Minima Blogger template (so your code may be a bit different, but the procedure is the same)
► it doesn't matter if you have "heavily" customized template, you can apply these setting anyway

We have to imitate the main style of our sidebar-wrapper (the one that carries the style for the whole sidebar element), and apply it to individual widgets (gadgets). Here's the style of the sidebar-wrapper in this example:

#sidebar-wrapper {
border: 1px solid #E9967A;
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

...the styles we're interested in here are: background and border
...next is to apply this to our widgets...

First, back up your current Blogger template. Then, go to: LAYOUT ► EDIT HTML ► and locate this part in the code (this is for default Minima blogger template, it may look a bit different for you):

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;

...DELETE it, and replace with this one:

.sidebar .widget {
border: 1px solid #E9967A;
margin:0 -5px 1.5em -5px;
padding:5px 7px 5px 7px;

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;

...we've divided the main widget and sidebar widget in order to apply the style...
...in pink, you can see the copied style from sidebar-wrapper...
...in green, you can adjust the padding of the widget content (if the padding was 0px, the text would be to close to the border)..

► Next thing is to delete (hide) the style from the sidebar-wrapper. Why? Because if you don't, your sidebar will look like this:

To avoid this, find the sidebar-wrapper:

#sidebar-wrapper {
border: 1px solid #E9967A;
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

...and DELETE the background and border (or any other style you've applied to your widgets/gadgets):

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

...that's it.

Back up your blogger widgets

Back up your blogger widgets

Reason why we do this:
► if we want to switch to a new Template (change a design)...
► if we want to switch to another Blog platform...
► to make sure we don't lose our gadgets (widgets) if something happens...

There are ways of Backing up (saving) your Widgets automatically, but it's always better to back up our Blogger widgets manually. It's a 5 min job. Here are two ways how to do it:

First, type the URL address of your Blog in the browser address bar. When your Blog is opened (homepage), in the browser menu click on VIEW, and choose (or CTRL + U):
SOURCE - for Internet Explorer browser
PAGE SOURCE - for Firefox browser

If you are using Internet Explorer, the SOURCE will automatically open in Notepad. Save the document, name it as you wish.

For Firefox users, it will open in a new window. Copy the PAGE SOURCE code (all of it, using Edit - Select All), and paste it into Notepad, or some other HTML text editor. Save the document, name it as you wish.

Now, your widgets are saved, but they are lost among all that code.....When you'll have to "digg" them out, you should find them starting with this part of code:

<div class='widget-content'>

...and finishing with this:


Sign in to your Blogger account, then go to: LAYOUT -- PAGE ELEMENTS.

Gadgets you've added are your Widgets. You have to click on EDIT under each widget (gadget), copy the code, and paste it into Notepad, or some other HTML text editor.

Don't worry about LABEL, ABOUT ME and ARCHIVES widget. They are default, and you can't copy them. You will not lose those...
Later, when you install a new template, just add the code you've saved through Add Gadget option, or in directly in HTML of your template (if necessary) ...


Back up your blogger template

Back up your blogger template

It's very important to save a copy of your template (back-up template) before you do any customization on it (any change in the the HTML code of your Blog).
Why? Well, it's obvious. If something goes wrong, you can always go back in your old shoes.

It's very easy to do. And quick. And it's such a small file, so you can keep it forever. All you have to do is:


Easy. Choose where to save the file. Somewhere where you'll remember...

But keep in mind, downloading template doesn't mean you've saved the content (posts, comments, widgets) of your blog, and now you can easily delete it. NO!!

You just changed the appearance of your blog, the design (template, layout). You've changed only the clothes, not the mind.

If you want to back up your content (all of you posts, comments, widgets) - that means your complete blog, there is a way do do it. Read more about it in this article....


Change Width Of Layout Column On Blogger Blog Manually

Change Width Of Layout Column On Blogger Blog Manually

Hello, my dear blog readers,

In our previous post we learned about customization of the Blogger template, where you can adjust your entire requirement to get your desired look of the blog. But, the all features of it are most suitable for the templates, which blogger provides you. You cannot modify the width column, if you are using a third party template on your blog. In order to fix this problem, we are present here again with the solution.
You can adjust your column or wrapper width manually, How!! Well before going forward; let us explain a little bit about columns on the Blog. Please see the image below, where we have mentioned the name along with specific areas.

Probably, you got a well overview about the columns, for making more clarity; hereby we have furnished the brief of each column showing in above picture.

Outer- wrapper: This is kind of a home which contains rooms in the form of columns, before increasing the width of inside columns you will want to increase its carrying capacity by expanding width. You can say, it is like a pitcher, you cannot put water more than its size.

Header-wrapper: This is the head section of your layout where you can mention the blog name, picture or logo etc.

Main-wrapper: This is the main area where all your posts appear.

Sidebar-wrappers: Its name represents the introduction of it, it appears on side of main –wrapper. You can show widgets, ads etc. here.

Footer-wrapper: It is the bottom of your blog layout where you can show links, widgets and so on


1. Go to Blogger Dashboard > Template> Edit HTML

2. Press CTRL+F and find red highlighted headings (see below codes) one by one.

#header-wrapper {
width: 962px;
margin:0 auto;

#outer-wrapper {
width: 982px;
margin:0 auto;

#main-wrapper {
width: 540px;
float: $endSide;

#sidebar-wrapper {
width: 180px;
float: $startSide;

#footer-wrapper {
width: 962px;

3. Now change the green highlighted area (Width) as per your choice and save template

Congratulations! You have made it.

Points to be noted

  • If you forget to increase the outer-wrapper width, the main section will push your sidebars to the bottom; just beneath the main-wrapper section. Therefore, keep this point in your attention before making changes in width.
  • The width sizes in the above code has been taken just for showing you, it can vary according to your Blogger template, but the red highlighted area will be the same.
  • Try to apply changes, one by one rather than together; for example- change the width of main wrapper>save template>View blog. It will give you a good idea for blog column adjustment, and then go for another wrapper.
  • If you are having content-wrapper inside your template, you can make changes in it while altering the main-wrapper. it will adjust the contents inside main-wrapper.
  • If you want to expand only one wrapper, no need to make alterations at all.
  • If you have two sidebars in your template, change width for whichever you want, or both. your second sidebar can be appear like;

#sidebar2-wrapper {
  width: 240px;

From the Writer’s Pen

So, this is how you can change width of your blog template columns. Hope you enjoyed this baby tutorial. For any query or feedback please feel free to comment below. We really would appreciate it! Thanks and keep visiting for another helpful tutorial.

Cheers and have a nice day ahead.

09 January, 2015

How To Change Blogger Template?

How To Change Blogger Template?

When I start blogging on blogger, I used to run my blog on blogger’s default templates. But as I started learning more about blogging I feel that default templates are not so much attractive and professional. They are even not search engine optimized because they all was designed many years ago and don’t even updated a single time after that. Search engines like Google has updated its search algorithms many times and they are continuously updating to improve search results and user’s experience. That’s why it is very important for us as a blogger that we used a SEO friendly template for our blog. We should change our blog’s default theme with any third party templates. That’s why today I bring a tutorial to help newbie bloggers so that they can learn how to change template in blogger.

Change Blogger Template

To change your blog template first you need to download a template from internet which you want to apply to your blog. There are many sources of blogger template on the internet from where you can get lot of professional templates easily for free. Just go to Google and search for “Blogger Templates” and download a template of your choice. Once you have your template, perform below steps.

  1. Log in to your Blogger account.
  2. Now click on the drop down menu and choose Template.

3- Press Backup/Restore button located at the top right corner.

4-First you should download your existing template as a backup. So, click on “Download full template” button.

5-Now click on Choose File button and choose your new template which you want to apply to your blog.

6-Once you select your template, simply click on Upload button for final step.
You are done!
Note: If you just started your blog then you must read below tutorials to improve your blog performance.