Showing posts with label Blogging Tutorials. Show all posts
Showing posts with label Blogging Tutorials. Show all posts

How To Create Contact Form on Blogspot Page

Adding contact form in a blog is absolutely necessary and by doing so you are encouraging your blog visitors to be social. By adding a contact form, visitors will have the opportunity to speak up their mind. So instead of using your blogs comment section, people will contact with you more personally using these contact forms.

Sometimes people in your blog left unrelated message in your posts comment area.

Now we are going to create a contact form for Blogger using Google docs where you can manage multiple forms. Believe; it’s a simple, powerful, spam free contact form for your blog and it has more options.


Benefits of Google docs contact form

  • You can create as many contact forms.
  • You can view all your responses in a separate spreadsheet.
  • Create and easily embed the contact form to any pages in your blog.
  • You can add radio buttons, checkboxes and list in contact form.

How to create contact form for Blogger

Go to Google Drive and login using your Blogger account. Now at the top left corner click create form and you will see different templates to choose from. Better choose the default template and name the title as “Contact Form”.

Now as of basic contact form you will have to create three fields that is name, email and message field. After selecting the template you will see three options that is question title, help text and question type.

Your Name

Now to add a name field select “text” in question type and name the question title as “your name”. If you want to help your readers with more info then you can add help text. Now check this field as required question, so that users will not be able to leave a message with this field blank. Check the Required  Question .Click done.


Your Email

You have just added the name field and to add an email field select “text” in question type. Now name the question title as “Your Email” and mark this question as required. This is an email field and so users have to only enter their email address and not a normal text. In order to force them to enter their email address just select date validation, text and email address as you see in the image.


Your Message

Now for the message field select paragraph text, mark the field as required and name the field as “your message”. Question type  "Paragraph". Now drop down date validation, select text and set the minimum character count as 100. By doing so, your users will leave a long detailed message.


If you wish to add phone number, country or URL field then the process is same what you did above. For number drop down date validation, select number and select greater or less than values. For URL value drop down date validation, select text and then select URL.

Additional Spam protection – Click Add item and select check box and mark it as required question and name it as “Human Verification”. In option field enter “Confirm that you are a Human and not robot!” and click done.


 When you click send form a popup window opens, now click embed and grab the iFrame code.



Copy the code , and the log in on your blogger account. Create a new Page name it Contact Us click the html .

Now paste the embed code in HTML view and publish it.




Now you have a simple, yet powerful contact form in your Blogger contact page. Edit iFrame width and height to perfectly fit your blog.




Make sure your site's ready for mobile-friendly

Starting April 21, 2015, Google Search will be expanding its use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in Google Search results. Users will find it easier to get relevant, high quality search results optimized for their devices.

This month I do change my blog template, I download Free Responsive Template at soratemplates.com. you can buy ready made template if you don't know how to fix  scripts problem with the Free Version.

Responsive Template are Mobile SEO ready.
Practically every typographic element has been endlessly tweaked for different mobile screen sizes to make sure it looks great no matter what the device.



Finally I have Notification from Google.

You can test your website if is Mobile Friendly.

Visit : https://www.google.com/webmasters/tools/mobile-friendly/

Learn  more about mobile friendly  READ HERE








How to Put News Feed or Breaking News on Template Navigation Bar

I was looking for a scripts for news feed and finally someone give me idea  to copy from other blog template.

Navigation news feed shows your latest post  like Headline News.

Now  here what I did..

The scripts is from Perfect Mag by Sora Template.

Before you try to do this BACKUP your Template First!! .



1. Go to your Template  and find this  keyword  "skin>" .

2. Paste this Breaking News Code  after the <b:skin>


CODE

3. Now find another keyword "primary" this is where your navigation bar code place.
we actually creating  new navigation bar.


4. Paste this code before  <div id='outer-wrapper



CODE

5. Edit  this  part with your own blogsite and number of post 20 , you can also change the DON'T MISS
just find DON quotes MISS.  then Save!








How to Add Google Custom Search Engine on your Blog Template

Google custom search to let sites display the search box for inner site search only. If you run a website that has tons of pages with huge data and its really difficult to set the perfect navigation than you could use search engine that will help your visitors to navigate easily just by searching the thing that they in search box and search box will automatically give them the path of the content that they want. It's totally easy.

