ACTION MOVIES	ADULT MOVIES	COMMEDY MOVIES	DOCUMANTERIES	DUBBED MOVIES	HORROR MOVIES	ROMANTIC MOVIES	2012 MOVIES

Youe Ads Here

Neobux
Site Name	Per Click	Ref Click	Ads No.	Payout

Neobux	$0.02	$0.01	9+	$2
The best PTC ever! I already earned more than $12000 USD and I spend less than $500 to reach this profit! Neobux have many income ways like adprize, ptc ads, offers and jobs. Payments are always instant. Neobux pay by Payza, Paypal and Neteller.

Payments Received: 35

Clixsense
Site Name	Per Click	Ref Click	Ads No.	Payout

Clixsense	$0.02	$0.01	40+	$8
ClixSense has been online and paying since February 2007. Clicxsense have a 6 level downline system. In clixsense members can earn by ptc ads, clixgrid, offers and jobs. Payments are sent 2 times a week, members always receive payments in maximum 5 days.

Payments Received: 17

Trafficmocsoon
Site Name	Per Click	Ref Click	Ads No.	Payout

Beruby	$0.02	$0.02	30+	$02

Payments Received: 4

Saturday 28 January 2012

Add A Stylish Scrolling Sidebar Widget In Blogger

Add A Stylish Scrolling Sidebar Widget In Blogger

Last night, when I was browsing for information about making blogger blogs look more stylish and professional, I found a beautiful widget that will scroll along the page as and when you scroll up or down. What attracted me, is the gliding movement of the widget to display the important links for your blog. You may use this widget to display some of the best posts in your blog or some important links. Look at the red box in the picture below. If you are still confused, please have a look at the demo in my test blog by clicking here -

Stylish Scrolling Sidebar Demo.

I am pretty sure everyone would love to add this widget in their blog. There are lots of customizations with this widget. For example, you may ask the advertisers to place their ads in this widget or display your social networking links. The only disadvantage is that, it will take a little bit of time to load since it works on a JavaScript. Any way, let us get to our work by installing this stylish widget in our blogger blogs.

1. Go to "Design->Edit HTML. Make a backup of your template before modifying the HTML by clicking on the "Download full template" link at the top of the page.
2. Search for the following line in your template. Use "CTRL+F" to fasten your search.

<body>

3. Download the text document - Stylish Scrolling Widget For Blogger Blogs.
4. Now, open the text document, copy the entire code and paste it just below the line you searched in step 2.
5. Change the code that says "Your Link 1, Your Link 2 and so on" with the links you wish to display in your blog. You may even change the text "USEFUL LINKS" with some other name, which gets displayed in the widget on hitting the "CLICK HERE" tab.
(Note: For any other customization with this widget, please feel free to leave your comments and I will help you customize them as per your request.)
6. Save your template and view your blog. You will find the widget installed successfully.

I made this post as simple as possible. I hope you enjoyed this post. As I said earlier, feel free to leave your comments here. You may even add the codes using the "HTML/Javascript" option in the "Design->Add Page elements" page. So, just give this widget a try!!

Automatic Content Slider for Blogger using Nivo Slider

Automatic Content Slider for Blogger using Nivo Slider part 2

The following is how it looks
Nivo Slider with Orman theme

Step 1 : Apply Style

Login to Blogger Dashboard and navigate to Layout > Edit Html
Don’t click the checkbox which says ‘Expand Widget Templates’
Find this

]]></b:skin>

Then insert the script in front of it

 /* START
--------------------------------------------------------------------
 Automatic Content Slider for Blogger using Nivo Slider
 By http://www.everythings2012.co.cc
--------------------------------------------------------------------
 Nivo Slider
*/
/*-----START Orman Theme ----------------------------------------*/
.theme-orman.slider-wrapper {
 background:url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-

slider/Orman/slider.png) no-repeat; width:722px;
 height:337px;
 margin:0 auto;
 padding-top:18px;
 position:relative;
}
.theme-orman .nivoSlider {
 position:relative;
 width:568px;
 height:268px;
 margin-left:77px;
 background:url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-

slider/Orman/loading.gif) no-repeat 50% 50%;}
.theme-orman .nivoSlider img {
 position:absolute;
 top:0px;
 left:0px;
 display:none;
 width:568px; /* Make sure your images are the same size */
 height:268px; /* Make sure your images are the same size */
}
.theme-orman .nivoSlider a {
 border:0;
 display:block;
}
.theme-orman .nivo-controlNav {
 position:absolute;
 left:50%;
 bottom:-60px;
 margin-left:-30px; /* Tweak this to center bullets */
}
.theme-orman .nivo-controlNav a {
 display:block;
 width:10px;
 height:10px;
 background:url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-

slider/Orman/bullets.png) no-repeat;
 text-indent:-9999px;
 border:0;
 margin-right:7px;
 float:left;
}
.theme-orman .nivo-controlNav a.active {
 background-position:0 -10px;
}
.theme-orman .nivo-directionNav a {
 display:block;
 width:25px;
 height:200px;
 background:url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-

slider/Orman/arrows.png) no-repeat 0% 50%; text-indent:-9999px;
 border:0;
 top:40px;
}
.theme-orman a.nivo-nextNav {
 background-position:100% 50%;
 right:-40px;
 padding-right:20px;
}
.theme-orman a.nivo-prevNav {
 left:-40px;
 padding-left:20px;
}
.theme-orman .nivo-caption {
 font-family: Helvetica, Arial, sans-serif;
}
.theme-orman .nivo-caption a {
 color:#fff;
 border-bottom:1px dotted #fff;
}
.theme-orman .nivo-caption a:hover {
 color:#fff;
}
.theme-orman .ribbon {
 background:url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo

-slider/Orman/ribbon.png) no-repeat; width:111px;
 height:111px;
 position:absolute;
 top:-3px;
 left:56px;
 z-index:300;
}
/*----- END Orman Theme ----------------------------------------*/
/* The Nivo Slider styles */
.nivoSlider {
 position:relative;
}
.nivoSlider img {
 position:absolute;top:0px;left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
 position:absolute;top:0px;left:0px;width:100%;height:100%;border:0;
 padding:0;margin:0;z-index:6;display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
 display:block;
 position:absolute;
 z-index:5;
 height:100%;
}
.nivo-box {
 display:block;
 position:absolute;
 z-index:5;
}
/* Caption styles */
.nivo-caption {
 position:absolute;
 left:0px;
 bottom:0px;
 background:#000;
 color:#fff;
 opacity:0.8; /* Overridden by captionOpacity setting */
 width:100%;
 z-index:8;
}
.nivo-caption p {
 padding:5px;
 margin:0;
}
.nivo-caption a {
 display:inline !important;
}
.nivo-html-caption {
 display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
 position:absolute;
 top:45%;
 z-index:9;
 cursor:pointer;
}
.nivo-prevNav {
 left:0px;
}
.nivo-nextNav {
 right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
 position:relative;
 z-index:9;
 cursor:pointer;
}
.nivo-controlNav a.active {
 font-weight:bold;
}
.theme-default #slider {
 margin:100px auto 50px auto;
 width:618px; /* Make sure your images are the same size */
 height:246px; /* Make sure your images are the same size */
}
.theme-pascal.slider-wrapper,
.theme-orman.slider-wrapper {
 margin-top:150px;
}
.clear {
 clear:both;
}
/* END
--------------------------------------------------------------------
 Automatic Content Slider for Blogger using Nivo Slider
 By http://everythings2012.co.cc
--------------------------------------------------------------------
 Nivo Slider
*/

