How to add facebook widget to blogger

As you know, Facebook has been implemented by most of bloggers, and Facebook has created a great oportunity for us to increase number of loyal readers just by one click. So, have you got a cool Facebook fan page widget? If not, this tutorial would be for you. I will show you how to add facebook widget to blogger in a absolutely cool way with hover effect. You can see the demo here. And you can implement it for your blog also. What you need to do is following exactly the steps below:







Step 1: Add Jquery Javascripts plugin (if your blog is already added this plugin, you can skip this step)

1. Go to Design / Templates  >>  Edit Templates  >>  Tick the expand widget templates box
2. Find the tag </head>  (Press Ctrl + F to find it)
3. Place this code right above the tag </head>

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

4. SAVE the templates

Step 2: Add Facebook widget code to blogger

1. Go to Page Elements / Layout  >>  Add a Gadget  >>  HTML/Javascripts
2. Place the code below into the content box

<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/AVvXsEhFZDFTSNRNDES_VFv-ND51gOHE5Q4iXwWL7KCdEknGYt8gsFsJIhSkjEdKO_HfWGSlkKHKXvVw5ISnmPbVGVWTwDfWBeFM9qZh2yGGFQIb6_dSidCswgUF1VwS8zDzmTq_3ITec8Lykjw7/s150/w2b_facebookbadge.pn") 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: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}

.w2bslikebox span a{color: #808080;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%3A%2F%2Fwww.facebook.com%2Fpages%2FBlog-On-Blogspot%2F114178088675094&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>/ <a href="http://www.blogonblogspot.com/">+Gadget</a></span></div></div>

3. SAVE

Read More

8:27 PM | 0 comments

Mashable Like Floating Social Bookmarking Widget For Blogger

Its been a while many got impressed with Mashable’s floating social bookmarking widget and many tried and came up with a wordpress plugin. But actually people forgot about creating a floating social bookmarking plugin for blogger. So here in this post, I am going to teach how to add floating social widget to your blogger/blogspot blogs.

Live Demo

Step 1: Navigate to Edit HTML from Blogger dashboard and check Edit Widget Template. Search for ]]></b:skin> and replace it with the below code

#sharebox {
background-color:#FFFFFF;
border-color:#C1CDCD;
border-style:solid;
border-width:1px;
left:103px;
bottom:40px;
margin-top:10px;
position:fixed;
width:64px;
}
#sharebox .float {margin:7px}
.FBConnectButton_Text
{
font-size: 8px;
padding:2px 4px 3px !important;
}
]]></b:skin>

Step 2: This step involves inserting the widget functions into your template. Therefore, place the below code before <div class='post-header-line-1'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='sharebox'>
<div class='float'><script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></div>
<div class='float'><a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/><div class='clear'/></div>
<div class='float'><a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='Post on Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></div>
<div class='float'><script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/></div>
</div>
<a href='http://www.bloggermint.com/2010/06/mashable-like-floating-social-bookmarking-widget-for-blogger/'><font size='0.3'>Bloggermint</font></a>
</b:if>

Thats it and remember, the floating widget is visible only for blog post, so this widget won’t be visible on your blog homepage. If you need any customization on this widget, drop in your comments and you can also leave your questions at Bloggermint Answers

Read More

8:27 PM | 0 comments

SEO plug-in for Blogger blogs

Confused? You shouldn’t be. You might have read about so many SEO plug-ins which are available for WordPress blogs. It’s a little sad that Blogger doesn’t provide built-in SEO plug-ins for Blogger blogs.
Did you ever hear about “SEO Blogger“? This is what I’m going to share in this post.
As the name suggests, SEO Blogger is a SEO plug-in for Blogger blogs which works with Google Chrome and Mozilla Firefox. After adding this plug-in, you can optimize your Blogger post for search engines just after you publish it. This plug-in will ask you to add description and keywords for your post just after you hit publish button (as in the image below).

What will SEO Blogger plug-in do?

SEO Blogger will add the ‘Description’ and ‘Keywords’ for the respective post in the blog template as we did it manually in one of my post (How to add meta-tags for individual blogger blog post?)

The code which will be added in the post will be same as in the above post but with this plug-in you can do it just after publishing your post.

When you’ll click on ‘Submit’ the code like in the following image, will be added to you template;

Get this Plug-in

To use this plug-in, you have to work with the old interface of Blogger. As I said above, this plug-in will work with Chrome and Firefox, so if you are using some other browser, then you have to switch to one of these browser in order to work with this plug-in.

