Articles by "blogging"
Showing posts with label blogging. Show all posts
A page about Blogging Tricks and Computer, Android, Hacking, and Windows Tricks.
If you need a fresh style to the threaded comments of a standard Blogger template, here's a simple CSS that will help you to apply a different background, make your avatars rounded, add a border with rounded corners and a triangle which is actually an HTML entity to get that speech bubble look on your comments.

You can see demo HERE

To have this style in your comments, all you need to do is to paste the below code inside the CSS part of the template, which is between <b:skin> and </b:skin>

Styling nested comments with CSS

Step#1: From the blogger dashboard go to Template.

Step#2: As we are going to edit our html it is better to download the full template first, because if somehow something went wrong then we have the full template downloaded. :)

Step#3: Now click on edit html button


Step#4: Click anywhere inside the code area press Ctrl+F to open the search box.
tip101tricks.blogspot.com/images
Step#5: Paste or type the ]]</b:skin> tag inside the search box and hit Enter. After you found the highlighted code, click on the arrow next to it to expand the code, then search it again by hitting Enter.

Step#6: Just above ]]></b:skin add this CSS code.


 .comments .comment-block {
background: #F9F9F9;
color: #555;
box-shadow: 0 4px 10px #EEEEEE;
position: relative;
margin-top: 10px;
margin-left: 60px;
padding: 10px;
border: 4px solid #EEEEEE !important;
border-radius:10px;
font: 1.190em/1.2 Cambria,Georgia,sans-serif;
}
.comment-thread li .comment-block:before {
position: absolute;
display: block;
left: -26px;
color: #EEEEEE;
content: "\25C4";
font-size: 30px;
}
.comments .avatar-image-container {
width: 60px;
height: 60px;
max-height: 60px;
margin:0px 0px 0 -28px;
padding: 0px;
border: 7px solid #EEEEEE;
border-radius:60px;
}
.comments .avatar-image-container img {
overflow:hidden;
width: 60px;
height: 60px;
max-width: 60px;
border:0 !important;
border-radius:60px;
}
.comments .comment-thread.inline-thread {
background: none;
}
.comments .continue {
border-top: 0px solid transparent;
}
.comments .comments-content .datetime {
float: right;
font-size: 11px;
}
.comments .comments-content .user a{
font-size: 15px;
color: #498EC9;
}
.comments .comments-content .datetime a:hover{
color: #777;
text-decoration: none;
}
.comments .comments-content .comment:first-child {
padding-top: 0px;
}
.comments .comments-content .comment {
margin-bottom: 0px;
padding-bottom: 0px;
}
.comments .continue a {
padding: 0px;
}
.comments .comments-content .icon.blog-author {
background-image: none;
}

How to Change Blogger Threaded Comments Background, Border and Colors

- replace the #F9F9F9 value to change the background color of the comments;
- #555 to change the text comments color;
- #EEEEEE to change the color of the shadow around comments;
- 4px solid #EEEEEE to change the border width (4px), style (solid) and color (#EEEEEE) around comments;
- 1.190em to change the comments font size;
- to change the arrow color, replace the #EEEEEE value from color: #EEEEEE;
- to change the border width (7px), style (solid) and color (#EEEEEE) around avatars, modify this part: 7px solid #EEEEEE;
- to change the avatars' size and roundedness, change the 60px value;

Step#7: Finally!!!! Save your template and You're done!!!
A page about Blogging Tricks and Computer, Android, Hacking, and Windows Tricks.
Table of contents is a page basically to arrange all your posts in alphabetical order. It contains Header which is your Label name and Posts with that label.

Table of contents page that is Sitemap is very important for any website or Blog because it really increases traffic of your site and also makes your blog look professional.

Visitor can easily navigate to all your posts using sitemap page. Sitemap also makes easier for search engines to crawl website and indexing pages.

After Creating Sitemap page in your blogger, you will notice dramatic increase in your blog's traffic. 


tip101tricks.blogspot.com/images


Table of Contents page is easy to create and use on your blog. You just need to add some codes in blogger template to make it look stylish and piece of code in your Sitemap page that's it!! 


How To Create Table Of Contents Page For Blogger

  1. Go to Blogger>>Template>>Backup/restore. Download your full template you are going to edit html of your template so better is to create backup of the template.
  2. After creating backup click on edit html.
  3. Search this code ]]></b:skin> in template using (Ctrl+F).
  4. Now Just Above the ]]></b:skin> paste the below code.

