Showing posts with label Blogger Widgets. Show all posts

How To Add Back to Top Page Widget to Blogger

►
Tutorial For How To Add Back to Top Page Widget to Blogger ??


Scrolling/Sliding Back to top Button widget will make your website more user friendly as it will directly take your user's to the top of the page smoothly.They don't need to scroll by them self with the help of mouse and sliding bar on right side.All they have to do is to click on a button and they will reach the top of the page it will not only safe the time of the user's but also make them comfortable and the compatibility of the website will be increased.Most of user would love this widget as they scroll back to top with lot of fun.so without wasting any much of time let us start working.adding it is as simple as writing A B C.

Adding A Sliding/Scrolling Back To Top Button Widget in Blogger.com
1.Go to Blogger.com >>Your Blog>>Layout>>Add A Gadget>>HTML/JavaScript
2.Now add the code which is listed below
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" >

    /***********************************************
    * Scroll To Top Control script- © Dynamic Drive DHTML code library (http://technologychirp.blogspot.com)
    * Modified by http://technologychirp.blogspot.com
    * This notice MUST stay intact for legal use
    * Visit Project Page at http://technologychirp.blogspot.com for full source code
    ***********************************************/

    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="Your Image Link" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
        controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ 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, right: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>

Customization of the widget (Important) According to your Satisfaction:
Now you have to chose the image that you want to show as back to top,here are few images listed below just chose any one of the and replace it with Your Image Link 
Important:you only need to copy the url so don't copy the image just url and replace it with Your Image Link
Back-to-top.png (21×30)



back-to-top-button.gif (72×107)

And after changing the your image link with the above listed urls just hit save button and your work is done
Tuesday, March 26, 2013
Posted by Admin
0 Comments
Tag :

Adding a Dashing Subscribe Now Box to Blogger

►
Usually a Subscribe Now box is for user's it provide user's facilities they can get all theupdates related to the blog directly into there inbox so adding a Subscribe Box is not only useful for a user but also for a publisher.By using Rss Feed,Email Subscription,Facebook Like and etc you can  increase your blog's Traffic big time.This is the reason why we will today add a Dashing Subscribe Now Box to your Blogger Enabled blog before adding it.You should know what it will posses 

1.The subscribe Box will have one RSS Feed Option
2.It will also have a Facebook Page option
3.It will have a Rss Email Subscription option 
4.It will have a link to your Twitter page
5.And it will have a link to your Google Plus Page

So without wasting any time let us directly go to the point and let us start adding a Dashing Subscribe Now box to Blogger

