MODIFY MY BLOGS

Earn Money Online Without Investment

Every student wants to earn money online for satisfying their financial needs.Most of the people failure in earning money online due to less knowledge on genuine sites.Some students also loosing money in investing money on some scam sites.Today, i came with some genuine sites which are paying on time.Here,we can earn money without investment and also with investment to earn high daily.

Earn Money From Neobux:-

"Neobux" is the PTC site which is paying since 2008 online.where it pays daily for viewing advertisements online.A lot of people(including India) earning money through this site around the world.Daily around 6,000 people join this site.
"Click below image to join this site"

Earn More Money by Investing Money (optional):-

We can also earn extra money by investing money online.We get more advertisements if you become premium member and also less minimum payout.Refer friends and also earn more money.

How do we receive payments?:-

Neobux pays money through Paypal and Payza online money transaction sites. You also see "how to open the Paypal and Payza accounts online".Neobux pays money in 72 hours from the time of request.
Payment Proof Of Neobux:-

Add Horizontal fixed/floating social buttons below post title

Add Horizontal fixed floating social buttons below post title

Earlier we tried a different styles of social bookmarking buttons and icons below post title, to make the visitors to share the post to friends on their social networking sites.But today here is the new widget the horizontal fixed/floating social bookmarking icons bar which locate below post title and scroll along the page top.

Add Horizontal fixed-floating social buttons below post title

STEPS:-

► Log in to blogger
►Back up the template.
►Dashboard->> Template->> Edit Html->> Proceed
► Tick at Expand Widget Template Box.
►Search for Code </head> using Ctrl+f
1.Jquery plug-in:-
If you already have jquery plug-in no need to add again
For,jquery plug-in add below code before </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

2.Social Script:-
►Add below code before </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
 #w2bSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;}
 #w2bSocialFloat td{padding:4px;margin:0;border:none;}
 #w2bSocialFloat td iframe{max-width:82px;width:82px !important;}
 #w2bSocialFloat.w2bFloatSocial{position: fixed;top:0;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Set the Top Offset
$theOffset = 0;

