Add Contact Me Page With PHP Contact Script

Today, 

You got to know adding a Contact Me Script  on blogger. This Is a PHP Script . Okay , Lets roll .. .

First, create a Thank You message For Your Visitor.

• Go to Blogger> then click New Post.

Enter your desires Message  ,This Message will shown by visitors after submitting your form .

 View from the bottom of my ♫ ♥

• Copy the HTML Content by clicking  HTML 
• Open notepad.
• Paste Into Notepad
• Save As...

Save As >>

File Name: thank-you.html

File Type: All

BE sure from this Screenshot .

I Am giving You This thank you message as default. You Can Use Your Own. You Can Create it in difference ways. Just giving you a tip

Download php Content 

• Now Extract The rar file using winrar .
• You can locate one of  files named   html-contact-form.php  or similar. 
• Open the php file using notepad.

- - - - - - - - - - - - - - - - - - - - -

•      $ Your_email = 'admin@tipsbee.herobo.com' ;/ / << === update to your email address

• Replace With your email address 

• header ('Location: http://tipsbee.herobo.com/Files/Tipsbee_contact/Contact-Tipsbee.blogspot.com/Thank-you.html'); / / << === change with your validation success page

• Change it if you don't want to use my default thank you message 

- - - - - - - - - - - - - - - - - - - - - - - - - - - -

• Now Time To Upload the files into a free hosting service . if you have registered user of any hosting site upload the whole folder (do not leave any files )  their.

-- -- -- -- -- -- --

Or Register at 000webhost because this is Very good php supported  100% free web hosting site.

Click here to register

Chose a Domain And Upload your files using FTP..same as you got the files after extracting from rar(compressed).

-- -- -- -- -- -- -- --

• Now  Go To Blogger Account .. 
• Create A New Page. 
• Give a name of this page .. Recommended About Us or About 

• Now Click On Html To go html editing mode.

•  Copy and paste this codes..

<div dir="ltr" style="text-align: left;" trbidi="on">

<style>

#sidebar-wrapper, #midsidebar-wrapper, #footer-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer, .jump-link { display:none !important;}

#main-wrapper { width:98%!important;}

.post { width:98%!important; }

</style>

<div style="text-align: center;">

<iframe frameborder="0" height="600" src="Only Paste The html-contact-form.php file's link Here After Uploading " width="100%"></iframe>

</div>

</div>

Now Replace 

___ ___ ____ ____ ____ ____ ____ ____ ____ ____ ____ ____ ____ 

Only Paste The html-contact-form.php file's link Here After Uploading 

By Your html-contact-form.php File's link

___ ___ ____ ____ ____ ____ ____ ____ ____ ____ ____ ____ ____  

Make Sure You have uploaded All files ...

Now Save The Page And View ,,, The Real Contact Me Script That You have now 

Thank You For Reading ..Please Be In touch,,

  ♥  ♥  ♥  ♥  ♥  ♥  ♥  ♥  ♥  ♥  ♥  ♥  ♥  ♥  ♥  ♥

Add Page Loading Time With Stylist Icon

• Now You Can Show Your Visitors. How Long Your Blog Loaded . It Will Count In Second.With Stylist Loading Icon.  I Tried to  Make It Awesome With Some Icons . I   also Provide you some icons. 

If you wish you can add your own images.

Hope You Will Like It.

• Lets Get To Work

• Login To Your Blogger> > Template > Edit HTML> >Process>> Expand Widget Templates
• 
  
• Back Up Your Templates First
• 
  
• 
  
• Search For (CTRL+F) </head>
• Now Copy this Code Just Above Of  </head> Tag ..

<!-- page load timer --> <script type='text/javascript'> var d = new Date(); var starttime = d.getTime();  //Get the start time </script>

• Now Copy This Code Above Of </body> Tag

<!-- page load timer start --> <script type='text/javascript'> var d2 = new Date(); var endtime = d2.getTime(); //Get the end time //Find the difference between the start and end times var totaltime = (endtime - starttime)/1000; //Round 2 decimal places var result = Math.round(totaltime*100)/100; //Output results to a &quot;P&quot; element document.getElementById(&quot;loadtime&quot;).innerHTML = &quot;Page loaded in: &quot;+ result +&quot; seconds&quot;; </script> <!-- page load timer end -->

• Save Your Templates...

We Did The Main Work
Now,

• Go To Blogger > Layout > Add A Gadget > > HTML/Javascript
• Paste following script and save it: 

