add Related Post Widget To Blogger

In this post I gonna to show you how to add Related Post Widget to your blogger blog. The widget is free and ad-free. It takes a minute to get the widget up and running on your blog, no signup required. Display thumbnails of posts having same labels or categories at the bottom of each blog page engages the reader more and increases the pageviews. However there are some changes you may like to make to the gadget in terms of appearance, Text and Position of the gadget.In this post we will see how to do the following.  I will share that how you can customize this widget little bit like repositioning the widget or changing any default text in widget.

 

Add It To Blogger

 

1. Go to link within Website.
2. Enter necessary details and fill up this simple form. Like Screen Shoot Below.

3. Set Stories (width) 3, 4, 5, which one compatible with your blog width.

4. Click on Get Widget! button and next click on install widget like screen below.

 

5. Change The Title To You Also Like or Any this you like. like Screen Shoot Below.

6. Click on Edit Template link and add Condition tag. like  Screen Shoot Below.

7. Select HTML Code Like Showing Above in screen Shoot and Replace with Below code.

<b:includable id='main'><b:if cond='data:blog.pageType == &quot;item&quot;'><data:content/></b:if></b:includable>

The Above Hide the Widget on blog homepage if you want to show widget on home page so skip this step.

8. click on edit Content link and this script in text area above the script. This script is change your related post widget title. like screen shoot below.

<script>linkwithin_text='Related Posts:'</script>

Note:- You can Related Posts text with your own words anything you want.

9. Click on add widget button.

10. once layout window is appear drag the widget at bottom in your blog layout like screen shoot below.

11. Click on save at the top right corner to the blogger layout… That’s it you are done…

If there is a technical problem with the widget Feel free to leave a comment in comments box below. if you read all steps carefully so I think you not face any problem with related post widget to blogger blog.

thanks for reading our post. Subscribe our blog for daily updates.

Read Article →

Add Contact Form With File Upload Option To Blogger

The contact form that I am using on this blog is from Kontractr Contact  Form and it is all free. Today we will learn to create a simple contact form with no company Ads and along with an upload option that will allow your visitors to send you files straight from your website. The files can be a text file, video, audio, pdf, gif, png, anything.  Many bloggers have already used several sites for contact form building and they have posted in-depth tutorials for this. You will be able to find quite a few of them yourself. Here is my addition. A contact form is indeed essential for a professional blog. A sign that the blog is professional. There are a number of services, which allow you to paste a customized contact form to your own blog. You may want to enable Captcha (image of numbers and letters) in your form to fight the spammers. There are people who use automated ways to contact you if you have a popular blog. So, to avoid these spams, use a captcha. In order to use Captcha, click Form Properties from More Actions menu. Check the box, Need Verification Code. Also you can set the ‘Thank You’ message here. This is my choice for professional contact forms. You can do pretty much great customization with this application. Go to emailmeform and sign up. You can start a new contact form after signing up and you can add fields to it the way you like.

 

Create Form with your Own Style

Once you are registered click the "Add a Form" button and choose the form builder option.

Keep your form simple with some important fields only like Name, Blog URL, Email, Age, Country, Subject, File Upload, Captcha and Message. The form builder looks like this,

 