jQuery(document).ready(function(b){var a=b("#w2bSocialFloat");a.wrap('<div id="w2bSocialPlaceholder"></div>').closest("#w2bSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#w2bSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("w2bFloatSocial"):a.removeClass("w2bFloatSocial");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})});
/*]]>*/
</script>
<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/w2b-blogger-pinit.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
 // Twitter
 (function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs");
 // Google + (plus)
 (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
 // Stumbleupon
 (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
 // Digg
 (function(){var a=document.createElement("SCRIPT"),b=document.getElementsByTagName("SCRIPT")[0];a.type="text/javascript";a.async=true;a.src="http://widgets.digg.com/buttons.js";b.parentNode.insertBefore(a,b)})();
/*]]>*/
</script>
</b:if>

3.Add Social Buttons Widget:-
►Search For <data:post.body/>
►Add below code before <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="w2bSocialFloat" class="w2bSocialFloat">
<table  width="100%" class="w2bSocialFloat">
 <tr>
  <td>
   <a href="https://twitter.com/share" class="twitter-share-button" expr:data-url="data:post.url" expr:data-text="data:post.title">Tweet</a>
  </td>
  <td>
   <iframe expr:src="&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>
  </td>
  <td>
   <div expr:id="&quot;w2bPinit-&quot; + data:post.id" style="display: none;visibility: hidden;height: 0;width:0;overflow: hidden;" class="w2bPinitButton"> 
    <data:post.body/>
    <script type="text/javascript">
     w2bPinItButton({ 
      url:"<data:post.url/>", 
      thumb: "<data:post.thumbnailUrl/>", 
      id: "<data:post.id/>", 
      defaultThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKV9tvVPFs-nA_whXU9Yh6LgddJ6XeoLzzP8aj5AI5vR1ZMKl1Md8WbGKXk391_OVXgXQF5bLzXdL5MSrReaFJJTggh1MjKW2JD62IwqntVcEEIdXmR9fSMwrtjaNHs1ZRcfUxFUJ2Hz25/s1600/w2b-no-thumbnail.jpg", 
      pincount: "horizontal" 
     }); 
    </script> 
   </div>
  </td>
  <td>
   <div class="g-plusone" data-size="medium" expr:data-href="data:post.url"></div>
  </td>
  <td>
   <su:badge layout="1" expr:location="data:post.url"></su:badge>
  </td>
  <td>
   <a class="DiggThisButton DiggCompact"></a>
  </td>
 </tr>
</table>
</div>
</b:if>

►Save Template and done.

How To Show and Hide Widgets In Blogger Pages?

show,hide,only,static pages,homepage and archive pages to widgets

Many of the bloggers want to customize their widgets in some specific pages.Some of them want to hide widgets in homepage,Static pages and other want to hide their widgets on homepage,static pages.Static pages are the pages mean contact-us,About-us,write for us and sitemap where no one want to show widgets on this particular pages.By finding widgets codes and making the code between html/scripts to show and hide blogger widgets.You can follow some below tricks to show widgets as you like on your blogger pages.
Home Pages:-
► How to Show Widgets Only On Home Page?
<b:if cond='data:blog.url == data:blog.homepageUrl'>
WIDGET CODE GOES HERE
</b:if>
where widget code is the code of your widget that you want to show only on homepage.
► How to Hide Widgets On Home page?
<b:if cond='data:blog.pageType == "item"'>
WIDGET CODE GOES HERE
</b:if>
Static Pages:-
► How to Show widgets Only On Static Pages?
Static pages:- About us,Contact us,Sitemap and more…
<b:if cond='data:blog.pageType == "static_page"'>
WIDGET CODE GOES HERE
</b:if>
► How to Hide Widgets On Static Pages?
<b:if cond='data:blog.pageType != "static_page"'>
WIDGET CODE GOES HERE
</b:if>
Post Pages:-
► How to show a widget Only on Selected Posts?
<b:if cond='data:blog.url == "URL OF Selected Post"'>
WIDGET CODE GOES HERE
</b:if>
► How To Hide a widget on Selected posts ?
<b:if cond='data:blog.url != "URL OF Selected Post"'>
WIDGET CODE GOES HERE
</b:if>
Set up the Widgets using Below Procedure:-
1.Go to blogger.
2.Template –> Edit Html
3.Tick at Expand Widget Box
4.You widget code look similar as below
<b:widget id='HTML' locked='false' title='WIDGET-TITLE-HERE' type='Profile'>
<b:includable id='main'>
LARGE CHUNK OF WIDGET CODE
</b:includable> </b:widget>
Example:- (Show widget only on Home page- Popular posts Widget)
<b:widget id='HTML' locked='false' title='Popular Posts' type='Profile'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
LARGE CHUNK OF WIDGET CODE
</b:if>
</b:includable> </b:widget>
Similar for all and done.

How To Create Facebook Pages Tab Using Google Sites?

Facebook is the best social networking site where we can develop our page ranking and traffic easily.Many of the small authors simply post and share their to facebook fans through facebook page.Making stylish customization of facebook page with tabs like subscribe box,about us,Join Groups etc can make the facebook page fans to stick on your site for more time and increase of page views.

PART1

1.Log in to google sites.

2.Click on ‘create’ button

3.Do as below

► Template –Blank Template

► Name Of the Site-Any name

► Set Url of Page

► Select a Theme –Blank state

► Enter captcha and click on create at top.

► At the ‘right top’ click on more.

► Go to Manage Site In drop down menu

► Go to site Layout in left menu

► Click on change site layout and do as below

► click on ok.

► Click on Edit Page

► write the text and insert images and click on “Share”

PART2

► Log in to Facebook

► Developers >> Create App

► Do as follows

► Save it.

► Take App id to Notepad

► Now add App Id to Below url and enter it new tab of browser.

https://www.facebook.com/dialog/pagetab?next=http://facebook.com&app_id=App id

► Now add tab to your selected page and done.

► Logout google sites page and refresh facebook page and check.

Customize Blogger Labels Cloud In Bricks Style

Making Sidebar with attraction to visitors can make stay on our blogger for long time.For every widget on sidebar there are different styles of customizations with css.Now this is time for labels widget on blogger with white brick style,where you can see on wordpress blogs.This widget can look most attractive to blogspot template.

Also See:-

Orange Wordpress Style Labels for Blogger

PART1

1.Go to blogger

2.Layout >> Add a Gadget >> Labels

3.Customize the labels widget as below image

4.Save It.

PART2

5.Template >> Edit Html

6.Search for the below code using shortcut key ctrl+F

]]></b:skin>

7.Add below code just before above code

.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:10px;
color:#666;
}
.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;
float:left;
text-decoration: none;
}
.label-size a:hover {
text-decoration: none;
}

8.Save template and done.

Bigrock Domain Issues and Errors

Have you brought the domain from bigrock domain hosting service for blogger or website.If you are not blog not opening and domain continuously rotating or buffering and getting errors in blogger domain.If you are not suppose to integrate the domain on blogger.

Bigrock Domain issues

Also see:
► How to integrate bigrock domain on Blogger
Now If your Blogger not opening due to the following reasons:-
► Buffering.
► Rotating.
► Missing Gadgets.
► Title Revolving.
Solution:-
►First Download the template and customizations
►Just Change The Template and You are Done.

How To Host Bigrock Domain On Blogger?

Today there are many domain hosting services in that bigrock domain hosting service from India selling domains at cheap rates.Millions of Indians converting their blogger blogspot sub domain to custom domain through bigrock hosting service.If you have brought the domain from bigrock and want to know how to install bigrock domain on blogger.

PART1

1.Buy a Domain Using Bigrock

2.Log In to Bigrock account.

3.click on list of orders.

4.Select any of the domain as below

5.On the right side select Dns management

6.Click On Manage DNs

7.A pop-up window will open

8.Go to CNAME Records

9.Add CNAME Record

►Host Name:www

►Value:ghs.google.com

►Click on ‘Add record’

10.Now add ‘A Records’

11.click on ‘Add A Record’.

►Create 4 ‘A Records’

►Add each IP address below and click on ‘Add a record’ and leave Name Blank

                              216.239.32.21
                              216.239.34.21
                              216.239.36.21
                              216.239.38.21 as below image

►Total ‘4’ A records are created.

PART2

1.Log In Blogger.

2.Go to Settings->Basic and click on “add a custom domain”

3.Switch to advanced settings and enter your bigrock custom url

4.Tick at redirect domain.

5.Save the settings and you are done.

2 Best photo Editing Softwares To Free download

Photo is the best memory in our life.Sometimes we want to customize our photo in specific categories like contrast,brightness,effects,coloring,backgrounds,crop,inserting clip arts.We customize our photo as we needed either for share,profile pictures,logo,website headers and for desktops etc.To do specific customizations we need photo editing or image editing softwares which are some what costly in the market and if it free for 30 days trial version we cant get much features.They are some softwares where we can free download full version with good features as satisfies as costly software.Here is the best two photo editing softwares that i use on my desktop.

Enjoy the softwares by downloading.

1.Gimp (Visit Site)

Gimp is the free editing software which supports all the features as in adobe photoshop.

2.Paint.Net (Visit Site )

Paint.net is the software is easy to understand also supports more features in colorizing and effects,

‘Customize Blogger Labels widget’ into Wordpress Style

Blogger labels widget does not look more attractive than wordpress labels.In the wordpress there are different styles which satisfies maximum to the respective template.but the blogger labels widget looks same in all templates.so to customize it with css3 and make sidebar more good and attractive to visitors.I said before many times that our visitors return 25% back just for giving attractive looking.

PART1

1.Go to blogger.

2.Layout >> Add a Gadget >> Labels

3.Customize the labels widget as below image

4.Save it.

PART2

5.Template >> Edit html

6.Search for the below code using ctrl+f shortcut key.

]]></b:skin>

