How To Add Floating Facebook Likebox To Your Blog Blogspot
STEP 1. Adding JQuery Plugin To Your Blogger Blogs
1. Go To your Dashboard > Design > Edit HTML
2. Search for </head> before it Paste the following JQuery code.
3. (Ignore this step if you have already added JQuery Plugin to your blog).
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
4. Save Your Template.
STEP 2. Add Floating LikeBox To Your Blogger Blogspot
1. Go To Blogger > Design > Page Elements
2. Click on "ADD A GADGET"
3. Choose HTML/JavaScript Widget
4. Paste the Following Code inside it.
<script type="text/javascript"> //<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate ({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");},
500);}); //--> </script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4EJO_ql0OxK-P1Tw9FyZGzgUvJZQzdCxTHsAKDSKCqh-3cYMD6oNZIy872VbeTVYTLQVwYDCtmmomkspHfCl_xX-Hwpsv3BF-4bd_2mRlqS_Yj470OiqnTVyA1sOsGsUVart86a0R1JKi/s1600/facebook1.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 10px;font: 9px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #FF9D00;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/pages/Shivammaurya007/392058560854305;
width=245&colorscheme=light&show_faces=true& connections=8&stream=false&header=false&height=330" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span>Widget by:<a href="http://www.blogger4ever.com">Blogger 4 Ever</a></span></div></div>
5. Save your Widget!
Visit your blog to see it floating at right side of your webpage. That's it
Enjoy!
Official Android App for Blogger
Good news for all android Folks!!. Blogger has released an official Android App. Its simple and neat and does the job perfectly. You can create a post or make drafts from your android device.If you are an android user, try it out by downloading the App from the Android market
Features
Switch between Google Accounts as in any other Google Android App
Publish posts or save drafts
Upload photos from your android gallery, or take one on the fly with the mobile camera and post it
Share your location and geotag your post.
Share your Gallery images easily to Blogger. ( A blogger option will be added to your Share Menu)
View and Edit saved Drafts/ Published Posts made from the mobile app(not the ones that already exist)
You can find more details about all these features at the Blogger Buzz Post.
The app does a neat job though it doesn’t give you much power in formatting your posts properly. This is the first ever version of the official Android App, so maybe we could expect many more features in the future.
A Sample Mobile post from my phone : androiddemobloggerplugins.blogspot.com
You can provide feedbacks about this application to the blogger team and help them in developing better versions
How To Host Blogger Files and Scripts On Google Code
Blogger tweaks or even adding a new widget to blogger template constantly require the use of JavaScript and CSS for customization. Hosting a JavaScript and CSS proven to be better practices than installing it directly to the HTML. This way, the load time will be more faster and more cleaner HTML template.
One of the free option to host a files is by using Google Code. Google Code runs a Project Hosting service that provides revision control offering Subversion, Mercurial and Git, an issue tracker, a wiki for documentation, and a file download feature. This means, with the 200MB file limit, you can upload any file, JavaScript, Image, Video, CSS, Documents etc with no restriction.
You must know that Google Code Project Hosting is a shared hosting rather than regular web hosting services. So all projects hosted on Google Code are Open Source, and are available for anyone to view or download.
Various Licenses are used for the files served by Project Hosting including GNU General Public License (GPL), MIT License etc.
Google Project Hosting
Step 1.
Go to Google Code Project Hosting Sign in with your Gmail ID and fill the required fields. Choose License as MIT License and Version Control System as Mercurial and Press Create Project..
Step 2.
On the next window Click the New Download link under the Downloads Tab. See the screenshot below:
Next to summary field give your file name and hit the browser button to locate your file. Click Submit File and you are done!
Step 3.
Click your uploaded file and you will be taken to a new page.
Clicking it again will popup a download window but we don't need to download it. Instead right Click the file and Choose "Copy Link Address" or "Copy Link Location" this link is what you would need when linking to the file through your blogger Edit HTML section.
If you want to make a change, make a new download or delete files, just go to Google Code Project Hosting homepage and Click the My Favorites link on the top-right corner and select your projects.
How To Add Sliding Twitter Followers Box To Your Blogs
Many tutorial gives you how to add floating Facebook, Twitter, Google +1 share buttons. Now I come up with new tutorial for adding Sliding Twitter like Box for your Blogs.
This is a great way which requires almost no space and it looks more attractive than that of simply keeping the like box, it will float on your blog/website, and when the visitors mouse over it will animate by sliding of left. So lets add this cool sliding Twitter like box to your blogger blogs.
STEP 1. Adding JQuery Pluging To Your Blogger Blogspot
1. Go To your Dashboard > Design > Edit HTML
2. Search for </head> before it paste the following JQuery Code.
3. (Ignore this step if you have already added JQuery Plugin yo your blog).
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
4. Save your template
STEP 2. Add Sliding Twitter Like Box To Your Blogger Blogspot
1. Go To Blogger > Design > Page Elements
2. Click on "ADD A GADGET"
3. Choose HTML/Javascript Widget
4. Paste the Following Code inside it.
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".twitterboxot").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function()
{$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//--> </script>
<style type="text/css">
.twitterboxot{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL6zkEi6epqfCC8BobncEUymPJoCdA0sd9ou6qSbKUdjV8Pdr3aFSrenJgTLa6B4d4jgDRhc8BTF8gzfSiTs8h5by7Tv2_12FZZ3_oGc9kigNrEiVob8lWj10rfGYezQ96mXIFeErZJZk_/s1600/twitterbox.png")
no-repeat scroll left center transparent !important;
display: block;
float: right;
height: 240px;
padding: 0 5px 0 46px;
width: 245px;
z-index: 99999;
position:fixed;
right:-250px; top:20%;}</style>
<div class="twitterboxot"><div>
<script type="text/javascript"
src="http://script-ot.googlecode.com/svn/twitterbox.js"></script><div
id="twitterfanbox"></div>
<script type="text/javascript">fanbox_init("shivammaurya9");</script></div><div style="font-size:10px;">
</div></div>
5. Replace shivammaurya9 with your Twitter Username. Save your template.
Visit your blog to see Sliding Twitter Like Box at right side of your webpage.
Add Floating Facebook Like Box To Your Blogger Blogspot
Add Floating Share Buttons To Your Blogger Sidebar
How to Add Alertpay Payza Donate to Your Blogger
Today I will enlighten you with How to Add Alertpay Donate to Your Blogger
any times I have read about a alertpay donate button. you know those button where the users can donate small amount 2 the site. But finding 1 is really tough. Paypal™ has a donate button, but you can donate only if you have a Paypal™ account. But everyone doesn't has a Paypal™ account.
So the other option is 2 allow people to use their credit-cards to donate. But to enable this feature you have to pay an excess of 20-25%. Now that is a real rip off.
Another option is Alertpay™, they allow credit-card transaction 4 free after a simple site verification. But the problem is they don't have a ready made donate button. So the option is to use a buy button as a donate button.
But now the problem is that the amount 4 a buy button is fixed (as you don't want the user to decide the amount for a purchase), but in case of a donation the user wishes to select the amount to donate.
Now I searched the net 4 sometime & finally found a code which allows the user to change the amount to donate as per their wish. But it had some problem, just a glitch as you can add any text in the text box. Now that is silly as no one would enter alphabet in that text box but Y take the risk so I found a script & modified the Code so that only positive integers can B entered in the text box.
So here is the code:
<html><head>
<!– Code written by someone else but the whole thing is made by Tanmay Das –>
<script language="JavaScript">
function checkIt(evt) {
evt = (evt) ? evt : window.event
var charCode = (evt.which) ? evt.which : evt.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
status = "This field accepts numbers only."
return false
}
status = ""
return true
}
</script></head><body>
Enter Donation Amount:
<form method="post" action="https://www.alertpay.com/PayProcess.aspx">
<input type="hidden" name="ap_purchasetype" value="item-goods">
<input type="hidden" name="ap_merchant" value="mshivam86@gmail.com">
<input type="hidden" name="ap_itemname" value="Donate">
<input type="hidden" name="ap_returnurl" value="Thank you page">
<input type="hidden" name="ap_quantity" value="1">
<input type="hidden" name="ap_description" value="Your each penny will keep us to continue">
<input type="text" name="ap_amount" value="" onKeyPress="return checkIt(event)">
<select name="ap_currency">
<option value="AUD">AUD</option>
<option value="BGN">BGN</option>
<option value="CAD">CAD</option>
<option value="CHF">CHF</option>
<option value="CZK">CZK</option>
<option value="DKK">DKK</option>
<option value="EEK">EEK</option>
<option value="EUR">EUR</option>
<option value="GBP">GBP</option>
<option value="HKD">HKD</option>
<option value="HUF">HUF</option>
<option value="LTL">LTL</option>
<option value="MYR">MYR</option>
<option value="NOK">NOK</option>
<option value="NZD">NZD</option>
<option value="PLN">PLN</option>
<option value="RON">RON</option>
<option value="SEK">SEK</option>
<option value="SGD">SGD</option>
<option value="USD" selected="selected">USD</option>
<option value="ZAR">ZAR</option>
</select>
<input type="hidden" name="ap_cancelurl" value="your cancelation url">
<input type="image" name="ap_image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeASKLUL4-qtYxhRN7e630tGcfwsVTkd2FGxHkJOfzQ-7-3gNDSPuXgJ2DMzFvF9oUfURFVGRfzhny-A71bqUxtOoLeVErdmNy_DFIh7WgkjC-71LQXTnkJEoKKyXi0xbj_sCUxDLuxpI/s1600/alertpay+donat.gif.png">
</form>
</body>
</html>
ADD STYLISH EMAIL/SOCIAL SUBSCRIPTION BOX V3 IN BLOGGER BLOG WITH HOVER EFFECT
I have provide so many email subscribe box for blogger. Now again I come up with Social Subscription Box V3. Social Networking giants i.e. Google plus, Facebook, Twitter, and RSS which does provides quality traffic to websites without building Backlinks or spending money on Search Engine Optimization. It is getting necessary to socialize your blog on different social networking website because it not only provides exposure but builds quality readers. In the same way, you have to promote your Social Pages on your website, so anyone who comes either directly or From Search engine could become your regular readers.This widget contains links of Facebook Fan page, Google+ page and twitter follow button, RSS and an attractive subscription form that will increase the number of your Email subscribers. When you hover your mouse over these icons the icons rotate by 360 degree and providing a beautiful hover effects. When reader's look a simple subscribe box, they will not subscribe. But this subscribe box has attractive and awesome look, so your blog reader's will subscribe, sure. You can add this subscribe box to blogger very easily and simple
worlds most popular blog about tips & tricks this blog provide all kind of tips & tricks like mobile, desktop, windows, google, java, sql, oracle, html, maths, science, english, hindi, blogs, websites games and much more..
ReplyDeleteVisit ===> https://mkbloggers.blogspot.in
shivammaurya4604@gmail.com
ReplyDelete