How to Add a Pop Out Facebook Like Box in Blog or Website?

If you wanna add a Pop-Out Facebook Like Box in your website or blog, first you must have a Facebook Page. If you already have it then it's OK. But if you don't have it, then create a Facebook Page with your FB account. 

Many websites or blogs have a Facebook Like box in their pages. But adding a Facebook Like box may consume valuable space. As a result, many people are no longer willing to add it. Pop Out  Facebook Like Box may be the solution of this problem. 

I'm gonna share a small script with you. By this script you can easily add pop out like box in your site. Just place the below code in the header of your page. I believe this simple code should work for all. 

And if you use this code on blogger then follow the steps below: 

1. First sign in in your blog and hit on the design button from the top right corner.
2. Then choose the layout option.
3. Here you'll find several buttons to add a gadget. 
4. You can choose anyone it doesn't matter. Click on Add a Gadget.
5. Now you'll see a list of gadgets. Choose HTML/ JavaScript. 
6. Then copy and paste the below code in the content box > Save > Save arrangement.
7. Now visit your blog and see the result. 

<script
   type="text/javascript"
   src="http://www.monkeyphysics.com/fb-sidelike/fb-sidelike.js"
   fbpage='markspcsolution'></script>

NB: Replace the red part of the code with your Facebook page name. 

Customization: You can't directly customize this code.
Because this code is just a script. The original code is located in the server. If you wanna customize this code then you must upload the original code in your own server. You can download the code from the links below: 

1. Code Script. 
2. Image 1 and Image 2. 

And if you use your own server then replace the script tag with you own server. 
I mean- src="http://www.monkeyphysics.com/fb-sidelike/fb-sidelike.js"

Stay with Marks PC Solution to get more interesting IT topics!

How to Add StumbleUpon Button in Website or Blog?

StumbleUpon is a very popular bookmarking site. If you stumble your blog or website or if the reader of your site do it, then definitely you'll get a traffic boost. This site is very helpful to drive traffic on your blog.

But nobody like to stumble your page by copying link from your site and paste it into StumbleUpon.com. And this is not logical too. 

So what should you do? You can place a html code in your page. So that you or someone else can easily stumble your posts. It is as easy as placing a html code. Let's try.

1. If your blog is powered by blogger then sign in to it. Then go to the design option. Then hit on layout button. Now you'll find several Add a Gadget button. Hit a button where you wanna place the stumble upon button. (If your site is powered by WordPress or any other CMS then follow the steps that let you add the html code on your page.)
2. Then you'll see a list of gadgets to be placed on your blog. Choose HTML/ Java Script. 
3. Here you'll find two boxes. One is for name and another is for content. Don't write any name of this gadget. Just copy and paste the below code in the content box. 
4. Now save this window and then hit on Save Arrangement button. 
5. Then click on View Blog button and see the result. 

<!-- Place this tag where you want the su badge to render --> 

<su:badge layout="5"></su:badge>  <!-- Place this snippet 

wherever appropriate --><script type="text/javascript">   

(function() {       var li = document.createElement('script'); 

li.type = 'text/javascript'; li.async = true; li.src = window.location.

protocol + '//platform.stumbleupon.com/1/widgets.js'; var s 

= document.getElementsByTagName('script')[0]; s.parentNode.

insertBefore(li, s);   })();   </script>

This code will create a button like below: 

Stay with Marks PC Solution to get more interesting IT topics!

How to Add Flag Counter in Blog or Website?

If you've a blog or website then you may need a flag counter to know where do your site's visitors come from? Or how many countries has your blog reached so far? 

Today I'm gonna share a html code with you. This code will show the total page views of your site with total number of countries, unique visitors per country with flag label. All you need to do is just place an html gadget in your page. Or if you're new, then follow the simple steps below: 

1. If your site is powered by blogger then sign in to your account. Then go to the layout option from the design. Then click on Add a Gadget where you wanna place this flag counter. Or if you're on WordPress or any other CMS system then follow the steps that let you add an HTML code on your site. 
2. Then select HTML/ JavaScript. 
3. Now copy and paste the following HTML code in the box and click save. 
4. Then click on Save Arrangement. 
5. Now visit your site and see the result. 

<a href="http://s06.flagcounter.com/more/sqB"><img src="http://s06.flagcounter.com/count/sqB/bg_FFFFFF/
txt_000000/border_CCCCCC/columns_6/maxflags_30/
viewers_Visitor+Counter+by+Flag/labels_1/pageviews_
1/flags_1/" alt="free counters" border="0" /></a>