Step 2 : Apply Javascript

Find This :

</body>

Then insert the script in front of it

<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.

min.js' type='text/javascript'/>
 <script src='http://catur-at-abu-farhan.googlecode.com/svn/trunk/nivo-

slider-modified.min.js' type='text/javascript'/>
 <script type='text/javascript'>
 $(window).load(function() {
 $(&#39;#slider&#39;).nivoSlider();
 });
 </script>

Step 3 : Apply Gadget

Design -> Click on “Add a Gadget” -> HTML/JavaScript type.

<div class="slider-wrapper theme-orman">
<div class="ribbon"></div>
 <script style="text/javascript" src="http://catur-at-abu-farhan.

googlecode.com/svn/trunk/galleryposts-nivo-slider.js"></script>
<script style="text/javascript">
 var numposts_gal = 6;   //number of posts
 var image_height = 270; //image height
 var image_width = 570;  //image width
</script>
<script src="http://abu-farhan-demo.blogspot.com/feeds/posts/default?

orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
</div>

Demo
if you have any questions please leave a comment….thx u

Tuesday 17 January 2012

Add The Numbered Next And Previous Page Navigation Gadget Under Your Blog Posts

Once again we are trying to make it easy for people to navigate your blog.The easier it is for people to Navigate you blog the more likely it is they will stay and become return visitors.I'm sure you have seen this script used on lots of blogs and thought 'I would like that on my blog'.You probably thought adding it to your blog would be hard but once again i have a nice easy piece of code you can add to achieve the effect.
Numbered Next And Previous Page Navigation Gadget

Numbered Next And Previous Page Navigation Gadget

So what exactly is the page navigation widget.

Basically when someone reaches the end of a post they have the option to go to the next page, previous page or click a number to skip to that post, Its something we see on millions of web pages even the Google search page.

Here is how it looks on my blog :

You can see it starting from the first page with just the next option, in the image at the top of the post you how it looks with next and previous.

You can try it out at the bottom of this post, However the template i am using is a specialized template using a specialized read more function that shows posts in a preview box not only on the home page but on all pages so it will work much better on your blog than mine.On your blog it will skip to the the full page of your next post.

Adding it to your blog

Step 1. Click 'Layout' > 'Add a gadget' for your blog

Step 2. Choose Html/Javascript

Remember you can get all these tips sent directly to your email and stay a step ahead.Its quick easy and of course a free service provided by Google just fill in the form below the post.

Step 3. Copy the code below and paste it into the Html/Javascript area provided :
(There is a lot of code so be careful to get it all)

<script type="text/javascript">

var home_page_url = location.href;

var pageCount=1;
var displayPageNum=3;
var upPageWord ='Previous';
var downPageWord ='Next';

function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;
}
}
itemCount++;

}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
html += '<span class="showpageNum"><a href="/">1</a></span>';

}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}

if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}

html = '<div class="showpageArea"><span class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '</div>';

var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}

}

function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
var thisUrl = home_page_url;

for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;

}
}
itemCount++;
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}

if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '</div>';

var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}

}

</script>
<script type="text/javascript">

var thisUrl = home_page_url;
if (thisUrl.indexOf("/search/label/")!=-1){
if (thisUrl.indexOf("?updated-max")!=-1){
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));
}
}

var home_page = "/";
if (thisUrl.indexOf("?q=")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999"><\/script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999"><\/script>')
}
}
</script>

Once you paste in the code click save

You will now want to place the gadget under your posts.
Click on the gadgat and 'Drag and Drop it' below the post area as shown below :

Once you have the gadget under your posts click the save button in the top Right of the layout page.