Steps to get this plug-in;

1. Back-up your template (How and Why).
2. Install Grease Monkey Add-on (click here) , first. (only for Firefox users. Chrome has this script, already)
3. Now, click here to install SEO Blogger script.
4. Restart you browser.

That’s it, you are done. Now you can go to your post editor, write down your article and add the keywords and description of your article just after you hit publish.

Note: After you hit Submit button, you may have to wait for few seconds to let the plug-in do it’s work.

I hope it will help you to optimize your blog post for search engines, easily.

Do you know about any other SEO plug-in for Blogger or may be for WordPress?

Share with us.

Read More

8:21 PM | 0 comments

28 Blogger Widgets And Plugins

Blogger platform has undergone major improvements in last two years. Not only the blogger development team has added several new features to the platform,, but countless new blogger templates are being developed around the globe. Here are some best widgets and plugins for blogger powered blog that can spice up your blog for better reader experience.

1. Top Commentators Widget by BloggerPlugins – This excellent plugin has two versions. One for blogs having small number of comments and the second variant for blogs receiving lots of comments.
2. Translation Widget by BloggerPlugins – This one click install widget add multiple language translation support to your blogger blog.
3. Recent Post Widget by BloggerPlugins – This is highly customizable widget. You can set number of posts to display, post summary and it’s length.
4. Recent Comments Widget by BloggerPlugins – A highly customizable widget. You can set the number of comments to display, author name, date and size of comment. You can also use CSS to gel it with your theme.
5. Label Cloud Plugin by phydeaux3 – This is one of the most popular label cloud generation plugin for blogger. You can customize various options after installing this plugin.
6. Archive Calendar Widget by PurpleMoggy – Very impressive archive calendar widget with customizable options.
7. Archive Calendar Widget by phydeaux3 – Another very popular archive calendar widget. Highly customizable for better browsing experience for the readers.
8. Recent Posts Widget by Feed2JS – This excellent plugin makes plugin installation and customization very easy. Just fill in the form and click the button to generate widget code.
9. Recent Comments Widgets by Blogger-Templates – Just fill in the options in the form and one click widget code generation. Excellent plugin which is highly customizable.
10. Picasa Web Albums Slideshow Widget by Blogger Templates Designs – A unique plugin to show photo slideshow from any picasa account. Ideal for personal blogs, photo blogs and web design blogs.
11. Search Form Widget by Blogger Templates Designs – If you want to add site search box in your blog’s sidebar, install this plugin.
12. Google Talk Widget by Blogger Templates Designs – This plugin adds the Google Talk client to your blog so that your readers can directly converse with you.
13. Recent Comments Widget by Blogger Templates Designs – Yet another recent comments widget with customizable options and one-click install.
14. Sudoku Game Widget by Blogger Templates Designs – Want to add some interesting puzzle games for your visitors? Then install this plugin to integrate sudoku puzzle game in your blogger blog.
15. Google Translate Mini-Flags Widget by MadToMatoe – Very useful translation plugin powered by ‘Google Translate’. One click install with multiple language translation facility.
16. Recent Comments Widgets by MadToMatoe – One more recent comments widget for blogger blogs. Again you can customize the number of recent comments to be displayed.
17. Reactions Mini-Poll Widget by ThemeLib – Want to host a poll on your blogger blog? Install this plugin and get customizable polls for your readers.
18. Alexa Traffic Widget by TechKnowl – Display your Alexa stats with this customizable widget.
19. Snow Flakes Widget by TechKnowl – Add a stunning snowfall effect in your blogger template in the festive season.
20. Popular Posts Widget by TechKnowl – A very simple popular posts plugin using Yahoo pipes to filter out popular posts on your blog.
21. Flash MP3 Player Widget by TechKnowl – This cool plugin allows you to embed flash mp3 player in your blogger blog. The player is very light with custom options.
22. Related Content Widget by Outbrain – If you want to integrate related content system with your blogger posts, then this excellent plugin is the best choice. It has rating system plus related posts integration in same widget.
23. Tab View Widget by Hoctro – The coolest plugin showing tabbed posts with animated post excerpts. A must for your blog’s sidebar.
24. Random/Rotating Banner Widget by FreeYaSoul – Very useful widget for displaying rotating banners in your blog’s header. You can customize and can choose any number of headers.
25. What’s Next? Section Widget by eblogtemplates – Integrate a WordPress style ‘What’s Next’ section below blogger posts with this excellent widget.
26. Twitter Profile Widget by BloggerBuster – Add your twitter profile and twitter updates with this useful plugin developed by Amanda Fazani.
27. Bookmarking Widget by SocioFluid – One of the best social bookmarking plugin for blogger. Big animated icons with one click installation.
28. Advanced Recent Comments Widget by Csabi – This is highly customizable recent comments widget. The number of configurable options provided by this widget makes it one of the best recent comment widgets for blogger platform.