Customization: You can customize the above code as below. 

1. Number of Column: Notice the red colored (columns_6) text of the code. You can use 2, 3, 5 or more. This number determines how many columns will be displayed for showing flag. Maximum 8 columns can be displayed. 
2. Maximum Flag: Then see the green colored part (maxflags_30). It means what will be the maximum number of flag. You can choose 20, 30, 40 etc. You can choose more than 100. But     I prefer below 30. Because choosing more than 30 flag will increase the loading time of your page.
3. Flag Label: Now move to the purple colored part (labels_1). Labels_1 means it will show the label after the flag image. For example: US, UK, BD, PK etc. But showing label increase the size of the flag counter. If you wanna hide the label then replace the text as labels_0.  

Stay with Marks PC Solution to get more interesting IT topics!

How to Create a Custom Toolbar for Website

A customized toolbar of your blog or website may increase visitors loyalty. If they found your toolbar useful they can use it in browser. And this is also important for your site's ranking. There may be hundred ways to build a toolbar. Some of them are free or some may be premium. 

For creating toolbar, my personal choice is Alexa. Why? 

• Because it's free and easy to use. 
• You can easily monitor the usage statistics. 
• And most importantly, alexa is a ranking site. It measures websites ranking from 1 to the last. 
• Alexa considers the site most that has its toolbar and widget in the page. 

Let's build a toolbar now. 

1.  First go to the Alexa and register an account. It takes 2 or 3 minutes. If you already have 
     an account then proceed to the next step. 

2.  Now go to the toolbar creator page.

3.  A pop up window will ask you to enter the toolbar name. Type the name or skip it. 
     You can write a name later.

4.  Now look at the image below. Here you can edit toolbar name and choose a logo. 

5.  Have a look at the Add buttons that drive traffic to your website. There are 4 buttons.  

     Only add the buttons that is necessary for you. Because you can't add 

     all the buttons due to the space limitations. 

6.  Now move to the Add social networking buttons section. Add only the first 2 buttons. 

     Show tweets button is not necessary. Click Next. 

7.  Add buttons for things that your users do everyday. This is the most useful part for 
     the users. I recommend you to add the Personal Twitter and Gmail button. Click Next.

8.  This step let you add an icon for the toolbar. You can either choose an icon made earlier 
     or use the default. I prefer to use the custom image. Click Next.

You're almost done. Publish it to make the toolbar available for download. But how can your visitors will get it? 

Go to the dashboard and click on your toolbar. Then you'll find different shapes and colors. Choose the color and shape as your choice from step 1 and 2. Then add a HTML gadget in your blog by the html code from the step 3. Place the gadget in a part of the page where the visitor can easily find it.

Currently the alexa toolbar works with Chrome, Firefox and IE. Hope it will support more browsers in the future. 

Have a look at the sample toolbar below: 

Click to enlarge

If you have any query regarding toolbar creator then leave a comment. 

Stay with Marks PC Solution to get more interesting IT topics!

Boost your Traffic with Link Collider

In this post I'm gonna share a site with you. This site will help you to boost your blog or website visitors. And at the same time it will also increase your site's Google +1, FB Like, Twitter Follower etc. 

And I can assure that, you'll not feel any harassment while using this site. Simply register and follow my instruction. 

1. First visit this site. Link Collider
2. Then register by your contact email and enter a password and confirm it. Now submit it.
3. Now go to your mail inbox to confirm the registration. NB: Also check your spam box.
4. Now it's time to add your website or page.Click on Post a Website / Facebook Page.
5. Now fill up the form properly. You should choose an attractive logo with an ideal description of the site. Then save it.  
6. Look at the Collect FREE Tokens button next to Post a Website / Facebook Page. There are 8 categories- Like, Tweet, Share, Follow, Auto etc. 
7. Collect tokens by these categories. You must have Google Plus, Facebook, Twitter and YouTube Account to perform these tasks. And make sure you're signed in all of these accounts in the same browser while doing these. 
8. You can monitor your sites by clicking on My Websites button.

Caution: These types of link building and SEO sites are the targets of hackers! So I recommend you to use your alternative Email ID other than your primary ID. And you should use a different password other than your Email account password. 

NB: You've to regularly visit this site and collect tokens to increase your traffic. 

Stay with Marks PC Solution to get more interesting IT topics!

How to Backup or Restore Blogger Template?

Blogger let you backup your whole blog template. Keeping a backup copy of the template is specially necessary for new bloggers. If you're a new user you may customize your blog by taking helps from others. But if you make any mistake you may lose your customized blog template. In that case you have nothing to do other than restoring the default template. 