padding-left:15px;
padding-right:5px;
white-space:nowrap;
text-align:left;
font-family:"Arial",sans-serif;
font-size:12px;
}
.list-ganjil{
background-color:#F6F6F6;
}
.headactive{
    color: #fef4e9;
    border: 2px solid white !important;
    background: #1C8DFF;
    background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2));
    background: -moz-linear-gradient(top,  #9dc2e7,  #438cd2);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2');
}

6. Save your template, You're almost done.


Create A New Page For Sitemap

7. Go to Pages>>New Page>>Blank Page.
8. Paste the code below in html area of page editor.


<script src="http://olusegun-fapohunda-calculator.googlecode.com/svn/Justnaira-tos-file.js"></script><script src="http://tip101tricks.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script><script type="text/javascript">var accToc=true;</script><script src="http://olusegun-fapohunda-calculator.googlecode.com/svn/concordian-tos.js" type="text/javascript"></script>


Changes:

9.Now make some changes to the above codes, replace tip101tricks.blogspot.com with your own Site Url.

10. After replacing the URL click on Publish button and You're done!!!

Your comment is always welcome. Share your view with us.

Do you have any difficulties adding these sitemap to your blog? That's why we're here. If you've noticed any issue with these tutorial please kindly post your query through comment and we'll get back to you as soon as possible.

Subscribe! You don't want to miss any of our future updates? Subscribe for our daily and weekly updates.

Share! We want you to help us share this tutorial to your friends on social media sites like, facebook and twitter. Remember these word? ("There's Love In Sharing").


Thank You!!!
A page about Blogging Tricks and Computer, Android, Hacking, and Windows Tricks.
Disabling right-click in your blogger will keep some people from being able to steal your text and graphics. There are easy ways around it, but it may stop some newbies. Since newbies are often the ones most likely to steal your stuff because they don't know any better, you'll might stop some content theft with this simple trick.

A page about Blogging Tricks and Computer, Android, Hacking, and Windows Tricks.
Did you know that you can disable copy paste function on your webpages/blogs? Of course you did, that's why you are here, to see how it's done. 
tip101tricks.blogspot.com/images

This little JavaScript snippet will prevent someone from highlighting your text and using the copy function to copy it and rip it off. It also prevents them from using Ctrl+A to select all text, or using right click menu to select all. 

Of course, since it is a javascript, it doesn't work if the visitor has disabled javaScript or has a browser that doesn't support JavaScript. That isn't many users, but anyone with some experience would know a way around this trick. It will stop most new users though, and at least make it harder for everyone else. That may be all discouragement they need to move on to easier picking.


How To Disable Copy Paste In Blogger

 Trick is very simple to follow, here are the steps

  1. Go to Blogger>>Layout>>Add a gadget
  2. Click on html/JavaScript code
  3. Paste the code below in the box.
<script type="text/JavaScript">
//by Tips&101Tricks
function killCopy(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar) {
document.onmousedown=killCopy
document.onclick=reEnable
}
</script>



After Pasting the above click on save button and You're Done!!

Note: By Combining this no-copy paste code with a right-click script you'll add another level of difficulty for those trying to steal your text. Be warned though, a savvy and determined user can still figure out ways around all the protection, nothing is safe on the internet.

Fortunately, not many people want to spend that much time at it when it's much easier to go steal from someone else. 

Script May not work in some Browsers like IE. 


A page about Blogging Tricks and Computer, Android, Hacking, and Windows Tricks.
Hi friends, In this tutorial I'm going to share How to open all links in your blog post in a new tabs. 

I know you would be thinking why you want to have all your links to open in new tabs? 
A page about Blogging Tricks and Computer, Android, Hacking, and Windows Tricks.
Hello friends, Today I'll share an Tutorial on How to Add Page loading effects in blogger. Page Loading is a very nice widget to entertain visitors/readers. 