7.Add below code just before above code

.label-size {

float: left;

margin: 0 0 7px 20px;

position: relative;

font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

font-size: 0.75em;

font-weight: bold;

text-decoration: none;

color: #996633;

text-shadow: 0px 1px 0px rgba(255,255,255,.4);

padding: 0.417em 0.417em 0.417em 0.917em;

border-top: 1px solid #d99d38;

border-right: 1px solid #d99d38;

border-bottom: 1px solid #d99d38;

-webkit-border-radius: 0 0.25em 0.25em 0;

-moz-border-radius: 0 0.25em 0.25em 0;

border-radius: 0 0.25em 0.25em 0;

background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');

-webkit-box-shadow: inset 0 1px 0 #faeaba,

0 1px 1px rgba(0,0,0,.1);

-moz-box-shadow: inset 0 1px 0 #faeaba,

0 1px 1px rgba(0,0,0,.1);

box-shadow: inset 0 1px 0 #faeaba,

0 1px 1px rgba(0,0,0,.1);

z-index: 1;

}

.label-size:before {

content: '';

width: 1.30em;

height: 1.39em;

background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');

position: absolute;

left: -0.69em;

top: .2em;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

border-left: 1px solid #d99d38;

border-bottom: 1px solid #d99d38;

-webkit-border-radius: 0 0 0 0.25em;

-moz-border-radius: 0 0 0 0.25em;

border-radius: 0 0 0 0.25em;

z-index: 1;

}

