0 Remarks
Pin It
Website is a common place that represents a business or a product on the internet so it should be said the internet identity of a business, person, service or product. There are so many website being created every day and so many people are interested in having a website but did you know that incomplete website will not be useful for your any purpose regarding business, person, service or product. This will minimize the popularity and will not leave good professional impression on all online users because the website has no value of its own if it is not created attentively and if the coding standards are broken.

Just creating a website is not all for your business success. It should be good, impressive and should work perfectly because the website is commonly considered as a way to describe your company’s potential and your dignity. If you would have an impressive website than more and more people would like to join you but if your website has so many mistakes in coding or performances that could be caused by ignoring the common Coding standards, it will impact reverse on the customers and it is not good for your online business.

If you want to make online identity as reputed online business owner than you should follow the Coding standards or should get a website designed that follows the Coding standards. Here are some tips for you to make a website perfect with obeying the rules of Coding standards.

1. You should know how and when to use comments in the coding to make coding work easier.
2. Tabs and spaces are important thing in coding, giving too much space can ruin the entire coding or a part of code could be destroyed.
3. There should be no spelling and using mistakes in variables and functions. It is most important part because thru variables and functions, you define where to work or what to work.
4. You should write the code in the coding style and not a writing style. It is necessary for some codes to work and it is good for better understandings.
5. It should look good and well developed in your browser.
6. A proper Doctype should always be used for standards mode in your browser.
7. All markups should be defined as UTF-8 and it should be designated in both HTTP header and the head of the document
8. P element should be used for paragraphs instead of multiple BR tags.
9. The list form items should be defined in a UL, OL, or DL, and never a set of DIVs or Ps
10. Do not use size elements or attributes on your input fields.
11. Cursor: pointer; coding should be used for association of input field.
12. Use html comment when you are closing some Div tags. It is important to indicate that the element of function coding is closing.
13. Never use tables for Page Layouts. It ruins the page structures.
14. Add CSS thru external files. Adding external CSS allows you to get clear coding and it can be edited or defined easily.
15. You should use IDs instead of using classes inside the documents if the element needs to be added only once.
16. You should avoid the CSS sectors. For example, avoid * wildcard sector and never qualify the ID sectors. This should be specially used in Web applications where speed is counted in paramount and there could be thousands or even multiplying value of DOM elements.
17. CSS and browser-based box model knowledge is necessary to complete the Coding standards rules of a website.
18. You should give unique elements an ID attributes. It is important to give them a separate identity.
19. Class Name should be according to its work. It is good for better understanding.
20. Regular expression knowledge is good for defining attribute sectors.
21. Combinators are used to provide the shortcuts for selecting elements and it is good for quick coding editing or writing.
22. You should use the specific code for attaching browser compatibility CSS.

For example,
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <body class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <body class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <body class="ie9"> <![endif]-->

23. Use “CSS sprites generously” for making hover states easily. it gives quick hover state coding so that you can work little faster.
24. PNG Sliced images should be used so that you can get a desired look with low burden on website.
25. Default link should be different than your text styling so that it could look different than basic text. The hover coding should be used on every link and the hover style should be different than normal text styling.

If you are using the codes of Java Script in your website then you should check if the code is working properly or not. If the code is not working then remove it instantly because a useless code can create some problems in coding.

The website should be checked from checking tools but self-observation is most important thing that should not be left for some other time. Coding is a simple but tangled task because it can be problematic due to smallest errors so you should check your website for coding errors.

Never miss to notice the Patterns to be used and Patterns to be avoided in the coding of your website. It will be good for quick and reliable coding. Code formatting should never be left undone. The page that has followed the Coding standards will load quickly.

Coding standards is useful for search engines to read or find your website pages and it is called Search Engine Friendly website. This type of websites is easier to read or to see for those who different browsers or devices. This will support almost all kind of browser so that you can get browser compatibility and devices compatibility feature with Coding standards.