Occasionally due to weighty blogs page loading may take upper time to display. In this way of time to avoid bounce of visitors/readers on adding page loading effects crafts visitors/reader entertain and retain on blog. 

So Lets begin our tutorial,

STYLE#1

YOUTUBE STYLE PREMIUM STYLISH PROGRESS LOADING BAR.

  
tip101tricks.blogspot.com/image
 If you want to add this progress bar in your blogger template, 
  
follow this simple steps:

1. Go to blogger>>template
2. Click on backup/restore. 
3. After creating backup of your template click on edit html
4. In your template search for </body> tag.
5. paste below code just above </body> tag.


<style>#nprogress{pointer-events:none}#nprogress .bar{background:#29d;height:2px;left:0;position:fixed;top:0;width:100%;z-index:100}#nprogress .peg{-ms-transform:rotate(3deg) translate(0px,-4px);-webkit-transform:rotate(3deg) translate(0px,-4px);box-shadow:0 0 10px #29d, 0 0 5px #29d;display:block;height:100%;opacity:1.0;position:absolute;right:0;transform:rotate(3deg) translate(0px,-4px);width:100px}#nprogress .spinner{display:block;position:fixed;right:15px;top:15px;z-index:100}#nprogress .spinner-icon{-webkit-animation:nprogress-spinner 400ms linear infinite;animation:nprogress-spinner 400ms linear infinite;border:solid 2px transparent;border-left-color:#29d;border-radius:50%;border-top-color:#29d;box-sizing:border-box;height:18px;width:18px}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}.photo{display:none}</style><div id='loadMore'/><script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/><script src='http://goo.gl/10Okof'/>

6. Hit save template and you're done!!!
Refresh your blog and see this awesome loading effect.

STYLE#2


If you want add this type of page loading effects in your blogger template,

here are the steps

  1. Go to blogger>>template
  2. Click on backup and restore because if anything goes wrong you can reuse it again.
  3. Now search for the code <body> (Use Ctrl+F to search)
  4. After finding the code copy the below code and replace it with <body>.

<body onLoad='init()'>
<span id='loading' style='position:absolute;
text-align: center; top:10px; right: 10px;'>
<img border='0' src='YOUR IMAGE URL HERE'/></span>
<script>
var ld=(document.all);

var ns4=document.layers;
var ns6=document.getElementById&amp;&amp;!document.all;
var ie4=document.all;

if (ns4) ld=document.loading;
else if (ns6)
ld=document.getElementById(&quot;loading&quot;).style;
else if (ie4)
ld=document.all.loading.style;

function init() {
if(ns4){ld.visibility=&quot;hidden&quot;;}
else if (ns6||ie4) ld.display=&quot;none&quot;;
}
</script>

After successful pasting the above code replace "YOUR IMAGE LINK" with your choice of .gif images as given below.

tip101tricks.blogspot.com/images
Link: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbUSD4k42ikS8tyIGTn7zToEh-jnF6DXzYKOaBvycWI8ILVcmnqDH6aGJVkxEKQBa7_V7ETvFUiayiFDJJn6HCU6iY57DR01pQtUVENUTmCYFn8fBe272eNZIlqZg35beFImH0G-2sAxA/s660/blogtariff-arrows64.gif

Link: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCK5AcjIhVWkBo9hgsP7KeZ1Y-XJJQQ0IT9lBMSBsLW3GhpNm7U1_411iR_DaemyjzfyCk7cRgzCk_91FxILxm9-f_67CQpLy3dwnZaPE-qAYaYvnjJspjJ7KAFe_kGFFflPTp60SvCKk/s660/blogtariff-balls64.gif

Link: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_pVry3uqLmKFevJLS-zGHekr0yLQ5By03UMCGG6DJ1aYEiwS4Yf3bgaCuLrZeS-rhe1zAU3CrFV3Qu8dGJ7h4RZREkcQDuOAxfGdANOPV3521zcOMEEwSAmqE8G9F6QkFhSINvS0Qco4/s660/blogtariff-loader64.gif

tip101tricks.blogspot.com/images
Link: http://i1370.photobucket.com/albums/ag249/tvicky002/25_zpsf6b8d219.gif

