Add CSS3 HTML5 Email Subscription Widget To Blogger Blog

After a long we are back again with a beautiful subscription box, If you aren’t building a email subscription widget, you’re missing significant opportunities to capture leads, build community, and create a sustainable way to communicate with those who are interested in what you have to say (and/or sell). Your subscriber is like diamond and it’s a resource you must develop, nurture and grow. It doesn’t matter what type of business or nonprofit work you are in or how big or small you are. You need to build your email subscription. But simply putting a newsletter sign-up form on your site isn’t the most effective thing you can do.  It’s also about how you place it on your site, what tactics you use to drive subscribers and it’s a LOT about content… what you share and how you communicate with your email subscription list so that you provide them value. So today we sharing with you a subscription widget with elegant design we have used image for background and also use HTML5 required attribute and some eye caching CSS3 effects we hope you may like it.

how to Add FACEBOOK Like/Fan Box Using JAVASCRIPT SDK

Today we will learn how to add a face book like box by using javascript to Bloggers Blog. Social networking websites like Face book, Twitter and Google+ are providing the custom follow and like boxes which helps every blogger. Now social networks are one the most important part of blogging. Face book like box help you to extend your reach and connect to the audience by proving them a mean to join you on face book. It does not only help you to grow your community but traffic as well. If people like your content they will voluntary like your Face book page. Facebook like box allows your visitors to join you easily and they don't have to find you manually. Face book developers have made this thing very easy to integrate a Face book like box in to your Blog by adding a few lines of code in it. We have already covered in our previous article how you can add a Face book like/fan box to blogger blog using Iframe.. you can see live demo on sidebar of our blog.

 

Add It To Blogger

 

1. First you need to go Face book Developer Page & Create your fan box by using your page user name and page id. (Get your Face book page user name & id URL by Visiting your Face book fan page.)

 

2. Set other parameters such as width, height and stream. The Preview on the right will update itself as you enter the changes.

3. Click on get code (you will get code look like screenshot below)

 

4. Go To Blogger Dashboard>> Template>>Edit HTML

5. Press CTRL+F and Find the Following code. “</body>”

6. and paste 1st code before/above </body>

7. finally click on save and you are done first step.

8. Go to your blogger layout and click on add a gadget and choose HTML/JavaScript

9. Paste 2nd code in text area.

10 write your Desired name in title section( If you hide face book like box Header while you creating this. if you no hide while you creating like box so your don’t need write gadget title.)

11. Finally click on save take new look of your blog..

 

• Also check it our tutorial on Face book Activity Feed.
• and Face book Like Box using Iframe.

For Further Help See Video Tutorial. Enjoy!  Adding this widget is surely easy but still if you encountered any troubles just post your query below in comment box and I would love to reply back as soon as time allow thanks for reading our post. happy blogging..!!

Target Your Widget or content any where with conditional tags

In this post I going to show you how add widget, buttons or anything else only on home page, post page, static page and only Selected post. you can do that with conditional tags. Conditional tags are Blogger template tags that allow you to specify parts of your template to appear only under certain conditions. The Conditional Tags can be used in your Template files to change what content is displayed and how that content is displayed on a particular page depending on what conditions that page matches.

 

Conditional tags syntax

 

Update on 26-5-2013

The Syntax is Like This

<b:if cond='PUT_CONDITION_HERE'> 
</b:if>

Condition is entered as the value of the cond attribute. Each (opening) <b:if> tag need to be closed with a closing </b:if> tag.

 

Below is List of Conditional Tags

Just make sure you include the closing </b:if> tag when applying a conditional in your template.

 

1. Index (list) pages

Index pages include homepage, labels page and yearly archive page.

<b:if cond='data:blog.pageType == "index"'>

2.  Home Page Only

<b:if cond='data:blog.url == data:blog.homepageUrl'>

3. Post (item) Page Only

<b:if cond='data:blog.pageType == "item"'>

4. First Post

This is not a page, but a conditional for the first post.

<b:if cond='data:post.isFirstPost'>

5. Static Page

<b:if cond='data:blog.pageType == "static_page"'>

6. Archive Pages

<b:if cond='data:blog.pageType == "archive"'>

7. Specific Page/URL

<b:if cond='data:blog.url == "PUT_URL_HERE"'>

8. Post and Static Page