1. Click the Name button in advance section
2. Next click Web site
3. Next Email
4. Next Hidden Field. Now click the hidden field section on the right and rename it as Age
5. Next click Hidden Filed again and rename it as Country
6. Next click File Upload  (Optional you can leave this option if you don't want users to send you files via email)
7. Now From the Basic section click Paragraph Text & click it to rename it as Message
8. To make a specific form option a must to fill then simply click that row and select required as shown below.

Your Form Must Look like this…

9. Click on form title and your contact form Title Look like this…

Contact us for any feedback 
or 
advertisement query you may have
We will catch you back as soon as time allows

10.  Now click on the file upload tab and select file format which is you are accept from user.

File Upload Options Look Like This.

11. Now on the form settings choose Redirect URL and insert the page link of your thank you page.

You must Create Separate Post For Thank you Page by giving the old published date.

12.  Next click the Captcha Code at the bottom and select the none option from the left section as shown below:

 

13. Hit Save Button You Will See Window Like Screen Shoot Below.

14.   Choose the second option and add a recipient email ID. Choose an ID that you often use so that whenever someone leave a message you may receive it straight in your inbox.

Write your email in add recipient : Tab and leave other options by default and hit save.

 

15. In Form manager Click Code

16.  Choose the HTML Only option and copy the code. Make sure to enter the URL of the page where you want to embed the contact form.

 

Now Simply Copy and Paste the Html Code in to your Contact Page. to Delete emailmeform logo just remove these lines from the Html code. which is your see end of your page.

<div style="margin-top:18px;text-align:center">   <font face="Verdana" size="2" color="#000000">Powered by</font><span style="position: relative; padding-left: 3px; bottom: -5px;"><img src=   "http://www.emailmeform.com/builder/images/footer-logo.png" /></span><font face="Verdana" size="2" color="#000000">EMF</font> <a style="text-decoration:none;" href="http://www.emailmeform.com/"   target="_blank"><font face="Verdana" size="2" color="#000000">Online Poll</font></a><br />   <a style="line-height:20px;font-size:70%;text-decoration:none;" href="http://www.emailmeform.com/report-abuse.html?http://www.emailmeform.com/builder/form/1Tjf29BXPdH6UrChJ7f14M" target=   "_blank"><font face="Verdana" size="2" color="#000000">Report Abuse</font></a> 
</div> 
<div style="margin-top:18px;text-align:center">   <font face="Verdana" size="2" color="#000000">Powered by</font><span style="position: relative; padding-left: 3px; bottom: -5px;"><img src=   "http://www.emailmeform.com/builder/images/footer-logo.png" /></span><font face="Verdana" size="2" color="#000000">EMF</font> <a style="text-decoration:none;" href="http://www.emailmeform.com/"   target="_blank"><font face="Verdana" size="2" color="#000000">Online Poll</font></a><br />   <a style="line-height:20px;font-size:70%;text-decoration:none;" href="http://www.emailmeform.com/report-abuse.html?http://www.emailmeform.com/builder/form/1Tjf29BXPdH6UrChJ7f14M" target=   "_blank"><font face="Verdana" size="2" color="#000000">Report Abuse</font></a> 
</div>

Note: Paste the Contact Form code in Edit HTML mode only and hit the publish button on blogger Post Editor. Do not toggle to compose mode because this will collapse the form. 

The Steps are to much lengthy but Result is Very Professional so read all steps carefully. you have any trouble for this tutorial leave  your comments below in comments box. Thanks for reading our post and check out our previous Contact Form Tutorial. and subscribe our blog for daily Updates.

Read Article →

Add Share This Sharing tool at the top of your blog

Share your blog in popular social networking/bookmarking sites is very important to get good traffic and I think this is the easiest way for increase our blog/website traffic. This is indeed the most beautiful Social Network Navbar share widget featuring the top Social Network sites (Google Plus, Twitter and Facebook ). In this tutorial we'll create Navbar Sharing button for your blog. With the 'Sharethis' button visitors will be able to share your content with their friends or community, and you know yourself what will happen. Share This is a very popular service offering multiple Social Bookmarking Widgets for blogs and websites.i have a Blogger Tips show you how to add the new Share This Navbar Buttons to various position on your blog. You can see the buttons in question to the end of this Article and that position will be one of the options for your blog. In this part I going to show you  Navbar Sharing buttons Horizontcally Align at the Top of your blog. For Navbar Sharing we have three steps to add this on our blog so we make a video tutorial for this Tip.

Preview Live Demo

ShareThis Tool Tutorials

Part 1: How To Add Share This Buttons With Horizontal Counters

Part 2: How To Add Share This Floating Right Buttons to your Blog

Part 3: How To Add Share This Navbar at the Top Your Blog.

Part 4: How To Add Share This Heart Style Sharing.

Note:-  Always Make a Backup of Your Template Before You Edit Your Template –( how to make a template backup)
1. Go To Your Blogger Dashboard>> Template>> Proceed.
2. Press CTRL+F and find the following Code in you template. (how to find code using search bar)

</head>

3. Paste the below code before/above </head> (Before Closing head section)

<script type="text/javascript">var switchTo5x=true;</script> 
    <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script> 
    <script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>

4. Next Find the following piece of code.

]]></b:skin>

