Showing posts with label Wants to Add in Blog. Show all posts
Showing posts with label Wants to Add in Blog. Show all posts

Add Contact / Feedback / MoneyOder / Survey / Request Page(s) to Blog

DumpCoding 2 comments


Its a common thing that in most of  blogs,websites are using contact pages or  feedback pages.We create or build a contact page with coding and then we add to our blogs or websites.But Their is another or alternative way to add contact page or feedback page in our website or blog without coding.I already have used here(Go Here).I will show you how you can do that :

Their are some few form building websites (mentioned below) in those you can make your contact foms pages for your website without any coding .

1. You just have to do is create/signup a easy free account in those websites.
2. Create your form in their.
3. Copy the code (form that you have created) & paste that in your website. All done.

Here is some Form Building website Links:
1. www.123contactform.com
2. www.emailmeform.com
3. www.zoho.com
4. www.mycontactform.com
5. kontactr.com
6. www.freecontactforms.com
7. wufoo.com

From above I perosnally using 123contactform.com   and  emailmeform.com . Here is an example ,
just go to my Request Page ,their you can see a sample of contact form.


Q. What/How many types of form can i create ?
Ans : You can create contact page,feedback page,survey page,moneyoder page,request page etc.

reCAPTCHA : Add free captcha to your project / website

DumpCoding , 0 comments

reCAPTCHA is a free CAPTCHA service that helps to stop spam & give security to site.
reCAPTCHA is a Web service. A CAPTCHA is a program that can tell whether its user is a human or a computer.

It is completely free to use in your website / project.To use it
Just Follow the steps:-
1.  Register for a reCaptcha key : Free Register / Signup at recaptcha to create/get key ((private,public key) or API key).After signup enter you website name at "Domain" box to create key ,if  you want to use it in your local server project then write "localhost" at "Domain" box. just as below :



2.  Download reCaptcha dll file for ASP.NET : Download the dll file from here.After file downloaded add to your project reference .

3.  Add reCaptcha on ASP.NET page : To add reCaptcha on your ASP.net page  first you have to
add below code at top of .aspx page to register reCaptcha dll file:
<%@ register tagprefix="recaptcha" 
namespace="Recaptcha" 
assembly="Recaptcha" %>
Then insert the reCAPTCHA control inside of the "form" tag:
Enter/use your reCapcha key(public key,private key)at publickey & private key
respectivly in above code.

4.  Make sure you use ASP.NET validation to validate your form (you should check Page.IsValid on submission).
The Following Example show you overally , how you use reCAPTCHA:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RecaptchaPage.aspx.cs" Inherits="ContosoUniversity.RecaptchaPage" %>
<%@ Register TagPrefix="recaptcha" Namespace="Recaptcha" Assembly="Recaptcha" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>





</body>
</html>
In your code-behind or .cs file add code as below :
public partial class RecaptchaPage : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
 
    }
 
    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        if (Page.IsValid)
        {
          lblResult.Text = "You Got It!";
          lblResult.ForeColor = System.Drawing.Color.Green;
        }
        else
        {
          lblResult.Text = "Incorrect";
          lblResult.ForeColor = System.Drawing.Color.Red;
        }
    }
}
When you enter valid captcha & click submit button ,it shows message as below :

When you enter invalid captcha click submit button , it shows message as below :

You also can change reCaptcha theme by changing Theme="themename" in reCAPTCHA
control.Use ("white","Red","blackglass","clean" in place of "themename") as
below :

How to Use/Add Syntax Highlighter to Blogger ?

DumpCoding 0 comments

Syntax Highlighter is a open source  java script client side code syntax highlighter.
It is a combination of javascript & CSS code.It is used to highlighting code syntax in
blog,Just like in this blog.

To use it just Follow the steps :-
1. Go to your Blogger Dashboard & click on "Design" ,then click
    "Edit Html".

2. Now Go to http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css.
    Then "Select all"  & "copy" on that page.