<b:if cond='data:blog.url == data:post.url'>

9. Label-Search Pages

<b:if cond='data:blog.searchLabel'>

You can place these conditional tags any where in your template HTML Area. If you have any Trouble post your comments below I will try to make possible..thanks for reading our post.

How to apply Conditional Tags

To apply a conditional tag to a content, simply  put the content between the opening <b:if cond……> and the closing </b:if>, like Below code.

<b:if cond='data:blog.pageType == "item"'>
Here is Your CONTENT
</b:if>

in the example above, the content or widget show only on post pages..  I am writing a few  more examples as soon as time Allow.

How to Add Fixed Position Slide Open Heart Bookmarking Gadget to blogger

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 Heart Style  Sharing widget featuring the bottom Social Network sites (Google Plus, Twitter and Facebook ). In this tutorial we'll create Heart Style Sharing button for your blog. With the 'Share this' button visitors will be able to share your content with their friends or community, and you know yourself what will happen. ShareThis 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 Heart Style 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  Heart Style Sharing buttons Horizontally Align at the Bottom of your blog.

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 Following Code Above/Before </head>

<script type="text/javascript" src="http://w.sharethis.com/gallery/shareegg/shareegg.js"></script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "1cce35ce-6744-4bac-9fa5-8f17a67a6fa6", doNotHash: false, doNotCopy: false, hashAddressBar: false, onhover:false});</script>
<link rel="stylesheet" type="text/css" href="http://w.sharethis.com/gallery/shareegg/shareegg.css" media="screen" /></link>

4. Next Find the following piece of code.

</body>

5. and paste the following code before/above </body>.

<script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareHeart', ['googleplus','facebook','twitter','pinterest','linkedin','email','sharethis'], {title:'Happy Valentines Day!',url:'http://www.sharethis.com',theme:'shareheart'});</script>

6. and finally add the these lines where you want to show widget. if you want to show widget at the bottom of your blog then follow this step. Find This line

</body>

7. Copy and place anywhere Before the code from step 5.

<div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareHeart'/>
</div>
<div id='shareThisShareHeart' class='shareEgg'></div>

Need Help…


The Gadget is currently set to be in the bottom right corner of your blog but you can easily change this.In yellow above you can see bottom: 2%; left: 2%;.You can change Bottom to top for it to be at the top of the page and left to right for it to be on the right of the page.You can also change the percentages to have it further from the bottom/top and left/right. if you have any trouble about this tutorial feel free to post a comment below in comment section and I will solve the problem as soon as time allow. thanks for  reading our post…

Add Awesome Google style search to blogger blog

Google is the best search Engine in the world. Google update there home page in June 2011, New Google homepage with smaller logo and links moved to the top and bottom edges of the browser for a cleaner look, I think this look much better than older look. I'm sure you will have noticed the new Google design as covered in the post Evolving the Google design and experience on the official Google blog. when  see Google Style search box tutorial on http://www.Queness.com I am very happy and add this search bar on my blog. The new search bar has a more modern minimalist look with rounded corners and hover effect. you can create Google Style Search widgets with some HTML, CSS & JQuery Combination. in this tutorial I’ll also show you how to re-create Google style new search button with some simple CSS Codes. I edit this search button with Green color which compatible with my template style sheet. you can also edit button style with your template colors. so Read all steps and make a beautiful Search button. Special thanks for this tutorial goes to Awesome Queness.Com design blog again & again. You Can See Live Demo on this Blog.

How To Create Blogger Static Page Neat & Clean

In This post I am going to explain you how to hide sidebar, footer and header on static page. I am working for this tip last 8 days and  I finally took the time to generalize this tips. Anyone can use the solution in this page, and you'll get what you want  I'm not going to repeat what this tutorial does. Or maybe I will. You get to hide your sidebars and use that space to widen your main posting area, on pages that you choose. You can apply this tweak both on your static pages and your post pages. I have already posted one article on this blog how to show widget only on home or post pages and static pages. when static pages first came out. Than again, Bloggers flexibility and permission to design your page as you like it is one of the main features for which so many people prefer this platform. with ths tip you can create a different Design for each of your static pages with adding few CSS Code Lines. The Adding Code in ths tutorial is to much easier and clear and result is very Beautiful like professional Blogger look. You can see Working Demo on this blog.