However if you keep a backup copy of your blog template then you can use it in other blogs too! Even you can share the same template with your friends. Besides if you make significant changes of your template and get it back in a previous stage then you must have a backup copy. 

To backup or restore your blogger template follow the steps below: 

1. First make sure you're signed in on your blogger account.
2. Then go to design.
3. Now click on the Template button from the left panel. 
4. Then click on Backup/ Restore button from the top right corner of the screen.
5. To download the template, hit on Download Full Template button. And if you wanna restore template then choose previously saved template file. 

The following picture may be useful for you. 

Stay with Marks PC Solution to get more interesting IT topics!

How to Backup or Restore Blogger Blog?

If you're blogger then you may need to backup your entire blog. If you lose your password or if your account is hacked then you can restore your whole blog in a new account. Or you can export your whole blog if you've a back up copy of your blog. 

To back up your blog, follow the steps below: 

1. First, make sure you're using the new interface of blogger.
2. Now go to the Settings option and choose Other.
3. Hit on Export blog from Blog tools.
4. Then click download blog.
5. Now your whole blog will be saved as .xml file.

To restore or import your blog, follow the steps below: 

1. Go to the Settings option from blogger and choose Other.
2. Now hit on Import blog.
3. A window will let you choose the .xml file. 
4. Now choose the .xml file that you previously download from your blog. 

Stay with Marks PC Solution to get more interesting IT topics!

Submit Your Website or Blog in Search Engines for Free

Web developer or blogger already know that it is not a very easy task to drive traffic from search engines. It takes huge time to perform SEO activities for a site. Forum posting, article writing, social connection, back linking, keyword selection and so many tasks need to be performed for SEO. 

But the most important task is to submit your site in the search engines. The most popular search engines are Google, Yahoo, Bing etc. Besides there are thousands of small search engines available in the web. 

But the submission is a very time consuming task. Specially when you need to submit your site to the search engines one by one. And this is very critical too. For your convenience there are also some sites that make your task easy. All you need to do is just submit your website or blog to those sites and they will automatically submit your site to the search engines. 

1. Diggza
2. Free Web Submission
3. SEO Scores
4. Add URL Free
5. Add Me
6. Submit Express

All of the above sites will submit your web or blog to the search engines for free. The procedure differ slightly. But the basic procedure is same. 

• You've to submit your site's URL and your Email ID.
• Then agree with their terms and conditions.
• Check your Email and confirm submission if asked.
• And resubmit your site once in a month. 

Tips: 

• You don't need to submit your site in all of the above sites. Choose one or two of them that is suitable for you. 
• Use an alternative Email instead of your primary Email. Because you may receive many unnecessary messages from those sites.
• Don't submit your sites very often. 
• Only submit your home page URL (eg. www.munnamark.blogspot.com). 

Stay with Marks PC Solution to get more interesting IT topics!

Add a Moving Text Bar on Your Blog

Visit Marks PC Solution to get more interesting PC and Internet Tips

Today I will give you a code that is really really useful for bloggers. You have already noticed that this post has been started with a moving text. And from this post you'll learn how to add this on your blog. 

Before starting I wanna say you, this bar can be used as news headline or notice bar. Or you can use this for any purpose. It's simply an html code that can be place anywhere of your blog. If you place it at the top then it can be used as news bar. You can also put it on the side or bottom of your blog. But make sure you're customizing the size and using the bar properly with the place where you wanna insert it. 

Let's start. (Make sure you're using new interface of blogger)

1. First, go to the design option from your blogger page. 
2. Then hit on Layout option from the left panel.
3. Now click on Add a Gadget from any part of your layout. I prefer top.
4. Now scroll down and choose Html/Java Script then copy and paste the code below.
5. You're done. Save the code and refresh your blog page. 

<!-- This Script is from munnamark.blogspot.com, Coded by:  Md. Abdur Rahaman--> <div align="center"><font color="#ffffff" size="+1"><marquee bgcolor="#000080"direction="left"loop="20" width="100%"><strong>Visit Marks PC Solution to get more interesting Computer and Internet Tips </strong></marquee></font color="#ffffff"></div> <font face="Arial"><a target="_blank" href="http://www.munnamark.blogspot.com/"><span style="font-size: 7pt; text-decoration: none">Visit Marks PC Solution for Computer and Internet Tips</span></a></font>

You can customize the code as below : 

