Making Different

Add to blogger button from code Generator V2

2012-02-25T06:35:00.000-08:00

n my older post i had given you just add to blogger button but in this tutorial i give you add to blogger button with widget title option for blog users , there user can self add the title of widget for adding widget,
you can see the demo below....

Demo

How to add "Add to blogger" Button With Widget Title Option To Blogger Post

Fill the required data below
Click On "Generate" Button
Copy n paste Code Into Your Blogger Post

Drop your comments and questions below.... :)

Add Awesome Recent Comments Widget with Avatar To Blogger

2012-02-25T02:15:00.001-08:00

had given you simple Recent Comments widget in my older post and now i give you a awesome Recent comments widget with avatar , actually this widget created by Hrish @ way2blogging.org . and i reshared on Making Different , In this Widget included the Comment Excerpts and Avatar Image. you can choose default Anonymous Avatar Image also.

How to install this widget to blogger

Customize the Settings as you need
Click on "Generate" button
And finally click on "Add to blogger" button

I hope you have liked this widget. Do give us your feedback on this article. Also if you face any problem or confused about any step feel free to ask through your comments.

Add & Customize iFrame Toolbar for Blogger/blog - iframe Toolbar Generator

2012-02-24T04:24:00.042-08:00

ately i see more and more web sites using the iframe toolbar technique. This technique allows a web site to present content from a different site using an iframe element <iframe>, while still having a small part of the browser displaying a small toolbar at the top. This toolbar allows the site to interact with its users while they consume external content.
You can see and play with the toolbar in this demo page.

Now lets see how to add and how its really works.

iFrame Toolbar – Intro

The toolbar page will get the url for the iframe as a parameter (www.mytoolbar.com/?iframe=URL)
Will allow the user to tweet about the url
Provide a back link
Will allow the user to close the toolbar and to load the iframe as the main page
will allow the user to expand the toolbar to get more functionality and content

iFrame Toolbar – Video Tutorial

How To Use iFrame Toolbar For Blogger

Just fill the required data and customize iframe toolbar colors and designs below.
See the preview by clicking on "preview" button ( First click on "Generate" button to enable "preview" button)
Click on "Generate" button to get code for iframe toolbar

Copy full code and paste into notepad
Save the file with the extension myiframetoolbar.html as shown below,

Now host this html file with your server or use dropbox.com for free hosting ! ( for more info )
Dropbox.com is easy for the hosting any files like 1,2,3
Just copy n paste your saved HTML file into dropbox publish folder in your pc

Now right click on HTML file and copy publish link

Now whenever you want to add any sites link or demo page links on your blog you need to add just your hosted iframe toolbar URL with your link..

Ex :- <a href="http://dl.dropbox.com/u/xxxxxx/myiframetoolbar.html?iframe=Any site Or Demo Page URL">View Demo</a>

Note :- If your any site or demo page link start with https:// it will not be show , you need to Just replace the https with http

That’s it, that’s all there is to it. All the rest of the code is to handle the UI functionality that i decided to implement for this demo toolbar. just want to clear some points:

Due to security reasons the browser prevent access from reading an iframe source url, so if the user has clicked a few links in the ifrmae, there is no way to find out which page is being displayed in the iframe.

I used the jquery animation method in order to expand and collapse the toolbar.

You can see and play with the toolbar in this demo page. if you want to change the iframe url, just change the iframe parameter to whatever you want,

like so: -

https://gj37765.googlecode.com/svn/trunk/html/mddemo/MakingDifferent-Browser.html?iframe=YOUR URL

I hope you have liked this tutorial. Do give us your feedback on this article. Also if you face any problem or confused about any step feel free to ask through your comments.

Host your HTML files for free - PasteHTML.com

2012-02-23T08:17:00.000-08:00

se PasteHTML to put a HTML file online, quickly and with no registration. Use it as a sandbox for playing with CSS and Javascript. Use our bookmarklet to create a snapshot of any web page and store it online.

Link: http://pastehtml.com/