How To Put A Related Posts With Images Gadget Under Your Blog Posts

One of the most popular related posts gadgets for Blogger users is the related posts with thumbnails provided by linkwithin.The easy installation and clean look of the gadget makes it an easy choice for most bloggers.However the linkwithin gadget does not suit everyone and does not work with every template for example the template I'm currently using will not display that gadget properly.If your having similar issues with the linkwithin gadget don't worry, in this post i will show you how to use an almost identical gadget that is coded to work well for all blogger templates.

Note - We have recently published a new improved version : New Related Posts With Thumbnails Blogger.

If your not familiar with the related posts with thumbnails gadgets lets look at how it works, whats displayed and were it appears.The gadget will be located below all your posts and will list a number of posts (The number is specified by you) that are related to the post it appears under.In order to display related posts the gadget uses the labels used in each post and lists posts using the same labels.Along with the post title this gadget displays a thumbnail (Small version of an image you used in the post) and a short description of the post although this is optional.

How To Add The Recent Posts With Thumbnails To Your Blog

Step 1. In your dashboard click 'Layout' > 'Edit Html' > Tick the 'expand widget templates' box

Step 2. In your templates Html find the following piece of code :
(Click Ctrl and F for a search bar to help find the code - More Info)

</head>

Step 3. Place the following code Directly Above/Before </head>

<script src='http://www.sigmirror.com/files/49136_fib7l/relatedpost.txt' type='text/javascript'/>


<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>

<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>

Step 4. Find the following piece of code in your blogs html :

<data:post.body/>

If <data:post.body/> appears in your template twice use the second occurrence.

Step 5. Place the following piece of code Directly Below / Under <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='http://www.spiceupyourblog.com' target='_blank'><small>Get This Gadget</small></a>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=10;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>

Note : You can change the amount of related posts to be displayed by changing the maxresults=6 as highlighted above in red.
You can change the title above the gadget by changing the text Related Posts highlighted in red above.

Remember you can get all these tips sent directly to your email and stay a step ahead.Its a quick and easy service Provided for Free by Google.Just fill in the Email form below the post.
If you need extra help on this or any tutorial just leave a comment, I love comments and feedback so this Blog is Do-Follow - when you comment here it helps Your Blogs Google rank !

This is a nice gadget that will keep people on your blog looking through your archive, a vital factor in building a following for your blog.

jQuery Animated Welcome Message For Blogger

One of the popular plugins for Wordpress blogs is the Blog Welcome Message which is displayed above or below the post titles on blogs.In this post i will show you how to add a similar welcome message to Blogger.The Blog welcome message uses an animated effect, it fades in and out when the reader first lands on your page to grab their attention.You can add any text to the message along with a thumbnail image, also readers can collapse and hide the message.I have created three welcome messages you can use and i will show you how to add them to your blog.I will also show you how to edit every part of the message like text, colors, image and more.

I have created 3 samples to give you an idea of how you can use the message on your blog.

Working Demo 1 - See a demo of a Rss Feed welcome message above post titles Here

Working Demo 2 - See a demo of a Twitter Welcome message below post titles Here

Working demo 3 - See a demo of a Facebook Welcome message below posts Here

Adding The Welcome Message To Blogger

Rss Feed Welcome Message - Below is the message with the Rss Feed link, you can use this message and simply change the feed link to yours.Instructions are below to completely change the message and use another image and different text.

<b:if cond='data:blog.pageType == "item"'>
<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGhH4GT_1D8AFyqSIPYvfgHgIplbjKOlo4N7RHGpD8M0W1GxTZC5Z3gAdBhLWDL8bec6OEE4DnqxHhM2VoSi3FIB9WVAgqHKm3oxIBYHgxxiukqihS7gor0gMLBJ-lwbCEa7n2LgMA9_Hl/s1600/best+blogger+tips.png'/></a><style>

#info{

border: 1px solid;

margin: 10px 0px;

padding:15px 10px 15px 50px;

background-repeat: no-repeat;

background-position: 10px center;

position:relative;

color: #00529B;

background-color: #BDE5F8;

background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixkNeDkK9MKwkKLWFN9EjydRIM165EvyrcpyERhYu4jjkw4rdskQBv-fO1yLpxsDbyZ5QU4-BHfJWc3D_K4EfHBPIEpWHpbp8sX871fIkttFip1Kx43TdDeLUtvfWRTOGOoAWCWAnyH7Xr/s1600/rss-mini.png');

}

</style><script src="http://code.jquery.com/jquery-1.2.3.min.js" type="text/javascript">

</script>

<script type="text/javascript">

$(document).ready(function(){

$(".close").click(function(){

$("#info").animate({left:"+=10px"}).animate({left:"-5000px"});

});

$("#info").fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400)

.fadeOut(400).fadeIn(400);

});

</script>

<div id="info">

<a class="close" href="#close" style="float: right;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC-LQfKDgsWzOn92-nxT46LaYrkLqnD1JcTADsdIBck9SlG808q1COiJuzcrq0Yjr0B8PVNoxk3nFLe6egTH3DtNPabZCLT6vs73FTQVeDnsfIvNaOyBWdsmlLo30iwBJ8dwakwHhmr1Gv/s1600/close+message.png" /></a>

</b:if>

*To change the Rss Mini image replace the Image URL in red.
*The code in orange is the Text Message and Rss link replace them with your own message and image.
*Change the text color edit - color: #00529B;
*Change the background color edit - background-color: #BDE5F8;
Get color codes here - Color Code Generator

