How To Add Cool Facebook Fan Page JavaScript For Blogger

Facebook is a most popular social network in world. Facebook has come up with  a new set of Social plugins...The Facebook Fan Page Box is One of them. so today i'm gonna tell you how to add new pretty cool fanpage java script to your blog.It's very easy. and very cool look. And Facebook Fanpage can abstract your visitors to your facebook fan page. If you are already having the Defualt facebook fan page box on your blog, and wish to upgrade to the this cool design of the facebook fan page box! I think all you guys will love this gadget! read below steps to add this gadget..Thank you.

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

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

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

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script> 
<script type="text/javascript">FB.init("32eb3732082b27e7c314feb421a56208");</script> 
<fb:fan profile_id="Your Fan Page ID" connections="10" width="300" height="270" css="?"></fb:fan>

Note: Replace Your Fan Page ID With Your  Facebook Fan Page ID

4. Now Click On Save 'JavaScript' You are done.

How To Protect Your Blog Page Using Password

How To Protect Your Blog Page Using Password



1. Login to your blogger Account >> Dashboard >> Edit Post >> Edit Pages

2. Now add the one of code given below to your page

<script language="JavaScript">
var password;
var pass1="PASSWORD-HERE";
password=prompt('Enter your password in order to view this page!',' ');
if (password==pass1) alert('Correct password, OK to enter!');
else {
  window.location="SITE-LINK";
}
</script>

Note: Replace PASSWORD-HERE with your password and SITE-LINK with your page

SITE-LINK : 2011/04/how-to-protect-your-blog-or-page-using.html

3.Now Save your "Page" and You are done.

How To Add JavaScript Confirm Box to Your Blogger

How To Add JavaScript Confirm Box to Your Blogger

1.Login to your Bogger Dashboard and go to Design >> & Page Elements.

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

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

<script type="text/javascript">function show_confirm(){confirm("YOUR MESSAGE HERE!")}</script><input type="button"onclick="show_confirm()"value="Show confirm box"/>

Note: Replace YOUR MESSAGE HERE! with your alert message.

Result:



4.Now Save your "Html Javascript" and you are done.

How To Add Google Friend Connect javascript Gadget to Blogger

How To Add Google Friend Connect javascript / Gadget to Blogger



1.Login to your Bogger Dashboard and go to Design >> & Page Elements.

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

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

<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-Your Blog Id Here" style="width:265px;border:1px solid #cccccc;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript"> 
var skin = {};
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#222';
skin['ENDCAP_TEXT_COLOR'] = '#fff';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#eeeeee';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
skin['NUMBER_ROWS'] = '3';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
 { id: 'div-Your Blog Id Here',
   site: '14369203123335141502' },
  skin);
</script>

Note: Replace Your Blog Id Here with your blogger ID

4. Now Click on Save "Html Java Script" and You are done.

How To Add Blue Html Color Scroll Box to Your Blogger

How To Add Blue Html Color Scroll Box to Your Blogger

1.Login to your Bogger Dashboard and go to Design >> & Page Elements.

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

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

<div style="height:90px;width:600px;overflow:scroll;background-color:#0080FF;">Hello This is Html Color Scroll Box </div>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"></p>

Note: Replace Hello This is Html Color Scroll Box with your text or anything.

4. Now Click on Save "Html Java Script" and You are done.

How To Add Blogger Cool Popular Posts Widget With Zoom Effect / Using CSS V3

How To Add Blogger Cool Popular Posts Widget With Zoom Effect / Using CSS V3






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

2.Scroll down to where you see ]]></b:skin> tag .

3.Copy below code and paste it just After ]]></b:skin> tag

<style type='text/css'>
.PopularPosts .item-title{display:none}
.PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;margin: 5px !important;padding: 0 !important;}
.PopularPosts ul li img {padding:0;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;height: 80px;width: 80px;}
.PopularPosts ul li img:hover {border:2px solid #BBB;-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) ;}
</style>

Note: Please You first Add Popular Posts widget to Your Blogger Sidebar. (Blogger widgets list..)

4 Now Click on Save Template,

5.Now Set Settings Your Popular Posts Widget , Like this,


6. Now Save Your Popular Posts Widget and You are Done.

How To Add New Facbook Share Count Button to Your Blogger V2

How To Add New Facbook Share Count Button to Your Blogger V2



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-header-line-1'/> tag

4.Copy below code and paste it just before the <div class='post-header-line-1'/> tag

<b:if cond='data:blog.pageType == &quot;item&quot;'><div style="float:left;margin:10px 10px 10px 0;"><script type="text/javascript">var fbShare = {url: '<data:post.url/>', size: 'small' }</script><script src="http://widgets.fbshare.me/files/fbshare.js" type="text/javascript"></script></div></b:if>

5.Now Save Your Template and you are done.

How To Add Edward Cullen Mouse Cursor to Your Blogger / Twilight New Moon

How To Add Edward Cullen Mouse Cursor to Your Blogger / Twilight New Moon




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

2.Click on "Expand Widget Templates"

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

4.Copy below code and paste it just before the </head> tag

<style type="text/css">body, a, a:hover {cursor: url(http://bloggertrickandtoolz.googlecode.com/files/EdwardCullen.cur), progress;}</style>

5.Save Your Template and you are done.

How To Add Welcome Message to Your Blogger

How To Add Welcome Message to Your Blogger



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

2.Scroll down to where you see ]]></b:skin> tag .

3.Copy below code and paste it just After ]]></b:skin> tag

.element { position:fixed; bottom:1%; right:1%; padding:10px; font-family:Arial;
 background:#98DBF7; border:1px solid #2FBAF6; }

4.Click on Save Template,

5.Now click on 'Add a Gadget' on the sidebar.

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

<div class="element">Your Message Here</div>

Note: Replace Your Message here with your own message

7. Now Click on Save "Html Java Script" and you are done

How To Add Official Linkedin Share Button to Blogger

How To Add Official Linkedin Share Button to Blogger



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-header-line-1'/> tag

4.Copy below code and paste it just before the <div class='post-header-line-1'/> tag

Button 1

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right;margin-left:10px;'>
<script src='http://platform.linkedin.com/in.js' type='text/javascript'/><script data-counter='top' expr:data-url='data:post.url' type='in/share'/>
</div>
</b:if>

Button 2

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right;margin-left:10px;'>
<script src='http://platform.linkedin.com/in.js' type='text/javascript'/><script data-counter='right' expr:data-url='data:post.url' type='in/share'/>
</div>
</b:if>

Button 3

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right;margin-left:10px;'>
<script src='http://platform.linkedin.com/in.js' type='text/javascript'/><script expr:data-url='data:post.url' type='in/share'/>
</div>
</b:if>

5.Now Save Your Template and you are done..

URL Shortner Gadget

Download Script

Weather Gadget

Download Script

Welcome and Exit Alert

Download Script

Sparks

  Downloads Live Demo

Features:

Instructions:	Template Settings / How to use this template
Template author:	PBTemplates
Designer:	FThemes
Description:	Sparks is a free blogger template adapted from WordPress with 3 columns, sidebar on the right and left, footer columns, slideshow, posts thumbnails, tabs and drop down menu. Excellent layout for blogs about electronics or entertainment.

PhoneGadget

 Download Live Demo

Features:

Instructions:	Template Settings / How to use this template
Template author:	PBTemplates
Designer:	New WP Themes
Description:	PhoneGadget is a free blogger template adapted from WordPress with 3 columns, right sidebar, magazine-styled, space for ads, footer columns, slideshow, posts thumbnails and drop down menu. Excellent layout for blogs about electronics.