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

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 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..



Cheers.

Posted by Unknown 21:00

Adding Direct Download Option In Blogger

After starting blogging at blogger, I search a long time in Google that is it possible to add download option in Blogger ? Forums and blogs says it's not possible to add direct download option in my blogger blog and can able to use only links at blogspot site. I really felt bad after 1 year I host a file in free file hosting site named ziddu.com and some how use this Download link in myblogger site and now traffic can easily download any file from my blogger blogs.

Lets see, how to add Direct download option in blogger blog.

May you want to provide a blogger template in blogspot site where visitors can easily download these templates directly from your blog.

1st of all you need to host your file in any free file hosting site like ziddu, mediafire, zippyshare etc. Now, Go to your link where you they make you chance to download that file.

Keep mouse in Download, click on right button and "open with new tab". No need to download this file now, Just copy this link and add it to your article at blogspot.

We can also use any websites download host link for provide direct download link from our blogger.

Just Click right button in blogger and choose "Open with in New Tab."

Click on "Cancel". 

Cause you have no need to download this file for use it in your blog.

Copy this link use it in your blog for download this file.

Select Download Keyword for Provide Download and click on "Link".

Paste your copied link here and Click on "OK".

Publish Your article and now traffics can download any file of you from your blogger blog. Hope, this article help you most and invite you to visit adday campus regularly.

Download a Blogger template Directly From this Blogger blog

Posted by Unknown 06:02 0 comments

Add Retweet Button Below Post Titles for Blogger

Add Retweet Button Below Post Titles for Blogger

Twitter is one of the fastest growing social networks in the recent days. Many feel it drives a lot of traffic to their blog, especially when they have a large number of followers. We should some how use this twitter to improve traffic to our blog, So how are we going to do that? Simple, just by adding a “Tweet This“ link to our blogger posts. There are certain blogs that include Tweet this in the footer of their posts, that is, at the end of the post as a social bookmarking icon.

But I recommend you to place Tweet This Button at the top, next to the title of your post.
  This post basically explains, how to add tweet this and also a retweet button to blogger posts. Many blogs have links only for “Tweet this” but not for “ReTweet“. This post includes both Tweet and ReTweet option, there by, driving more traffic to your blog and making your posts more effective. Now lets move on Adding Retweet Button Below Post Titles

How To Add Tweet And Retweet Button Below Post Titles.

• Login to your dashboard. Navigate to “Template>Edit HTML” from your dashboard. 

• Make a back up of your template before you do any changes in the template. 

• Make sure that you have a tick mark in that “Expand Widget Template“. 

• Now, do a search using “CTRL+F” for the following line, if you want to show the button below the title of your post:

  <div class='post-header-line-1'>

  
  Else, search for the following piece of code to add the button at the right end of your blog posts.
  
  

  <div class='post-body entry-content'>

  
  
  • Paste the following piece of code just after the above line(either below the title or embedded with your blog posts).
  
  

  <div style='float:right; margin-left:14px;'> <script type="text/javascript"> tweetmeme_url = '<data:post.url/>'; </script>
  <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
  </div>

  • Save your template. That is it!! You Are done with the installation. Very simple I think!!

Posted by Pak 23:26 2 comments

New Floating Facebook Like Box For WordPress

New Floating Facebook Like Box For WordPress.

Add Floating Facebook Like Box Widget To WordPress !

1. Go to Dashboard > Appearance > Widgets > Available Widgets.
2. Drag Text widget into a sidebar.
3. Paste in the code.
4. Save

<script type="text/javascript">
 /*<![CDATA[*/
 jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
 /*]]>*/
 </script>
 <style type="text/css">
 .abtlikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk9Ug3y87p4Bc5B1ThCYuPa5kLuS_iDPDlvVZz2Td5R5zL0FiseVmiSSJYChFaKNOxJ2olCQ8pdaBsrreqSqj6wuQJhHYNd63GVlRnG62TE3XqdIu727XDPmqhcW1K-CmUrQjFYYSBV0g/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index:  99999;position:fixed;right:-250px;top:20%;}
.abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid  #3b5998; background:#fafafa;}
.abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
 .abtlikebox span a{color: gray;text-decoration:none;}
 .abtlikebox span a:hover{text-decoration:underline;}
}
</style>
 <div class="abtlikebox" style="">
     <div>
     <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fasianzclub&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span>Widget by :<a href="asianzclub.blogspot.com">asianzclub</a></span>
     </div>
 </div>