<div id="loadtime">

<span style="color: #3d85c6; text-align: center;">Please Wait While I Load My Page&nbsp;</span><span style="text-align: center;">&nbsp;</span><span style="color: red; text-align: center;">&nbsp;</span><img src="https://s-static.ak.facebook.com/rsrc.php/v2/yb/r/GsNJNwuI-UM.gif" style="text-align: center;" /></div>

• Save It!

Now .. Visit Your Blog 

 Like Below You Will Show you  Loading.... message 

Please Wait While I Load My Page   

You Can Change Your Text.. Can Change Color

You Can Also Add A Custom Image .. Of Your Own

I am Giving you some Loading Image. Right Click on it>>Copy Image URL>> And Replace The URL Above showing in red color  

Thank You . Be In Touch More Widgets Coming Soon 

Install Flag Translation On Your Blog

• This Widget is awesome to Look. Your Visitors Can Translate Your Blog By Clicking On Any Flag they want . This Will be helpful for Foreigner Blogger .. This Is For Manual Translation. You Know Google Chrome Has A Translation System As Default.    

• To Add This Widget 

• Simply Give a Name Of this Widget . 
• Enter Your Blog's URL
• Click On Generate Button TO Create It
• Add To Your Blog 

Thank Your For Vising My Blog. Please Be In Touch

Install Tabbed Widget On Your Blog

• Tabber Widget Is The MOst Common Widgets . It Will Help You To Make Short Your Blog Template's Height . 

• Lets Install This Widget 

• Login To Your Blog
• From The Script Customize Your Settings 
• Your Blog URL ,How Many Tab You Want To Show Etc
• Click Generate Button To Create It Then Add To Your Blog By Clicking "Add To Blogger"

Install Sidebar Sitemap To Your Blog/Website

• SiteMap

This Is So Much Important For Blog/Website . Because It Allows Your Visitors Visiting Your Site Easily. 

Sitemap Contains Whole Content Of Your Blog. It also important for Search engine.

This Site Map Take a Short place of your blog. you can customize it's SIZE.. Really Its Cool O_O 

Lets Install This Widget

• First Login to your blog.
• Click On Generate Button to create it
•  Add To Your Blog
• On The Opened Page Please Customize Your Size There .
• Add To Blog

• Sitemap Generator 

Comment If You Like That  ...

Happy Blogging  

Add Scrolling Recent Post Widget To Your Blog

This Widget Will Show Your Recent Posts Headings.

See Top Of My Blog

It Is very simple to install.

Just Put Your Blogger URL . How Many posts that you want to show on . And Delay Value.

This Scrolling recent post script   uses the marquee technique on JavaScript

Ready To Install?
.




For Advance Users : Additionally You can Edit  Some information while adding .. Just follow the attached photo .

Here is some symbols you can add any for showing between feeds,

☩ ☨ ☦ ✞
✛ ✜ ✝ ✙
✠ ✚ † ‡
Music
♪ ♫ ♩
♬ ♭ ♮
♯ ° ø
Write
✐ ✎ ✏
✑ ✒ ✍
✉ ⌨
Religion
† ☨ ✞ ✝
☥ ☦ ☓ ☩
☯ ☧ ☬ ☸
✡ ♁ ✙ ♆
Politics
Ⓐ ☭ ✯
☪ ☫ ✡
☮ 卐 ✌
Contact
✆ ✉
☎ ☏
Scissors
✁ ✂
✃ ✄
Starry
⋆ ✢ ✣ ✤ ✥ ❋
✦ ✧ ✩ ✰ ✪ ✫
✬ ✭ ✮ ✯ ❂ ✡
★ ✱ ✲ ✳ ✴
✵ ✶ ✷ ✸ ✹
✺ ✻ ✼ ❄ ❅
❆ ❇ ❈ ❉ ❊☩ ☨ ☦ ✞
✛ ✜ ✝ ✙
✠ ✚ † ‡