tip101tricks.blogspot.com/images
Link: http://i1370.photobucket.com/albums/ag249/tvicky002/466_zpsbb7d0259.gif

tip101tricks.blogspot.com/images
Link: http://i1370.photobucket.com/albums/ag249/tvicky002/220_zps9420c740.gif


You can create loader .gif images upload it on any image hosting sites like Photobucket or Pisaca and paste the link of that image in the code above.
no image
A page about Blogging Tricks and Computer, Android, Hacking, and Windows Tricks.

Have you ever wondered how to make those little grey popup boxes, that welcome visitors to your homepage? Here's how to do it!


Drag your cursor over the script below to highlight it. Then press 'control' and 'c' at the same time to copy it to your clipboard.

Open your homepage editor, for example I use Front Page Express or Dreamweaver. Then paste the code into your html source by pressing 'control' and 'v' at the same time.




<script> function MYALERT() { 
alert("Welcome, I am glad to show you how to do this *smiles*"); } MYALERT() 
</script>

My Alert is the name of the function and can be called whatever you wish.

You may also change the wording .

Thank You!!
A page about Blogging Tricks and Computer, Android, Hacking, and Windows Tricks.
Hello friends, I'm posting this tutorial for two reasons: to help anyone else who was frustrated trying to figure out how to do this, and (more importantly) to remind myself how to do this when I inevitably forget.

I spent hours trying to figure out how to make a GIF, then hours trying to get the animation to work in my blog.
 
So, I've created this. Did you like it?? Don't worry you can create your own

Spin pencil photo penspin1_tag_zps8f10234b.gif


Well, I'm not going to teach you how to spin a pencil around your thumb...

Animation test 2 photo UNfinished_Animation__2_by_JC_Of_The_RedFlame_zpsd7630b52.gif

 Apparently it is believed that blogger does not support animated gif images. This belief is correct to some extent. However, as you can see from this post you definitely can insert an animated GIF image into a Blogger post.

The statement that
'Blogger does not support animated images'
only means to say that the WYSIWYG editor of Blogger does not support such images. In other words, if you try to upload an animated GIF image in your blog post though Blogger's Post Editor, the GIF file is converted automatically into a static PNG file during the upload process.

So, how does one add an animated .gif images into blogger post?
It's very simple really...
So Let's start

  1.  Make .gif images, take some images, first you have to create .gif animated images. Here are some very good sites for it, makeagif and gifmaker
  2. Once you have created your gif animated image, you have to upload it to some image hosting sites like Photobucket or you can directly upload your images to Picasawebalbums.
  3. Use the 'upload' button to directly upload your album to your blog.
  4. Now you have to just click on upload image in your blogger post and click on upload from Picasawebalbums.
  5. Upload it. that's it!!
  6. If you are using Photobucket, then after uploading your image click on link button, it will show you many links of different types click on html link copy it.



Paste the code in HTML of your blogger post and Save.

That's All!!!

You'll see animated gif in your blogger editor post. Just like this..


thinking photo Thinking_zps867a14b4.gif

If you liked this tutorial Subscribe to Our daily email Updated and Like our Facebook page to get latest geekish tricks and tips.

Thank You!!
A page about Blogging Tricks and Computer, Android, Hacking, and Windows Tricks.
Hello friends, we all know the importance of social network for any website/blogs. Popular community based sites like Facebook, twitter, and Youtube. and flickr has more than 5 millions page views per day. The use of marketing through these websites has greater potential because of enormous steady traffic in these sites. 

So, Today I'll show you how to add Popup Like box With Timer in your blogger. As Facebook is the one of the biggest website in world. Get the more fans on your web page by adding a facebook like box. Facebook like box is widely used social plugin from Facebook Developers. The importance of Fb like box is tremendous in terms of number of like it brings.

So let's start Our Tutorial.







So, If you want to Add this gadget to your blogger follow this steps.


 photo http---makeagifcom--media-1-08-2014-Y8by6M_zps952e799b.gif

As this gadget is made using JQuery you have to add JQuery script to your Blogger template.

So Go to Dashboard>>Template>>Edit html and search for </head> tag.
(Use Ctrl+F to search ;) ) . Just above </head> tag paste the below script


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