Simple go to Blogger.com >> Then Yourblog >> Then Layout >> Then Add a Gadget >> Then Add Html/Javascript >> Then simply copy paste the following code


  <div dir="ltr" style="text-align: center;" trbidi="on"><div style="text-align: -webkit-auto;"><span style="background-color: white;"><img alt="button_subscribenow.png (314×89)" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-9wf93nF6LH32BBCKXKgZ570FtqmapwhkpPl9uzeouU-fXPp2wHqSVvCpKjnhOGE06YFBm400ar63iKJbdzJ0X2lL8YEVJWD_06fJdkHfM7FtGuFML2pQTFAgLMf5_SWPCGzPcy8LY0MI/s1600/1.gif" width="300" /></span></div></div><b></b><div class="subicons" style="background-color: white; border-bottom-color: rgb(230, 230, 230); border-bottom-style: solid; border-bottom-width: 1px; color: #666666; float: left; font-family: Helvetica, Arial; font-size: 12px; line-height: 18px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-align: -webkit-auto; width: 300px;"><div class="rssicon" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQiATtNOE5fJdCkCxzazkYEXLK6yN-x682jTfXUawT_64BgSOux03zunSM_OGaLlGOhnvEEUyQ4ojYhM2qQGqW0_3-b-55lbIY4O9r1MDwai-k2w8q19GccMxFXLhEY5VN7uYXpS7_RqXb/s400/rsssprite.png); background-origin: initial; background-position: 0px 5px; background-repeat: no-repeat no-repeat; border-right-color: rgb(230, 230, 230); border-right-style: solid; border-right-width: 1px; float: left; height: 48px; line-height: 57px; margin-bottom: 0px; margin-left: 5px; margin-right: 0px; margin-top: 0px; min-width: 2px; padding-bottom: 0px; padding-left: 30px; padding-right: 10px; padding-top: 0px; vertical-align: middle;"><b>&nbsp;<a href="http://feeds.feedburner.com/everfreetech" rel="nofollow" style="color: #333333; text-decoration: none;" target="_blank">&nbsp;RSS</a></b></div>
    <div class="googleicon" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQiATtNOE5fJdCkCxzazkYEXLK6yN-x682jTfXUawT_64BgSOux03zunSM_OGaLlGOhnvEEUyQ4ojYhM2qQGqW0_3-b-55lbIY4O9r1MDwai-k2w8q19GccMxFXLhEY5VN7uYXpS7_RqXb/s400/rsssprite.png); background-origin: initial; background-position: 0px -37px; background-repeat: no-repeat no-repeat; border-right-color: rgb(230, 230, 230); border-right-style: solid; border-right-width: 1px; float: left; height: 48px; line-height: 57px; margin-bottom: 0px; margin-left: 5px; margin-right: 0px; margin-top: 0px; min-width: 2px; padding-bottom: 0px; padding-left: 30px; padding-right: 10px; padding-top: 0px; vertical-align: middle;">
    <b>&nbsp;<a href="http://plus.google.com/107381172453188253394" rel="author" style="color: #333333; text-decoration: none;" target="_blank">&nbsp;G+</a></b></div>
    <div class="fbicon" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQiATtNOE5fJdCkCxzazkYEXLK6yN-x682jTfXUawT_64BgSOux03zunSM_OGaLlGOhnvEEUyQ4ojYhM2qQGqW0_3-b-55lbIY4O9r1MDwai-k2w8q19GccMxFXLhEY5VN7uYXpS7_RqXb/s400/rsssprite.png); background-origin: initial; background-position: 0px -79px; background-repeat: no-repeat no-repeat; border-right-color: rgb(230, 230, 230); border-right-style: solid; border-right-width: 1px; float: left; height: 48px; line-height: 57px; margin-bottom: 0px; margin-left: 5px; margin-right: 0px; margin-top: 0px; min-width: 20px; padding-bottom: 0px; padding-left: 30px; padding-right: 10px; padding-top: 0px; vertical-align: middle;">
    <b>&nbsp;<a href="https://www.facebook.com/pages/EverFreeTech/242545022467391" rel="nofollow" style="color: #333333; text-decoration: none;" target="_blank">FB</a></b></div>
    <div class="twittericon" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQiATtNOE5fJdCkCxzazkYEXLK6yN-x682jTfXUawT_64BgSOux03zunSM_OGaLlGOhnvEEUyQ4ojYhM2qQGqW0_3-b-55lbIY4O9r1MDwai-k2w8q19GccMxFXLhEY5VN7uYXpS7_RqXb/s400/rsssprite.png); background-origin: initial; background-position: 0px -121px; background-repeat: no-repeat no-repeat; float: left; height: 48px; line-height: 57px; margin-bottom: 0px; margin-left: 5px; margin-right: 0px; margin-top: 0px; min-width: 20px; padding-bottom: 0px; padding-left: 30px; padding-right: 10px; padding-top: 0px; vertical-align: middle;">
    <b>&nbsp;<a href="http://twitter.com/Fosterzone" rel="nofollow" style="color: #333333; text-decoration: none;" target="_blank">Twitter</a></b><br />
    <br /></div></div>
    <div class="emailsub" style="background-color: white; border-bottom-color: rgb(230, 230, 230); border-bottom-style: solid; border-bottom-width: 0px; color: #666666; float: left; font-family: Helvetica, Arial; font-size: 12px; line-height: 18px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 15px; text-align: -webkit-auto; width: 300px;">
    <div class="emailicon" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEXwjwHWrfWgX1biNWCHeSU7sA-vbMOkqTT0UVXsn8SbBgpjr9QgS8XZYXx6Hxjqyf4WF2Emlzet4jSRbhnY7riFTaiU4cXJrZLwFSrkeBB42Qmt9zNaZ-xnC7Xi3P01cJ4kg_PfeK6Sc/s400/email.png); background-origin: initial; background-position: 0px 2px; background-repeat: no-repeat no-repeat; color: #333333; float: left; font-size: 14px; line-height: 20px; margin-bottom: 0px; margin-left: 5px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 40px; padding-right: 15px; padding-top: 0px; vertical-align: middle; width: 300px;">
    <div style="color: #3a3a3a; font-size: 13px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; width: 270px;">
    Receive Quality Updates Straight in your &nbsp;&nbsp; Inbox by submitting your Email ID below<b>.</b></div></div>
    <div class="emailupdatesform" style="float: left; margin-bottom: 5px; margin-left: 5px; margin-right: 0px; margin-top: 15px; width: 300px;">
    <form action="http://feedburner.google.com/fb/a/mailverify?uri=Everfreetech" method="post" target="popupwindow">
    <b><input class="emailupdatesinput" gtbfieldid="10" name="email" style="background-attachment: initial !important; background-clip: initial !important; background-color: rgb(255, 255, 255) !important; background-image: initial !important; background-origin: initial !important; border-bottom-color: rgb(210, 210, 210); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(210, 210, 210); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(210, 210, 210); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(210, 210, 210); border-top-left-radius: 5px; border-top-right-radius: 5px; border-top-style: solid; border-top-width: 1px; color: #a19999; float: left; height: 25px; padding-bottom: 0px; padding-left: 8px; padding-right: 8px; padding-top: 0px; width: 185px;" type="text" value="Enter your email here..." /><input class="joinemailupdates" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(87, 171, 254)), to(rgb(0, 128, 255))); background-origin: initial; border-bottom-color: rgb(0, 128, 255); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(0, 128, 255); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 128, 255); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 128, 255); border-top-left-radius: 5px; border-top-right-radius: 5px; border-top-style: solid; border-top-width: 1px; color: white; cursor: pointer; font-family: arial; font-weight: bold; height: 25px; margin-bottom: 0px; margin-left: 5px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 12px; padding-right: 12px; padding-top: 0px; text-transform: uppercase;" type="submit" value="Submit" /></b></form></div></div><b>