3. Paste the copied code at the end of the css section of your blogger
    html template (i.e., after <b:skin><!--[CDATA[/* and before ]]--></b:skin>).

4. Then Paste the following code before the </head> tag.
 Code Follows :-

    You can remove any <script> line for languages you'll never use.
    (For example you will never use "python" language then delete that
     <script></script> line contains "shBrushPython.js"). Remove requires
    for faster loding .
5. Insert the following code before the </body> tag.
 Code Follows :-

  Now click "Save" to save customized the template.

6. When composing a blog entry that contains source code, click the "Edit Html"
    tab on the "Posting"and put your source code (with html-escaped characters)
    between these tags:(<pre></pre>) or (<textarea></textarea>) just as below.
 Code Follows :-

...Your html-escaped code goes here...
OR
Substitute "cpp" with whatever language you're using (full list). (Choices: cpp, c, c++, c#, c-sharp, csharp, css, delphi, pascal, java, js, jscript, javascript, php, py, python, rb, ruby, rails, ror, sql, vb, vb.net, xml, html, xhtml, xslt)


How to Remove navigation bar from blogger ?

DumpCoding 0 comments

 Steps:
1- Log in to blogger

2- On your Dashboard, Click/Select "Design" option to edit layout. This will take you to the Template tab. Click "Edit HTML".
      Under the Edit Template section you will see you blog's HTML code.

3- Paste the below CSS code defination just before  the "/* Variable defination" template code as shown in example

 Code Follows:-
#navbar-iframe {
   display: none !important;
}


Example :-

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Rounders
Designer: Douglas Bowman
URL:      www.stopdesign.com
Date:     27 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */
#navbar-iframe {
   display: none !important;
}
/* Variable definitions
  ====================
   <Variable name="mainBgColor" description="Main Background Color"
             type="color" default="#fff" value="#ffffff">
   <Variable name="mainTextColor" description="Text Color" type="color"
             default="#333" value="#333333">
   ...

How To create Scroll Box on Blogger

DumpCoding 0 comments

Here different types of Scroll Box are mentioned below, use anything/anyone you like.
To  Create a Scroll Box , You need to use simple HTML code as below:

Step-1:- Use/Copy following HTML code to make one :

Type-1
Use this code :  <div style="height: 100px; width: 350px; overflow: auto;">PLACE YOUR 
                        TEXT HERE</div>

Result :-
 
PLACE YOUR TEXT:
Here is simple text in scroll box.
Change height : value & width : value
in  <div style="height: 100px; width: 350px; overflow: auto;"> to costumize its size as per
your Requirement.

Type-2
Use this code :  <div style="height: 100px; width: 500px; overflow: auto;">PLACE YOUR 
                        TEXT HERE</div>

Result :-

 PLACE YOUR TEXT:
Here is simple text in scroll box.
Change height : value & width : value
in  <div style="height: 100px; width: 500px; overflow: auto;"> to costumize its size as per
your Requirement.

Type-3
use this code : <div style="width:350px;height:100px;overflow:auto;
                         border-width:2px;border-color:000000;border-style:solid;"> 
                                                        PLACE YOUR CODE HERE</div>
Result :- 

PLACE YOUR CODE HERE
Here is another code result. Change boder-style : value
 to "solid" or "dotted" or "dashed"  in <div style="width:350px;height:100px;overflow:auto;border-width:2px;border-color:000000;border-style:solid;">  to costumize your border style.

Type-4
use this code : <div style="width:500px;height:100px;overflow:auto;
                         border-width:2px;border-color:000000;border-style:dotted;"> 
                                                        PLACE YOUR CODE HERE</div>
Result :- 


PLACE YOUR CODE HERE
Here is another code result. Change boder-style : value
 to "solid" or "dotted" or "dashed"  in <div style="width:350px;height:100px;overflow:auto;border-width:2px;border-color:000000;border-style:dotted;">  to costumize your border style.

Type-5
use this code :         <div style="background-color:F0E283; border: 2px solid green ;
                                    color: green; font-family: 'SketchFlow Print', cursive; font-size: 12px; text-align: right;
                                    height: 100px; overflow: auto; padding: 4px; width: 350px;
                                    position: relative; left: 50px;">
                                    Place Your Text Here.
                                   </div>
Result :- 

Place Your Text Here.
Here is an example of customized
Scroll box..change values 
in <div style="background-color:F0E283; border: 2px solid green ;
color: green; font-family: 'SketchFlow Print', cursive; font-size: 12px; text-align: center;
height: 100px; overflow: auto; padding: 4px; width: 350px;
 position: relative; left: 50px;">
Place Your Text Here.
Here is an example of customized
Scroll box
</div>
As per your requirement.


Step-2:- Enjoy your cool scroll box

Subscribe to: Posts (Atom)