Pointers&Arrows
➟ ➡ ➢ ➣ ➤ ➥ ➦ ➧ ➨ ➚ ➘ ➙ ➛
➜ ➝ ➞ ➸ ♐ ➲ ➳ ⏎ ➴ ➵ ➶ ➷ ➸
➹ ➺ ➻ ➼ ➽ ← ↑ → ↓ ↔ ↕ ↖ ↗
↘ ↙ ↚ ↛ ↜ ↝ ↞ ↟ ↠ ↡ ↢ ↣ ↤
↥ ↦ ↧ ↨ ➫ ➬ ➩ ➪ ➭ ➮ ➯ ➱ ↩
↪ ↫ ↬ ↭ ↮ ↯ ↰ ↱ ↲ ↳ ↴ ↵ ↶
↷ ↸ ↹ ↺ ↻ ↼ ↽ ↾ ↿ ⇀ ⇁ ⇂ ⇃
⇄ ⇅ ⇆ ⇇ ⇈ ⇉ ⇊ ⇋ ⇌ ⇍ ⇎ ⇏ ⇐
⇑ ⇒ ⇓ ⇔ ⇕ ⇖ ⇗ ⇘ ⇙ ⇚ ⇛ ⇜ ⇝
⇞ ⇟ ⇠ ⇡ ⇢ ⇣ ⇤ ⇥ ⇦ ⇧ ⇨ ⇩ ⇪
⌦ ⌧ ⌫

♤ ♧ ♡ ♢
♠ ♣ ♥ ♦
Yes ☑ ✓
✔ √
Hand ☜ ☞ ☝
☚ ☛ ☟
✍ ✌
No ☐ ☒ ✇
✖ ✗ ✘
✕ ☓
Flower ✽ ✾ ✿
❁ ❃ ❋
❀ ⚘

Meta Tag Generator Tool

Websites and a blog or web site meta tag for an item becomes the most popular search engines are said to include HTML tags. Meta tags for search engines to more accurately index your site, but it is to communicate with the search engines to properly index your site, and more accurate and provides more information about making your web site.

Mata Tag Generator tool is SEO important tags within the knowledge create a second is designed to help bloggers and web masters. If you and or your blog into a meta-form "to create a meta tag" and paste the results into individual words everything that is required to create a web page HTML page title Creator Tool importance, viz. <head> and the closing </ head> tag between

• Meta Tag Generator Tool:

• The importance of meta description:

Up to 150 characters of the meta tag description describes a blog or web site, but that is a description of your site. You can count a number of tools to create characters for his role in the description of the meta description From Here:


Example Of Description : Money online, blogging tips, social media, techie information and how the information is useful to everything you need to know about the Internet blog.

• The importance of Meta Tags:

List of key words related to your web site meta keywords. These conditions must be separated by commas. If you have selected a few, but supports smart keywords that reflect the entire contents of your blog.

• The importance of meta author:

Author meta tag is used to insert the name of the blogger or Directory.

• Robot meta means:

Robots meta tag to tell the search engines use to index and / or Web site or browse.

Show Your HTML/JavaScript/ Css Codes In Bulb Lights Scroll Box

 Every Blogger wants new features.
I will share a new Scroll Box with light bulb ' I am sharing this shortly . 

OK lest start 

1. First go to Blogger > Design > Edit HTML
2. Now Search for the tag ]]></b:skin> 
3. Copy and paste below code just above/before ]]></b:skin> tag.

.code1 { overflow:auto;width:503px;height:200px; font-family: "Consolas", "Courier New", Courier, mono, serif; color:#848176; margin : 15px 35px 15px 15px; padding : 10px 10px 10px 35px; clear : both; list-style-type : none; background : #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpHwHntTUrg9nle25nUZVgM9bnNmBzG_eH6YsrZpkOI_kmJ4pBa2nBij8elRyRJQTlH4g7_MJ1e14LAY7yiFmGLWwT47mdqFNJPW7-TSqjP_4bIPCbIpehDEXWOd5PcnEkS-dbVaZM5Yd7/s320/btsnts-show-codes1.jpg) repeat-y top left; border : 1px solid #000000; border-left:20px solid #ccc; -webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px } .code1:hover{ background : #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfH8_8E2FM_ZjVZxtVesg_6CLcoGLk1_ST1ByiZtqWmB6FMN5M3C0rmVQccra1WHYLhEd_Z3uGzAItSWOW015SauWv8uz6HCXvW_Z34h_E5uxnM_22PtPzqAKBIaF5Z72Jv1IQQHK_BTVY/s1600/btsnts-show-codes2.jpg) repeat-y top left; color:#FEF9BF; border : 1px solid #000; border-left:20px solid #ccc; -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3); box-shadow: 0px 0px 10px rgba(0, 0, 0, .3); box-shadow: 10px 10px 5px #888888; }

How Will You show it In your Blog Post ?


In New Post,

You have to paste this code in html mode.

<div class="code1">Write Your Code Here </div>




If you Still having problems then leave a comment below