The website which was created attentively will have a nice look and would be easier to upgrade as web technology advances. The Coding standards are not costly to follow. Using them will give you the facility of cheaper maintenance. You cannot ignore the look of the website because it is the most important thing for viewing purposes.

Author Bio:

David is a web designer and expertise in coding. He has just started his career in web designing along with he provides cheap SEO services pricing. He also writes a blog online where he shares useful tips on web designing with his visitors. To know more about his services you may check out his blog.
Continue reading this article...

0 Remarks
Pin It
Alexa
Many of blogger friends have asked a very common question, how can they claim their blog on Alexa.com to get successfully listed on that. Claiming your site or blog on Alexa.com is very necessary because it shows you have site ownership and have rights to site traffic data. Alexa ask some general contact information about site owner. This information is very important to provide on internet if you are doing business kind of thing with your site or blog.

Claim your blog on Alexa.com


1- Go to Alexa claim page : http://www.alexa.com/siteowners/claim

2- Then fill your site/blog address and click on Claim Your Site button (Ref. Image 1: Step 1 and Step 2)

3- Now on next page please signup for Intro Pack which is free. (Ref. Image 2: Step 3)

4- Copy verification meta code (Ref. Image 3: Step 4) and paste this code in your blog template just below </head> and Save template (Ref. Image 4: Step 6)

5- Click on 'Verify my ID' button and wait for verification (Ref. Image 3: Step 7)

6- After successful verification you will see this message 'Your site has been successfully claimed' (Ref. Image 5) and then click on 'Continue' button (Ref. Image 5: Step 8)

7- On next page you should fill your site and personal information but if you want to skip this step you can click on grey color 'Skip' button. If you are filling information then click on 'Save & Continue' button (Ref. Image 6: Step 10)

8- Finally you'll receive congratulation message (Ref. Image 7). You can now move to Dashboard.

9- On Dashboard you'll see the blog and its stats. (Ref. Image 8)

10- Now you can view your blog's stats anytime by using following url. Must change 'your-blog-addrees' with your blog address e.g. techprevue.com
http://www.alexa.com/siteinfo/your-blog-address
For Eg -
http://www.alexa.com/siteinfo/techprevue.com

Pictorial Steps to Claim your blog to Alexa Internet, Inc


Alexa Claim Blog or Site - Image 1
Image 1

Alexa Claim Blog or Site - Image 2
Image 2

Alexa Claim Blog or Site - Image 3
Image 3

Alexa Claim Blog or Site - Image 4
Image 4

Alexa Claim Blog or Site - Image 5
Image 5

Alexa Claim Blog or Site - Image 6
Image 6

Alexa Claim Blog or Site - Image 7
Image 7

Alexa Claim Blog or Site - Image 8
Image 8

Alexa Claim Blog or Site - Image 9
Image 9

यह लेख हिंदी में पढ़ने के लिए यहाँ क्लिक करें।

Continue reading this article...

0 Remarks
Pin It
Facebook CommentsFacebook Comments system may be a reason of social media success for most of us. It is best among all Facebook plugins for blogging. On the internet you may find many tutorials which may guide you but all those methods work perfect on Blogger with custom domain but when you use Facebook Comments system on Blogger without custom domain due to many country specific domains of a single blog become a problem. Today in this post we will cover how to rectify errors and problems which are due to Blogger's country specific domains.

Note: I suggest you to take backup of your Blogger template. Because after implementing this comments system your old comments will disappear from your blog.

Facebook Comments

Installing Facebook Comments on Blogger