PasteHTML interface is very simple, paste into the HTML directly, according toPublish Page to publish pages on it. Facebook accounts can log in the upper right corner, you should be able to manage content posted, of course, can notlogin to use, while the bottom provides several page types, including HTML,which was seen in the editor, text and so on.

Pre-release will allow users to confirm the time, of course, is the HTML pageto see the effect of running out of Hello! If not, then click Publish Page link will be made.

Drop Your Comments And Questions Below :)

Add Facebook Type - jQuery Popup for Facebook Like Box to blogger/blog

2012-02-21T06:24:00.080-08:00

oday i am so happy to share this awesome widget with all blogger users and i had also given you lot of facebook jQuery and popup widgets in my older posts... but this facebook type jQuery popup is my one of favorite widget and i hope you also liked it... .. so what for waiting .. just follow simple 3 steps below....

View Demo

Related jQuery Pop-Up Widgets

One time pop-up for Subcribs box
jQuery pop-up for facebook like boxV1
jQuery pop-up for facebook like box with background imageV2
jQuery pop-up for facebook like box with background imageV3
jQuery Exit Pop-up for facebook like box
Facebook Type - jQuery Popup for Facebook Like Box

How To Add Facebook Type- jQuery Popup To Blogger

Step :- 1 Adding Jquery JavaScript Plugin(Ignore this step if your blog have already a Jquery Plugin)

Login to blogger--->Design--->Edit HTML
Click on Expand Widget template check box
search for </head> ( Using CTRL + F )
Copy n paste Below code just above it

Step :- 2 Adding CSS code
Next search for ]]></b:skin> ( Using CTRL + F )
copy n paste below CSS code just above it

#makingdifferentpopup{
position:absolute;
top:100px;
z-index:999;
display:none;
padding:0px;
right:600px;
border:10px solid #6F6F6F;
-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 h1{
background:#6d84b4 url(http://4.bp.blogspot.com/-rNUTIpDQ21s/T0NqE_vv6GI/AAAAAAAACps/GSoWE2n9Oy8/s1600/%255Bwww.gj37765.blogspot.com%255Dh1.png) 98% no-repeat;
border:1px solid #3b5998;
color:#FFFFFF !important;
font-size:20px !important;
font-weight:normal !important;
padding:5px !important;
margin:0 !important;
font-family:'"lucida grande",tahoma,verdana,arial,sans-serif;
overflow:hidden;
}
#htmlground{
font-size:12px !important;
font-weight:normal !important;
height:260px;
padding:1px;
background:#fff !important;
border-bottom:2px solid #ddd;
overflow:hidden;
}
#mdfooter{
background:#F2F2F2;
height:56px;
padding:10px 10px 10px 10px;
overflow:hidden;
}
#makingdifferentpopup a{
background-color:#eee;
border:1px solid #ccc;
color:#111;
font-weight:normal;
padding:5px 8px 5px 8px;
text-decoration:none;
display:inline-block;
font-family:'"lucida grande",tahoma,verdana,arial,sans-serif;
outline:none;
position:relative;
font-size:18px;
margin:1px;
}
#makingdifferentpopup a:active{
top:1px;
left:1px;
}

Step :- 3 Adding Widget Code
it's Simple
Replace my facebook page URL below with the URL for your page.

Note:- Facebook URL Must starting with "http://" and it contains no space or illegal Characters

I hope you have liked this widget. Do give us your feedback on this article. Also if you face any problem or confused about any step feel free to ask through your comments.

A Perfect Share Box Widget for Blogger/blog

2012-02-18T07:26:00.000-08:00

n this tutorial, I am going to show how to add A Perfect Share Box Widget for your blogger blog. As you can see this widget contains links to your Facebook Fan page, Google+ page and twitter follow button, RSS and most importantly an attractive subscription form that will further increase the number of your Email subscribers. I have configure all this button for Blogger blogs, so you can add this share box quickly to your blog.

How To Add This Widget To Blogger

Just Fill the required data below ,
click on "Generate" button
Finally click on "Add to blogger" button

