Showing posts with label blogger tips. Show all posts
Saturday, May 30, 2015
How to determine what technology a website or web application is built?
Hello friends, hope you are doing good. In this tutorial I would like to discuss about the trick that helps you find out what technology a website is built with. Quite often I come across websites with good looking or good functionality, and wonder what technology was used to create such websites. You might have also had the same situation sometimes. Let's see what techniques are available to us to figure out the technologies or frameworks that have been used to build a particular website.
When I researched for the tools that helps to figure out the technologies I found few online tools and browser extensions. I gathered all the tools together to make it easier for developers.
Below are some tools for querying site details:
BuiltWith
BuiltWith is an online application where you can acquire information about the technology used behind a website. You could also check the competitive analysis about a website with BuiltWith. You should enter website URL in the search box. Then the application responds with backend and front end technology details, along with analytics and business intelligence information for a particular website.
DomainTools
DomainTools is an application that offers a basic whois search, whois histories for domain names, cross-IP lookups, a Name Server Spy, a typo-generator, and dozens of other useful domain tools.
The popular domain tools, the site also offers a variety of DNS tools, such as ping and traceroute. They also offer WhoIs Lookup, WhoIs History, reverse Whois, Hosting History, Reverse IP, Reverse Name Server, Reverse MX. Their powerful search features include domain suggestion search.
It also provide many of the tools at free of cost. However some tools have usage restrictions that require a subscription. Their subscription system allows you to get more points for the more money yu pay, and in turn the more tools you can use.
NetCraft
W3Techs
SimilarTech
Thursday, April 23, 2015
How to show password strength using JQuery
Hello friends, I want to discuss about JQuery code to show password strengths when a user types in a password into password field.
Password security is necessary to keep our accounts safe from hackers. Generally we use common passwords to remember them easily. However we should use secured passwords so that it couldn't be guessed by anyone. Recently I had a client who wants to show the password strength when a user types his password. So I tried the Jquery code which is explained in this tutorial to check the password strengths. This code will use JQuery regular expressions to check the strength of a password typed by the user.
I have also provided the CSS in this tutorial to add style to the message which shows the strengths of password entered.
I have also provided the CSS in this tutorial to add style to the message which shows the strengths of password entered.
Please check the below JQuery code:
$('#pwd').keyup(function(e) { var strongPass = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g"); var midPass = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g"); var morePass = new RegExp("(?=.{6,}).*", "g"); if (false == morePass.test($(this).val())) { $('#msg').html('Please enter more characters'); } else if (strongPass.test($(this).val())) { $('#msg').className = 'ok'; $('#msg').html('Great! your password is strong.'); } else if (midPass.test($(this).val())) { $('#msg').className = 'alert'; $('#msg').html('Better, your password strength is medium.'); } else { $('#msg').className = 'error'; $('#msg').html('Sorry, your password is too weak.'); } return true; });
Here I have included the CSS to add styles to the div when the password strength status changes while typing in the password filed.
CSS:
.error{ background:#BE4C39; color:#fff; }.alert{ background:#fd7c2a; color:#fff; }.ok{background:#3cc16e; color:#fff; }
Below is the HTML code for the input field and the div that holds the message which shows the password strength.
<input type="password" name="pwd" id="pwd" /><span id="msg"></span>
I used pwd as name and id in the above input fields and the respective id has been used in the JQuery code and "msg" is the id used for the span which holds the message for the password strength.
I hope this code will help you in your projects. Please don't hesitate to ask your queries in the comment section below. Thank you. Happy coding :) Labels: blogger tips, JQuery, Tips and Tricks, Web Development
Saturday, May 24, 2014
Can Blogging make money/Can I earn from blog?
We know that today many people are blogging for the sake of enjoyment and some to earn money. Because blogging has opened the doors to earn money by writing content. They earn money by placing ads on their sites. However it’s not so easy to earn through blogs and also not impossible if you have the will to do.
Why it’s so hard to earn from blogs and How can you make it possible to earn easily?
Yes! It’s hard to earn money from blogs when you expect overnight results. You have to stick to blogging if you want to earn from them. No one gets money in a single day/night. Some people might think that we can grow our income very soon through blogging but it’s not so easy. But not so hard if you are a hard worker. Here I have few points to discuss why earning is hard through blogging? Later in the bottom section I will discuss about the possibilities of earning from blogs.
High Competition:
There is a very high competition on web to sustain. If you want to be one of the high earners on blogging, you need to be more effective in your writing skills. You can see there are many bloggers on the web which creates a competition among them. So you need to have the skills that can beat up your competitor. But here you have to remember that you some times you may need the help of your competitor. I will explain this in my future posts.
Work Hard:
Working hard always helps you achieve greater in all aspects, so blogs. Hard working in blogging means you have to stick to your blog. To achieve greatest heights in blogging field you need to ensure that you update your blog frequently with quality content. The readers will increase only when you have the quality content. Quality in your content not only increase your readership but also it helps in achieving SEO. Your blog needs to have the good keywords to increase your page rank for SEO. However, SEO is different from what we are discussing here as this point sticks only to Hard Work that is spending your time and energy on blogging. Don’t expect more when you can’t do more. Because blogging takes hours of work before you see your success. The more work you do, the more money you can expect.
Make your niche to be perfect and clear and don’t divert from that. To get stick with your content blog about the content that you are passionate about.
Gain Followers:
Once you start your blog then start thinking about gaining readers. Gaining more readers or followers is also linked to the last point. Because you can have more chances to get more readership when your work hard to write the best content for your blog.
One more point that you have to remember is be positive. To get more followers you must get involved in blogging communities. Find blogs that are similar to yours and read them regularly. Send and receive emails with other bloggers and your readers. Readers will be happy if you respond to their queries. So keep responding to your readers. Leave comments on other blogs and say thanks to the authors. Participate in blogging communities and be active on all social networks.
Apply for ADSENSE:
After getting huge followers you can apply for google adsense. Google adsense is one of the most powerful ads that yield you high earning rates. But it has many trems and conditions. You need to be approved by the google to get started earning money with adsense.
Labels: blogger tips, blogging, Money Earning Tips, Work from homeSaturday, March 29, 2014
5 best tips for writing good keywords to optimize for SEO
Content is the KING for SEO and keywords play an essential part of SEO. Keywords are nothing but the search terms that people use on various search engines to search the topics related to those keywords. We often spend too much time for optimizing our blog post for search engine. Using effective keywords is a successful part of blog optimization. Search engine crawlers crawl your content and keywords from your blog posts and they tells the search engine about your posts on your blogs. We commonly speak about search engine ranking and this ranking depends upon the content you use in your posts. To get good ranking on search engines, first you need to know How to build good content for search engines?Here is a clear explanation for SEO below. Read every line without missing anything.
Choose Your Keywords :
When content is the "KING" let's say keywords as "QUEEN". Yes, that's true. As every SEO analyst says that content is the KING of SEO, now let's talk about the QUEEN :p sorry, keywords. Before writing any post you need to check for keywords using any keyword checker tool, and you have to choose strong keywords for your blog posts. I suggest you to use Google AdWords tool for keyword research. You have to look for the competition between those keywords and shortlist some of them. Here you need to select the keywords with less competition because they help you in getting good page rank in search results.Use Keywords In Your Post Title :
I have already discussed about SEO Title Tag Best Practices.After deciding the keywords for your blog, the next step is to use those keywords in your blog posts efficiently to make the most out of them. Start with the post title, use your keyword or keyword phrases in your post’s title. Remember post titles stays first to be crawled by search engines, hence use keyword or keyword phrases in your post titles so that they will tell the search engines what exactly the post is about.
You must read these posts also.
SEO Title Tag Best Practices
8 Tips to reduce load time of Blog/Website
5 Idiotic ways you can promote your blog
Improve Traffic by facebook fan page
Optimize your blog post titles for SEO
6 ways to optimize your website/blog for search engines
Use Keywords In Headings And Sub-Headings:
Headings and sub-headings play an important role for SEO. Don't neglect headings in your posts. Write headings in your posts whenever it is necessary. For example when we read something on a newspaper or a website we are mostly satisfied to read the content that is separated by paragraphs with neat sub headings between. We prefer reading the text with sub headings and small paragraphs rather than long paragraphs. Similarly the search engines also look for the same. Don't you think of writing an article with headings and sub headings so that they could attract search engines? Yes, that would be great. So we need to write great content with strong keywords making use of headings. This can be done by <h2> and <h3> tags for headings and sub headings. Don't forget to use keywords within these tags because it will add more benefits to attract search engines.Use Keywords In Anchor Tag:
We know that anchor tags are used for links. But it is also much good to know that anchor tags will help you for SEO. Try using your keywords within the anchor tags. Search engines mostly prefer anchor tags than simple text. Hence try using your keywords with anchor tags to improve your blog ranking for search engines.Use Keywords In ALT Tag:
Try using images with alt tags. Search engines don't have the capability of reading an image but it can read alt tags. So to describe the intention of an image we can use alt tags with keywords. Labels: blogger tips, SEOThursday, March 27, 2014
How to hide or fix a broken image using jquery
You may like these
Get free likes for your facebook account.
Login script in PHP
Delete file using PHP
Delete Facebook account permanently
Disable graph search on Facebook
Pagination with PHP
Awesome stylish sliding professional contact form for your website
Use facebook on slow internet
How to delete google cache from search
How to scare your friends with simple code
Just look at the code below.
<script>
$(document).ready(function(){
$("img").error(function(){
$(this).hide();
});
})
</script>
Copy the above code and paste it above the closing </head> tag. That's it. You are done. is
Explanation:
$(document).ready(function()) says the function to execute when the page loads.$("img") finds the img tag.
error(function()) checks if the img tag has any error and executes the function to hide the broken image using $(this).hide();
Here this refers to the current one i.e., the img tag.
Thanks for reading this article. If you have any doubts please don't hesitate to comment below. Labels: blogger tips, JQuery, Web Design, Web Development
Thursday, November 21, 2013
Add Google Plus Follower Gadget For Blogger
I have discussed about How to add sticky footer menu to your blogger in my last tutorial. Read my earlier post to add sticky footer menu to your blog.In this tutorial I want to discuss about adding Google plus followers gadget to your blog. Blogger has recently launched its new feature to add Google+ followers gadget to your blog. This gadget helps your readers to follow you easily through your blog. This will make you help in increasing your readers by following you on google+. It doesn't require any code to add this widget to your blog. Because blogger has introduced a new gadget to add this to your blogger.
You may like to read:
How to earn money with your facebook pages?
How to add separate contact page to blogger?
How to add facebook like button below blogger posts?
Best practices to write titles for Search Engine Optimization(SEO)
Great tips to reduce loading time of your blog to increase more readers
Idiotic and funny ways you never know to promote your blog
How to earn money from blogs?
Add floating widget to your blogger blog
Get more viewers to your blog using facebook fan page
1.Login to your Blogger account first.
2.Click the arrow mark of your blog in your dashboard(shown in the figure).
3.Now select Google+.
4.Now you will be asked to change your profile data to your Google plus. That means you need to select your Google+ profile data to be your Blogger profile.
5.After making those changes in your profile, you need to go to your blog LAYOUT.
6.Select Add Gadget.
7.Click on Google+ Followers.
8.Save it.
That’s it. You are done.
Thanks for reading this post. Please comment below to share your ideas or suggestions or ask your queries if you need any help.
Don’t hesitate to ask me your doubts regarding blogger. I am always ready to help you. Labels: Blogger Plugins, blogger tips
How to add floating widget to blogger blog
In previous article we have discussed about adding a google plus follower gadget. In this post I'm going to show you how to create floating widget with simple css and adding it to your blogger blog. This will be helpful when you want to show ads or widgets that float. I already discussed how to add floating sticky meny with social widget bar at bottom of your blog.Here is how to add this floating widget to your blog. Before adding this you need to backup your template.
Here is a simple CSS code and small HTML div to add.
You may like to read: How to earn money with your facebook pages?
How to add separate contact page to blogger?
How to add facebook like button below blogger posts?
Best practices to write titles for Search Engine Optimization(SEO)
Great tips to reduce loading time of your blog to increase more readers
Idiotic and funny ways you never know to promote your blog
How to earn money from blogs?
Get more viewers to your blog using facebook fan page
Go to template.
Click Backup/Restore.
Download the template.
Be careful: Backup your template first before you continue further.
Edit HTML.
Find the ]]></b:skin> in your blogger template code.
(Use CTRL+F and search for ]]></b:skin>)
Just above ]]></b:skin> Add the below CSS Code:
#trickstown-float {
position:fixed;position:absolute;bottom:0px; left:0px;
clip:inherit; top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
Add HTML Code:
Now you have to place the HTML code for the widget that needs to float.
Place the widget code between the div tags as shown
<div id=”trickstown-float”> and </div>.
For Example the code looks like this.
<div id="trickstown-float">
Widget Code
</div>
You can make customizations for this floating widget as you like. Make changes such as the background, margins, 'bottom' with 'top' , and 'left' with 'right' and which ever the change you may want to make.
Please let me know if you have any doubts to clarify.
Thank you Labels: Blogger Plugins, blogger tips
Wednesday, November 20, 2013
Add awesome sticky footer menu to Blogger with simple HTML
Look at the image below to know how the sticky menu bar looks in your blog's footer.
You can also watch the live demo of this sticky menu bar here.
View LIVE DEMO
You may like to read:
How to earn money with your facebook pages?
How to add separate contact page to blogger?
How to add facebook like button below blogger posts?
Best practices to write titles for Search Engine Optimization(SEO)
Great tips to reduce loading time of your blog to increase more readers
Idiotic and funny ways you never know to promote your blog
How to earn money from blogs?
Add floating widget to your blogger blog
Get more viewers to your blog using facebook fan page
Now let me explain how to add this menu to your blog.
- Login to your Blogger account
- Go to Dashboard.
- Select Template>Edit HTML.
Search in your Template for the piece of code shown below.
| ]]></b:skin> |
After finding that code you need to follow this method.
Just above/before
| ]]></b:skin> |
CSS Part:
| #cmb-stickey_footer { /* This will make your footer stay where it is */ background: none repeat scroll 0 0 #1D1D1D; border: 1px solid rgba(0, 0, 0, 0.3); bottom: 0; font-family: Arial, Helvetica, sans-serif; height: 40px; left: 50%; margin: 0 auto 0 -490px; padding: 0 10px; position: fixed; text-shadow: 1px 1px 1px #000000; width: 960px; } /* border curves */ #cmb-stickey_footer { -moz-border-radius: 10px 10px 0px 0px; -webkit-border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px; } /* hover effect */ #cmb-stickey_footer:hover { background: none repeat scroll 0 0 #2b2a2a; } /* shadow for the footer*/ #cmb-stickey_footer { -moz-box-shadow:0px 0px 11px #191919; -webkit-box-shadow:0px 0px 11px #191919; box-shadow:0px 0px 11px #191919; } #cmb-footer_menu { margin: 0; padding: 0; width:auto; } #cmb-footer_menu li { list-style: none; float: left; font-size:12px; padding: 12px 14px 14px 14px; border-right:1px solid rgba(0, 0, 0, 0.4); background: rgba(0, 0, 0, 0.1); } #cmb-footer_menu .imgmenu { padding:5px 8px 3px 14px; float:left; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghO0X6WnBFI1QNtiD61FGbQeM9V975K0lhC5o1abcLj5CH4YvuMVmnKr8WvUmuliEyiLVUWRZceLJt3o33s_ryWO3aV5M2i42HczQZXqBCrnlCvQt-Z42UyUSwWl80nJJbZNFEvADo5Jc/s1600/home.png") 13px 5px no-repeat; width:36px; height:30px; border:none; border-right:1px solid rgba(0, 0, 0, 0.4); cursor:pointer; } #cmb-footer_menu li:hover { background:#202020; /* Fallback color for old browsers */ background: rgba(0, 0, 0, 0.3); } #cmb-footer_menu .imgmenu:hover { background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVEMyughNa1otwnTTmxwuyPKjZNV0QX58s9kEW3Uwh-zVXY3YeGKktAXMssBuVBvH9FauC3iJRAjNQDbvEFadx7Ixg8Z0JZu7oGkBBDlhPyGvw5NfdoitFp3o3cqEekNNhh1dYH9Ad1FI/s1600/home_hover.png") 13px 5px no-repeat; } #cmb-footer_menu li a { display: block; color: #cccccc; text-decoration: none; } #cmb-footer_menu li a:hover { color: #ffffff; } #cmb-footer_menu li span { display:none; } #cmb-stickey_footer #cmb-social_icons { float:right; /* social icons positions */ width:auto; margin:5px 15px 0px; padding:0px; overflow:hidden; } #cmb-stickey_footer #cmb-social_icons li { margin-right:12px; /* 12px is the space between each one of them */ float:left; width:24px; padding:0px; height:32px; list-style:none; _margin-right:0px; /* this is for IE6 only */ } |
Search for
| </body> |
| <div id='cmb-stickey_footer'> <ul id='cmb-footer_menu'> <!-- Begin Footer Menu --> <li class='imgmenu'><a href='#'><span>Home</span></a></li> <!-- This Item is an Image, the "span" is hidden via CSS --> <li><a href='#'>Blogger Tutorials</a></li> <li><a href='#'>Blogger Templates</a></li> <li><a href='#'>CSS tricks</a></li> <li><a href='#'>HTML tricks</a></li> <li><a href='#'>Click My Blog3 Tricks</a></li> <li><a href='#'>Contact</a></li> </ul> <!-- End Social Icons --> <ul id='cmb-social_icons'> <!-- Social Icons --> <!-- The span is the text appearing on hover, use the tooltip class in the link --> <li><a href='#'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3f0k0w2mA-qUae53pFudFIVHYKJb7trJ0-yi6vOoeboGeAN1_LO58wyGQFxf6cF_r6BmcNseL9ZWm3DWU1_wy0KBV4Ke3sxLmxOg0AaHjbii7hfnYPy57jSPxpsewve47tApQBqtLS-A/s1600/twitter.png'/><span>Twitter</span></a></li> <li><a href='#'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdQjWHOn1Xo194KnNyPM4473vfYp65x9vQiUIC6rQgQ3p4ow3O6lAl2U2fqKDWRttKHfDydKizvCExlAbQXO_WQY8mCHAodR6diHDECjO-OtrJbTMSBThNshK2O7H20aRE1C23AyzJ4MU/s1600/digg.png'/><span>Digg</span></a></li> <li><a href='#'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH3kCl_JCDWOxdM1HDV7KsxSxSqOaTYqLC2IpOapZ3nN7wV1tsGnHqB6L0dAlDjpczaTQEqjQXaGQNlVAocl2dgjugZhQuyCrdni1zMliLsyPz6xq9ThGo05SgeiinYYDxNfDvuO1o1mY/s1600/flickr.png'/><span>Flickr</span></a></li> <li><a href='#'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_8xAV2zGawGn0y2nu3e7QTutQOXLU-WmhD7iWVFQoR-UUSIvVtk1km4E-tFx8FuQmjqtGWZsAYtuURs09vixgWKtXRI2Gh_UUaP7UyZgUaK3yctt2SlHhXLV6B9gsTpb-xdbzrLWwFyE/s1600/facebook.png'/><span>Facebook</span></a></li> </ul> </div> |
If you have any doubts regarding this tutorial you can comment below. If you have any suggestions please suggest me. Thanks for reading this tutorial. Please share it with your friends if you liked it.
Get Mobile Tricks, Free Balance tricks and all Computer solutions click here Labels: Blogger Plugins, blogger tips
Wednesday, November 6, 2013
Why every freelance worker wants to be a blogger?
Freelancing and writing a blog are among the many ways you can make money online. We have been discussing about the earning tips and blogging tips on this blog. But the dilemma is, which one is better among freelancing and blogging? Sure, they both equally have their benefits and drawbacks, but the simple fact is, they are significantly interdependent on each other. Most freelance workers are now ambitious to become blog writers/authors at some stage or an additional. Why? Simply because it's their need to have an extra hour to get some money! So the question is, should they really need to get started blogging as a career? Free lance work is ever more challenging the existence of running a blog, which is why a bunch of Freelancers are now blog owners as well. Here i will discuss why you need to blog if you are a freelance worker.
A much easier way to get yourself recognized
You may like to read:
How to earn money with your facebook pages?
How to add separate contact page to blogger?
How to add facebook like button below blogger posts?
Best practices to write titles for Search Engine Optimization(SEO)
Great tips to reduce loading time of your blog to increase more readers
Idiotic and funny ways you never know to promote your blog
How to earn money from blogs?
Add floating widget to your blogger blog
Get more viewers to your blog using facebook fan page
More credibility
Recognized blog writers have credibility. They have connections with expert people, and they have obtained a name(credibility) for themselves, and therefore acquired some reputation. They are also energetic on social media. Now free-lance clients always have a preference for offering a task to a person who appears to be real enough, and to whom they can get in touch with via several options in case of an urgent situation.Bloggers are prioritized
Something new to study
Supplemental source for income
Now when it comes to the money, we have already discussed about making money from a blog. Writing a blog can establish a considerable source of income if performed with hard work and dedication. A freelance worker does not know if he will find work for next time or not. But to a blogger who has set up a blog, this isn't an issue. Income from blogs is more efficient, which is why running a blog looks to freelancers like a normal workplace job, but can be done at home or even from anywhere and anytime.
When it comes to running a blog vs freelancing, both offer genuine chances. But why not consider the benefits of the two if you can? Searching for the opportunities bloggers have, it's no question to point out. So more and more freelance workers are approaching over to this practice. If you are a freelancers, then it absolutely would be a excellent concept to at least try it out. All the best.
Please comment below if you have anything to share or ask your query. Thank you. Labels: blogger tips, blogging, Freelance jobs, online jobs free, Work from home
Tuesday, November 5, 2013
Which is the best way to optimize mobile site?
The idea of looking for articles online making use of mobile devices is continuously on the rise, mainly due to the wide variety of mobile
devices and tablets now commonly available in the market. They actually
appear to be improving the cause, and more and more people today are
purchasing and using them. So how are these evolving styles altering
things, and how does it shows impact on you as a website owner?
Earlier, we have seen different ways to optimize our sites for mobile
devices. And there are much more ways to handle this. So which
alternative is the best for offering content to mobile devices?
There are many ways to provide mobile content to your users, and they
are generally considered into three basic categories; Responsive Web
Design (obvious!), dynamic content serving, and creating the mobile
version of a site.
You may like to read:
How to earn money with your facebook pages?
How to add separate contact page to blogger?
How to add facebook like button below blogger posts?
Best practices to write titles for Search Engine Optimization(SEO)
Great tips to reduce loading time of your blog to increase more readers
Idiotic and funny ways you never know to promote your blog
How to earn money from blogs?
Add floating widget to your blogger blog
Get more viewers to your blog using facebook fan page
Responsive Web Design
today. Responsive Web Design (RWD) includes designing content that
automatically resize itself to suit the screen size and resolution of
any mobile device. Here the content itself is rearranging itself, hence
there is no need to create custom redirects to other mobile pages, or
modifying the on-page content itself.
For the user, this would be simple to use, and for a content manager,
it means content only needs to be updated once. From a developer
viewpoint, Responsive Web Design may require rebuilding your site with
flexible templates, grids, style sheets and JavaScript but with very
rewarding results.
Dynamic content serving
This technique is similar to some extent to Responsive Web Design, butat the same time it is also very different from Responsive Web Design.
We discussed that Responsive Web Design detects screen size and
resolution of the mobile device and resizes the content, but in dynamic
content serving the device used by the user is detected at the
server-end, and then the provides a customized page on the same URL.
The custom page is generated dynamically at the server end.
Even though this strategy is very difficult to put into practice and
needs more maintenance, it is the most highly effective method for
offering mobile content to users, and industry experts suggest it for
experienced webmasters.
Separate Mobile Site
The final setup you might want to think about is developing a separatemobile site, where mobile phone users will be directed to a
mobile-optimized version of your site. This implementation enables you
completely personalize your content for a mobile users. Very similar to
making dynamic serving content, this means you need to make separate
updates for content or decorating your mobile site to enable smooth
user experience.
For example we can consider facebook for separate mobile site. It uses facebook mobile version and desktop version. Both looks different and mobile version doesn't allows some extended features. apps, games etc.
If you have anything to suggest please comment below.
Labels: blogger tips, blogging, mobile tips, Web Design
Thursday, September 12, 2013
Separate Contact page in Blogger
Well we discussed about how to "create a blogger contact form". In this tutorial I want to discuss on How to create a page where the contact form will be placed. In the earlier tutorial we came across the points to create a blogger contact form but to have a professional feel we should have it on a separate page. However no need to worry about that because I have came up with a trick to add a contact form on a separate page that we see on other blogs such as wordpress.Why should I use a contact form on separate page?
When you are using a contact form that is released by Blogger, it normally appears as other widgets on every page. This gives your blog an odd look. To make your contact form professional lets have it on a separate page. That is what I want to bring it to you in this tutorial.You may like to read:
How to earn money with your facebook pages?
How to Trace details of unknown number
How to add facebook like button below blogger posts?
Best practices to write titles for Search Engine Optimization(SEO)
Great tips to reduce loading time of your blog to increase more readers
Idiotic and funny ways you never know to promote your blog
How to earn money from blogs?
Add floating widget to your blogger blog
Get more viewers to your blog using facebook fan page
How to add contact form on a separate page?
1. First you need to login to your blogger dashboard.2. You should have already added a Blogger Contact form, if you don't know how to add it please read this article
3. After adding the contact form widget to your blogger you need to create a new page as shown in the figure below.
Step a) Navigate to Pages in your blogger dashboard.
Step b) Now click on New Page.
Step c) Select Blank Page.
4. Copy the code below and paste it in the page editor.
<form name='contact-form'> <div>Your Name : </div> <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/> <div>Your Email: <em>(required)</em></div> <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/> <div>Your Message: <em>(required)</em></div> <textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea> <p></p> <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send'/> <div style='text-align: center; max-width: 450px; width: 100%'> <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p> <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p> </div> </form>
Note: Switch to HTML while pasting the below code into the page editor as shown below.
5. Disable the comments for the page by selecting "Don't allow, hide existing"
6. Now publish it.
7. Now navigate to Template > Edit HTML.
8. Click Jump to widget and select ContactForm widget from there.
9. Click the arrow mark to expand the widget. Then expand <b:includable id='main'> by other arrow mark beside it.
You can see the below code. Delete it.
<b:widget id='ContactForm1' locked='false' title='Contact Me' type='ContactForm'> <b:includable id='main'> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='contact-form-widget'> <div class='form'> <form name='contact-form'> <p/> <data:contactFormNameMsg/> <br/> <input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/> <p/> <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span> <br/> <input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value=''/> <p/> <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span> <br/> <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5'/> <p/> <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/> <p/> <div style='text-align: center; max-width: 222px; width: 100%'> <p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/> <p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/> </div> </form> </div> </div> <b:include name='quickedit'/> </b:includable> </b:widget>
Now replace the above code with the below piece of code.
<b:widget id='ContactForm1' locked='false' title='Contact Me' type='ContactForm'> <b:includable id='main'> <b:include name='quickedit'/> </b:includable> </b:widget>
If you still have anything to ask please comment below.
Labels: Blogger Plugins, blogger tips
Subscribe to:
Comments (Atom)
