Showing posts with label Background. Show all posts
Showing posts with label Background. Show all posts

August 13, 2011

How To Add Page Popularity and Top popular pages widget


Hey! bloggers you know we have a popular post widget to find popular posts in our blog. but you know we have a gadget to find a popular posts in our website/blog. no. dont worry! today i'm explain you how to add popular pages finder gadget to blogger sidebar! this gadget similer to popular post. i hope you really like this gadget! if you like this gadgte please read following steps to know how to add this gadgte to your blog. and thank you for visitng my blog.we will meet again in next post..

1.Log in to your dashboard-->Design- -> Edit HTML

2.Click on "Expand Widget Templates

3.Scroll down to where you see this












Add Page Popularity Widget

Paste the below code just after
<p><data:post.body/></p>


<img expr:src='"http://foxrecord.appspot.com/rating?url=" + data:post.url + "&amp;title=" + data:post.title' />




Add Top popular pages widget







Paste the below code just after 
<p><data:post.body/></p>

<script src="http://foxrecord.com/scripts/gettop.js" type="text/javascript"></script>









4.Click on "Save Templates" and you are done.

How to Change mouse cursor of your blogger



Hi this tutorial i'm teach you how to add text to your blog mouse cursor area.. this is very cool gadget. i'm added demo picture in below.. so waht do you think? please add this gadget to your blog for decorate your blog with easy way! i hope you really like my post. so add your comments in comments form. thank you! stay with us!








Now follow the simple steps below to do it:

1.Login to your blogger dashboard-->Desing> Page Elements

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below and click save

<script language="javascript">


// ENTER TEXT BELOW. CAN *NOT* INCLUDE NORMAL HTML CODE.
var text='ENTER YOUR TEXT HERE....';

var delay=40; // SPEED OF TRAIL
var Xoff=0; // PIXEL COUNT FROM THE LEFT OF THE CURSOR (- VALUES GO TO LEFT)
var Yoff=-30; // PIXEL COUNT FROM THE TOP OF THE CURSOR (- VALUES GO UP)
var txtw=14; // AMOUNT OF PIXEL SPACE EACH CHARACTER OCCUPIES
var beghtml='<font color="#00436e"><b>'; // OPTIONAL HTML CODE THAT EFFECTS WHOLE TEXT STRING SUCH AS FONT COLOR, SIZE, ETC.
var endhtml='</b></font>'; // END HTML CODE. MOSTLY USED IF ABOVE SETTING IS USED.

//********** NO NEED TO EDIT BELOW HERE **********\

ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;
ie4 = (document.all && !document.getElementById)? true : false;
ie5 = (document.all && document.getElementById)? true : false;
ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var txtA=new Array();
text=text.split('');
var x1=0;
var y1=-1000;
var t='';

for(i=1;i<=text.length;i++){
t+=(ns4)? '<layer left="0" top="-100" width="'+txtw+'" name="txt'+i+'" height="1">' : '<div id="txt'+i+'" style="position:absolute; top:-100px; left:0px; height:1px; width:'+txtw+'; visibility:visible;">';
t+=beghtml+text[i-1]+endhtml;
t+=(ns4)? '</layer>' : '</div>';
}
document.write(t);

function moveid(id,x,y){
if(ns4)id.moveTo(x,y);
else{
id.style.left=x+'px';
id.style.top=y+'px';
}}

function animate(evt){
x1=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);
y1=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);
}

function getidleft(id){
if(ns4)return id.left;
else return parseInt(id.style.left);
}

function getidtop(id){
if(ns4)return id.top;
else return parseInt(id.style.top);
}

function getwindowwidth(){
if(ie4||ie5)return document.body.clientWidth+document.body.scrollLeft;
else return window.innerWidth+pageXOffset;
}

function movetxts(){
for(i=text.length;i>1;i=i-1){
if(getidleft(txtA[i-1])+txtw*2>=getwindowwidth()){
moveid(txtA[i-1],0,-1000);
moveid(txtA[i],0,-1000);
}else moveid(txtA[i], getidleft(txtA[i-1])+txtw, getidtop(txtA[i-1]));
}
moveid(txtA[1],x1,y1);
}

window.onload=function(){
for(i=1;i<=text.length;i++)txtA[i]=(ns4)?document.layers['txt'+i]:(ie4)?document.all['txt'+i]:document.getElementById('txt'+i);
if(ns4)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=animate;
setInterval('movetxts()',delay);
}
</script>


You are done.


How To Add Live Date Script For Blogger


How To Add Live Date Script For Blogger

1.Login to your blogger Dashboard and go to Desing --> Page Elements.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below

<script>
/*
Live Date Script- 
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions, 100's more DHTML scripts, and Terms Of Use,
visit http://www.dynamicdrive.com
Bloggerized by Sameera http://www.bloggertricksandtoolz.com/
*/

var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")