5. Click on Save button and done !
Note:-Replace asianzclub With Your Facebook User name.
5. Save your widget.
Now this is most important part. If you missed it the widget will not works.
6. Goto Appearance > Editor
7. Than goto > Header.php
8. Now Place below code just before <head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

9. Click Save.
Now Visit your blog to see it that its working . Hope you enjoy the post.

Posted by Pak 23:18 0 comments

Create a pointer trails with Jquery

H

ope you all know how to set mouse pointer trails with your operation system. Windows user can set it from Control panel-->Printer and other Hardware-->Mouse settings-->Check the pointer trail checkbox.
I am here to demonstrate how you can set a pointer trail on your web-page with the help of Jquery

Its simple - create some img elements having pointer-image in src, and let them follow pointer-position whenever mouse move. And don't forget to fade them out slowly.

 The Javascript

<script src="https://making-different.googlecode.com/svn/trunk/jquery.js" type="text/javascript">
</script>
<script>
$(document).ready(function() {
 $(document).mousemove(function(e) {
    pointer = $('<img>').attr({'src':'http://Asianzclub.blogspot.com/-0TW2w2GgWQY/T7oOUVAPdfI/AAAAAAAADSE/MsNTA7Hwxco/s1600/pointer.png'});
    $(document.body).append(pointer);
    pointer.css({
            'position':'absolute',
      top: e.pageY +2 , //offsets
      left: e.pageX +2   //offsets
     }).animate({  opacity: 0 }, 1500, function(){ $(this).remove(); });;
 });
});
</script>

Note :- Change Cursor Image by Changing Above Red Colored Image URL

Drop Your Comments And Questions Below... :)

Posted by Unknown 03:03 0 comments

NEW EASY INSTALL FLASH ANIMATED LABEL CLOUD WIDGET FOR BLOGGER

The Flash Animated Label Cloud has been a popular widget for WordPress and Blogger for some time. Previously I published two tutorials on the Flash Label Cloud and Installing the Flash Labels Cloud[Video Tutorial]. But both tutorials were hard to follow and did not work on some blogs. Today i have a brand new script that solves all those problems and a widget generator that makes it very easy to add to your blog. You also have a number of options such as the width, height, colors and speed.

Live Preview :-
Here You will see the http://asianzclub.blogspot.com flash animated label Cloud.

WHAT’S NEW?

1. New SWFobject Script
2. Uses the Blogger API and Pulls the Labels
3. No Need to Edit the Template.
4. You can Place this Label Cloud Widget inside a Post and Any Where 

Posted by Unknown 12:48 0 comments

HOW TO ADD BEAUTIFUL ABOUT AUTHOR BOX BELOW EVERY POST IN BLOGGER

HOW TO ADD BEAUTIFUL ABOUT AUTHOR BOX BELOW EVERY POST IN BLOGGER

This tutorial will show you How To Add Beautiful About Author Box Below Every Post In Blogger. You Can Add Simple And Beautiful Author Box Below Every Post In Blogger By Adding Some CSS And HTML Code. About Author Box Is Used To Show Information About Author.

ABOUT AUTHOR BOX DEMO

Live Demo

HOW TO ADD BEAUTIFUL ABOUT AUTHOR BOX TO BLOGGER

• Go to Blogger Dashboard --> Design --> Edit HTML
• Backup your Template before making any changes to your blog
• Now  Expand Widget Templates
• Press Ctrl + F and search the code shown below

]]></b:skin>

• Now replace it with the code shown below

#authorbox {
background:#333 url(http://2.bp.blogspot.com/-L5Tvv0yJrr4/TvsFt-Mh82I/AAAAAAAACC0/9eva5jXci8U/s1600/about_author.jpg) no-repeat scroll left top;
width:auto;
overflow:hidden;
color:#fff;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
margin:5px auto;
padding:40px 10px 10px 20px;

}

#authorbox:hover {
-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 20px  rgba(0, 0, 0, .3);
}

#authorbox h4 {
font-size:26px;
color:#fff;
clear:none;
margin:0;
padding:10px 10px 5px;
}

#authorbox .author_small {
font-style:italic;
}

#authorbox img {
-webkit-transition:  -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
padding: 5px 5px 5px 5px;
-webkit-transform:  rotate(+2deg);
-moz-transform: rotate(+2deg);
float:left;
border:4px solid #336699;
margin:10px;
padding:0;
}