Images from demos - If you want to use the facebook or Twitter images from the demos here are the codes :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCah9IqHi5Ph-SDl00GBWJYZ4G6ns47HmI_K0cMaPXMQXDlwa8epAP3ksFj6XEsZcQNyKmzpGUBP74Zqq7GuXqX_i2HO0HqMEgCYOg5UoF15NHhAYSRq1TKEc1F9nG34U2eI-2RdNsnosR/s1600/fb-mini.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIk8Q-3TyYnH3nLcr_bVyrmBxKITdMM-S6vOS8U11SOeL_1c61CZ6X_z5raPI2pgvkfIN7EiItnfRsaSw-y2PcnzXzOvFqqgdjPlO46BJn9d5IQTao-0yQ8Tmp9rHz0aNye9oEGgQT-C1V/s1600/twitter-mini.png

OK so you have the code for your message lets add it to your blog !

List Only Post Titles On Blogger Labels Pages

In this post i will show you a really Great trick that helps make your Blog much easier to Navigate for your visitors.This tip will help keep visitors to your blog On your Blog.I actually found it hard to give this post a title that would explain what this tip does and how it works, i will give you some examples below to explain.However hard it may be to explain its very easy to add to your Blog.

Screenshot

Why change?

You may have 50 or more posts with the same label.If i did not make the change when someone clicks that label they would go to a page showing 50 Full Posts Your guess is as good as mine as to how long that page would take to load but you can be sure the visitor wont be waiting around to see.Its also better for the visitor to see the the results in a menu format as they will see a menu of what you have and that will bring them back.

How its done.

1.Click 'Layout'->'Edit html' for your blog.
(Tick 'Expand Widget Templates' box)

2.Find the following piece of code in your blogs template :
(Click'CTRL & F' For a search bar to find the code)

<b:include data='post' name='post'/>

3.Now Replace the code you found above with the code below :

<!--Labels in menu From:www.spiceupyourblog.com--><b:if 
cond='data:blog.homepageUrl !=data:blog.url'><b:if 
cond='data:blog.pageType != &quot;item&quot;'><a 
expr:href='data:post.url'><li/><data:post.title/></a><br/><br/><b:else/><b:include
 data='post' name='post'/></b:if><b:else/><b:include 
data='post' name='post'/></b:if><!--Labels in menu end-->

You have now changed how your label results are listed but also how your archive is listed and if you have a search bar on your blog results will be listed like this also.

Once you have changed the code click save and your done go test it out.

New Ready To Use Rss And Social Icons For Your Blog

New Ready To Use Rss And Social IcoIn this post i have a brand new set of stylish icons you can use on your blog for readers to subscribe and follow you on social platforms.I really liked the look of this icon set and it includes an icon for Google + (Plus) you can use for people to check out and follow you on Google's new social network.In total i have four icons here for Facebook, Twitter, Google Plus and your Rss Feed.However the complete set has 24 icons for other sites including YouTube, LinkedIn and Stumble Upon, the complete set can be found on Social Icon Studio.

Use The New Social Icons On Your Blog

Step 1. In Your Blogger dashboard click Design > Add a gadget > Choose Html/Javascript

Step 2. Copy and paste the following code into the html gadget then make the changes shown below.

<a href="http://facebook.com/everythings2012" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSfcJsylHxtL1eO8OKUrEEls6CFYbGAizb58-0M7E6FTCwErq3lJ2lMhkX7aW9bVWayMJHvV_ARdvK8Ez57o_DNTuXu5npMsxl_TPKZmo-hBh-UCFzt2GLJjQN3_3oXJ0sQrWLCI1jAVE/s1600/facebook-30x43.png" /></a><a href="http://twitter.com/safdarhussain1" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSOE5hLhL1RKjGxjK-mHxIh7Q_Apdsdvb3kx3wwWfXGO-P_OchUJf2P3fNKG_eYuVXqa11WDfHmXQvNUqMVKRYoxtRa7vpy2PNAc2xGRhbc56UqyWX7di8pl3UTXuY6GBss8QOcKrUo0M/s1600/twitter-30x43.png" /></a><a href="https://plus.google.com/u/0/your ID/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisMFThCqo0lXefUlALRuzMdfzJAOxfd9_IXiNkirBAIrdzICH5Wz5xJHbv4aNfav_1H3RViSm4HXbloU0gLb3WjpiME_U2UP6h_FI171wyEvH-k_-CO3X5HtiH4Xqc6GGWb63fCo5C0ss/s1600/googleplus-30x43.png" /></a><a href="http://feeds.feedburner.com/yourblog" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYNLGLZwM2OZFIFqDpciXcdXg2x5C7YlJTTKVOk_vZHrCQrfxoY2g5aH2smw5jK7_sULTTIz0FVL773cCpT4TlkU4eVhKINPm36a3Uci7oIw0GSm8Tmdr1fDoSXi4cjhjOE1wWArdXXl8/s1600/rss-30x43.png" /></a>

Note - Change the links in green to your social and feed links.

Step 3. Save the gadget and your done.

Amazing Animated Flying Twitter Bird Gadget For Blogger

Guest Post - In this post Dasari Harish will show you how to have a stunning Twitter bird Fly around your blog pages, landing randomly in view of visitors to Share your posts and Follow you.

"Twitter", is one of the most popular Social networking sites in the world among Bloggers to promote their blogs.There are a number of twitter widgets, scripts and plugins available to integrate Twitter with your blog.Most of the icons, buttons or badges are stationary or a fixed floating Twitter gadgets.Now here i have a very cool unique Blogger Twitter widget, an actual Animated flying Twitter Bird that flies around your blog.