function getthedate(){
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var hours=mydate.getHours()
var minutes=mydate.getMinutes()
var seconds=mydate.getSeconds()
var dn="AM"
if (hours>=12)
dn="PM"
if (hours>12){
hours=hours-12
}
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
//change font size here
var cdate="<small><font color='000000' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn
+"</b></font></small>"
if (document.all)
document.all.clock.innerHTML=cdate
else if (document.getElementById)
document.getElementById("clock").innerHTML=cdate
else
document.write(cdate)
}
if (!document.all&&!document.getElementById)
getthedate()
function goforit(){
if (document.all||document.getElementById)
setInterval("getthedate()",1000)
}

</script>
<span id="clock"></span>


4.Save java script your done.

How To Add Page Load Timer Show Script to Your Blog


How To Add Page Load Timer Show Script to Your Blog

1.Log in to your dashboard--> Desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see </head> tag.

4.Now add below code before </head> tag.

<!-- page load timer -->
<script type='text/javascript'>
var d = new Date();
var starttime = d.getTime(); //Get the start time
</script>

5.Now find </body> tag.

6.add below code before </body> tag.

<!-- page load timer start -->
<script type='text/javascript'>
var d2 = new Date();
var endtime = d2.getTime(); //Get the end time
//Find the difference between the start and end times
var totaltime = (endtime - starttime)/1000;
//Round 2 decimal places
var result = Math.round(totaltime*100)/100;
//Output results to a &quot;P&quot; element
document.getElementById(&quot;loadtime&quot;).innerHTML = &quot;Page loaded in: &quot;+ result +&quot; seconds&quot;;
</script>
<!-- page load timer end -->


7. Click On "Save Template" You are done.

How To Add Scroll Bar Widget For Your Blogger


How To Add Scroll Bar Widget For Your Blogger

1.Login to your blogger dashboard and go to Desing --& Page Elements.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below and click save.

<div style="overflow:auto;width:260px;height:300px;padding:10px;"> 
<ul>

<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>

</ul>
</div>

Note: Replace Your Link and Your Text with your contents.

Now You are done.

How To Add Scroll Bar Widget For Your Blogger


How To Add Scroll Bar Widget For Your Blogger

1.Login to your blogger dashboard and go to Desing --& Page Elements.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below and click save.

<div style="overflow:auto;width:260px;height:300px;padding:10px;"> 
<ul>

<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>

</ul>
</div>

Note: Replace Your Link and Your Text with your contents.

Now You are done.

How To Add Back to Top Button for Blogger


How To Add Back to Top Button for Blogger

1.Login to your blogger dashboard and go to Desing --&amp; Page Elements.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below and click save.






<!--Back to top Start bloggertricksandtoolz.com--><a alt="Back to Top" style="display:scroll;position:fixed;bottom:25px;right:5px;" href="#" title="Back to Top"><img onmouseover="this.src=&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzMK4JJknB4zvTGxG2RTW8yiMX-gxnJEjz8-4-HcKsjpxBEXE3CPZCwckKSOnq-6JHy_rGJbVlUkrzSO6DYVSMrinQ4uhGF3CI5W9RHSeqUIBPWFNInt5UgGOeU15r-GTdL5zl8_Vefw/&#39;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_UjadZlSmtKYiCTb3pgPK3G9utkR9lM28CIEtfI_kL2ae8nqtp01s59ML8RSIDesw08KMPuU1OgosoOLUVh1cn3Npz0cLCbiAs4vZaiuhyY1gZ6j6Y-gsHgmFZ39QLFUzA6oaOO_G4Bs/s1600/B2T_Small.jpg" onmouseout="this.src=&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDhyphenhyphenLsXQ81r-D99kT-dMyI8_iItETfYxLoM0_xe8MSPqbyoX46CUZ5xS7Ji9Rbs81ei2TbW_pnKB89p5g6G3b1JewmLYX1fgk9qIkIs8fWGTEJI-wIOUyRwHrSFGmBoI8fI96N6DcTrRQ/&#39;" /></a><!--BACK2TOP-IMAGE-STOPS--> 
<!--Back to top End bloggertricksandtoolz.com-->

Note: Change Back to Top Button name as you like

4.Now You are done.

Cheers

How To Add “Save Page as PDF” button to Blogger blog


Hey! here is the other important gadget for blogs. many blog reader download your useful post to his/her blog. so this is very hard work. but this gadget help you download posts using pdf file type. this gadget us provided us a site. site name is web2pdf.com this tool is very useful for blog readers. steps are below. i hope you really like this site and post. so add your comments here and share this post with your friends.we will meet again in next post,thank you!












1.First Sign up with Web2PDF

2.Now Configure your "Save Page as PDF" button and click "Generate the JavaScript" button.

3.Then a Javascript code will be generated. Copy This code.

Now follow these simple steps :

1.Log in to your dashboard--> Design -> Edit HTML

2. Click on "Expand Widget Templates"

3. Scroll down to where you see this: <data:post.body/> tag:


4. Immediately after above line, paste the code which you have generated at the Web2Pdf Online website. It's look like below code:


<!-- START: PDF Online Script -->
<script type="text/javascript">
var authorId = "XXXXXXXX-XXXX-XXXX-XXX-XXXXXXX";
var pageOrientation = "0";
var topMargin = "0.5";
var bottomMargin = "0.5";
var leftMargin = "0.5";
var rightMargin = "0.5";
</script>
<script type="text/javascript" src="http://web2.pdfonline.com/pdfonline/pdfonline.js">
</script>
<!-- END: PDF Online Script -->