#authorbox img:hover {
-webkit-box-shadow:  0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform:  rotate(-1deg);
-moz-transform: rotate(-1deg);
}
#authorbox p {
color:#fff;
font-size:14px;
margin:0;
padding:0 10px 10px;
}

#authorbox a {
font-weight:bold;
color:#336699;
}
]]></b:skin>

• Now Press Ctrl + F and search the code shown below

<div class='post-footer-line post-footer-line-1'>

• Now genrate the code from the generator shown below and place it below <div class='post-footer-line post-footer-line-1'>

• Now save your template

Posted by Unknown 08:48 0 comments

Do You Like This Story/Article Widget For Blogger

Do you like this story is a beautiful widget for blogger. It is very helpful to increase your number of subscribers. You can put it at the end of every post. It contains subscription form with twitter and facebook links. It catches the attention of your visitors. Hope all of you like this.


Installation - 
1. Go to Blogger Dashboard > Design Tab > Edit Html.
2. Check Expand Widgets Box.
3. And Serach For <data:post.body/>
4. Paste below code  after/below <data:post.body/>
(You can custmize it using our HTML Editor)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style> 
form.emailform{ 
margin:20px 0 0; 
display:block; 
clear:both; 
} 
.mbttext{ 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixEPMRUsg70jgiqdbelSRNUfmvf5rtbYzZrEZINUgirakOEHHTC98upE-YMUZKuSNTcGczGQeUK2vPnXHaESZ0ph9mFucABerkp1wO-jNL_e0ig8IiqIX6A8T0puWFk4k-L_i-6d5tAd0O/s28/w2b-mail.png) no-repeat scroll 4px center transparent; 
padding:7px 15px 7px 35px; 
color:#666; 
font-weight:bold; 
text-decoration:none; 
border:1px solid #D3D3D3; 
-moz-border-radius: 4px; 
-webkit-border-radius: 4px; 
border-radius: 4px; 
-moz-box-shadow: 1px 1px 2px #CCC inset; 
-webkit-box-shadow: 1px 1px 2px #CCC inset; 
box-shadow: 1px 1px 2px #CCC inset; 
} 
.mbtbutton{ 
color:#666; 
font-weight:bold; 
text-decoration:none; 
padding:6px 15px; 
border:1px solid #D3D3D3; 
cursor: pointer; 
-moz-border-radius: 4px; 
-webkit-border-radius: 4px; 
-goog-ms-border-radius: 4px; 
border-radius: 4px; 
background: #fbfbfb; 
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4)); 
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); 
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); 
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 ); 
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); 
}
#doulike-outer { 
-moz-border-radius: 10px 10px 10px 10px; 
-webkit-border-radius: 10px 10px 10px 10px; 
-goog-ms-border-radius: 10px 10px 10px 10px; 
border-radius: 10px; 
background: none repeat scroll 0 0 transparent; 
border: 1px solid #D3D3D3; 
padding: 8px; 
-moz-transition: all 0.3s ease-out; 
-o-transition: all 0.3s ease-out; 
-webkit-transition: all 0.3s ease-out; 
-ms-transition: all 0.3s ease-out; 
transition: all 0.3s ease-out; 
width:480px; 
} 
#doulike-outer:hover{ 
background: none repeat scroll 0 0 #FFF; 
-moz-box-shadow: 1px 1px 2px #CCC inset; 
-webkit-box-shadow: 1px 1px 2px #CCC inset; 
box-shadow: 1px 1px 2px #CCC inset; 
} 
#doulike-outer td{ 
padding:3px 0; 
} 
</style>
<div id='doulike-outer'> 
<div id='doulike'> 
<table width='100%'> 
<tbody> 
<span style='font-style: italic; font-size: 30px; font-family: arial,sans-serif, verdana;  color:#FF683F;'>Do you Like this article?</span> 
<tr> 
<td>
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='button_count' send='true' show_faces='false' width='300'/>
</td>
</tr>
<tr>
<td align='left'> <p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '>Get Free Email Updates Daily!</p> 
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=asianzfun&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'> 
<input name='uri' type='hidden' value='asianzclub'/> 
<input name='loc' type='hidden' value='en_US'/> 
<input class='mbttext' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email...'/>
<input alt='' class='mbtbutton' title='' type='submit' value='Submit'/> 
</form> 
</td>