After installing JQuery plugin to your template, follow this few simple steps. 
  1. Go to Blogger.
  2. Login to your blog>>click on layout
  3. Add a gadget>>click on html/javascript
  4. Copy the below script and paste it in the box.

<style type='text/css'>
#makingdifferentpopup{
position: fixed;
top:100px;
z-index:9999;
display:none;
padding:0px;
right:600px;
border:10px solid rgba(82, 82, 82, 0.7);
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
-webkit-border-radius:8px 8px 8px 8px;
-moz-border-radius:8px 8px 8px 8px;
border-radius:8px 8px 8px 8px;
width:400px;
height:360px;
overflow:hidden;
}
#makingdifferentpopup span{
font-size:20px !important;
font-weight:bold !important;
}
#makingdifferentpopup h1{
background:#6d84b4 url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfa5HdO7v_jsaPixvxUWd_V5jQIvUzapbER_XWDi9JouYmFYedGA-4w-ebffDW0WjDlv32HMimo9lGq_-Pw3lSJ_ZhcrUeBpe8ubtZkrPMaEA3LULzSErl4GRh-eBKc-3KLiv6Phfs2tBj/s1600/%255Bwww.gj37765.blogspot.com%255Dh1.png) 98% no-repeat;
border:1px solid #3b5998 !important;
color:#FFFFFF !important;
font-size:20px !important;
font-weight:700 !important;
padding:5px !important;
margin:0 !important;
font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;
overflow:hidden !important;
}
.htmlarea{
font-size:12px !important;
font-weight:normal !important;
height:265px !important;
padding:1px !important;
background:#fff !important;
border-bottom:2px solid #ddd;
overflow:hidden !important;
}
#mdfooter{
text-align:left;
background:#F2F2F2 !important;
height:56px !important;
padding:10px 10px 10px 10px !important;
overflow:hidden !important;
}
#mdclose{
float:right;
background-color:#eee !important;
border:1px solid #ccc !important;
color:#111 !important;
font-weight:bold !important;
padding:5px 8px 5px 8px !important;
text-decoration:none !important;
display:inline-block !important;
font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;
outline:none !important;
position:relative !important;
font-size:18px !important;
margin:1px !important;
}
#mdclose:active{
top:1px;
left:1px;
}
.grabthis{
bottom:80px;
font:8px "lucida grande",tahoma,verdana,arial,sans-serif;
position:absolute;
right:6px;
text-align:right;
z-index: 99999;
}
.grabthis a{
color: #000;
text-decoration:none;
}
.grabthis a:hover{
text-decoration:underline;
}
</style>
<script type='text/javascript'>
jQuery(document).ready(function() {
function makingdifferent_ppopup()  {
var sec = 10
var timer = setInterval(function() {
   $("#mdfooter span").text(sec--);
   if (sec == 0) {
      $("#makingdifferentpopup").fadeOut("slow");
      clearInterval(timer);
   }
},1000);
  var mdwh = jQuery(window).height();
  var mdpph = jQuery("#makingdifferentpopup").height();
  var mdfromTop = jQuery(window).scrollTop()+50;
 jQuery("#makingdifferentpopup").css({"top":mdfromTop});}
jQuery(window).fadeIn(makingdifferent_ppopup).resize(makingdifferent_ppopup)
 //alert(jQuery.cookie('sreqshown'));
 //var mdww = jQuery(window).width();
 //var mdppw = jQuery("#makingdifferentpopup").width();
 //var mdleftm = (mdww-mdppw)/2;
   var mdleftm = 500;
 //var mdwh = jQuery(window).height();
 //var mdpph = jQuery("#makingdifferentpopup").height();
 //var mdfromTop = (jQuery(window).scrollTop()+mdwh-mdpph) / 2;
 jQuery("#makingdifferentpopup").animate({opacity: "1", left: "0" , left:  mdleftm}, 0).show();
     jQuery("#mdclose").click(function() {
jQuery("#makingdifferentpopup").animate({opacity: "0", left: "-5000000"}, 1000).show();});});
</script>
<div id="makingdifferentpopup">
<h1>Join us on Facebook</h1>
<div class="htmlarea">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Ftipsn101tricks&amp;width=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false&amp;height=250" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:250px;" allowtransparency="true"></iframe>
<div class="grabthis">
By <a href="http://tip101tricks.blogspot.com/" target="_blank">Tips&101Tricks</a> / <a href="http://tip101tricks.blogspot.com/" target="_blank">+Get This!</a>
</div>
</div>
<div id="mdfooter">
Please wait..<span>10</span> Seconds
<a href="#" id="mdclose" onclick="return false;">Cancel</a>
</div>
</div>
<!-- End popup -->