This Plugin is java script based and it will display an animated Twitter bird that settles on different places of your blogs visible area. If a you scroll the page, the bird will fly towards the visible part and settle in a new place and it takes random paths for each flight.When you place the cursor over the Twitter Bird "tweet this" and "follow me" links appear,through this the visitor can tweet the article or follow you.

Demo:-You can see the Twitter Bird Flying Around this page visible Area, Scroll this Page to see it's Action.

Add The Flying Twitter Bird To Your Blog

There are Two types here is am giving.You can have the Bird on every page of your blog or just on the post pages..

1. Twitter Bird with tweet text has Post title and URL for all post pages Only.
2. Twitter Bird with tweet text has Current Page title and URL for all Blog pages.

Add Flying Twitter Bird To Post Pages Only

1. Go to Your Blogger Dashboard Click > Design > Edit Html

Design Edit Html Blogger

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code -

</body>

3. Copy and paste the following ocde directly Below / After </body>

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

<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/files/way2blogging.org-tripleflap.js">
</script>
<script type="text/javascript">
var twitterAccount = "Your Twitter User Name Here!";
var tweetThisText = " <data:blog.pageTitle/>: <data:blog.url/> ";
tripleflapInit();
</script>
<span style="font-size:11px;position:absolute;"><a title='Blogger Widget by Way2blogging.Org' href="http://www.way2blogging.org" target='_blank'><img border='0' src='http://img1.blogblog.com/img/blank.gif'/></a></span><a href="http://www.spiceupyourblog.com" target="_blank">Twitter Bird Gadget</a>

</b:if>

Important Note:-
Replace Your Twitter User Name Here! with your twitter user name.You add just the username not the entire URL of your Twitter profile.For example twitter.com/safdarhussain1 , paulcrowepro is the username.

4. Save Your template And Check Out Your Twitter Bird.

Add Flying Twitter Bird To All Pages

1. Go to Your Blogger Dashboard Click > Design > Edit Html :

Design Edit Html Blogger

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code .

</body>

3. Copy and paste the following code Directly Below / After </body>

<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/files/way2blogging.org-tripleflap.js">
</script>
<script type="text/javascript">
var twitterAccount = "Your Twitter User Name Here!";
var tweetThisText = " <data:blog.pageTitle/>: <data:blog.url/> ";
tripleflapInit();
</script>
<span style="font-size:11px;position:absolute;"><a title='Blogger Widget by Way2blogging.Org' href="http://www.way2blogging.org" target='_blank'><img border='0' src='http://img1.blogblog.com/img/blank.gif'/></a></span><a href="http://www.spiceupyourblog.com" target="_blank">Twitter Bird Gadget</a>

Adding floating social media sharing buttons

As promised to some of my readers, here’s a tutorial on how to add a Mashable-like floating bar of social media buttons to a Blogger blog (or a WordPress blog or just about any website). I made it into a widget, so you don’t have to go into your template HTML to install (or remove) them. Just drop the whole code into a HTML/Javascript gadget.
I have included Facebook Share, Retweet, StumbleUpon, ~~Google Buzz~~, Digg This and Google +1 (plus one) buttons in the bar. Each of them comes with a live counter. The corners of Facebook Share button and counter are rounded to blend with the rest of the buttons (doesn’t work in Internet Explorer though). You can add more social bookmarking or sharing buttons later if you wish.

I. Adding the buttons

Adding to Blogger
1. Go to Design > Page Elements.
2. Click Add A Gadget.
3. In Add A Gadget window, select HTML/Javascript .
4. Copy the code below and paste it inside the content box.
5. Save the gadget.
6. Drag the gadget and reposition it under Blog Posts gadget.
7. Click Save button (top right hand corner).
Adding to WordPress
1. Go to Dashboard > Appearance > Widgets > Available Widgets.
2. Drag Text widget into a sidebar.
3. Paste in the code.
4. Save.


<style type="text/css">

#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>

<div id='pageshare' title="Get this from BloggerSentral.com">

<div class='sbutton' id='fb'>

<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

</div>

<div class='sbutton' id='rt'>

<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>

</div>

<div class='sbutton' id='su'>

<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>

</div>

<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>

<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>

<a class="DiggThisButton DiggMedium"></a>

</div>

<div class='sbutton' id='gplusone'>

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

<g:plusone size="tall"></g:plusone>

</div>

<div style="clear: both;font-size: 9px;text-align:center;">Get <a href="http://www.bloggersentral.com/">widget</a></div>

</div>



II. Customizing
Vertical alignment
Change the value of bottom in code line 3. The code positions the button relative to the bottom of your browser window. To fix the distance even when window is resized, specify the value in px (pixels) instead of %.
Horizontal alignment
Change the value of margin-left in code line 3. Negative value pushes the button to the left of the main blog column, positive value pushes it to the right.
To position the button relative to the left or right edge of browser window, replace the margin-left with left (as in left:10px;) or right (as in right:10px;) respectively.

Replacing and removing buttons
You can replace existing buttons with your own. Each button is represented by this code:

<div class='sbutton'>
BUTTON CODE
</div>

To replace the button, simply replace the button code with the new code. 
To remove the button, delete the whole div. 
Update (for Blogger): If somehow your Google +1 button doesn’t appear despite other buttons appear successfully, try this workaround:

Go to Design > Edit HTML and find this line:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
or 
<body> 
Copy the code in step I.5 and paste it right below the line. 
Replace the margin-left:-71px; in code line 3 with left:10px;. 
Preview before saving. 

Enjoy!

Social Bookmarking Widget For Blogger – Bookmark and Share homepages!