Drop Your Comments & Questions Below.... :)

Add jQuery Popup Slider For Facebook Like Box

2012-02-18T02:50:00.000-08:00

had given you lot of pop-up and jquery widgets for facebook like box in my older posts, and now i am back with new and stylish jQuery popup slider for facebook like box , this slider will open when load the page , and hide this slider when user click on close button , you can see the demo in above animated gif ..
if you liked it . .and you want to add this widget to your blog... just follow 2 simple steps below... :)

How To Install This Widget Into Blogger

Step:- 1 *Ignore this step if your blog have already jQuery plugin

Login to blogger --->Design--->Edit HTML
Click On Expand Widget Template Check box
CTRL + F to find </head>
Copy n paste Below Code Just Above </head>

Step:-2Adding Widget Code
it's Simple
Replace my facebook page URL below with the URL for your page.

Note:- Facebook URL Must starting with "http://" and it contains no space or illegal Characters

Drop your comments and questions below .. :)

Social Sharing Icon With CSS3 Animated Tooltips Widget For Blogger

2012-02-15T06:27:00.000-08:00

n today’s tip i'll show you, how to add awesome social sharing icon with CSS3 animated tooptips to blogger.
actually this widget was created by coderops and reshared on making different, i made it too easy for adding in to blogger,
first choose any one style of css tooltips , and "fill the required data" , click on "generate" button, and finally click on "Add To Blogger" button, and you are done !

Move your cursor on icon below to see the demo

If you enjoyed this post feel free to share with your friends and please give your feedback about this widget in below comments... :)

New Version Of Animated Flying Twitter Bird Widget For Blogger

2012-02-14T05:27:00.000-08:00

ew version of animated flying twitter bird widget for blogger, i had given you flying twitter bird in my older post, and now i am back with cool 7 type of birds, you can choose any one bird and add into your blogger .....

How To Install This Widget To Blogger

Replace my twitter username with yours
Replace Tweet this Text With Your Text
Choose a type of bird
Click On "Generate" button
Finally Click On Add to Blogger button

Now you have done!!!
Drop Your Comments And Questions Below.. :)

How to upload and embed Flash SWF file into Blogger

2012-02-10T06:01:00.000-08:00

his tutorial will show you how to upload and post Flash SWF file to Blogger.

Step 1: Make Flash SWF file.

Firstly, please make your Flash file (.swf) with Adobe Flash Studio or Flash Banner Maker software

Step 2: Upload Flash SWF file to Internet.

Upload the Flash SWF file to any web hosting, and get the URL address of the Flash SWF file. If you don't have a web host, you can upload your flash file to Google Sites for FREE.( More Info..)
Now you have uploaded the Flash SWF file to Google Site, you should get the URL address of the SWF file and note it. In Internet Explorer, you can simply click the file, open it with IE, and copy the link address in the address bar. If you are using Firefox, you may right click on the file, in the popup menu, click "Copy Link Location", and get the link address.
The link address should look similar to: https://sites.google.com/site/f/wpme.swf

Step 3: Embed Flash banner to your Blogger post.

Give your swf file URL in below input area
set Height And Width
Click on "Generate code" Button

Drop Your Comments And Questions Below... :)

jQuery Exit Pop-up for facebook like box

2012-02-07T00:00:00.001-08:00

xit pop-up for facebook like box , It will Shows up when the user is going to click close [X] button
it's best way to get more liker's on your facebook fan page ,first see the demo and if you like and you want to add this Exit pop up to your blog ..just follow given steps..

View Demo

Related jQuery Pop-Up Widgets

One time pop-up for Subcribs box
jQuery pop-up for facebook like boxV1
jQuery pop-up for facebook like box with background imageV2
jQuery pop-up for facebook like box with background imageV3
jQuery Exit Pop-up for facebook like box

How to add Exit Pop-up to blogger

Give your facebook fan page URL In Below Input area
Click On "Add To Blogger" Button .

Copyright © 2012 All Rights Reserved by Nitin maheta @ Making Different