• Replace the red text of the code with your text. 
• loop is 20. You can choose more or less than 20. It means your text will be shown 20 times.
• div align center. You can use right or left.  
• Direction is left. You can use right. 
• Width is 100%. You can use 40, 50 or 70% too.  

Stay with Marks PC Solution to get more interesting IT topics!

Add Facebook Like Button on your Blog!

Today social sites are very much important for webmasters as well as blogger. Because it has a great contribution on SEO. Social sites can influence the visitors to visit your site. But you may not have enough time to share your blog in social sites as you're busy with increasing your site's contents. 

So, in this post I am giving you a simple code by which you can place a Facebook Like button on your blog page. Follow the steps below: 

1. First go to www.blogger.com
2. Then go to your blog's layout option.
3. Now click on Add a Gadget.
4. Here you'll find a list of gadgets. Scroll down and select HTML/ JavaScript gadget.  
5. Now copy and paste the following code in the gadget box. 
6. Now save the gadget and refresh your blog to see the result! 

<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>

Now, whenever you or someone else click on this like button it will be directly shared on the associated Facebook profile page. But he should be signed in with his Facebook Account. And you'll also get a comment box when you click on this button. 

Stay with Marks PC Solution to get more interesting IT topics!

How to Add Page Number on Blogspot

By default your blogspot blog doesn't provide any page numbered navigation system. Instead of it the usual themes provide Newer Post, Home and Older post. But reader of the blog as well as the admin of the blog how difficult it is to navigate in this system. 

In this post I am providing a code that can turn your old navigation system into numbered navigation system.  

It is as easy as adding a gadget. All you need to do is just add a HTML or JavaScript Gadget. Just follow the steps below: 

1. First go to www.blogger.com
2. Then go to your blog's layout option.
3. Now click on Add a Gadget.
4. Here you'll find a list of gadgets. Scroll down and select HTML/ JavaScript gadget.  
5. Now copy and paste the following code in the gadget box. 
6. Now save the gadget and refresh your blog to see the result! 