Now to modify it yo your setting do the following changeing to make it as it is yours 

To add your own Facebook page Url     
Look for https://www.facebook.com/pages/EverFreeTech/242545022467391 once you find it replace it with your own facebook page url

To Add your own Twitter Page Url
Look for http://twitter.com/Fosterzone once you find it replace it with your own twitter page url

To Add your own Rss Feed Url
Look For http://feeds.feedburner.com/everfreetech once you find it replace it with your own Rss feed url

To Add your own Email Subscription Url
Look For http://feedburner.google.com/fb/a/mailverify?uri=Everfreetech once you find it replace only EverFreetech with your own feed's url name

To Add your own Google plus Page Url
Look For http://plus.google.com/107381172453188253394 once you find it replace with your own Google Plus page url  

And then hit Save button and you are done with adding A Dashing Subscribe Now box to blogger if you have any trouble with adding this widget feel free to ask ..

Posted by Admin
0 Comments
Tag :

How to Add Google+ Traffic Pop in Blogger and Increase +1s

►

Google+ (sometimes written as Google Plus) is among the finest emerging Social Networking website of the year 2012 while Pinterest ends up being second. Google+ has more than 500 million users, which motivates a blogger to add a Small Google +1 button on his website. Whenever a visitor hits a +1 button, they are helping you to socialize your content, by distributing your content with their friends and family. However, sometimes users admire your content, but when it comes to sharing the content on the social web they fancy their chances and thus, ends up in not sharing. The great alternative of forcing your visitors to +1 your content is to use Google+ Traffic POP that does the job uninterruptedly. Therefore, today in this article, we will Learn How to Add a Google+ Traffic POP in Blogger BlogSpot.

In the past, we had released many Social Traffic Pops, which had some most popular social buttons i.e. Facebook and Twitter. Similarly, this time the concept is not new because we have just replaced the two other Social sites with Google+. We have also added a Timer, now if a visitor wants to access your site he either have to like subscribe or have to wait until the timer reaches the zero. 

