Category Archives: Blogger Tricks

How Remove/ Rename Author Name in Blogger Blog

Hello friends in this tutorial you can remove and rename the author name very easily. I believe this will only select authors within blog posts (all blogs though) but not other places where an author’s name might appear.
If have many blogs and for some reason you don’t want to show your name in author field(post footer),then this Blogger hack is for you. Though the tutorial you can remove very easily, I will explain how to remove & rename the author name and link from default Blogger blogs.


How Remove,hide and Rename Author Name in Blogger Blog




How you Remove Author in Blog

First Download a Copy of Your Template

  • Login to your blogger dashboard
  • Go to Templates. 
  • Click on Edit Templates
  • Press Ctrl+F and Find below code




  • Remove this above code in your template
  • Save your template


Note: In your template you see many same code just remove one by one and preview your template which code is remove or hide your author name remove its one…

How you Rename Author in Blog


Same above method just  with your own name
like this:

POSTED BY,  you can now add/change what you want to display on the post here…


How you Rename Author Icon in Blog

Add Google Custom Search Box In Blogger


google search








Search box is always a better solution of many problems of bloggers. It helps visitors to access of many posts of your site through such a simple key words. Visitors can type their keywords in search box and it shows all posts according to keyword. So it is a good thing and get lots of benefits to add it in your blogger blog / site. That’s why today i am going to show such a simple way to add custom search box in blog / site. So let’s have a look on these steps.

How To Add Google Custom Search Box In Blogger?

First of all go Google Custom Search Page remember you have to logged in you Gmail or Google account now add your site URL and click on Create button as shown below
google search2

Now you can see a new page where three options come ‘Get Code’,  ‘Public URL’, and ‘Control Panel’ if you want to customize button go to Control Panel but if you want simple and we also recommend you simple so just click on Get Code button as shown in below picture.

google search3

Now Copy the script code as showing selected code in below picture

google search4


Copy the above code and go to Blogger > Layout > Add a HTML / JavaScript gadget

  • Paste the code you copied 
  • Click on save button
  •  Adjust the gadget where you want to show search box we use it on top so you should also use it on top so visitor can find it easily hope you like it !
  • ENJOY…

Recent Posts With Thumbnails For Label or Category in Blogger




Sometimes we want to have everything organized, so that our readers can find topics of interest more easily. To accomplish this, instead of putting a widget with the latest posts, we can put together the latest entries sorted by category, so that we’ll be able to show the latest posts for each label we want and also display a thumbnail for our category

Recent Posts With Thumbnails For Label or Category in Blogger



Show Recent Post with Thumbnails for Label or Category in Blogger

To add this recent posts widget for labels or categories in a Blogger blog, follow the next steps

  • From your Blogger Dashboard go to ‘Template’ and click the ‘Edit HTML’ button
  • Click anywhere inside code area to find ( Ctrl+ F) following Code

]]>

Just above ]]> paste this CSS style

 /* Recent posts by labels
——————————— */ 
img.label_thumb{
float:left;
margin-right:10px !important;
height:65px; /* Thumbnail height */
width:65px; /* Thumbnail width */
border: 1px solid #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}

#label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}
ul#label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:0px;
border-bottom: 1px dotted #999999;
}

#label_with_thumbs li{
list-style: none ;
padding-left:0px !important;
}

#label_with_thumbs a { text-transform: uppercase;}
#label_with_thumbs strong {padding-left:0px; }



Now try to find this tag


Just above paste this script…


//<![CDATA[
function labelthumbs(json){document.write(‘

    ‘);for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
    if(entry.link[k].rel==’alternate’){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
    {s=entry.content.$t;a=s.indexOf(“<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/s1600/picture_not_available.png‘;}
    var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]=”Jan”;monthnames[2]=”Feb”;monthnames[3]=”Mar”;monthnames[4]=”Apr”;monthnames[5]=”May”;monthnames[6]=”June”;monthnames[7]=”July”;monthnames[8]=”Aug”;monthnames[9]=”Sept”;monthnames[10]=”Oct”;monthnames[11]=”Nov”;monthnames[12]=”Dec”;document.write(‘

  • ‘);if(showpostthumbnails==true)
    document.write(‘‘);document.write(‘‘+posttitle+’
    ‘);if(“content”in entry){var postcontent=entry.content.$t;}

    else
    if(“summary”in entry){var postcontent=entry.summary.$t;}
    else var postcontent=””;var re=/]*>/g;postcontent=postcontent.replace(re,””);if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
    else{document.write(”);postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(” “);postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+’…’);document.write(”);}}
    var towrite=”;var flag=0;document.write(‘
    ‘);if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+’-‘+cdday+’ – ‘+cdyear;flag=1;}

    if(showcommentnum==true)
    {if(flag==1){towrite=towrite+’ | ‘;}
    if(commenttext==’1 Comments’)commenttext=’1 Comment’;if(commenttext==’0 Comments’)commenttext=’No Comments’;commenttext=’‘+commenttext+’‘;towrite=towrite+commenttext;flag=1;;}
    if(displaymore==true)
    {if(flag==1)towrite=towrite+’ | ‘;towrite=towrite+’More »‘;flag=1;;}
    document.write(towrite);document.write(‘
  • ‘);if(displayseparator==true)
    if(i!=(numposts-1))
    document.write(”);}document.write(‘

‘);}
//]]>