5. and paste the following before/above ]]></b:skin> (before closing Css Section)

.stpulldown-gradient 
    { 
    background: #E1E1E1; 
    background: -moz-linear-gradient(top, #E1E1E1 0%, #A7A7A7 100%); /* firefox */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E1E1E1), color-stop(100%,#A7A7A7)); /* webkit */ 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E1E1E1', endColorstr='#A7A7A7',GradientType=0 ); /* ie */ 
    background: -o-linear-gradient(top, #E1E1E1 0%,#A7A7A7 100%); /* opera */ 
    color: #636363; 
    } 
    #stpulldown .stpulldown-logo 
    { 
    height: 40px; 
    width: 300px; 
    margin-left: 20px; 
    margin-top: 5px; 
    background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_H805ylDwtvbSfY5oOvyhJFTHx9lnacAa5UIOyixn4E8nc3rWgHbHUypncMlM_OjaBGKRgphrYY0yQCFgf8SvlB3Z30EGDFErwGKu89mkopk7lvSDsp6OEp4XP0Nsxp4iuDeRgTqb7yFa/s1600/Graphic1.png") no-repeat; 
    }

Note:- Change the highlighted link with your own logo like our logo. 
Your Size must be…. 300 X 40 PX.
6. Find the following piece of code.

</body>

and paste the following before/above</body> (before closing Body Tag)

<script type="text/javascript">stLight.options({publisher: "1cce35ce-6744-4bac-9fa5-8f17a67a6fa6"});</script> 
    
<script> 
    var options={ "publisher": "1cce35ce-6744-4bac-9fa5-8f17a67a6fa6", "scrollpx": 50, "ad": { "visible": false}, "chicklets": { "items": ["sharethis", "facebook", "twitter", "linkedin", "googleplus", "pinterest", "stumbleupon", "technorati", "delicious", "digg", "reddit", "email"]}}; 
    var st_pulldown_widget = new sharethis.widgets.pulldownbar(options); 
    </script>

and I am also making video for this sharing tool if you want to add more sharing buttons so see video tutorial and make your navbar sharing with your choice.

Need Help…!
I just hope this little object may help in adding a new spice to your blog's appearance. If you have any problems installing the widget, just post me a query.This plugin would work just fine if all the above steps are carefully followed. The steps are extremely easy to try. I just hope you find it worth using. If you ran into any technical problem just feel confident to leave your comments. I would love to help you out. Thanks for reading our post Wishing you all the best and blessing.

Read Article →

Add Auto Read More With Thumbnail, cSS3 Button to Blogger blog

This nice trick will automatically create post summaries with thumbnails.You don't need to add any extra code in every blogger post that you make. if you display full posts on your home page it will severely slow down the load time, Also With the jump break in place visitors that land on your home page will see a selection of your posts without the need to scroll. Using automatic read more on your blog will make your blog load faster by showing few post instead of the full post on the homepage. This Tricks will summarize content and show only summary in Home page, Archives Page and Label Page using Automatic Read More simple script in your template.

How Apply Auto Read More

Always Remember Before Editing Your Template Make a Template Backup (how to make a template backup)
1. Login to your Blogger account >> Go to Dashboard >> Template >> Edit HTML Check the  Expand Widget Templates check box on top right of the HTML Window.
2. Press CTRL+F In the code window find the </head> line.
3. and paste the following Code Before </head>.

<script type='text/javascript'>var thumbnail_mode = "no-float" ; 
summary_noimg = 430; 
summary_img = 340; 
img_thumb_height = 100; 
img_thumb_width = 120; 
</script> 
<script type='text/javascript'> 
//<![CDATA[ 
function removeHtmlTag(strx,chop){ 
if(strx.indexOf("<")!=-1) 
{ 
var s = strx.split("<"); 
for(var i=0;i<s.length;i++){ 
if(s[i].indexOf(">")!=-1){ 
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); 
} 
} 
strx = s.join(""); 
} 
chop = (chop < strx.length-1) ? chop : strx.length-2; 
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
strx = strx.substring(0,chop-1); 
return strx+'...'; 
} 
function createSummaryAndThumb(pID){ 
var div = document.getElementById(pID); 
var imgtag = ""; 
var img = div.getElementsByTagName("img"); 
var summ = summary_noimg; 
if(img.length>=1) { 
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; 
summ = summary_img; 
} 
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; 
div.innerHTML = summary; 
} 
//]]></script> 

Note:
summary_ noimg= 430; >> The length of the summery if the post does not have a thumbnail.
summary_img = 340;       >>The length of the summery if there is an image in the post that will be converted into a thumbnail.
null_thumb_height = 120; >> The height in pixels of the thumbnail.
null_thumb_width = 120; >>The width in pixels of the thumbnail.

4. Find The Following code <data:post.body/> and replace with below Code.

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<data:post.body/> 
<b:else/> 
<b:if cond='data:blog.pageType == &quot;static_page&quot;'> 
<data:post.body/> 
<b:else/> 
<div expr:id='&quot;summary&quot; + data:post.id'> 
<data:post.body/> 
</div> 
<script type='text/javascript'> 
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;); 
</script> 
<span class='jump-link' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url'>Continue Reading...</a></span>
<div style='clear: both;'/> 
</b:if> 
</b:if>