You have Done !!!
Drop Your Comments And Questions Below... :)

4 in 1 Social Sharing Slide Pop Out Widget For Blogger V2

2012-02-04T08:29:00.000-08:00

had given you 4 in 1 Social share Slide Pop out Widget In My Older Post , and now i am back with new version of it, and i hope you like it, actually in older version i had given you Twitter Tweet box in Twitter slide and in this new version i give you Twitter fan follow me box in twitter slide , and i also created a generator for this widget because you can easy to add this widget to your blog ,
If you use older version of this widget than first remove code form </head> section in your template and also you need to remove Older version HTML code from widget , now you can add this new version widget to your blog .

How to install this widget to blogger

Login to Blogger--->Design--->Edit HTML
Click on Expand widget template check box
CTRL + F to find </head> tag.
Copy n paste Below Code just above/before </head>

Note :- If you have already Ajax 1.4.2 jQuery plugin in your template you don't need to add above red colored line .

Adding HTML Code

It's verry simple

fill the required data in generator below
Click on "Generate" Button
Finally click on Add To Blogger Button.

Note :- Facebook URL Must starting with "http://" and it contains no space or illegal Characters

Now you have done !!!
Drop your comments and Question below, and also share this widget with your friends...

Add Table of contents widget to blogger V2

2012-01-29T08:09:00.000-08:00

had shown you how to add table of contents widget to blogger and and now i am back with new version of table of contents widget Here is another great widget for Blogger powered blogs. Table of contents widget. This widget automatically generates a sitemap of your blog. With such sitemap, it is easier for your visitors to look at complete structure of your blog. This widget displays your blog posts according to their categories and "New!!" text is shown for the 10 latest posts.

Although this functions like a sitemap, it cannot be submitted to Google Webmasters Tools. Because, Google webmaster tools just accepts sitemap in XML format. You can get detailed instruction on submitting sitemap to Google here.

So, all you have to do now is just copy the code below and paste it into Blogger Static Pages or any post pages. Then, publish it.

Demo:

please wait while loading toc

Subscription Buttons Widget for Blogger / Blogspot

2012-01-29T04:07:00.000-08:00

ou all know the importance of RSS feeds. There are different online RSS readers available.Your blog readers may wish to read your blog feeds in their favorite reader.This widget allows you to add Buttons of all popular online feed readers to your blog.It also adds an email subscription box(if you have got an feedburner email delivery for your blog) where users can provide their email to get your blog feeds by mail..

Note: If you are reading this in a Feed Reader the widget installer wont be displayed properly.So visit the actual article on the site to install the widget.

Add Recent Comments Widget To Blogger/Blog

2012-01-29T02:20:00.000-08:00

he Recent Comments Widget for Blogger displays recent blog comments on your sidebar.You can use this widget to display the recent comments of any blogger blog.You can customize the number of comments to display in the widget, whether or not to display the post name, the comment-date, and the size of the comment(in characters). This widget might encourage your readers in leaving comments on your blog :)

How to Install the Recent Comments Widget For Blogger

Before installing the Recent Comments Widget, take a look at the following Settings in the Widget Installer.

This should be the URL of a blogger Blog. If you are installing the Widget on the same blog then you can leave this field blank . This field is useful for those who have multiple blogs..

Number of comments – The number of comments to be displayed in the Widget

Show comment date – If you want to show the comment date, then tick this option

Show post title – If you want to show the title of the post on which comment has been made, then tick this option

Summary Size : If the comment is more than this size in length, then the rest of the comment will be chopped off

Credits :

This is a slightly modified version of the Recent comment widget by Beautiful Beta

If you have any questions or suggestions regarding this widget, feel free to comment on.

Add Fixed Sticy bar at top of the page with Subscirbe box to blogger/blog

2012-01-29T01:18:00.000-08:00