.label-size:after {

content: '';

width: 0.5em;

height: 0.5em;

background: #fff;

-webkit-border-radius: 4.167em;

-moz-border-radius: 4.167em;

border-radius: 4.167em;

border: 1px solid #d99d38;

-webkit-box-shadow: 0 1px 0 #faeaba;

-moz-box-shadow: 0 1px 0 #faeaba;

box-shadow: 0 1px 0 #faeaba;

position: absolute;

top: 0.667em;

left: -0.083em;

z-index: 9999;

}

#Label1 {

height: 210px;

}

.label-size:hover {

background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');

border-color: #e1b160;

}

.label-size:hover:before {

background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');

border-color: #e1b160;

}

8.Save template and Bingo!

Show only thumbnails in blogger recent posts widget

If you want to hide post titles and snippets in blogger recent post widget.Then here is the trick for you,no need to add any code or edit any template.Just go the blogger widgets and select recent posts widget with thumbnails,then start customize it options.This thumbnail recent posts widget looks good especially for music or movie websites,then you can show posters in the homepage with attractive to visitors.

Part1

1.Go to blogger->>Layout

2.Add a gadget

3.Select recent posts widget as below image.

4.Select options as below image.

5.Save Gadget and that’s all.

Show only thumbnails in blogger popular posts widget

If you are publishing any music website or your post has perfect satisfied image with good colorizing then make use of the popular posts with only thumbnails.In the blogger default popular posts widget there is no option to show only thumbnails without post title.So to add this code to blogger follow below post.This is another look as recent posts widget with only thumbnails.
Part1
1.Go to blogger.
2.Layout->>Add a Gadget->>Popular Posts widget

3.Select as below in image:-

4.Save it.
Part2
1.Go to blogger.
2.Back up Template
3.Template->> Edit Html
4.look for the below code using ctrl+f shortcut key

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>

5.Now replace above code with below code

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == "false"'>
          <b:if cond='data:showSnippets == "false"'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == "false"'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              
                <div class='item-thumbnail'>
   <a expr:href='data:post.href' expr:title='data:post.title'>
    <b:if cond='data:post.thumbnail'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
       <b:else/>
        <img alt='' border='0' expr:height='data:thumbnailSize' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh12faVFXuBSI-Kyd95DH6SArMBQGnMu_DmONBhZEez6JHGM2IwWkx2_KFiUAMalFt0EneA2BxfQHXfzbaOaR23p0TeV7Gidjbhyphenhyphen8kGpaA26OyKERSkC3Vf9eddgNFHsKHGRQV0Z4-fvRk/s72-c/default.png' expr:width='data:thumbnailSize'/>
       </b:if>
                  </a>
                </div>         
             </div>
            <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Style It Using below code (optional)