1. Go to Facebook Developer Page [https://developers.facebook.com/apps/]
2. Then click on + Create New App.

Facebook Comments

3. Now fill a valid App Name and click on Continue.

Facebook Comments

4. Fill Captcha Code and click on Submit Button.

Facebook Comments

5. Now you'll get App ID.

Facebook Comment Configuration on Blogger

6. Below under Basic info opposite to App Domains fill 17 Blogger's country specific domains.
blogpost.com, blogspot.ae, blogspot.mx, blogspot.in, blogspot.pt, blogspot.jp, blogspot.ca, blogspot.de, blogspot.it, blogspot.fr, blogspot.se, blogspot.co.uk, blogspot.co.nz, blogspot.com.es, blogspot.com.br, blogspot.com.ar, blogspot.com.au
7. Now under 'Select how your app integrates with Facebook' you'll find 'Website with Facebook Login' and 'Site URL:' please fill your blog url here.
8. At last click on 'Save Changes' button to save app settings.
9. Now prepare Application and Moderator Meta Tags.

<meta property='fb:admins' content='ADMIN-NAME'/>
<meta property='fb:app_id' content='APP-ID'/>

Example -
<meta property='fb:admins' content='ADMIN-NAME'/>
<meta property='fb:app_id' content='APP-ID'/>

10. Go to Blogger Dashboard ¬> Select Blog ¬> Go to Template tab ¬> Click on EDIT HTML
11. And under <head> paste above meta tag as following
<head>
<meta property='fb:admins' content='VPNazar'/>
<meta property='fb:app_id' content='348446671899960'/>

Note: With out using this meta tag you will not be able to moderate Facebook Comments. And MUST change ADMIN-NAME and APP-ID with correct values.

12. Now in your blog's template try to find one of the following code

<div class='post-footer-line post-footer-line-3'
<p class='post-footer-line post-footer-line-3'

If unable to find both of the codes then search for following code
<data:post.body/>

13. And Paste following given code just below. Must change App-ID  और BLOG-URL.

<b:if cond='data:blog.pageType == "item"'>
&lt;div id="fb-root"&gt;&lt;/div&gt;
&lt;script&gt;(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&amp;appId=App-ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));&lt;/script&gt;
&lt;div class="fb-comments" data-href="http://BLOG-URL" data-num-posts="5" data-width="470"&gt;&lt;/div&gt;
&lt;/b:if&gt;
</b:if>

14. In this code data-num-posts is number of comments and default value is 5 and data-width with value 470 Comment form width. You may change both variables as per your blog design.

Disabling Blogger's Default Comments System


If you want to disable Blogger default comment system then please following steps:

1. Go to Blogger Dashboard and select Blog
2. Switch to Settings tab
3. Then click on Posts and Comments tab
4. And see opposite to Comment Location and select Hide option from DropDown
5. Finally click on Orange color Save Settings button given on upper left side.

I believe you'll be able to use this great comments system on your blog. If still have any query please communicate with your comments.

Continue reading this article...

0 Remarks
Pin It
Cloud ComputingLeveraging the power of information technology to increase and enhance business performance is a practice essential for modern companies. Much has been made about the global nature of most commercial and economic activity; but computing and virtual technology provides the real foundation for the modern economy. And organizations of all forms must incorporate a robust IT infrastructure if they are to meet the needs of their stakeholders.

The pressures faced by governments at the local, regional, and national level are similar to those confronted by private enterprise. Citizens demand that government organizations develop the capacity to deliver more services with fewer resources. Because of the squeeze being put on economies throughout the world, this is becoming more and more difficult to do. But creating a means to exchange information and conduct work processes in an efficient and effective manner can be a vital step in meeting this challenge. Government cloud services and a government data centre are just a couple of the elements that would be involved in forging such a strategy.

Government cloud computing would enable government employees to be more flexible and expeditious in how they carry out their work. A government data centre, for example, could serve as a storehouse of the information and knowledge essential to delivering citizen and intergovernmental service. Companies such as Macquarie telecom corporate infrastructure provide a range of products and professional services that help governments plan and implement the IT services they need to meet the needs of their customers—that it, the tax-paying public.