With the release of Cute Box blogger Template I also released some useful blogger widgets which includes a Bookmarking Widget For your blog’s homepage. This widget helps readers to bookmark your blog’s homepage on their favourite bookmarking services like Google bookmark, Stumbleupon, Delicious, Digg etc. It contains icons from our Circular Style Social Media Icon Set. This is how this widget looks like,

To add this widget to your blogs, follow these steps,

Go To Blogger > Layout
Click Add a Gadget or Add a Page element
Choose HTML/JavaScript
Inside HTML/JavaScript paste the code below,

<center><tr>
<td valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="222">
<tbody>
<tr>
<td width="28" height="30"><img border="0" width="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSqdVIO3d2QmKmE_9rrjF2m6d2cDYYUj5w_KAeEIjAb95uyv0sKIIDgAzwn8qP0k_gYVVLA1ri2dgzsBhSjkBhrh1E8yMkWaxV0xxSWkHs9ZXmdViGHrcV5NvVPdKSY-ytIz0PENY6z8/s400/FACEBOOK.png" height="25"/></td>
<td height="30"><a href="http://www.facebook.com/sharer.php?u=http://YOUR-BLOG-NAME.blogspot.com" target="_blank" rel="nofollow">Share on Facebook</a></td>
</tr>
<tr>
<td height="30"><img border="0" width="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPnYQ_A2nL6WtUZEBkZmKEMXtKntGgq0vJ9RqgK2hKoDLMS1b81ubWrIJ-B8DRxJgmxZEg9MB-s3we5qiKoCRUxRH5GquVNWF2YR03qVx-ZbXxzDOs4wK6b1s2hyphenhyphenlArCMdFTLv1DCYzRI/s400/TWITTER.png" height="25"/></td>
<td height="24">
<a href="http://twitthis.com/twit?url=http://YOUR-BLOG-NAME.blogspot.com">Share on Twitter</a></td>

</tr>

<tr>
<td height="30"><img border="0" width="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8X061r6v_uXHCSZhKIHXpox6nB4yD_YHLJgrxH6RNJn5S4Qkr5aOC4IvzfNEuhAYF-XsesHBcU4qvpRQ-PPhhZshWLSoBomWR1QaWMq1KPfAlBKO3NLGwTXA_k8rzJsJQBN5K_OmBfH4/s400/STUMBLE-UPON.png" height="25"/></td>
<td height="30"><a href="http://www.stumbleupon.com/submit?url=http://YOUR-BLOG-NAME.blogspot.com" target="_blank" rel="nofollow">Share on StumbleUpon</a></td>
</tr>
<tr>
<td height="30"><img border="0" width="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1VB9qDa5bjJIrs8T-qq61WDRtOzby3yf14d9LDLy4FxhNqQG4FJT6_DhcbnKe862ptXpkgcimXDRjK591RtKh3ZL-Ji-K6T4pZ5YMsHzSMdCa6fatqvzvhEPsL3_0b4ZaeadKfMnfTQ/s400/DELICIOUS.png" height="25"/></td>
<td height="30"><a href="http://del.icio.us/post?url=http://YOUR-BLOG-NAME.blogspot.com" target="_blank" rel="nofollow">Share on Delicious </a></td>
</tr>

</tbody>

</table>
</td>
<td valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="222">
<tbody>
<tr>
<td width="28" height="30"><img border="0" width="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhzbBeMvPeYW3suKHE9SioLlTbOf6StmqfvOrIvhzK_a7hMNO3cJeOhBaLCmTcP1XhBD7Y37bmhE1BB_7emsptkmNP-dTX4zmBxuI7_iz-cSG6bpDQUHWvXuWwxlAJY2AZh-QHnl_5sJk/s400/DIGG.png" height="25"/></td>
<td height="30"><a href="http://digg.com/submit?phase=2&url=http://YOUR-BLOG-NAME.blogspot.com" target="_blank" rel="nofollow">Share on Digg </a></td>
</tr>

<tr>
<td height="30"><img border="0" width="22" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUqVxKE9vJN9yFzgyS5zJz5gLeg90Qtq1DmP5xJIOHzTuzcfldWQ7drO1uJO2-s0EkDd4uQDeEcz9SPn5P0cl370JJDAnRlqeva-GAoaNsgL7Ehqa0AFXvT8KpJ10ykyVjkUwIid4kGaw/s400/Google-icon.jpg" height="22"/></td>
<td height="30"><a href="http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=http://YOUR-BLOG-NAME.blogspot.com" target="_blank" rel="nofollow" title="Bookmark this blog on Google">Bookmark on Google</a></td>
</tr>
<tr>
<td height="30"><img border="0" alt="Email" width="21" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7t5tIDu1lcyceRYqv5LefnbCbsg7STN5rpP3Kb-y5DfIG9hvU3gQoPbv3y9Jx46axa3cwMQk3TH0tXNS9O0fUJjCf_cKouGL_vQXPnlXnsqgrFXVWif_o4Y-L8piKs8x54ZVnhjxpqdCC/s400/Email+Orange_128.png" height="22"/></td>
<td height="30"><a href="http://feedburner.google.com/fb/a/mailverifyuri=tntbystc&loc=en_US" target="_blank" rel="nofollow">Receive Email Updates</a>
</td>
</tr>
</tbody>
</table></td></tr></center>

Remember to replace YOUR-BLOG-NAME with your Blog’s good name and the Subscription Link i.e http://feedburner.google.com/fb/a/mailverifyuri=tntbystc&loc=en_US with your own Feedburner subscription link. You can find your subscription link by going to the following location in your feedburner account, Publicize > Email Subscription . Just below Email Subscription page you will find a code as