1.Template->>Template Designer->>Add css->>Add below code

.popular-posts .item-thumbnail{float:left;}
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;}

Skip Ad fly,Link Bucks,Survey and more ads on Firefox and browser.

Today many ad-services and they are producing many different type ads like banners,pop-ups,Surveys and skip-ads,these type of annoying ads called Url Shortners.In this type of ads make redirecting the useful link with the ads page and also produce with skip button with timer.At the last week i am searching for a file about 2 hrs and at last i got the link to download it,Their i got irritating on that site with some deals pop-up surveys to complete without landing original page.I felt bad and went to add-on to disable this kind of ads in my browser(Mozilla) and at last i got it and installed add-on.Feel free on your computer.

We can’t say respected website owners,because they are working and earning money by monetize ads.

Add-on For Firefox Users :- GreaseMonkey

For Google Chrome :-Installation Redirection Helper From Here (Follow the Instructions).

Create Custom Search engine with Adsense Monetize

If your are using blogger default search box just delete it and create your own money earning custom search engine by google.The main advantage of this search box is you can earn money by inserting your adsense publisher id.If you are have regular followers and visitors they search for old posts through search box.The adsense also pays much for search engines ads and impressions.So to day custom search engine follow the below tutorial.

Part1

1.Go to Google Cse( custom search engine).

2.Left side panel- New Search Engine

.

3.Choose any style and get code.

4.Left side panel –Make Money(click on it) and ad adsense id

Part2

1.Blogger->>Layout –>>Add a Gadget

2.Html/Java Script

3.Then add Cse Code

4.Save it.Bingo!

Expand and Collapase Blogger Comment Box Using Jquery

Here is the new blogger comment box where you can hide,show,expand and collapse blogger comment using jquery.This widget can increase your blogger comments,because this make to see your blog visitor to “click here to add comment” and he may attempt that.When I saw this i directly went to code and added it my blog and thought to give this amazing script to my blog readers.You can see demo on my blog or see below image.

LIVE DEMO ▼

Part1

1.Blogger>Template

2.Back up your template

3.Edit Html->>Proceed->>Expand widgets Box

4.Search the </head> code using ctrl+f

5.Now before </head> paste the below code

<style type="text/css">
h2.trigger2 {
padding-left:50px;
margin:10px 0px 10px 10px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF9wtO2OfA7cgD2c9gcpCkx1Dj4AAbCEXijrp5x-81bl3Y6ijdIb3VKBz5GY6OAuQwL5RbPNwa-zh_FwOLAk7KJCzVHQgElU_AYYMFJXGfsGhvGQBlJ21XYKGQbYMcc6ENuQ21OZDCrWE/s1600/h2trigger.png) no-repeat;
height: 46px;
line-height: 46px;
width: 580px;
font-family:"Francois One";
font-size: 1.4em;
font-weight: bold;
text-align:left;
color:#fff;
float: left;
cursor:pointer;
}
h2.active {
background-position: bottom left;
}
.toggle_container2 {
padding-left:10px;
overflow: hidden;
clear: both;
}
</style>
<script type='text/javascript'>
$(document).ready(function(){
    $(".toggle_container2").hide();
    $("h2.trigger2").click(function(){
        $(this).toggleClass("active").next().slideToggle("slow");
    });
});
</script>

6.Now find the below code

<b:includable id='comment-form' var='post'>

7.Now paste the below code after above code

<h2 class='trigger2'>Click to Add a New Comment</h2>
<div class='toggle_container2'>
<div class='block'>

8.Now search for the </b:includable> and above it add below code

<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'><a href='http://www.bloggertricksandtips.in/2012/07/expand-and-collapase-blogger-comment.html' style='color:#CAC8C8;'><i>Blogger Widgets</i></a></p> </div>
</div>

Add Profile Image at Post title in blogger