Read More

8:18 PM | 0 comments

Default Web Browser ของIE,Chrome,Firefox,Opera,Safari

วันนี้ผมต้องแอบเขียนบทความนี้นะครับแบบว่า มันมีเวลาน้อยเอาอะไรง่ายๆๆก่อนแล้วกันนะครับ

Default Web Browser เปลี่ยนค่าปริยาย เป็นเว็บบราวเซอร์เริ่มต้น IE,Chrome,Firefox,Opera,Safari บทความนี้ไม่เกี่ยวข้องโดยตรงกับการเขียนโปรแกรม แต่ก็ใช่ไม่จะไม่เกี่ยวข้องเลย เพราะในทางปฏิบัติถ้าหาเราเขียนโปรแกรมแสดงบนผล Web Browser จำเป็นจะต้องติดตั้ง Web Browser หลาย ๆ ตัวในเครื่องเดียวกัน เพื่อทดสอบการทำงาน ดังนั้นลงติดตั้งหลาย ๆ ตัวปัญหาการ Set ให้เป็น Default Web Browser เริ่มต้นก็ย่อมมีแน่นอน ฉะนั้นบทความนี้จึงได้รวบรวมวิธีการเปลี่ยนแปลงค่าในWeb Browser ต่าง ๆ ซึ่งครอบคลุมค่ายดัง ๆ ที่ได้รับความนิยมเช่น Internet Explorer (IE) , Google Chrome , Mozilla Firefox , Opera และ Safari
1. Internet Explorer (IE) การเปลี่ยน Default Web Browser ใน Internet Explorer (IE)
เปิดหน้า Web Browser ของ Internet Explorer (IE)

ไปทีเมนู Tools - > Internet Options

ไปที่ Tab ที่ชื่อว่า Programs ให้คลิกที่ Make default ตามรูป

---

---

2. Google Chrome การเปลี่ยน Default Web Browser ใน Google Chrome
เปิดหน้า Web Browser ของ Google Chrome

เลือก Settings ตามรูป

เลื่อนลงมาประมาณช่วงกลาง ๆ จะมีให้คลิกที่ Make Google Chrome my default browser

---

---

3. Mozilla Firefox การเปลี่ยน Default Web Browser ใน Mozilla Firefox
เปิดหน้า Web Browser ของ Mozilla Firefox

คลิกที่เมนู Tools -> Option

คลิกที่ Tab ของ Advanced -> General คลิก Checkbox ว่า Alway check to see if Firefox is the default browser on startup และคลิกที่ Check Now

จะมีหน้าจอยืนยันให้คลิกที่ Yes

---

---

4. Opera การเปลี่ยน Default Web Browser ใน Opera
เปิดหน้า Web Browser ของ Opera

คลิกที่เมนู Opera -> Settings -> Preferences ตามรูป

คลิกที่ Tabs ของ Advanced -> Programs คลิกเลือก Checkbox ที่ว่า Check if Opera is default browser on startup และ OK ตามลำดับ
- Max OS
ให้คลิกที่ Preferences > General ส่วนของ Default Web Browser ให้เลือก Opera

---

---

5. Safari การเปลี่ยน Default Web Browser ใน Safari
เปิดหน้า Web Browser ของ Safari

คลิกที่เมนู Setting -> Preferences (ตามภาพ)

คลิกที่ Tabs ของ General ในส่วนของ Default web browser : ให้เลือกเป็น Safari

---

---

หลังจากเปลี่ยนเรียบร้อยแล้ว เมื่อคลิก Link จาก Application ต่าง ๆ ที่ทำการเปิด Web Browser ก็จะเรียก Browser ที่ได้กำหนดค่า Default ไว้

โดยสังเกตุว่า Icons ต่าง ๆ ที่เป็นพวก .html หรือ .htm ที่เปิดด้วย Web Browser จะมีการเปลี่ยนไปตาม Icons ของ Web Browser ที่เป็น Default

Read More

8:16 PM | 0 comments