Note : to add your own pic for the posts with no thumbnail, replace the image url with your own


For a better image resolution add this script above the

                   
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,”s”+size+”-c”);
var thumbnails = blogGadget.getElementsByTagName(“img”);
for(var i=0;i<thumbnails.length;i++){ 
thumbnails[i].width = size; 
thumbnails[i].height = size; 
}
}
changeThumbSize(“label_with_thumbs”,210);              


  • Now Save the template to finish with your changes
So, what we have added, is the CSS to style the widget and the script to make it work. Now all we have to do is to add the widget’s code to the blog sidebar in a HTML/JavaScript gadget


  • Go to Layout and add a Gadget
  • From the pop-up window, choose the HTML/Javascript widget and paste this script inside the empty box

var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100; 
<script type="text/javascript" src="/feeds/posts/default/-/Name-of-the-label?published&alt=json-in-script&callback=labelthumbs”>




Note:Where it says Name-of-the-label should be the name of the label that you want to display, and if your label is case sensitive, like in my example, then you should type it that way


Within the last code, there are these parts which can be customized change true with false

 var numposts ← Number of posts to display
var showpostthumbnails ← Show/hide thumbnails
var displaymore ← Show or hide the read more link
var displayseparator ← Show/hide separator
var showcommentnum ← Show/hide the number of comments
var showpostdate ← Show/hide the posts dates
var showpostsummary ← Show or not the posts summaries
var numchars ← Number of posts characters (here you have to change the 100 value)





Remember that the gadget displays the latest posts from a particular label… therefore, if you want to display the latest posts from other labels, repeat step 5 for each additional category that you want to add.

ENJOY…


Adding image Next to Blogger Post Title in Blogger

First thing you have to do prepare an image.After that you will need a direct link to an image before you proceed further.Make Sure your image sized opproprietly,You don’t want to see a huge image next to your blogger post…









    • Go to your blogger Dashboard – Template & Click to Edit Html
    • Click anywhere inside code area to find ( Ctrl+ F) following Code

    • After the find code click the left arrow next to it expand the widget’s code



    • Then delete it until you reach to

    Above code to be delete…

    • Paste below code in the place of the deleted code in step 5…

    Add jQuery Hover Fade Effect to Image in Blogger / Website


    This quick tutorial explains how to add jquery fade effect to your images in blogger or any other web site.This is very easy and you can do this less than a minute.But this effect will add some attractive appearance to your blog or web site.Now follow the steps below to do this.See Demo


    • Login to your blogger dashboard–> layout- -> Edit HTML 
    • Scroll down to where you see tag . 
    • Copy below code and paste it just before the tag .

      $(document).ready(function(){
      $(“.post img”).fadeTo(“slow”, 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
      $(“.post img”).hover(function(){
      $(this).fadeTo(“slow”, 0.5); // This should set the opacity to 100% on hover
      },function(){
      $(this).fadeTo(“slow”, 1.0); // This should set the opacity back to 30% on mouseout
      });
      });
      $(document).ready(function(){
      $(“.latest_img”).fadeTo(“slow”, 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
      $(“.latest_img”).hover(function(){
      $(this).fadeTo(“slow”, 0.5); // This should set the opacity to 100% on hover
      },function(){
      $(this).fadeTo(“slow”, 1.0); // This should set the opacity back to 30% on mouseout
      });
      });

      • Now save your template and you are done.

      How to Remove Blogger image/Picture Border and Shadow

      • Go to Blogger Template
      • Click on Customise
      • Go to Advance and Add CSS

      Add this Css and Apply to Blog
      Refresh Your Blog and See…


      .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
      .BlogList .item-thumbnail img {
        padding: 0 !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;
      }


      OR Try This
      • Go to Blogger Template
      • Edit Html
      • Find this Code

       border: 1px solid $(image.border.color);

      if you not finding above code try this

      -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);


      All Code Looking Like this…

      border: 1px solid $(image.border.color);

        -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
        -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
        box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
      }
      • Delete all above code
      • And Enjoy