shown below,

Create a Floating Feedback and Back-To-Top Button For Your Blogs

Asking your visitors to leave you suggestions or feedbacks can be pretty easy only if you provide them with an easy access to your feedback page. Readers are often lazy and getting them to leave a feedback is often tough. However you can let them comment willingly if you add a floating feedback button to your blog, that floats as a reader scrolls down or up. This floating button can be made more user friendly and eye-catching if you add a roll over effect to it. Hover your mouse over my feedback button at the bottom-left corner of this page and observe how the button magnifies when you hover your cursor over it. Liked it? Lets now learn the TNT of adding a Feedback Button to your blogs, along with a Floating Back-To-Top Button, which I will discuss later.
For a feedback button you will need two images, one small (30 by 145 pixels) and one large (35 by 170 pixels) You can also use my feedback button if you wish,

Small Image :

Large Image :

You will then need to upload these images to an image hosting web service like Photobucket or other services like Google sites and sigmirror
Get URLs for both these images and then follow the steps below

Sign in your blogger account
Go To Layout > Page Elements

Click on add a Gadget

Click on HTML/JavaScript

Now Copy paste the code below into the HTML/JavaScript widget,

<a style="display:scroll;position:fixed;bottom:5px;left:0px;" href="URL Of Feedback Page" title="Your Feedback is always welcomed!"><img onmouseover="this.src='URL of your Larger Feedback button'" src="URL Of Your Smaller Feedback button" onmouseout="this.src='URL Of Your Smaller Feedback button'"/></a>


save your widget and view your blog with a floating Feedback button at the bottom-left corner of your homepage.

Add a Floating Back–To-Top button to your blog
If your blog’s homepage is really long or if you write lengthy posts then you must add a Back-To-Top button to your blog, by clicking which, users blog will be taken straight to the top (Header) of your blog. You can see my floating back-to-top button at the bottom-right corner of this page.
To add this button to your blog you will again need two identical images, one small and one large. May be you would like some of these buttons, back to top -large

Now lets learn on how to plant the TNT of adding a floating back-to-top button to your blog.
Follow the same steps as you did for adding the floating Feedback Button. Just paste the code below In your HTML/JavaScript widget,

Note:- Remember to replace the required detail with specific URLs of your Back-to-top buttons
Just save your widget and view your blog with a floating Back-To-Top button at the bottom-right corner of your homepage.

Add Twitter Follow Button to Blogger Blogs

Twitter follow button has started gaining great attention from blogosphere. More and more blogs are adding it just near the post titles or on top sidebar to increase the number of their twitter followers and indirectly increase their pageviews. This button is an official button created by twitter developers and does not belong to a third part. As opposed to the retweet button this button loads quickly and doesn't disturb the load time of your website.

Adding Twitter Follow button to Blogspot Blogs

To add the button to the widget section of your BlogSpot blogs i.e. Sidebars, below or above Post body, header etc. then do this

Go to Blogger > Design
Choose HTML/Javascript Widget
Paste the following code inside it and drag the widget to add your button to any location you want

<a href="http://twitter.com/safdarhussain1" class="twitter-follow-button">Follow @safdarhussain1</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

Replace safdarhussain1 with your twitter user name
4. Save your widget and you are done!

Add Twitter Follow Button Below Post titles

If you wish to add the button below post titles then do this,

Go To Blogger > Design > Edit HTML
Backup your template
Check the "Expand Widgets Template" box
Search for this code,

<data:post.body/>

5. Just above it paste the following code,

<a href="http://twitter.com/safdarhussain1" class="twitter-follow-button">Follow @safdarhussain1</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

Replace safdarhussain1 with your twitter user name.
6. Save your template and you are done.

Monday 2 January 2012

Releasing Highly Stylized “Contact Me” Form For Bloggers and Web Developers – Available For Free Of Charge!

A Contact Form is a must for every website and weblog for feedback and suggestion purposes. There are many free email services that let you create free online Contact Forms but most of these forms are casual in look and appearance and are already used by millions of websites. Then how can you make your free form look any different from others?

Well luckily after spending some hours of hard work I have successfully created a well stylized and optimized code that is unique in every aspect and that is capable enough to turn your free Contact form from this,

to this,
MBT-Stylized-Contact-Me-Form

This new stylized version has CSS effects added to it. Text inside fields appear in different colours and the radio buttons change colour on mouse hover. Click Here to see it in action.
You need to follow two simple steps to get to the end result,

Sign Up To Create A Normal Contact Form

First and foremost you need an account at a free email service to create a normal looking contact form which will be controlled by the email service itself. Go to Email Me Forms and Sign Up for an account and then follow the steps below

Go To Control Panel

After you have created an account click the link “Create a New Form” at the right-hand pane under Control Panel as shown below,
email--me-form-control-pane

Then There will a total 7 steps which are illustrated in the images below. But Before going for step#1 kindly create a thank you page for your blog. This thank you page will appear when readers have successfully submitted their message to you using the contact form. You can see my Thank you Page as an example. Make sure you give it an old date.
Once you have created it then follow each step below carefully,

1. Step#1

Add a name for your contact form, enter your email address, leave spam Email address emtpy, add your thank you page URL/link and let number of fields be 6.
EMAIL-FORM-STEP1

Hit Next

2. Step#2

Change your options to the ones shown in the image below. As far as the Required? Portion is concerned, you can set it according to your will but set other options the way they are shown in the image below,
EMAIL-FORM-STEP2

Hit Next

3. Step#3

Change your options to exact ones below,
EMAIL-FORM-STEP3

Hit Next

4. Step#4