he previous version of sticky were well entertained and now i am back with sticky bar with Subscribe box. If you have already added the sticky bar then you just need to make few changes to your old code. Only step#5 is different else all styling and HTML is the same which we used in our previous tutorials else you can try these new codes from start and delete the previous one. MD's Sticky bar is just a custom version of hello bar but it has no Ads and can easily be styled and customized to blend your blog template. Since it is always better to have your own custom widgets therefore we designed this easy bar which sticks to the top of your blog or website to grab the attention of all visitors...
Lets get to work then!

Add Stickybar to Blogger

If you are new here then kindly read my previous versions first so that you may have a clear idea on how this widget works and how can you customize it. Kindly have a look at them:

Follow these easy steps:

1. Login to blogger and go to --->Design--->Edit HTML
2. Click on Expand Widget Template Check box
3. CTRL + F to find ]]></b:skin>
4. Copy n paste below code just above/before ]]></b:skin>

#md-stickybar{
background:#000000 url('http://3.bp.blogspot.com/-zQeUG7PU9Uw/TmkiptyZ1eI/AAAAAAAAE98/At4tRBC9HQc/s400/stickybar.png') repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:0px 0;
border-bottom: 1px solid #888888;
-moz-box-shadow: #666666 0px 1px 3px;
-webkit-box-shadow: #666666 0px 1px 3px;
box-shadow: #666666 0px 1px 3px;
z-index: 999;
height: 28px; position:fixed;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
}
#md-stickybar a{
text-decoration:none;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
line-height: 24px;
}
#md-stickybar a:hover{
text-decoration:underline;
}
#md-stickybar p {margin:0; list-style:none;}
#md-stickybar img {vertical-align: middle;
margin-right: 6px;
}

#mdenteryouremail{
background: #fff !important;
border: 1px solid #d2d2d2;
padding: 0px 8px 0px 8px;
color: #a19999; font-size: 12px;
height: 25px; width: 165px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin:0px;
}

#mdsubmitbutton{
background:#F66303;
border: 1px solid #F66303;
text-shadow: 1px 1px 1px #333;
box-shadow: 3px 3px 3px #666;
font:bold 12px Arial, sans-serif;
color: #fff;
height: 25px;
padding: 0 12px 0 12px;
margin: 0 0 0 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor:pointer;}

5. Next search for <body> and just below it paste the following HTML code

<div id='md-stickybar'>
<div style='float:left; padding-left:10px;'><b>Get all the latest news and updates direct to your inbox ►►►►►►►►►►</b></div>
<div style='float:right; padding-right:0px;'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=MakingDiffrent', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><input class='mdenteryouremail' gtbfieldid='10' name='email' onblur='if (this.value == '') {this.value = 'Enter your email here...';}' onfocus='if (this.value == 'Enter your email here...') {this.value = '';}' type='text' value='Enter your email here...'/><input name='uri' type='hidden' value='MakingDiffrent'/><input class='mdsubmitbutton' type='submit' value='Submit'/></form></div>
</div>

Edit :

You can write your message, announcement, anything you like instead of that blue text.
Replace "MakingDiffrent" with your feedburner title

6. Save your template and you are all done!

Visit your blogs to see it fixed at top just perfectly. :)

Customize

To change the background color of the bar simply edit #000000 and Change the subcribe box color edit #F66303 in step#4 with a color of your choice. Try our color generator tools.

How to Remove SimpleReach Slides Related Post From Blogger

2012-01-28T05:59:00.000-08:00

had shown you how to add Slides Of Related Posts at the Bottom of Each Page For Blogger , in my older post , Actually this widget provided by SimpleReach.com , after adding this widget if you don't like or if you want to add your custom slide out related post, buttt, you have forgotten to backup your template and you want to remove it, so.. today i am going to show you how to remove it. :)

How To Remove SimpleReach Slides Related Post Widget

Login to blogger--->Design--->Edit HTML
Click on Expand Widget Template check box
Ctrl + F to find ----> "The Slide by Simple Reach"

and also you will see javascriopt code like this:

Finally remove the above javascript code and save your template

that's all..
Drop your comments and questions below.. :)

Add Table Of Contents Widget To Blogger

2012-01-28T00:25:00.000-08:00