Changes in the Script before installing:

  1. Replace tipsn101tricks in the script with your fb page username
  2. You can change the time interval var sec = 10 with your own desired time.
  3. If you want change the width and Height of the box, it is 400 and 250 in the script.
  4. Change Join Us on Facebook with your desired text.
  5. You can remove or change the "cancel" with your desired text.
  6. Now copy the script and paste it in the box, click on save.
So, Adding Popup like box will force your readers to like your fan page and it will increase your likes.

Share Your Ideas with Us. And Stay Connected for Latest Trick in Blogging.

And You liked this tutorial give us one like too!!!
Thank You!!
A page about Blogging Tricks and Computer, Android, Hacking, and Windows Tricks.

What is Meta Tag?


Meta Tags are html codes that are inserted into the header at the top of the a web page. Meta Tags are used to provide description of what the website is about and keywords (words that potential site visitors enter into search engines.)

Keywords And Description

Two Meta tags that are important are KEYWORDS and DESCRIPTION. You have to be very careful about how these are developed and positioned. Frequency and location of the keywords that is being searched are important criteria that determines relevance and page ranking. Search engine would generally consider the page more relevant if the keyword is being sought in the TITLE tag or is in the KEYWORD tag near the top of the page. Similarly if the sought after keyword is found being repeated in the page, it may give the impression that this is a more relevant page and improve ranking.
The DESCRIPTION tag is used by the search engines for the page summary that is displayed on the result page. This summary is what the visitors read and decide whether he/she should enter the website or not. If the description is just full of repeated keywords, it won't do you any good, even if your page is ranked high. You still do not have a visitor. May be you have put off a visitor.

So, Now we have to add two META tags to the head section of the template. DESCRIPTION meta tag which will describe your site and KEYWORDS meta tag which tells about your site's keyword.

 How to Add Meta Tags To Your Blogger(blogspot) blog.

To Create Best and Highly Optimized meta tags, you can Use Our Meta Tag Generator Tools. 
  • Create Your Meta Tag Using Meta Tag Generator
  • After Creating Meta Tag, Go to DashBoard>>Template
  • As we're going to edit template so first things you should is just Download your full template.
  • After Downloading Click and edit html.
In your Template Search the following code.
<b:include data='blog' name='all-head-content'/>

Paste Your Meta Tag code just After the code Above.



And Click Save Template.

Thats's All!!! 
Please Post your Queries in the comment box...
Stay Updated with Our Daily Mail Updates , Or Like Us on Facebook
A page about Blogging Tricks and Computer, Android, Hacking, and Windows Tricks.
Back to top buttons are very helpful to blogs. On a very long page with large amount of information, links to top allow users to click to information directly, reducing scrolling and scanning. Users often get frustrated when they have to scroll or scan a lot to find information. 


tip101tricks.blogspot.com

So, here is the tutorial how to Add implement a smooth scrolling back to Top button for your blogger.
............................................................................................................
>>How To Add Scroll To Top Button To Blogger<<
...................................................................................................................................................................
  1. Go to Blogger>Layout
  2. Add a Gadget
Paste the following code inside it.




<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="IMAGE URL" />', //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>
  
Replace the Image Link with the link of the image that you want add. 


back to topback to topback to topback to topback to topback to topback to topback to top
back to topback to topback to topback to topback to topback to topback to topback to top
back to topback to topback to topback to topback to topback to topback to topback to top
I have provided you back to top image icons, just right click and copy the image link and paste it above at "image link". 

Save this widget and and drag to the bottom position or near footer.
View your blog and see the magic!!

That's all!!

If you enjoyed our article, please Like Us On facebook. You can subscribe to Our Daily email Updates.

Thank You!!!