<td><p style='color:#666; font-style:italic; margin:0px 0px 5px 0px;  '>Follow us!</p> 
<a href='http://feeds.feedburner.com/asianzclub' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs_q-918HXyWTQ6ltJn8JomhABePnyCIPjRQFSgiTgRl9EiauNdnxNf1xkp99Yk_syvFkn9UgJl29ptRSwkedQt_UYaw3VtOO0Pbuo6fl05z6BRiZdsv9AaAhWogW5ku4IqvsR0L29_SdA/s40/w2bRSS .png'/></a>
<a href='http://twitter.com/asianzclub' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvcnjSo1NdgnrQChWYgbTIKL9btfu6JniBtDUuPu5szintvS1xM-yaXBNKuzinPNWf7T2EYGe9oGowSNaCOXPpMsic94V1dLOVWuj6MYU-mkuSjCcOzGRTifEKCFGqMB9bGYC_AwZC2f8n/s40/w2bTwitter.png'/></a>
<a href='http://www.facebook.com/asianzfun' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2TryskknZHbOKO4dCwYgtfK5h1zHQ_0grwFWSCzLoBSDhRq0sZ1rB0EmDLwqijkvHPSZPq6upuGTYFAs7FnNZHxBQd9Na5noiSLoMFCpGsyHm-8A30557kmZWcqbNQ2w0OOO7iNsVW012/s40/w2bFaceBook.png'/></a> 
</td>
</tr>
</tbody></table></div></div> 
</b:if> 

• #FF683F To change the colour of font.
• btsnts replace red coloured words with your feedburner id.
• http://twitter.com/asianzclubblue colour with your twitter username.
• http://www.facebook.com/asianzfunpink colour with your facebook page id.

* Don't forgot replace my username with your username. 

After you have made all the necessary changes simply save your template and you are all done!

Visit any of your post to see it being displayed just perfectly. This gadget is compatible with all major browsers. I hope you find it helpful.

Posted by Unknown 05:46 0 comments

HOW TO CREATE DISQUS COMMENTS FEED FOR BLOGGER

DisQus has just launched their platform for blogger,wordpress,Java HTML and another platforms webmasters use. This post will teach you how to install DisQus for bloggers blogspot users. What is DisQus and how do we use it? Recently i was looking for an alternative for comments on my blogspot. You will notice that Blogger has a very closed platform for comments, as it has options to comment only for google, LiveJournal, wordpress, AIM, Typepad and OPENid. The majority of your readers will be on facebook , yahoo, google ect. It only makes sense to provide a better way for guests to comment on your blogs. Comments are a greate way for google ranking your blog, as readers voice their opinions their comments are crawled by google making a better chance for hits in google search engine. DisQus blogger platform gives readers a way to quickly subscribe to your blog comments to stay in track with what was commented back to them. This is a rich way for readers to keep in touch over a discussion on a topic. I subscribe to every blog that i comment on other bloggers blogs, its a must do for anyone thats a reader, simply leaving a comment withouot following up would be pointless.

What i like about DisQus is the manageable interface it offers the admin of the blog to control comments. The following features are available for admin blogger:

• Create an online DisQus account to view and manage comments
• Allow readers from various social networks to comment on blogger
• Admin your comments
• Add admins to the account to manage comments
• See who is following the comments
• Install HTML/Java code into blogger
• Disable standard blogger comments
• Embeddable Comments
• Connect DisQus to twittter for friends to comment via tweet on blogger

So how do we get DisQus for blogger free commenting platform that links to facebook and other social networks? Follow these simple steps for dummies:

Step 1: go to DisQus.com HERE and sign up for a new account.

Step 2: Create different Profiles as needed for different blogs or websites.

Step 3: Once u manage all the settings u need, there are to many to state in this blog, however its straight forward. Go click the install button to get code for blogger -> see image below

Step 4: Select blogger as the platform -> see image below

Step 5: Click "add site to blogger" -> see image below

Step 6: Add widget  this will lead you to page elements on blogger.

Step 7: Move the Gadget you just added to blogger directly under your Posts-> see image below

Step 8: Save and view blog.

Disqus for blogger is the best commenting plugin i ahve used for blogger. Let us know if you liked DisQus as much as us, if you did please join iClickMate fan page to view our feeds. Please feel free to test Disqus and comment on this post, Subscribe to iClickMate to get our free eBook with more tips& tricks and daily 

Posted by Unknown 22:24 0 comments