How to change Date header font on blogger.

Changing font of Date header on blogger will help you to make your blog more professional an decent.Your blog will look different than other blogs at Internet.

Your Date and post font will look different.This is a small an easy trick just you need to do some change to your blog.You can do this in 2 part.For preview look at my date header.

How to change

1st Part

• First Back up your template. 

• Now go to Template>Edit HTML and click on proceed.
• Now find this code"date-header".Press Ctrl+F to find.

Learn How to increase Alexa Rank 2X faster Than others.

You will find something like this.

<group description="Date Header" selector=".date-header">
     <variable default="$(body.text.color)" description="Text Color" name="date.header.color" type="color" value="$(body.text.color)">
     <variable default="transparent" description="Background Color" name="date.header.background.color" type="color" value="transparent">
   </variable></variable></group>

• Now replace the above code in red part with this green code code.

<Group description="Date Header" selector=".date-header">

     <Variable name="date.header.color" description="Text Color" type="color"

         default="$(body.text.color)" value="$(body.text.color)"/>

     <Variable name="date.header.background.color" description="Background Color" type="color"

         default="transparent" value="transparent"/>

 <Variable name="date.header.font" description="Font" type="font"

         default="normal normal 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

   </Group>  

---

2nd part

• Now find again this code "date-header span { ".You will find something like this . 

.date-header span {

  background-color: $(date.header.background.color);

  color: $(date.header.color);

  padding: $(date.header.padding);

  letter-spacing: $(date.header.letterspacing);

  margin: $(date.header.margin);

}

• Now replace upper blue code with down orange code.

.date-header span {

  background-color: $(date.header.background.color);

  color: $(date.header.color);

  padding: $(date.header.padding);

  letter-spacing: $(date.header.letterspacing);

  margin: $(date.header.margin);

font: $(date.header.font);

}

h2.date-header { 

  padding-top: 10px;

}

• Now just click on save button.

• Now go to the Template> Customize>Advanced>Date header .You will get the option to change the font of Date header.

• Now select a font for you and check your blog.

If you like the post so share it.

Read More...

Add link in image in blogger

Adding link in image is easiest way  for navigation on your blog. When a visitor click on image he will be redirect to your added link. When you upload an image,it is linked to itself by default.I added a image click and see what happen.If you want to give a download link on your blog so just upload a picture of download and link which you want to give your visitors ,it is better than adding link in word.

See Demo here by clicking on this image.

Learn How to increase Alexa Rank 2X faster Than others.

Follow the beloow steps to Add link in image in blogger.

• Upload your image.

• Select on the image and click on link button.

• Once again select on the image and click on link button. The window will pop up. Now add your link.

• Now add you link in box where you want to send your visitor.

This is the easiest method to Add link in image in blogger.

Read More...

Swiftype voice search for your blog.

If you are using blogger hosted custom search widget to your blog,blogger custom search lack many features like Autocomplete. Autocomplete which users like most because when they start typing Autocomplete feature will complete that automatically.Now Swiftype is still in public beta mode so they are not charring now.Swiftype is free and not require coding skill to add this on your blog.
They have different features like Search Autocomplete,Search analyse to analyse how many time your visitors are using your custom search.

  Follow these steps to get Swiftype voice search.

See Swiftype on my blog.

• Go to Swiftype and create a n account and  confirm you account with  you E-mail.
• Login to your Swiftype account and click on Create a new search engine.Provide your Website/blog name,select a source as crawler then fill your website/blog URL and click on CREATE ENGINE button.  

• Now it will take some time to crawl your website/blog and you will see your post in dashboard.

• Click on install button and copy the code and paste it to Blooger>Layout>Add a gadget>HTML/JAVASCRIPT.

• To add voice search in swiftype Search find this <input type="text" id="st-search-input" class="st-search-input"/> in swiftype widget HTML.
• Replace with  <input type="text" id="st-search-input" class="st-search-input"  x-webkit-speech=""/>
• Last step click on save button.

• After editing it must look like this.

How to get Voice search for your normal search box.

• If you not using Swiftype search so add this x-webkit-speech="" in "<input/>" section. 

Note:- voice search only run in Google chrome.

If you like the post so please share it.

Read More...

Add back to top button for blogger

Today i am going to tell you about my back to top button.Back to top button widget is a important widget for blogger. If you have allot of content on your blog so visitors don't  like to scroll back to top this widget will help them.When a visitor click on button he redirected to the top of your page. It is very easy to install on your blog.
You have to do just add this html. but first see the demo here.

Add back to top button for blogger.

• Go to Blogger >Layout>
• Select  Add a Gadget option

• Select HTML/JavaScript. Copy and paste bellow code inside it.And click on save.

Learn How to increase Alexa Rank 2X faster Than others.

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

<script type="text/javascript" >

/*********************************************** 

***********************************************/

var scrolltotop={ 

    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control 

    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top). 

    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},

    controlHTML: '<img src="https://lh4.googleusercontent.com/-57on8N-b_QQ/UOhAsD6fr_I/AAAAAAAACH8/eFaBPv9InqY/s128/back%20to%20top%20button.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol" 

    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to left/ bottom of window corner 

    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

    state: {isvisible:false, shouldvisible:false},

    scrollup:function(){ 

        if (!this.cssfixedsupport) //if control is positioned using JavaScript 

            this.$control.css({opacity:0}) //hide control immediately after clicking it 

        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto) 

        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists 

            dest=jQuery('#'+dest).offset().top 

        else 

            dest=0 

        this.$body.animate({scrollTop: dest}, this.setting.scrollduration); 

    },

    keepfixed:function(){ 

        var $window=jQuery(window) 

        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx 

        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety 

        this.$control.css({left:controlx+'px', top:controly+'px'}) 

    },

    togglecontrol:function(){ 

        var scrolltop=jQuery(window).scrollTop() 

        if (!this.cssfixedsupport) 

            this.keepfixed() 

        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false 

        if (this.state.shouldvisible && !this.state.isvisible){ 

            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0]) 

            this.state.isvisible=true 

        } 

        else if (this.state.shouldvisible==false && this.state.isvisible){ 

            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1]) 

            this.state.isvisible=false 

        } 

    }, 

    

    init:function(){ 

        jQuery(document).ready(function($){ 

            var mainobj=scrolltotop 

            var iebrws=document.all 

            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode 

            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body') 

            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>') 

                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, left:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'}) 

                .attr({title:'Scroll Back to Top'}) 

                .click(function(){mainobj.scrollup(); return false}) 

                .appendTo('body') 

            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text 

                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text 

            mainobj.togglecontrol() 

            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){ 

                mainobj.scrollup() 

                return false 

            }) 

            $(window).bind('scroll resize', function(e){ 

                mainobj.togglecontrol() 

            }) 

        }) 

    } 

}

scrolltotop.init()

</script>

• If you want show this button in Right section of your blog so change left with right in this code.

• If you want to change image of button so change the link in blue color with your image link .The Format of image should be in ".png".Upload your image on Picasa web an copy the link of your image.

• Now see your blog thie widget will start working on your blog as same as my blog.

If  you like the post please share it.

Read More...