Before, we get onto our Tutorial let us first learn the meaning of a Traffic POP because mostly novice bloggers are unaware of it. So here how it goes:

  • Traffic POP: It is a kind of a widget that pops up, whenever a visitor arrives on your website. It blocks access the whole website until a visitors share your site on any of the mentioned social sites. Consider the following screenshot to see how a Traffic POP looks like. 

How to Add a Google+ Traffic POP in Blogger:

We have kept the steps extremely straightforward so that anyone can easily apply them on any kind of website. Yes, it works on almost all platforms. However, since, we promote Blogger Platform. Therefore, the following instruction only applies on Blogger Platform.

Go to Blogger.com >> Template >> Edit HTML >> Proceed. Now within the Template, Search (CTRL+F) for the ending </head> Tag and just above it paste the following JavaScript Coding.

<!--Google+ Traffic POP for Blogger By technologychirp.blogspot.com-->

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

<script src="https://apis.google.com/js/plusone.js?ver=3.4.2" type="text/javascript"></script>

<script charset="ISO-8859-1" src="http://mybloggerlab.com/Scripts/googlepops.min.js" type="text/javascript"></script>

<style>

#gpp-bg{
display:none;
position:fixed!important;
_position:absolute; /* hack for IE 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
z-index:998;
}

#gpluspop{
position:fixed!important;
_position:absolute; /* hack for IE 6*/
width:450px;
border:7px solid #2f2f2f;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJRxLFhpP6hsV4a7QNae7ZSRhYlt_fFdywYNhQK55jM7A4KrHPqrtVtl-lrvaGm1LtxlyZVhO7XSLQStbiKc-0j8ogF7ZWZDHZBNvbmIDhT2tvSXilCOMTGgSVsRgjoQmPhUtYV2NiY7E/s1600/background.png) top center no-repeat #fff;
z-index:999;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
margin:0pt;
padding:0pt;
color:#333333;
text-align:left;
font-family:arial,sans-serif !important;
font-size:13px;
}

#gpp-title{
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
font-size:12px;
padding:12px 0px 9px 10px;
font-size:16px;
}

#gpp-close{
float:right;
font-size:12px;
color:#000!important;
margin:0 13px 0 0;
border-bottom:0px !important;
text-decoration:underline !important;
}


#gpp-close:hover{
text-decoration:none !important;
}


#creditosamama { margin-left:10px; margin-top:-10px;}


#creditosamama a { color:#696868}


#gpp-msg{
border-bottom:1px solid #cddcf9;
border-top:1px solid #cddcf9;
background:#ebf2fc;
padding:16px;
}


#gpp-button{
margin:10px 0 0 0;
}


#gpp-bottom{
padding:5px 10px 10px 0px;
}


#gpp-counter{
font-size:11px !important;
margin-top:5px;
text-align:right;
}

</style>
<script>
jQuery(document).ready(function () {
jQuery().googleTrafficPop({
   timeout: 30,
    title: 'Google+ Traffic Pop',
   message: 'Seems Like the Website Is Locked :P Just +1 and get Access to the Content!',
   url: 'technologychirp.blogspot.com',
   wait: 0,
   opacity: '0.45',
   advancedClose: false,
   closeable: false
    })
});
</script>

Customization:
  1. Replace technologychirp.blogspot.com with any URL that you want. Remember: This would be the URL which will receive all the +1's from your visitors.

  2. If anyone desire to increase the seconds of the timer then, he can replace 30 accordingly. Remember: The extension of the timer is in Seconds. 

  3. If anyone want to display a Close button instead of timer then simply replace false  with true from the "closable" JavaScript command. 
That's all, now visitors have to +1 your site or they have to wait until the timers finishes. Since, this gadget catches the history. Therefore, after doing a +1 it will appear anymore. However, after removing history or clearing cache it will again start appearing.
Monday, March 25, 2013
Posted by Unknown
0 Comments
Tag :

- Copyright © Technology Chirp -Technology Chirp- Powered by ADMIN - Designed by ADMIN -