his Widget will act as a "Table of Contents". It will list out each of your blog posts in a styled table. When you hover over the post title, you will see a summary of the post. The Widget also displays the Post dates and labels. It will allow you to sort the posts by title or by post date. I employs a bubble sort algorithm to sort the posts accordingly.

Credits :

This Widget was created by Hans of Beautiful Beta . I have tweaked it to fix the 500 post limit
How to Add Table Of Contents to Blogger

Step 1 - Make a new Page in Blogger with a suitable title

In the page editor, switch to HTML mode, and paste the following code into the Post Editor

<div id="bp_toc"><img src="http://1.bp.blogspot.com/-yHJ5ANNVXXI/TyOs5nPyNRI/AAAAAAAACg4/fu0ylymYDIw/s1600/ajax-loading.gif" />Loading TOC. Please wait....</div>
<script src="https://gj37765.googlecode.com/svn/trunk/html/mddemo/[www.gj37765.blogspot.com]Table%20Of%20Contents%20Widget.js" type="text/javascript">
</script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=500&callback=loadtoc" type="text/javascript">
</script></div>

Publish the Page and open it in your web browser.You will be able to see the TOC, but it would be messed up

Step 2 - So it is time to Style the TOC using some CSS code

In Blogger --->Design--->Edit HTML
Ctrl + F to find ]]></b:skin>
Copy n paste Below CSS code Just Above/Before ]]></b:skin>

#bp_toc {
border: 0px solid #000000;
background: #ffffff;
padding: 5px;
width:500px;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #ffd595;
color: #000000;
padding-left: 5px;
width:250px;
}
.toc-header-col2 {
width:75px;
}
.toc-header-col3 {
width:125px;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
font-size:80%;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:80%;
text-decoration:underline;
}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
font-size:70%;
}

Save your template and check your TOC page once again.:)

Live Demo :

Loading TOC. Please wait....

Add Recommended Post Slide out at The Bottam of Each Page for blogger

2012-01-27T08:24:00.000-08:00

eep the visitors glued to your site for long” This is what every blogger out there wants to do. The Recommended Post slide Out Widget does just that. It’s kind of an invitation to the reader to read a new post once he has read one of your blog entries. You might have seen this kind of a widget on many popular websites like New York Times, Mashable, Times of India etc.

I too loved the idea and found out that some one else had already made a jQuery snippet which does just the same. You can read about this awesome code on Mary Lou’s blog at http://tympanus.net/codrops/2010/04/13/end-of-page-slide-out-box/

I have made some modifications to the snippet so that it gets loaded asynchronously without affecting the page load. The Slide out will show random posts from your Blog. The random posts are fetched from your Blog Feed using Ajax.

How to add Recommended Post Slide Out To Blogger

Login to Blogger --->Design--->Edit HTML
Click On Expand Widget Template Check Box
CTRL + F to find <data:post.body/>
Copy n paste below code after <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div style='display:none' id='bpslidein_place_holder'></div>
</b:if>

Next Click On Below "Add to Blogger" Button

Customizing the Look and Feel of the Slide out.

You can obviously style the Recommended Slide out. But before you do that, you have to add this variable definition to your template

<script>var bpslidein_custom_css=true;</script>

This should be added somewhere above the Slide Out Widget. If this variable is not set, a default StyleSheet will be used to spice up the Recommended Slide out.

Once this variable is set to true, you can add your own CSS definitions. You can add your CSS at Template Designer > Advanced > Add CSS

This is the default set of Style definitions applied to the Widget. You can modify them and use it.