There are many benefits to be had by using cloud services. However, it is important that governments looking to use this particular form of information technology work with vendors that can best supply them with what they need. A sound plan for delivering government services in an economically efficient and organizationally dynamic way can only be developed by experienced professionals who bring are able to effectively employ their knowledge and expertise. A government can ill afford to make missteps and miscalculations when it comes to developing and deploying new IT systems. It is therefore vital that such entities work with firms that are capable of smoothly delivering their products and services. It is also important that such services are not exorbitantly priced, as the interests of the tax-payer must be looked after.

Fortunately, it is not that hard to find firms that deliver high quality cloud computing services. Those looking to purchase and implement these tools can begin their search for firms that offer them on the worldwide web. The web provides a medium by which one can organize and arrange one's search in an efficient manner. Using the web will allow anyone who is thinking of incorporating cloud computing into their IT strategy to do so in an expeditious way. The web enables searchers to bring the various cloud computing firms to them, so that they can review and evaluate the various products and service being offered by each company. And this gives the prospective buyer greater power to determine and decide who their supplier should be.

Author Bio: If you are looking for a way to get expert advice and solutions for Government cloud computing, then you need look no further. For more information please visit our website government data centre.

Continue reading this article...

2 Remarks
Pin It
iPhoneSmart phones are in high demand now-a-days. People look for variety of features and designs in the smart phones. However, it’s not only about the designs and features of the smart phones are in demand, but the apps as well. Therefore, we have come up with seven best iPhone apps available on the App Store. Let’s look at all one-by-one:

Mailbox 1. Mailbox: It has been recently acquired by Dropbox and hence, it is now equipped with seemingly greater server. The Mailbox clears your email in tray. This can be done swiping right to archive the message and is even done by swiping left to deal with the message at a point in the future. You can even put off the message to ‘later today’, ‘this evening’, and ‘tomorrow, this weekend ’,‘ next week, ‘in a month’ or ‘someday’, where it will once more darken your Mailbox. You can reply or forward the messages in a normal manner or can be sent to lists such as ‘To Buy’ or ‘To Read’. However, presently the Mailbox works with only Gmail accounts.

Dailyspank 2. DailySpank: DailySpank is an iPhone photography competition, in which you can submit photos on the theme of the day. The recent instances include, ‘take a photo of something you’re wearing’, ‘take a photo of something exotic’ and ‘take a photo of what’s on your shelf’. The photo which gets the maximum Spanks or votes, rise to the top.

Adobe Photoshop Touch 3. Adobe Photoshop Touch: It was introduced first on the iPad and Android tablets last year. Introducing now on the iPhone, it has come up with more editing power than any other iOS photo app. It has got excellent range of special effects filters. Moreover, the ability to swipe to adjust the colour and the intensity of filters is more than the Instagram.

Strava 4. Bump: With Bump, you can send files to other smart phones and laptops by physically bumping them together. Almost all the app’s features are designed such that two phones are collided together to swap files. It is one of the best means to transfer the files from iPhone to your laptop. That means, you can transfer photos, music, videos and documents from iPhone to laptop and vice versa.

5. Strava: Strava will turn your smart phone into fully-fledged sports PC. With it, one can record the runs or rides of bike with speed; distance covered and estimated calorie consumption. These results are uploaded automatically to one’s personal account and would even be plotted on the Google Maps. It is useful when it comes to tracking one’s performance.

W.E.L.D.E.R. 6. W.E.L.D.E.R.: It is a word game which is something unique. This is an industrial game where you have to weld the words from a grid of letters. Here, you have to make the words by swapping adjacent letters in the grid and they all have to come in the correct order. However, you have limited number of swaps available to do it. If you hit the point’s target, you will get more swaps.

CloudMagic 7. CloudMagic: It acts as a hug for Facebook, email, Twitter, contacts, Google Docs, Dropbox, Evernote and more. It also shows overview of recent activity so that you can do everything speedily.

Author Bio:
Emily Thomas works for PrePayMania and likes to write about latest technology and gadgets. Did her Bachelors in Electronic and Communications and masters in IT management.

