This news must break all blogger fans’s hearts. An Official Contact Form for Blogger was released on day ago. As you know, contact form for Blogger is a weak point of this platform, may be make you confuse before choose it to start a blog. Before this release, we must create an third party contact form for Blogger (common from google docs) and it always make use tired. But now, all were gone. We are free to make our beautiful and truely contact form for Blogger with real HTML code. Love love love it
Add Contact form for Blogger by widget
Access your blog layout, click Add a Gadget link on any section. When “Add a Gadget” was shown, click More Gadgets, you will see the contact form widget (with yellow email icon) on the top. Then click on the title “Contact form” (or on Plus button at right hand) to add Contact form for Blogger. May be you will be ask to input title for the gadget, just input one and click Save.
Add widget Contact form for Blogger
Now, turn to your blog home page and watch Contact form for Blogger in display
Contact form for Blogger in action
You can find the HTML code of contact form for Blogger as below, and try to use CSS to make it become more beautiful
We knew, Google released Contact Form for Blogger last week. And I received many requests to make a contact form for Blogger on Static page instead widget, because widget is on side bar and it’s not polite to contact or not friendly with visitors who usually contact us from a stand alone page.
Now, I have a workaround solution will help you display contact form for Blogger on static page with css only. I will release many tips to make contact form with js, jquery, but now, please enjoy with CSS first
Step 1: Add contact form gadget
Access your blog Layout. Click on any Add a Gadget link. An Add a Gadget window will be shown, click on More Gadgets, and choose add Contact Form.
Add Contact form for Blogger by gadget
Add contact form for Blogger window
On Configure Contact Form Widget window, click Save button.
Then just save your contact form
After added Contact form gadget, please drag and drop it below Blog Posts gadget, then click Save arrangement button.
Drag and Drop contact gadget under Blog Posts and Save arrangement
Step 2: Hide contact form widget
Access your blog Template, and click Edit HTML. In HTML editor, find
]]></b:skin>
Then, insert beforewith the code
.widget.ContactForm { display: none; }
Open template editor and paste the code
Step 3: Make contact page
Access Page, then create a blank page with a name mean “Contact” or any text you want.
Add Contact Page
In page editor, switch to HTML mode and paste the below code into content field
What’s advantage of jQuery? Yes, right question. A big advantage of jQuery than CSS is that it allows you place Contact form any where you want. And this tip is base for my futures about Customize Contact form for Blogger.
Step 1: Add jQuery and Contact widget
Please read “Add jQuery to your Blogger blog“. Remember, if you already added the jQuery before, and now, you add it again, your blog will be broken with javascript error, so please check and follow exactly what I wrote in the above link.
Next, please read my Blog post to know how to Add Contact Widget to your blog.
Step 2: Add CSS and Javascript
Please access your blog dashboard, choose Template, then click Edit HTML button. Now, copy and paste the below code before ]]></b:skin>
If you don’t want to create static page to insert contact form for Blogger as my tip, or also don’t want to place it at right sidebar. So this tip may be your perfect choice, create a floating box of contact form.
Screen shot
Video demo
How to create it
Add jQuery and Contact Form Gadget
If your blog has no jQuery before, justread my tutorial. I also wrote an article to help you figure out how to add a Contact Form gadget for your blog. If you did not add one, please read the tutorial.
Add Css and Javascript
Please paste the below code before ]]></b:skin> in your blogger template
Do you like a rating system similar with Youtube for your Blogger / Blogspot website? If yes, you found a right tip. This guide will help you install a like and dislike button for each post on your blog and support share button also.
Screen shots
Like / Dislike and Share button in action
How to install
To install this rating system, please follow below step
Access your dashboard, choose Template then click Edit HTML. Click into code editor and find <data:post.body/> (Win: Ctrl+F). Then insert after each found result with below code:
/* ############################################ Like / Dislike rating system plugin for Blogger Author: Tien Nguyen Copyright: http://bloggeritems.com ############################################### */ //bi-tip-2546-easy-guide-02 var default_share_description = 'Love it';//default share description when your site has no one var default_share_title = 'This is it';//default title share when your site has no one var text_likes = 'Likes';//text use in "like" button var text_dislikes = 'Dislikes';//text use in dislike button
I usually create many templates for Blogger Items. I write this tip to help myself save the time each time need to find a right data tag. Hope also help you.
List of Global Layout Data Tags
Blog Title
<data:blog.pageTitle/>
This tag will show your Blog Title. You can change value of this tag by access: Settings/ Basic / click Edit link on Title field, type the title you want and click Save changes.
Page name
<data:blog.pageName/>
This tag will show your Page Title, in general, it’s your post title or page title you typed when publish.
Page type
<data:blog.pageType/>
This tag will show the type of current page. This tag has below values
index - mean the current page is home, label or search page.
static_page – mean the current page is a static page
item – mean the current page is a post.
archive – mean the current page is time archive page
error_page – mean the current page is 404 page.
Blog Description
<data:blog.metaDescription/>
This tag will show the description of your blog if the current page is home page, or show the description of post if its type is static_page or item To change the description for home page, access Settings / Search preferences. one Meta tags section, click Edit link on Description field, check Yes at Enable search description? option. Then input your blog description and click Save changes. To input the description for your post, before publish a post, look on right side, you will see Search Description option, click and input the snippet for the post.
BLOG URL
<data:blog.url/>
This tag will show the canonical URL of the current page. Canonical is current URI of the page without extend paramenters. Example: http://bloggeritems.com?id=100 => canonical URL = http://bloggeritems.com
Home URL
<data:blog.homepageUrl/>
This tag will show the home URL of your blog.
Blog encode
<data:blog.encoding/>
This tag will show the encoding that’s using in your blog, common is “UTF-8″. LANGUAGE DIRECTION
<data:blog.languageDirection/>
This tag will show either “ltr” or “rtl” for left-to-right and right-to-left languages, respectively. This tag value will change base on the language that you set up for your blog.
Feed links
<data:blog.feedLinks/>
This tag is only effect on header of page (before </head> tag). The result of this code will like below:
Welcome to my the first post about image slider collection for Blogger. In this article, I will show you how to add Nivo slider to your blogspot template with classic style.
You can check demo at nivo website. Thank you all my readers, who requested sharing these tips like this post.
Note, before go with this tip, you must know a little about HTML.
Please follow below step to add Nivo slider to you blogspot:
/* * jQuery Nivo Slider v3.2 * http://nivo.dev7studios.com * * Copyright 2012, Dev7studios * Free to use and abuse under the MIT license. * http://www.opensource.org/licenses/mit-license.php */
<script type='text/javascript'> //<