#bpslidein{z-index:5;width:400px;height:100px;padding:10px;background-color:#fff;border-top:3px solid #1616F5;position:fixed;right:-430px;bottom:0;-moz-box-shadow:-2px 0 5px #aaa;-webkit-box-shadow:-2px 0 5px #aaa;box-shadow:-2px 0 5px #aaa;font-family:Arial, Helvetica, sans-serif;}
#bpslidein p{font-size:11px;text-transform:uppercase;font-family:Arial,Helvetica,sans-serif;letter-spacing:1px;color:#555;}
#bpslidein_title{color:#555;font-weight:700;font-size:16px;margin:10px 20px 10px 0;}
#bpslidein a,#bpslidein a:hover,#bpslidein_title{text-decoration:none;color:#1616F5;}
#bpslidein .close,#bpslidein .expand,#bpslidein .help{border:2px solid #EEE;cursor:pointer;color:#9A9AA1;width:13px;height:15px;padding:2px 0 0 5px;position:absolute;right:10px;font-size:17px;font-weight:700;font-family:Arial, Helvetica, sans-serif;font-size:12px;}
#bpslidein .help{right:35px;}
#bpslidein_title,#bpslidein_image{float:left;width:80px;}
#bpslidein_title{width:290px;}

Other Stuff that you can edit

You can edit the Title of the Widget and the Loading text by editing the Widget Content.

that's all :)
Drop Your Comments And Questions Below.. :)

"Add to Blogger" button form code Generator

2012-01-27T06:27:00.000-08:00

n This Article I give you the code for "Add to Blogger" Button. i am sure You have noticed in other sites or blog this type of button for adding quickly widget to blogger , you can also get code for "Add to Blogger" Buton from here But it may be too difficult to understand and implement it. So, for this purpose I've published a form generator which makes creating widgets more easy...

Add Animated Fancy Navigation Menu with Jquery to Blogger / Blogspot

2012-01-27T04:15:00.000-08:00

nimated Fancy Navigation Menu with Jquery for Blogger. Every One has trying to add a beautiful menu with animation effect by jquery to their Blogger Blogs. But it has very difficult to add a menu to blogger blogs. here is Making Different has make it as simple and is like 1, 2, 3…

This menu is designed by Sohtanaka

Features

Simple and Easy to Installation
Nice Animation Effect and awesome look
Easy to add Links and use.

Watch Live Demo

How to Install?

Go to Blogger Dashboard > Design tab.
Click on Add a Gadget any where in your Layout.
Choose LinkList Gadget and Leave Title Field as Blank
Try to Add Some Links and Save Gadget

Edit LinkList Widget Once again, And Copy Widget ID From URL like in Image

Make Sure the ID may Exact to match in the URL even a Block Letters(Capital Letters) Also for Perfect Working of This Widget!

http://www.blogger.com/rearrange?blogID=xxxxxx&action=editWidget&
sectionId=xxxx&widgetType=LinkList&widgetId=LinkList2

Here is LinkList2 is the widget ID in this URL

Generate your Widget Code then Paste it before </head> tag in your template.

Save your template, You are Done!.

Credit :

The widget code and generator script was created by Harish and reshared at Making Different.

Drop Your Comments And Questions Below.. :)

Quick add : floating vertical bar with share buttons to blogger/blog

2012-01-26T23:29:00.000-08:00

In this article I'll show 3 widgets which you can add in a single-click. These widgets are a kinda Share-on-the-go, which enables your visitors to share very ever they go in your blog.

With Counters

Without Counters

Small

Video Tutorial:

Add Blogger Blog to Google Webmasters Tools

2012-01-24T06:38:00.000-08:00

oogle has integrated Webmaster tools for Blogger / Blogspot Blogs since long time but still newbies face problem getting verified and submitting Blogger sitemap to Webmasters tools.

Follow the simple steps to add blogger blog to Webmaster Tools. Adding your site to google webmaster tools increases your blog’s visibility in search engines which means more traffic.

Add and Verify Blogger Blog to Webmasters Tools

Login to Blogger Dashboard.
At the end of the page, under Tools and Resources box – Click on Webmaster Tools.
If asked, enter username and password again to Login.
Your Blogspot blog is now verified and it is added to Google Webmaster tools.

Submit Blogger Blog Sitemap to Webmasters Tools

Sitemap is basically page containing Article URLs of your blog alongwith metadata. It is updated whenever you post an article and used by Search engines to crawl Blog data. Not only Google but also use by other search engines like Yahoo, Bing,etc.