Continue reading this article...

0 Remarks
Pin It
Blogger blog with custom domain
It is easy to search for custom domain on Blogger in Google search. Google search may provide you some good result on this subject. Google technical notes are available for complete reference but I realize that very few bloggers have adopted the success carefully. Only 60% bloggers are utilizing their domain and rest 40% are not aware of full potential of custom domain. Most of people have habit of opening domain with including www. But for Blogger www is not like hosted website; on Blogger it is CNAME (Child Name). Then it is necessary to understand it carefully. If you open your blog without including www and it is auto redirecting to blog successfully then you are among 60% and if not then you are missing complete potential of purchased domain. In this article I will try to cover following two objectives -

Objectives of the article
  1. Adding a Custom Domain Name to Blogger blogs
  2. Resolve unfixed issue of Naked Domain

For using custom domain on Blogger there are two important things to consider and have to complete following steps in DNS Management Panel.

1. Creating CNAME
2. Adding A-Records

Most of the bloggers create just only CNAME but forget to add A-Records. That's why when someone opens such blog without adding www (CNAME) he/she get the following 404 error message. As I already told you most of the today new users open any website with Naked Domain i.e. example.com and 40% blogs does not redirect to www.example.com automatically.

Most people want to add a custom domain name to their blogs but they only create one CNAME and forget to create four A-records that's why their 40% blog traffic get decrease.

Unfixed Naked Domain 404 Error
Unfixed Naked Domain 404 Error

Use a custom domain name on Blogger blogs


If you do not want to shutdown your blog during adopting all process. Please complete all steps given hereunder and then add domain in Blogger setting.

Follow these steps to add a custom domain on Blogger blogs -

1:: Go to Blogger Dashboard
2:: Then select a blog

Select Blog to Use Custom Domain Name
Step 1. Select Blog to Use Custom Domain Name

3:: Click on Settings › Basic
4:: Under Publishing › Blog Address click on Add a custom domain

Click +Add a custom domain
Step 2. Click +Add a custom domain

5:: Click on Switch to advanced settings

Click switch to advance settings if already have domain name
Step 3. Click switch to advance settings if already have domain name

6:: Fill domain with CNAME box given opposite to http://
7:: Click on settings instructions after writing complete domain

Add domain name as shown and Click on Settings instructions
Step 4. Add domain name as shown and Click on Settings instructions

8:: If you want to use 'top-level domain' i.e. www.example.com then click on first Radio Button else you want to use custom CNAME i.e. name.example.com then click on second Radio Button.

Select Top level domain if it's a first blog or have one blog
Step5. Select Top level domain if it's a first blog or have one blog

9:: It's time to go on DNS Management Panel and add 2 CNAME
(Note: Second CNAME will be different for everyone. You can see this on your own dashboard under Settings)

Name/Label/HostDestination/Target/Address/Points to
wwwghs.google.com
DZJ6VPKIZZYPgv-DFHRU4VH2CQH3CAXOIRSWJQHRLTJ65BR4LASVIGHBYKLZZRS6U6A.domainverify.googlehosted.com.

Create 2 CNAME Records
Step 6. Create 2 CNAME Records as shown in figure

10:: Now add these 4 A-Records which are 4 different Google IPs.


Name/Label/HostDestination/Target/Address/Points to
@216.239.32.21
@216.239.34.21
@216.239.36.21
@216.239.38.21

Entries in DNS Management Panel
Sample Entries in DNS Management Panel

11:: After completing all above wait for an hour and then add domain to your blog. Then tick on "Redirect example.com to www.example.com.". By this way your naked domain will be redirected to top-level domain i.e. example.com to www.example.com.

Finally Add Custom Domain, tick the check box and click Save button
Step 7. Finally Add Custom Domain, tick the check box and click Save button