If you want to add profile image or any image at the post titles in blogger.you can add a logo or your image and make the visitors to know landmark of your image.see this can make attractive for some blogger templates.Select a small size logo and add it to your blog.If you thought how to add profile picture after post title or before post title,then below tutorial is very useful for your ideas.

Part1

Edit Html

2.Search for below code using ctrl+f

.post h3 {
color: #7CA2C4;
font-size: 20px;
font-family: Arial, sans-serif;;
font-weight: normal;
margin: 0px;
padding: 0px 10px 0 47px;
}

Part2

3.Replace above with below code

.post h3 {
background:url(IMAGE LINK OF YOUR PROFILE PIC) no-repeat top left;
color: #289728;
font-size: 20px;
font-family: Arial, sans-serif;;
font-weight: normal; height:45px;
margin: 0px;
padding: 0px 10px 0 47px;
line-height:1.1em;
}

4.Save Template.

Add Custom Search Box Inside Blogger Navigation Menu

You may thought to add search box in sidebar,header,above post and just confused !and make a new idea to make how to add custom search box inside navigation menu.This look style and attractive to your template and lot of place instead of blogger sidebar and header.The below tutorial explains how to show the search box inside menu.
Live Demo ▼

custom search box

Part1
1.Go to google custom search engine
2.Read this How to create google custom search engine
3.Get id inside your created search engine code.It looks as below

006442829222345501157:setkk2xdqoi
If you adsense code with custom search box look like
partner-pub-44091594fdfd4980:sl5redh1f

4.Add your id in below code and copy it in notepad

<div class='cse' style='color:#000000;float:right;margin:6px 10px 0 0 ;'>
<form action='http://www.google.com/cse' id='cse-search-box'>
<input name='cx' type='hidden' value='add Custom search id'/>
<input type='text' name='q' size='35' />
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input type="submit" name="sa" value="Search" />
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"></script>
</div>

Part2

1.Now go to Blogger>> Template

2.Back up template

3.Edit Html>>Tick at  Expand widgets

4.look for below code

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
PUT THE SEARCH BOX CODE HERE
<b:loop values='data:links' var='link'>

5.Paste the saved notepad code in above code and after <ul>.

6.Save template and done.

Add Stylish Customized Blogger Comment Section

Many bloggers want to make their blog look attractive and stylish for their visitors.Either it sidebar,comment-section,Header anything make blog attractive if they are stylish customized.In the wordpress the comment section look more attractive with perfect comments button and neat borders.To get comment section like wordpress style for blogger read below tutorials and add below codes in default blogger templates.

Live Demo ▼

Part1

Before this you should enable threaded comments in blogger(Click here for tutorial)

Part2

1.Go to blogger->>Template->>Edit html

2.Back up your template(important don’t forget)

3.Find all below codes and remove them from blogger before ]]></b:skin>

.comments{-----------------------------------------}

whatever starts with comment remove them

#comments{------------------------------------------}

and

avatar.img{------------------------------------------}

4.Replace all above codes with below codes