You can change the words “Read more” with your own Words.
and now add some css codes for Read More button I have three style for Read More buttons.

1 Blue Color Button

Add Below code before/above ></b:skin>

.jump-link {
	display: block;
	font-size: 12px;
	font-weight: bold;
	text-align:right;
}

.jump-link  a {
        font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	padding: 6px 15px;
	background: -moz-linear-gradient(
		top,
		#42aaff 0%,
		#003366);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#42aaff),
		to(#003366));
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	border: 1px solid #003366;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.5);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.5);
	box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.5);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.7),
		0px 1px 0px rgba(255,255,255,0.3);
}

2 Gray Color Button

.jump-link {
display: block;
	font-size: 12px;
	font-weight: bold;
	text-align:right;
}
.jump-link a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	padding: 6px 15px;
	background: -moz-linear-gradient(
		top,
		#ffffff 0%,
		#b5b5b5);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#ffffff),
		to(#b5b5b5));
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border: 3px solid #0088ff;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 3px rgba(255,255,255,1);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 3px rgba(255,255,255,1);
	box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 3px rgba(255,255,255,1);
	text-shadow:
		0px 1px 2px rgba(000,000,000,0.5),
		0px 1px 2px rgba(252,254,255,0.9);
}

3  Black & Gray Button

.jump-link {
display: block;
	font-size: 12px;
	font-weight: bold;
	text-align:right;
}

.jump-link a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	padding: 6px 15px;
	background: -moz-linear-gradient(
		top,
		#eaeaea 0%,
		#000000);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#eaeaea),
		to(#000000));
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border: 1px solid #a2a89f;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,1);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,1);
	box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,1);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.4),
		0px 1px 0px rgba(255,255,255,0.3);
}

Note:- If you want to add just read more text don’t  add button CSS code in b:skin> section and click on save you're Done! 
Need Help!….
I just hope this little object may help in adding a new spice to your blog's appearance. If you have any problems installing the widget, just post me a query. If you encountered any problem during installation of the codes then feel free to let me know.  Thanks for reading our post. Stay Connected for daily update.

Read Article →