After completing all above steps if your blog is not working then wait for maximum 48 hours. If you are getting Error 12 or Error 14 then you should try adding domain after few more hours. Still have trouble please consult some technical person nearby you.

Please note if you have more than one blog on same domain then do not click on all to redirect Naked domain to all blogs please choose only one of these.

After successful completion of all above steps you're on own domain now.

Help Article:
How do I create a CNAME record for my custom domain? by Google
http://support.google.com/blogger/bin/answer.py?hl=en&answer=58317

Having trouble after Adding Custom Domain - Read this
http://www.techprevue.com/2012/12/blogger-custom-domain-problems-solutions.html

Related keywords:
CNAME (Child Name or Canonical Name), Naked Domain, Unfixed Naked Domain in Blogger, Use custom domain with Blogger, Blogger Custom Domain Error 12 and Error 14, Blogger DNS Management, A-Records for Blogger Custom Domain



Continue reading this article...

Pin It
Friends if you are looking for professional branding free Facebook like box then you are at right place and reading this article. I present you a fresh design of Facebook like box with CSS stacking effect. I promise you this widget will look awesome your blog. It is very simple to add this Facebook like box on your blog if you are thinking this will be difficult then I am want your attention you are just two steps far away from this beautiful Facebook like box widget. I assure your blog reader will definitely as how you hide your Facebook branding. Hiding Facebook like box branding is not violating terms and conditions of Facebook. So you are going to install a best Facebook like box widget so far.

3D Facebook Like Box

New Facebook Like Box Using CSS Stack Effect Installation Tutorial

1. Blogger Dashboard › Select a blog › Layout (Page Element) › Add a HTML/Javascript Gadget
2. Then paste any of the follow widget code in that and save this HTML/Javascript gadget

Note: Must change the "techprevue" with your page id

In general condition Facebook page url is as following -
http://www.facebook.com/techprevue

But if you have a very new Facebook page then it may as following -
http://www.facebook.com/pages/techprevue/365334223544209

It is highly recommended to change your Facebook page URL by copying it from web browser's address bar. :)


Style 1: Pure Design - For this widget use following code