-------------------------Start comment section by modifymyblogs-------------------------------------
.comments {
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em;
}
.comments .comments-content {
font-size: 12px;
margin-bottom: 16px;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .comment .comment-actions a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.comments .comment .comment-actions a:hover {
text-decoration: none; background:#fff; border:1px solid #5AB1E2;
}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: none;
}
.comments .comments-content .inline-thread {
padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
display: none;
}
.comments .comments-content .comment-replies {
margin-top: 1em;
margin-left: 40px;   font-size:12px; background:#EBF5FE;
}
.comments .comments-content .comment {
margin-bottom:16px;
padding-bottom:8px;
}
.comments .comments-content .comment:first-child {
padding-top:16px;
}
.comments .comments-content .comment:last-child {
border-bottom:0;
padding-bottom:0;
}
.comments .comments-content .comment-body {
position:relative;
}
.comments .comments-content .user {
font-style:normal;
font-weight:bold;
}
.comments .comments-content .user a {
color:#2D5E7B; font-size:14px; font-weight: bold;text-decoration: none;
}
.comments .comments-content .icon.blog-author {
width: 18px;
height: 18px;
display: inline-block;
margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
color: #999999;
float: right;
font-size: 11px;
text-decoration: none;
}
.comments .comments-content,
.comments .comments-content .comment-content {
margin:0 0 8px;
}
.comment-header {background-color: #F4F4F4;
    border: thin solid #E6E6E6;
    margin-bottom: 5px;
    padding: 5px;
}
.comments .comments-content .comment-content {
text-align:none;
}
.comments .comments-content .owner-actions {
position:absolute;
right:0;
top:0;
}
.comments .comments-replybox {
border: none;
height: 250px;
width: 100%;
}
.comments .comment-replybox-single {
margin-top: 5px;
margin-left: 48px;
}
.comments .comment-replybox-thread {
margin-top: 5px;
}
.comments .comments-content .loadmore a {
display: block;
padding: 10px 16px;
text-align: center;
}
.comments .thread-toggle {
cursor: pointer;
display: inline-block;
}
.comments .continue {
cursor: pointer;
}
.comments .continue a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.comments .comments-content .loadmore {
cursor: pointer;
max-height: 3em;
margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
max-height: 0px;
opacity: 0;
overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
display: none;
}
.comments .thread-toggle {
display: inline-block;
}
.comments .thread-toggle .thread-arrow {
display: inline-block;
height: 6px;
width: 7px;
overflow: visible;
margin: 0.3em;
padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {background-image: url("http://img846.imageshack.us/img846/7357/unled1oww.jpg");background-position: center center;background-repeat: no-repeat;float: left;width: 36px;max-height: 36px;margin: 0;outline: 1px solid #FFFFFF;padding: 3px;vertical-align: middle;overflow: hidden;
border: 1px solid #DDDDDD;}
.comments .avatar-image-container img {
width: 36px;
}
.comments .comment-block {
margin-left: 48px;
position: relative;
}
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
    margin-left: 0;
}
}
------------ End of comment section by modifymyblogs -------------

5.Save template and check your comment section. bingo!

Add “Scrolling Recent Posts” Widget in Blogger

Earlier we have seen recent post widget with standard position with thumbnails and snippets.Now here is the scrolling recent posts widget for blogger with thumbnails and snippet,post titles.This is very attractive to hover dependable templates.In this scrolling recent posts widget you can set the time how fast the scroll runs.In two directions it works top to bottom and Bottom to top.You can use this sidebar of your blogger layout.

LIVE DEMO ▼

Part1

1.Go to blogger>>Layout

2.Add a gadget>> Choose Html/Java Script

3.Add Below code In the Box

<style type="text/css" media="screen">
#helperblogger-widget {
    overflow: hidden;
    margin-top: 5px;
    padding: 0px 0px;
    height: 385px;
}
#helperblogger-widget ul {
    width: 295px;
    overflow: hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin: 0px 0px;
}
#helperblogger-widget li {
    width: 282px;
    padding: 5px 5px;
    margin: 0px 0px 5px 0px;
    list-style-type: none;
    float: none;
    height: 80px;
    overflow: hidden;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkr-IOi-jB4V0LORd8D_KngPCycvyeyBuNb8uuZwX5PP_QfZrwG6Vje6EEn4qbK7yfkt9A1-I1IwBidPqFfCqNpLdy_80h6zH8shiYvd5OK_ZzOMBSCBl3xStiUz8QXAg9jnWj6XaUhXo/s1600/helperblogger.com-post.jpg) repeat-x;
    border: 1px solid #ddd;
}
#helperblogger-widget li a {
    text-decoration: none;
    color: #4B545B;
    font-size: 15px;
    height: 18px;
    overflow: hidden;
    margin: 0px 0px;
    padding: 0px 0px 2px 0px;
}
#helperblogger-widget img {
    float: left;
    margin-top: 10px;
    margin-right: 15px;
    background: #EFEFEF;
    border: 0;
}
#helperblogger-widget img {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    padding: 4px;
    background: #eee;
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
    background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
    box-shadow: 0 0 3px rgba(0,0,0,.7);
}
#helperblogger-widget img:hover {
    -moz-transform: scale(1.2) rotate(-350deg);
    -webkit-transform: scale(1.2) rotate(-350deg);
    -o-transform: scale(1.2) rotate(-350deg);
    -ms-transform: scale(1.2) rotate(-350deg);
    transform: scale(1.2) rotate(-350deg);
    -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}