Google custom search engine also allows you to monetize the search result pages but for that you'll need to have normally approved Google AdSense account. You can easily sign in to custom search engine with your AdSense account and enable monetization in monetize page. It might take time to activate but later it will start working. Google displays ads in the search result pages and ads are also relevant to the every keyword that user may search and you're easily paid for clicks on ads and also impressions.



OK Lets start.

1. First create a landing page where  search result  will show up. Name it "Search Result" then publish. Open the page and copy the link , we will need that link later.


2. Go to your Google Custom Search If you have existing Custom Search Engine just edit it.

Insert you Blog URL here .


Paste your Search Result Page  URL here.. save and get to code



3. The 2 code  copy and paste it on your Search Result Page must be in HTML.



4. We have to ways to put Custom Search Engine.

A.) Put the search engine with your current  BLOG TEMPLATE search box.

1. Copy the first code  and change this value:

<input type="submit" name="sa" value="Search" />
To this
<input type="submit" name="sa" value=' '/>

 2.  After changing value Convert the code using the tools
Here : http://www.gadget-technolog.blogspot.com/2012/03/blogger-ad-code-converter.html

 3. Go to your  blog template and then   press   CTRL+F  search this keyword "id='searchform


4. Replace the form code with your generated code  then save.Test your code.


(here i have to remove the fix on the id='searchformfix to fit on my template)


 I also edit here float padding  height and width to adjust the search box placement.


B.) Put the search engine code  by adding gadgets or widgets this is very easy for beginners :)

Direct paste the  First code without editing anything on your Layout.






How to Fix Error Page Share Button on Blogger Template

I 'm changing my  Blog Template on gadget-technolog.blogspot.com
I test the template on my test blog  with no errors ,  then  I upload it on gadget-technolog.blogspot.com  and test it again..    I got a error share button which are embedded on the template  when I click the Share button instead it open new tab and share it on social media it open a blog post  " PAGE NOT FOUND".




I observed the behavior of the  scripts .

On blogspot.com   it needs data:blog post  which  works perfect on  blogspot with no Domain.


While on blogger with domain   its open  it targets a site page which cause the "Page Not Found".


To fix this we need to replace the scripts with  direct social network links.

On your Template Search Share buttons or Share-post  with data:post

Replace then with this new Facebook , Twitter, Google Plus  share buttons.


CODE





Now this is the results..












New Facebook Pop Out Page Plugin Widget v2.3

In a post on its page for developers, the social networking giant suggested that they start using the new Page Plugin instead.

It allows administrators to promote their Pages and embed a simple feed of content from a Page into other sites.

"With the release of Graph API v2.3, the Like Box plugin is deprecated and will stop working on June 23rd 2015. Use the new Page Plugin instead. The Page Plugin allows you to embed a simple feed of content from a Page into your websites," it said. posted : http://www.gadget-technolog.blogspot.com/2015/04/like-box-plugin-for-page-is-deprecated.html

 The  New Page Plugin widget remains in a fixed position on the right-hand side of your site.  When you hover over the blue facebook image, the Page Plugin will then slide and reveal itself using jquery.




 How put this widget on your blog site

 1. Copy this Scripts  change the appId number if you have and paste it on your Blog Template  after  <body> tag.


CODE



 Sample Image:


2.  Copy the Scripts below  on your Notepad or Text Document .


CODE



3. Find and Edit the  Fallowing  Press Ctrl+F .
Blogmytuts  = Your Page Name

320 = Height of your Plugin optional  If you want to change it :)  .




4. Paste  the Script on your Blog Gadget or HTML widgets.


Now your Done!

Optional  Scripts  if you don't want No feed of content from a Page.
Edit  Blogmytuts Page Name 




CODE


If you want to convert it to PHP this website auto convert my scripts thanks!!





Facebook Pop Out Page Like Box with Post Feed

It allows administrators to promote their Pages and embed a simple feed of content from a Page into other sites.

Latest Page Plugin with Feeds  I already use this plugin before but it eats a lot space.

 The widget remains in a fixed position on the right-hand side of your site.  When you hover over the blue facebook image, the like box will then slide and reveal itself using jquery.

This widget show page post and the face who already like your page.


Get the Latest Plugin

"With the release of Graph API v2.3, the Like Box plugin is deprecated and will stop working on June 23rd 2015. Use the new Page Plugin instead. The Page Plugin allows you to embed a simple feed of content from a Page into your websites," it said.