<style>
.techprevue-fb-like-box-pure{width:280px;height:150px;border-radius:3px;position:relative;background:#FFF;padding:0px 10px 15px 0}.techprevue-fb-like-box-pure,.techprevue-fb-like-box-pure:before,.techprevue-fb-like-box-pure:after{background:#FFF;border:1px solid #0072C4}.techprevue-fb-like-box-pure:before,.techprevue-fb-like-box-pure:after{position:absolute;content:"";bottom:-3px;left:2px;right:2px;height:1px;border-top:none}.techprevue-fb-like-box-pure:after{left:4px;right:4px;bottom:-5px;box-shadow:0 0 2px #0072C4}
</style>
<div class="techprevue-fb-like-box-pure">
<div style="height:155px;overflow:hidden">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftechprevue&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23FFF&amp;stream=false&amp;header=false&amp;appId=421760957869477" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>

Style 2: India Design - For this widget use following code


<style>
.techprevue-fb-like-box-india{width:280px;height:150px;border-radius:3px;position:relative;background:#FFF8ED;padding:0px 10px 15px 0}.techprevue-fb-like-box-india,.techprevue-fb-like-box-india:before,.techprevue-fb-like-box-india:after{background:#FFF8ED;border:1px solid #68914F}.techprevue-fb-like-box-india:before,.techprevue-fb-like-box-india:after{position:absolute;content:"";bottom:-3px;left:2px;right:2px;height:1px;border-top:none}.techprevue-fb-like-box-india:after{left:4px;right:4px;bottom:-5px;box-shadow:0 0 2px #68914F}
</style>
<div class="techprevue-fb-like-box-india">
<div style="height:155px;overflow:hidden">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftechprevue&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23FFF8ED&amp;stream=false&amp;header=false&amp;appId=421760957869477" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>

Style 3: Shine Design - For this widget use following code


<style>
.techprevue-fb-like-box-shine{width:280px;height:150px;border-radius:3px;position:relative;background:#EDF4FF;padding:0px 10px 15px 0}.techprevue-fb-like-box-shine,.techprevue-fb-like-box-shine:before,.techprevue-fb-like-box-shine:after{background:#EDF4FF;border:1px solid #ABACB2}.techprevue-fb-like-box-shine:before,.techprevue-fb-like-box-shine:after{position:absolute;content:"";bottom:-3px;left:2px;right:2px;height:1px;border-top:none}.techprevue-fb-like-box-shine:after{left:4px;right:4px;bottom:-5px;box-shadow:0 0 2px #ABACB2}
</style>
<div class="techprevue-fb-like-box-shine">
<div style="height:155px;overflow:hidden">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftechprevue&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23EDF4FF&amp;stream=false&amp;header=false&amp;appId=421760957869477" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>

Style 4: Sliver Design - For this widget use following code


<style>
.techprevue-fb-like-box-silver{width:280px;height:150px;border-radius:3px;position:relative;background:#E6E8EF;padding:0px 10px 15px 0}.techprevue-fb-like-box-silver,.techprevue-fb-like-box-silver:before,.techprevue-fb-like-box-silver:after{background:#E6E8EF;border:1px solid #ABACB2}.techprevue-fb-like-box-silver:before,.techprevue-fb-like-box-silver:after{content:"";position:absolute;bottom:-3px;left:2px;right:2px;height:1px;border-top:none}.techprevue-fb-like-box-silver:after{left:4px;right:4px;bottom:-5px;box-shadow:0 0 2px #ABACB2}
</style>
<div class="techprevue-fb-like-box-silver">
<div style="height:155px;overflow:hidden">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftechprevue&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23E6E8EF&amp;stream=false&amp;header=false&amp;appId=421760957869477" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>

Style 5: Sky Design - For this widget use following code


<style>
.techprevue-fb-like-box-sky{width:280px;height:150px;border-radius:3px;position:relative;background:#EFF1F6;padding:0px 10px 15px 0}.techprevue-fb-like-box-sky,.techprevue-fb-like-box-sky:before,.techprevue-fb-like-box-sky:after{background:#EFF1F6;border:1px solid #A8B3CF}.techprevue-fb-like-box-sky:before,.techprevue-fb-like-box-sky:after{position:absolute;content:"";bottom:-3px;left:2px;right:2px;height:1px;border-top:none}.techprevue-fb-like-box-sky:after{left:4px;right:4px;bottom:-5px;box-shadow:0 0 2px #A8B3CF}
</style>
<div class="techprevue-fb-like-box-sky">
<div style="height:155px;overflow:hidden">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftechprevue&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23EFF1F6&amp;stream=false&amp;header=false&amp;appId=421760957869477" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>

Style 6: Pearl Design - For this widget use following code


<style>
.techprevue-fb-like-box-pearl{width:280px;height:150px;border-radius:3px;position:relative;background:#F2F2F2;padding:0px 10px 15px 0}.techprevue-fb-like-box-pearl,.techprevue-fb-like-box-pearl:before,.techprevue-fb-like-box-pearl:after{background:#F2F2F2;border:1px solid #CFCFCF}.techprevue-fb-like-box-pearl:before,.techprevue-fb-like-box-pearl:after{position:absolute;content:"";bottom:-3px;left:2px;right:2px;height:1px;border-top:none}.techprevue-fb-like-box-pearl:after{left:4px;right:4px;bottom:-5px;box-shadow:0 0 2px #CFCFCF}
</style>
<div class="techprevue-fb-like-box-pearl">
<div style="height:155px;overflow:hidden">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftechprevue&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23F2F2F2&amp;stream=false&amp;header=false&amp;appId=421760957869477" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>

Please review this widget with your comments.

Continue reading this article...
Scroll to top