.spydate {
    overflow: hidden;
    font-size: 10px;
    color: #0284C2;
    padding: 2px 0px;
    margin: 1px 0px 0px 0px;
    height: 15px;
    font-family: Tahoma,Arial,verdana, sans-serif;
}
.spycomment {
    overflow: hidden;
    font-family: Tahoma,Arial,verdana, sans-serif;
    font-size: 10px;
    color: #262B2F;
    padding: 0px 0px;
    margin: 0px 0px;
}


</style>

<script language='JavaScript'> 
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwtQXoCjpuJpW1xAkUi386bfzjSiYpsC35FScyhR_UoHbpGYhvM8TIPOs7m3WPfeITmJMJBuBe6PxpW4eWlHxu9XjK4R3VY55yAIrmZuh8vp5qFQpDulpEQD8Ii0VfrWtSaU_rW-qegxQ/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwtQXoCjpuJpW1xAkUi386bfzjSiYpsC35FScyhR_UoHbpGYhvM8TIPOs7m3WPfeITmJMJBuBe6PxpW4eWlHxu9XjK4R3VY55yAIrmZuh8vp5qFQpDulpEQD8Ii0VfrWtSaU_rW-qegxQ/s1600/no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwtQXoCjpuJpW1xAkUi386bfzjSiYpsC35FScyhR_UoHbpGYhvM8TIPOs7m3WPfeITmJMJBuBe6PxpW4eWlHxu9XjK4R3VY55yAIrmZuh8vp5qFQpDulpEQD8Ii0VfrWtSaU_rW-qegxQ/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwtQXoCjpuJpW1xAkUi386bfzjSiYpsC35FScyhR_UoHbpGYhvM8TIPOs7m3WPfeITmJMJBuBe6PxpW4eWlHxu9XjK4R3VY55yAIrmZuh8vp5qFQpDulpEQD8Ii0VfrWtSaU_rW-qegxQ/s1600/no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwtQXoCjpuJpW1xAkUi386bfzjSiYpsC35FScyhR_UoHbpGYhvM8TIPOs7m3WPfeITmJMJBuBe6PxpW4eWlHxu9XjK4R3VY55yAIrmZuh8vp5qFQpDulpEQD8Ii0VfrWtSaU_rW-qegxQ/s1600/no-thumbnail.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "Blog Url";
limitspy=4;
intervalspy=4000;
</script>

<div id="helperblogger-widget">
<script src='http://code.helperblogger.com/recent-posts-spy.js' type='text/javascript'></script>
</div>

Part2

This script code should to insert inside template to scroll the recent posts

1.Go to blogger>> Template>> Edit html

2.Search for the code </head>

3.Add below code before </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

Align Blogger Header Image In Right Or Center

align center or right blogger header image and title

uploading blogger header image via page elements layout option,you will see the blogger header image will align left and there is no option to place it in right and center.By using simple method you can easily align the placement of header image as your wish.Through CSS code(cascading stylish sheets) you can make these easily align right,left and center.

When you used “Behind title and description” option
1.Go to blogger
2.Template –>> Customize->> Add CSS
3.Add below code in the CSS box.(check Preview at below)
To align Center:-

#header-inner {background-position: center !important; width: 100% !important;}

To align right:-

#header-inner {background-position: right !important; width: 100% !important;}

If you used "Instead Of Title And Desciption" or "Have description placed after image" option.

To Align Center

#header-inner img {margin: 0 auto !important;}
#header-inner {text-align:center !important;} /*include this line if you are using Template Designer*/

To Align Right

#header-inner img {margin: 0 auto 0 300px;}

Subscribe to: Posts (Atom)