For step 4 only edit the part as shown in the image below and leave the above portion as default. Make changes for regions indicated by blue arrows only.
EMAIL-FORM-STEP4

Hit Next

5. Step#5

Follow the image below,
EMAIL-FORM-STEP5

Hit Next

6. Step#6

And this is how your contact form looks like,
EMAIL-FORM-STEP6

Hit Next

7. Step#7

Copy the link indicated in the image below. This is your the ID for your form. We only need this ID link and not the HTML code they provide because you deserve a better stylized code!
EMAIL-FORM-STEP7

Now jump to the next important part shared below

Stylize Your Contact Form

First you will need to add a CSS code to your selected blogspot template. To do this follow the steps below,

Log into your blogger account
Go to Layout > Edit HTML
Back Up your template
Search for ]]></b:skin>
And finally add the code below just above ]]></b:skin>

input.mbt1 {
color:#FF8E1F;
font:10px 'trebuchet ms',helvetica,sans-serif;
background-color:#fff;
border:1px dotted #0080ff;
}
input.mbt1hov {
color:#0080ff;
font: bold 10px 'trebuchet ms',helvetica,sans-serif;
border:1px solid;
}
textarea {width:100%; color:#0080ff;
font:12px 'trebuchet ms',helvetica,sans-serif;
background-color:#fff;
border:1px dotted #0080ff; }
textareahov { width:100%;
color:#0080ff;
}

Save Your template

Now open your blogger Editor and create a new post entitled as “Contact Me” . You can give it any title you like. Give this post an old date so that it should not appear in recent posts.

First Create a Welcome Note as shown in the image below. You can see my Welcome Note as an example.

Then Click the Edit HTML tab at the top right-hand corner and add the code shared below just below the visible text.

<form action="PASTE THE EMAIL ME FORM ID LINK HERE" charset="UTF-8" enctype="multipart/form-data" method="post"><table bg="" border="0" cellpadding="2" cellspacing="0" style="color:white;"><tbody><tr><td><span style="font-family:Verdana;font-size:85%;color:black;"></span><div id="mainmsg"></div></td></tr></tbody></table><table bg=""border="0" cellpadding="2" cellspacing="0" style="color:white;"><tbody><tr valign="top"><td nowrap="nowrap"><span style="font-weight: bold; color: rgb(102, 102, 102);font-family:Verdana;font-size:10px;">Name</span></td><td><input class="mbt1" maxlength="100" name="FieldData0" size="30" value="" type="text"> </td></tr><tr valign="top"><td nowrap="nowrap"><span style="font-weight: bold; color: rgb(102, 102, 102);font-family:Verdana;font-size:10px;">Email</span></td><td><input class="mbt1" maxlength="100" name="FieldData1" size="30" value="" type="text"> </td></tr><tr valign="top"><td nowrap="nowrap"><span style="font-weight: bold; color: rgb(102, 102, 102);font-family:Verdana;font-size:10px;">Country</span></td><td><input class="mbt1" maxlength="100" name="FieldData2" size="30" value="" type="text"></td></tr><tr valign="top"><td nowrap="nowrap"><span style="font-weight: bold; color: rgb(102, 102, 102);font-family:Verdana;font-size:10px;">Age</span></td><td><input class="mbt1" maxlength="100" name="FieldData3" size="30" value="" type="text"></td></tr><tr valign="top"><td nowrap="nowrap"><span style="font-weight: bold; color: rgb(102, 102, 102);font-family:Verdana;font-size:10px;">Subject</span></td><td><input class="mbt1" maxlength="100" name="FieldData4" size="60" value="" type="text"> </td></tr><tr valign="top"><td nowrap="nowrap"><span style="font-weight: bold; color: rgb(102, 102, 102);font-family:Verdana;font-size:10px;" >Message</span></td><td><textarea cols="60" name="FieldData5" rows="10"></textarea></td></tr><tr><td colspan="2"></td></tr><tr><td></td><td align="left"><input maxlength="100 " name="hida2" size="3" style="display: none;" value="" type="text"><input onmouseover="this.className='mbt1 mbt1hov'" onmouseout="this.className='mbt1'" class="mbt1" name="Submit" value="Submit " type="submit"> <input onmouseover="this.className='mbt1 mbt1hov'" onmouseout="this.className='mbt1'" class="mbt1" name="Clear" value=" Clear " type="reset"></td></tr><tr><td colspan="2" align="center"></td></tr></tbody></table></form>

Kindly replace the bolded green text in the code above with the URL of your contact form. Copy this code as it is and don’t try to edit it. Paste it as instructed in the image below,
EDIT-HTML-MODE

That’s it, You are Done! Click the Publish Button and see a beautiful contact form on your weblog

Saturday 28 January 2012

Add A Stylish Scrolling Sidebar Widget In Blogger

Automatic Content Slider for Blogger using Nivo Slider part 2

Step 1 : Apply Style

Step 2 : Apply Javascript

Step 3 : Apply Gadget

Tuesday 17 January 2012

Use The New Social Icons On Your Blog

Amazing Animated Flying Twitter Bird Gadget For Blogger

Add The Flying Twitter Bird To Your Blog

Add Flying Twitter Bird To Post Pages Only

Add Flying Twitter Bird To All Pages

I. Adding the buttons

II. Customizing

Adding Twitter Follow button to Blogspot Blogs

Add Twitter Follow Button Below Post titles

Monday 2 January 2012

Go To Control Panel

1. Step#1

2. Step#2

3. Step#3

4. Step#4

5. Step#5

6. Step#6

Picasa

About Me

Subscribe To

Picasa