Inside Webmaster tools, click on Submit a Sitemap and add the following code inside the box :

atom.xml?redirect=false&start-index=1&max-results=100

If you have more than 200 posts then replace value 100 by something bigger number like 500.

You have successfully added Blogspot blog sitemap to Google Webmasters Tools.

How to create your own fonts easily with Free Font Builder Software

2012-01-24T05:32:00.000-08:00

was never into design stuffs or maybe I am not that creative to build my own fonts for Logos, etc but it is actually possible to create your own fonts easily. Don’t know whether there are any other methods by which Fonts can be made but I came across Simple Font Editor where you just have to fill blocks with bricks.
Blocks and Bricks sounds confusing, eh? Fontstruct is online Font maker or Fonts builder where you have to fill the space block by block with various shapes of Bricks. Bricks are nothing but various designed shapes which can be used to create one alphabet.

How to start building Font?

Go to http://fontstruct.com/ and sign up for a new account.

Give a unique name to your font and start building it in editor.

Editor is simple and straight. On right side are the blank blocks which have to filled with the various bricks of your choice given in left hand. For your ease, Related tools like Eraser, etc are given at hand.

Menu at the bottom lets you choose various sources/types of font namely, Greek, Latin, Bengali and even Devnagri. So, this tool can even be used to build many Indian regional languages fonts like Hindi, Marathi, Gurmukhi, Bangla, etc.

Go on creating a design for each character, Numbers and related symbols in that accent. When you are finished with designing each font character. You can try Preview and Test it in Live editor. Satisfied with it, then download the font by pressing on Download button from top menu.

Download comes in ZIP format which contains font in TTF format / extension. This font is compatible with all operating systems. Just open the TTF file or right click on it followed by install button to start using it in applications like MS word, Powerpoint and Photoshop.

How to Send Custom Image or Profile Picture as Emoticon in Facebook Chat

2012-01-24T05:06:00.000-08:00

acebook Chat is a rage these days and to appear unique and engaging in conversation is what all we want. Using the default Emoticons available in Facebook Library in chat won’t be enough in such case so, here’s how you can send Photos / Images in FB Chat.
You should be happy now to know that its possible to send Images to make Facebook Chatting more fun without need of any external plugin or web browser extension. Simply, follow the steps and you can use any image as Emoticon in Facebook Chat.

How to send Photos on FB Chat

Choose the picture / image you want to send on chat and upload it on any image hosting site. Dropbox’s Public folder is recommended.

Open a Notepad file and paste the following code:

    < !DOCTYPE html>
    <html>
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>Making Different FB Chat</title>
    <meta name="og:image" content="http://dl.dropbox.com/u/40342393/animated-india-flag.gif"/>
    </meta></head>
    <body>
    </body>
    </html>

In <title> you can put anything but in content, it should be the URL of the image file you placed in Dropbox Public Folder. To get the Image URL, right click on image and in “Dropbox” >> Copy Public Link.

Save this notepad file as *.htm For example: fb-chat.htm and save it in same public folder. This file can be even uploaded to any webserver allowing to host HTML pages.

Go to Facebook Debugger Tool and paste the Public link of the HTML file we uploaded in previous step.

Result will be somewhat like shown below:
And copy the number at the end of URL.

Now you are all set to use the Emoticon in facebook chat. If the number is 10150546427734781, then write [[10150546427734781]] in Chat window and send.

This was all about sending any custom image as emoticon / smiley on Facebook.

How to Send Profile Picture as Emoticon on Facebook Chat

You just need the Profile ID of the person whose profile photo is to be used as Emoticon in Chat. Profile ID is the number in the URL of the account which looks like this.

So, enter this ID inside double brackets and send.

Some profiles these days have Vanity URL like https://www.facebook.com/Nitzzzzzzzzzzz so, instead of ID, use the username inside brackets. For ex: [[Nitzzzzzzzzzzz]]

It should be noted that the image sent will be 16x16px irrespective of the size of image you send.

Drop Your Comments And Questions Below :)