February 2017 | Blogger Tips | Blogger Tricks | SEO | CSS and HTML Tricks | Blogger Tips and Tricks

Instagram is a most popular picture and photo sharing network application for smartphones.It's also belong to social networking platform like Facebook, Twitter, and Flicker.You can register as a user in Instagram. When you post a photo or video on Instagram, It will display on your profile.So, others can follow you, like on your photos and comment on photos.Same thing also you can do, comment and like other photos. In instagram, there are 200 millions active users use a month.

Read: Best blogger Widgets 2017 for Blogger

Adding Instagram widget to blogger, you can get more facilities to your blog. Because it will show your photos in profile pages. When ever you go some where else, you can take a photo and share it on Instagram. There are more filters you can add to photos. This Instagram widget, specially design for blogger and it will show your images on blogger even they are not your follower.

By adding this Instagram widget for blogger ,You can increase your follower. Once they visit your blog and if your shared photos are interesting, they will follow you. And you have to share photos according to your blog content,for example if you doing food making blog, you can share about foods.It will easy to get more followers in Instagram.

Today, this article will explain, how to add Instagram widget to your blog site with step by step. By using this blogger widget you can customize Instagram widget appearance like background color, font color and how to show this widget on blogger.So just follow below steps.

How to Add An Instagram Widget in Blogger

1: You need to visit this site to get Instagram widget http://www.intagme.com/

2: Type Instagram username first

3: You can choose slideshow as Widget type

4: Thumbnail Size 100

5: You can select Photo Border If you want a border to photos

6: You can choose Background Color match to your template color with color picker

7: If you want to add sharing button select Yes

Note: Once yo done, click preview and check your Instagram widget appearance.

8: Once you are done click Get Code and copy it.

9: Now just login to your blogger account https://www.blogger.com

10: Go to layout on left side bar on blogger dashboard

11: Click Add Gadget, Select HTML/JavaScript gadget on popup window.

12: Paste the instagram widget code that you copied from intagme website and click Save

13: Now you can drag the widget where you want to keep and click Save Arrangement

You are done

I hope you added Instagram widget to your blog.Hence, you can share photos and videos as i said above. To change color or appearance of this Instagram widget, you can go that site and edit it as your need.

Read: Best Blogger Gadgets 2017 for Blogger

Once you added Instagram widget to blogger, you can ask your visitors to follow you. Before do it, just make sure to add few photos to your profile and profile photos as well.Then they will get trust about you profile and follow you.

If you have a question about this Instagram widget for blogger gadget, You can comment below. If this article helps you, just spend moment share with Facebook twitter and follow us on Facebook and Twitter

Most of bloggers are using custom blogger contact form. For that they used third party site to get work done. It is bit complex work for beginners. Blogger launched new blogger contact form. So, this official blogger contact form and they provide stranded User interface your this new blogger widget. Therefore we have to apply new css style to make it looks nice.
Blogger contact form is very important because every visitors can contact administrator easily.So, you don't want to share your main email address directly with your blog.

Why you should use a blogger contact form

1. This is the best widget for away from third party blogger contact forms.
2. This widget developed by blogger and you can trust them than third party blogger contact us forms
3. Blogger Contact us form helps to contact administrator of the blog for some questions,Some business through this. So, this is very excellent way to get connected.
4. Blogger administrator get message immediately to his inbox.
5.If your blog provide some services, visitors can request service or information thought this blogger contact form.

How to add blogger Contact Form for Blogger widget

Before adding this blogger contact form widget. you have to activate it and apply on slidebar

1. Go to blogger.com and sign in first
2. In blogger Dashboard Click Layout on Left side bar
3. Click on ad Add Gadget (any add gadget where you want to add) and select Contact Us From

4. Now you can save it.

For now, you are successfully added contact form for blogger. Now you need to style your blogger contact form.

How to Add styles to Contact Form For Blogger

1. In Blogger Dashboard Click on Template
2. Now click on Edit HTML and Search ]]></b:skin> By (Ctrl + F)
3. Now Paste below code before ]]></b:skin>

/* Contact Form Container www.bloggertrix.com*/
.contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}

/* Fields and submit button */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}

/* Submit button style */
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}

/* Submit button on mouseover www.bloggertrix.com */
.contact-form-button-submit:hover{
background: #4C8EF9;
color: #ffffff;
border: 1px solid #FAFAFA;
}

4: Now Save your template. You are successfully done for now.

Your Blogger contact form looks like below

How To Add Contact Form for Blogger Static Pages

You can add this blogger contact form to static page in blogger.This is easy to add to blogger and you can make it as a contact form page. follow these guideline.

1. In Blogger Dashboard Click on Template
2. Now click on Edit HTML and Search id="ContactForm" By (Ctrl + F)

3. Now you can see a code like below.

<b:widget id='ContactForm1' locked='false' title='Contact Form' 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>

4. Now just remove the code which i mention with red color
5. Click Save Template button and save your template
6. Now click Pages on blogger dashboard and Click New Page and create a new page
7. Now switch in to HTML composer on left and paste below code.

<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
Name<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<br />
E-mail *<br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<br />
Message *<br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Submit" />
<br />
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</form>
</div>
</div>
</div>

8. Now publish your page and you are done.

If you want, you can copy this page link and connect with your Menu bar, Then users easy to get connect with this blogger contact form.

Read more: How to add widget for blogger

This message will send to email address which you registered with blogger. If you have any request ion regarding to this add blogger contact form for blogger.