<style type='text/css'>#blog-pager{padding:10px 0;clear:both;}
.showpageNum a {color:#333333;text-decoration:none;border: 1px solid #CCCCCC;margin:0 3px;padding:3px 7px;background-color:#FFFFFF;}
.showpageNum a:hover, .showpage a:hover, .showpagePoint {color:#333333;border: 1px solid #CCCCCC;padding:3px 7px;background-color:#CCCCCC;margin:0 3px;}
.showpageOf {color:#333;text-decoration:none;padding:3px 7px;margin: 0 3px 0 0;}
</style>
<script style='text/javascript'>
var numshowpage=10;
var postperpage =5;
var upPageWord="Previous";
var downPageWord="Next";
var urlactivepage=location.href;
var home_page="/";
</script>
<script style='text/javascript' src='http://bloggerblogwidgets.googlecode.com/files/way2blogging_bloggerpagenavi.js'></script>

This gadget will create a number system like below:

Stay with Marks PC Solution to get more interesting IT topics!

How to Add Google +1 Button on Blogspot Blog

Blogger provides an easy way to insert a Google +1 Button on your blog page. You can add this by following some easy and simple steps. 

Let's do it. 

1. First you need to make sure that you're using the new style of blogger interface. If you're still using the old interface then change it from Blogger. 
2. Now go to the blogger home and hit on layout option. 
3. Now click on Add a Gadget button. Select a button from where you wanna place the +1 button. I prefer somewhere at the bottom. 
4. After hitting on Add a Gadget button you'll find a list of gadgets. 
5. Now hit on +1 Button.
6. Here you can customize the button as you like. 
7. Now save it and refresh your blog page to see the result.

Stay with Marks PC Solution to get more interesting IT topics!

How to Create Anchor Text in HTML and BB Code

The blogger and and web masters need to create thousands of back links in different sites or forums. And they don't need to learn how to create links in HTML or BB Code. But some of you who don't know how to create HTML link this post is for them.  

HTML anchor text link:

<a href=http://www.munnamark.blogspot.com>Marks PC Solution</a>

Yellow = the link code going to my website

Green = the anchor text

The result will be like this: Marks PC Solution

If you want to link to another website simply change the website URL and the ANCHOR text.

BBC anchor text link:

This code can vary from forum to forum as there are many variations of this code.

[url=http://www.munnamark.blogspot.com]Marks PC Solution [/url]

Yellow = the link code going to my website

Green = the anchor text

Stay with Marks PC Solution to get more interesting IT topics!

Add a 3D Visitor Map on Your Blog for Free!!

When visiting the various web sites you may notice that some sites have stylish visitor counter. There are different styles and shapes of this counter. A revolving visitor map can increase your site's beauty and it can show the popularity of your page too. So why you don't adding one? 


Adding a 3D visitor counter is very easy. Follow the steps below: 

1. Open your blogspot site and go to design.
2. Then hit on Layout option.
3. Now click on add a gadget (Choose gadget from the place where you want it to be placed).  
4. Now choose HTML/ Java Script gadget from Add a Gadget 
5. Now copy and paste the following code in the content box and save.
6. Now save the code and save arrangement. Check the result. 

<script type="text/javascript" src="http://jf.revolvermaps.com/r.js"></script><script type="text/javascript">
rm_f1st('0','220','true','false','000000','5nkzpd600sp','true','ff0000');
</script><noscript><applet codebase="http://rf.revolvermaps.com/j"
code="core.RE" width="220" height="220" archive="g.jar">
<param name="cabbase" value="g.cab" /><param name="r" value="true" />
<param name="n" value="false" /><param name="i" value="5nkzpd600sp" />
<param name="m" value="0" /><param name="s" value="220" />
<param name="c" value="ff0000" /><param name="v" value="true" />
<param name="b" value="000000" /><param name="rfc" value="true" /></applet></noscript>

If everything is correct then you will be able to see a revolving map on your page as below:

If you're looking for more customization then click here

Stay with Marks PC Solution to get more interesting IT topics!

How to Measure the Rank of a Website?

The ranking of a website depends on several factors. It depends on Google Page Rank (known as PR), Alexa Traffic Rank, Complete Rank and so many. And to check the ranking status, there are thousands of extension available for internet browsers.

My personal choice for this purpose is Web Rank Toolbar. Today I am gonna show you how to install this toolbar on Firefox and Google Chrome.

Follow the steps below:

1. First, make sure you are using Google Chrome or Firefox.
2. If you are a chrome user then click here. And Firefox users can use this link.
3. Chrome users will get several toolbars with Web Rank SEO. You can choose either the first one or any other toolbar as you like and then hit on Add to Chrome. And Firefox users should click on Add to Firefox button. 
4. Then click on install. Firefox should be restarted. But chrome doesn't need to be restarted. 
5. Now you are almost done. Chrome users must see this like an icon at the upper right corner. And Firefox users will get it like a horizontal bar. 

Add Floating Share Button on your Site: 7 Buttons!

To improve your traffic rank SEO can contribute a lot. Few years back SEO was somewhat difficult. But at present time SEO is little bit easier by the grace of social sites like twitter, facebook, google + etc.

Today I will show you how to add floating social share button to blogspot website. This code will provide you facebook like, Google +1,  Stumble Upon, Digg, Tweet, Linked in and Reddit button.

To add these floating buttons to your blog, just follow the steps below:

1. Sign in to your blog
2. Click design from the upper right corner 
3. Click on layout and hit on Add a Gadget option
4. Now you'll see a list of gadget and you need to select html/ java script gadget. It will show you  Configure HTML/JavaScript window
5. Now copy the following code and paste it into the content box of Configure HTML/Java Script window
6. Now save this gadget

Note: Make sure your blogger dashboard is set to the new look. Click here for more info. 

<!--SideBar Floating Share Buttons Code Start-->


<style>
#pageshare {position:fixed; bottom:15%; left:3px; float:left; border: 1px solid black; border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#eff3fa;padding:0 0 1px
0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:3px 3px 0 3px;}
.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;-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="Share This With Your Friends">


<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></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 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='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>


<div class='floatbutton' id='linkedin'><script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-counter="top"></script></div>


<div class="sbutton" id="reddit"><script type="text/javascript" src="http://www.reddit.com/static/button/button2.js"></script><!-- AddThis Button BEGIN --><div class="addthis_toolbox addthis_default_style "><a class="addthis_counter"></a></div>


<!--SideBar Floating Share Buttons Code End--></div></div>

If everything is correct then you will be able to see a vertical floating share bar at the left side of your blog.

Customization: This code will give you the opportunity to customize as you like.

Add or Remove Button: You can add or remove button from this code. Notice that each code starts with <div class and ends with </div>. For your convenience I've separated the each code. If you wanna remove one or two codes then just delete the part of the code. When you wanna add something to this code make sure that the new code starts with <div class.

Position: At the beginning of this code you might notice a text like this- #pageshare {position:fixed; bottom:15%; left:3px; float:left;. Now, if you wanna place it to the right side then type right in the place of left. And you can also increase or decrease the size of the button if you are somewhat expert in coding.