5. Click on "Save Templates" and Refresh your site.

How To Add Related Post Widget to Blogger-For Original Templates


Hey! here is cool gadget for your blog. more releted post widget gadgets dose not work on blogger classic templates. so here is the right way to add related post widget for classic templates. this is cool tricks, i hope you really like this gadget, please add your comments and share this post with yor friends, thanks for visitng my blog. nice day!

1.Log in to your dashboard--> Design- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see this:












<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

4.Copy below code and paste it immediately after the line <data:post.body/>







<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<h3>Related Posts :</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;


function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

5.Click on "Save Templates" and refresh your site.

How To Create "Scroll to Top" Button to Blogger


How To Create "Scroll to Top" Button to Blogger


1.Log in to your dashboard--> Design- -> Edit HTML

2.Scroll down to where you see this:

]]></b:skin>


3.Now add below CSS code before ]]></b:skin> tag

/* to top */
#toTop { width:100px;background:#F4FFBF;border:1px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }

4.Now add below code  before  </body>  tag:


<a href="#" id="toTop">^ Scroll to Top</a>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
/*-----------------------
* jQuery Plugin: Scroll to Top
* by Craig Wilson, Ph.Creative (http://www.ph-creative.com)
* Bring to you by Zen from http://zenplate.blogspot.com
* Copyright (c) 2009 Ph.Creative Ltd.
* Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling.
* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx
* Do not delete these infomation
* Version: 1.0, 12/03/2009
-----------------------*/

$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});

$(function() {
$("#toTop").scrollToTop();
});
</script>

5.Now save your template and you are done.Look at the picture below.




How To Add Three Columns To Your Blogger Footer Section


Hey! Friends`are you know how to add 3 coulmns to your blogger footer section..many websites and blogs has three column footer.  footer section will provide more valuable space for blog widgets, and also contribute a modern "Web 2.0" appeal for your blog design. there are only 6 steps to do this..this footer hack is specially for blogs that have different  widths and styles.ok..try this very easy tutorial.. i hope you like this blogger hack..thankyou..

1.Log in to your Dashboard--> Desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this






<div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>

4.Replace the line <b:section class='footer' id='footer'/> of above code with below code

<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>


5.Now find the </b:skin> tag in your template

6.Immediately before above line, add the below lines of code

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}


7.Now Save Templates,Your Are done

How To Change Blogger Background



How To Change Blogger Background



1.Login to your blogger dashboard--> desing- -> Edit HTML

2.Scroll down to where you see body{or} section.

body{ 
background:#141414; margin:0; 
color:#000000; 
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif; 
font-size: small; text-align:
center;}

Note: To change background colour background:#141414 and do want more colour check them outhere

Add Background Image: background: url(LINK);

Repeat the image horizontally (left to right):
repeat-x

Repeat the image vertically (top to bottom):
repeat-y

No image repeat:
no-repeat

Position image to the left or right:
left (for left side)
right (for right side)

Position image to center of screen:
center

Fix image on background (to prevent image from moving when scrolling):
fixed

Now your complete background code look at the example below:









background: #141414 url(http://bloggertricksandtoolz/image.jpg) repeat-x fixed;

I hope you'll understand it..

How To Add Top Commentators Widget for Blogger


Hi! dear visitors here is cool gadget! this post similer to how to add top blog authors widget. so this post explain you how to add top commenters widget to your blog sidebar. i think you really like this gadget! you can organize a sport on your blog using this gadget! so you like add this top commentators eidget for your blogge, please follow the simple steps below to do it and share this post with your friends using social bookmarking! Thank you.

1.Log in to your dashboard--> Design- ->Page Elements

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the code given below and click save.












<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol>');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
if(obj.value.items[i].link == "")
var item ="<li>" + obj.value.items[i].title + "</li>";
else
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=2f414149ab66e0892a6a179016f93019&url=http%3A%2F%2Fyourblog.blogspot.com&num=10&filter=" type="text/javascript"></script>



Note : Remember to replace yourblog with your blog name.Do not include http://

You are done.

Picture From: http://www.online-money-maker.org/backlink-heaven-with-top-commentators-plug-in.html

How To Add Icons on Every Blogger Widget of Blogger


Hey guys! here is cool trick for your blog. it's very cool. you see my gadget names. you see i'm add a pic to gadget name..so this post gonna show you how to add icons to blogger widget name. this is cool trick, you can abstract your visitors free. please share this post with your friend..thank you.

now guys follow the simple steps below to do it:

1.Log in to your dashboard--> Design- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:










.main .Blog {
border-bottom-width: 0;
}

4.After the above code , copy and paste the code below



sidebar .widget h2 {
background: yellow url('URL OF YOUR IMAGE') no-repeat left top;
margin-top:5px;
text-indent: 20px;
padding:7px;
}





5.Click on "Save Templates" and you are done.

Note : You must replace URL OF YOUR IMAGE with your image(Icon) URL.

You can change background colour and other values of above codes if you like.