1.Visit this Page : https://developers.facebook.com/docs/plugins/page-plugin
2. Get the  SDK Code
Don't Have Application ID?
Get Idea here : http://www.gadget-technolog.blogspot.com/2014/01/create-your-own-via-status-on-your.html



3. Paste the code on your template  right after the  <body>



If there is Error  like this one..
Error parsing XML The reference to entity "version" must end with the ';' delimiter



Try this scripts change the Application ID (appId)with your own .


<script>
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src =     &quot;//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;appId=107963722663354&amp;version=v2.3&quot;;
  fjs.parentNode.insertBefore(js, fjs);
    }(document, &#039;script&#039;, &#039;facebook-jssdk&#039;));
</script>

Other Scripts with cookies and login 

<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId  : &#39;107963722663354&#39;,
      status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the   session
      xfbml  : true  // parse XFBML
    });
  };
    (function() {
    var e = document.createElement(&#39;script&#39;);
      e.src = document.location.protocol +   &#39;//connect.facebook.net/en_US/sdk.js&#39;;
    e.async = true;
      document.getElementById(&#39;fb-root&#39;).appendChild(e);
    }());
</script>
Or This one

<!-- facebook -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
    FB.init({
      appId      : '107963722663354', // App ID
      xfbml      : true, // parse XFBML
      version    : 'v2.3' // sdk version          
    });
    // Additional initialization code here
  };
  // Load the SDK Asynchronously
  (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_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>
<!-- /facebook -->
NOTE: Remeber to change Application ID with your own the one with color RED OK!.

This handy tool automatically converts javascript ad code into the correct format so you can embed it directly into your new xml Blogger template.
Visit :http://www.gadget-technolog.blogspot.com/2012/03/blogger-ad-code-converter.html
Copy your Facebook plugin scripts paste it here and convert. then directly paste on your template after <body>



4. Copy this code on a Notepad and find edit the fallowing  press CTRL + F
RED color your Facebook Page name
BLUE color  The Height of the widget


<!--Floating Facebook Widget by www.gadget-technolog.blogspot.com START-->
<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".blogmytuts").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .blogmytuts{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxXiBmIYKiRr2q3GeXe4jVwmPEYNvhIPif1l14B89PUHPoKpPXXYROa3Wi8PpkaTCYsthsiW7tAxGHEs3bpFZ5dc-UuFBKkWIo8snwqe_hYTvz-85WPBxbCzJvz8bJgoGxH2YJrtus4CDa/") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 1px 0 46px;width: 250px;z-index:  99999;position:fixed;right:-250px;top:5%;} .blogmytuts div{ padding: 0; margin-right:-8px; border:4px solid  #3b5998; background:#fafafa;} .blogmytuts span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .blogmytuts span a{color: gray;text-decoration:none;} .blogmytuts span a:hover{text-decoration:underline;} } </style><!--Brought to you by www.gadget-technolog.blogspot.com--><div class="blogmytuts" style="">
<!--Brought to you by http://www.gadget-technolog.blogspot.com/2015/04/facebook-pop-out-page-like-box-with.html--><div>
<!-- http://www.gadget-technolog.blogspot.com/2015/04/facebook-pop-out-page-like-box-with.html--> <iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FBlogmytuts&amp;width=250&amp;height=570&amp;colorscheme=light&amp;show_faces=true&amp;header=true&amp;stream=true&amp;show_border=true&amp" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:570px;" allowtransparency="true"><!--Brought to you by www.gadget-technolog.blogspot.com--></iframe><!--Brought to you by www.gadget-technolog.blogspot.com--><span><!--Brought to you by www.gadget-technolog.blogspot.com--><center>
<a style="color:#a8a8a8;font-size:12px;" href="http://gadget-technolog.blogspot.com">blogmytuts</a> - <a style="color:#a8a8a8;font-size:12px;" href="http://www.gadget-technolog.blogspot.com/2015/04/facebook-pop-out-page-like-box-with.html">Click Here to Get this Widgets</a></center>
</span></div>
</div>
<!--Floating Facebook Widget by www.gadget-technolog.blogspot.com AND www.blognizend.blogspot.com END-->

5. Add or Paste your edited scripts on your blogspot / site html gadget or widgets the SAVE.






UPDATE LATEST PLUGIN 2.3
VISIT : http://www.gadget-technolog.blogspot.com/2015/04/new-facebook-pop-out-page-plugin-widget.html




Older Post ►
 

Copyright 2011 Gadgets Technology is proudly powered by blogger.com