Menu Close Menu

0 comments
check_dmoz_submissionTill now, you have already learnt, how to submit your blog into DMOZ Open directory. So today, I will show you the way how to check your website DMOZ listed or not yet. You may install browser extension to trace the listing, but it is subject to how fast the provider index those data. DMOZ submission is manage by volunteer, it is very dependent on their free time. Some fast and some slow, another possibility your listing may be rejected. If you are looking for a tool to check your DMOZ listing of your website(s) or blog's, you don’t need to look any further. You are able to check a site’s listing without any tool by make a search hit on DMOZ search box. just follow the steps below and you're done….!!! Enjoy!

How to check it?

Here are the step to determine if your site is listed on DMOZ.org:
  1. Go to dmoz.org
  2. Use the search function and search for yoursitename.com
If you need a tool that can check multiple domains in bulk, you might try this website. Add up to 500 URL’s in the box. You don’t need to add http://www.
In case your site only recently got added to DMOZ, it’s well possible it will show as not listed. An option is to manually search for the site (using the above steps) or to wait a few hours/days. Not listed? Try to add your link to the directory.

Note:- You need to keep in mind is that DMOZ are not providing a service for webmasters to list their sites. DMOZ are providing a service for the end users, the net surfers, the people looking for a site on a topic and then they find DMOZ have catalogued 50 sites for them to choose from.

DMOZ invite submissions but do not guarantee a review in a timely manner, DMOZ do not guarantee that the site will be accepted. If your website/blog are meet with DMOZ Quality guidelines the defiantly your website is approved by DMOZ.  I hope this explains how things work regarding submissions.
Read Article →

4 comments

Addthis_Smart_layersIf you’ve read our previous tutorials on Addthis sharing tool, you probably know about AddThis. Any website that’s been developed over the last few years, now has social follow and social sharing options, and AddThis is the number one provider of those sharing buttons. Now good news is that, he lunched smart layer plugin for Blogger, WordPress and also for Joomla.  smart layer plugin is very  easy-to-install layers float effortlessly over your content without disrupting your layout. Now that's smart way to add sharing buttons, follow us buttons and also you can show recommended post slider at the right bottom corner. We are very excited to share this much pretty tool with our valuable readers. Below are the steps how to add it on your blog and website. it's also easy to set up, social sharing buttons in various places on your WordPress site.

 

Smart Layer Features

 

Personalization Features

AddThis shows every visitor recommended post and the social tools that are most relevant and likely drive more traffic to your webpages.

 

Mobile & Tablet Ready

Designed with mobile friendly responsive layout, Smart Layers adapts to mobile form function and is retina-ready with no extra work. But bad thing is that the recommendation slider doesn't shown when user browsing with mobile or any other small devices.

 

Works With other AddThis tools

Smart Layers works seamlessly with other AddThis tools like Share and Follow Buttons, and includes complete analytics reporting. You can also see live demo on Addthis blog.

 

API Support

Want to grab the reins? Addthis team developing a Smart Layers API that provides enhanced control over your site's Smart Layers.

 

How to setup a code for installation

1. Go to the Get Smart Layers page on the AddThis website. If you want to track your shares and clicks you can create a profile on the AddThis site, but it’s not required.

2. Configure the options you want:

Follow, Share, What’s Next, and Recommended Content.

 

AddThis Smart Layerse Code Generator

 

3. Click the Generate Code button.

4. Copy the code in the popup box.

Paste the code into your site’s template. I recommend the paste before closing </body> tag so that the code loads after the rest of the page, though it is also possible to paste the code elsewhere (a Blogger HTML/JavaScript widget, for example). Do something productive with all time time you’ve saved yourself.

So if you’re on Twitter, hit me up at @mybloggertriks, and let me know if anything is missing.  You can also leave your feedback or queries below in comment form. We’re listening.

Read Article →

1 comments

google_adsense_partner_programe

Since 2003, AdSense has helped publishers from around the globe make a money from there content and grow their online businesses. Making money with YouTube and Google AdSense is a good way to start your incomes online. More then a year's ago Google lunched YouTube Partner Program Features. As a YouTube partner, your eligible videos may earn money from relevant ads after you enable them for monetization. And Now Google is lunched Google AdSense Certified Partner Program to vet consultants and service providers managing AdSense accounts for publishers. If you use AdWords or Analytics, your may familiar with the similar Certified Partner Programs Google Offer for those Products. Once a company has passed the qualification exam and meets all the program requirements, it will have access to AdSense marketing resources and tools, receive the Google AdSense Certified Partner program logo for there own website, as well as being listed on Google’s official AdSense website.

 

How to Become Google AdSense Certified Partner

If you want become a Partner with Google AdSense You must agree to the Google AdSense Online Certified Partner Program Terms and Conditions. so please read them carefully. If you fail to comply with these policies, Google may revoke your Certified Partner status.

 

Benefits For Certified Partners.

  • Establish a meaningful business relationship with your clients.
  • Maximize the impact of your hard-earned AdSense expertise to help your publishers and your own business grow.
  • Benefit from Google AdSense training and the usage of the Google AdSense Certified Partner badge in your marketing collateral.
  • Work more efficiently by using our AdSense client management solution to access and optimize your clients' accounts.
  • Establish a relationship with the Google AdSense team and receive insights into the latest features.
  • Gain exposure for your business as a featured Certified Partner on the Google AdSense website.

Google says it has comprehensive training and testing resources available for  interested people in joining the program. According to Google, there are currently 13 active Certified Partners. If you’re a prospective Certified Partner or a publisher interested in the services offered by these Certified Partners, you can visit there program website or Help Center for more information.

Read Article →

5 comments
Dmoz_open_directory

If you don’t think a link from DMOZ matters, even just a little bit, then you’re simply ignoring the reality of this ancient directory. DMOZ  the Open Directory Project -- is a volunteer-curated directory of millions of websites, indexed according to topic. DMOZ was launched in 1998, and its age, size and quality standards make it one of the more powerful Web directories. Because it has a high Google PageRank, a link from DMOZ may Grow up your blog's PageRank and help it receive more traffic from search engines. But Barry Schwartz share story 1 year ago about a user,(“He said after two years of trying to get a DMOZ link, he got it, Google indexed it but he saw absolutely no ranking improvement after the fact. He feels like all that wait and anticipation, was a huge let down."). Submit your blog/website by Following the steps below.

How Get listed to DMOZ Directory

Step 1. Go to DMOZ.org. Click a category heading such as "Computers" to indicate the general topic of your blog.

Step 2. Click a subcategory heading such as "Computer Science" or "Internet" to describe the topic of your blog more exactly. Continue this method until you have selected the subcategory that most Strictly matches to your blog's topic's.
In our case.
Computers>> Internet>> Web Design and Development>> Promotion>>Weblogs

Step 3.
1. Click the "Suggest URL" link next to "DMOZ Blog" in the top right corner of the page.
2. This brings you to a new page titled "Submit a Site to the Open Directory." If you could not find a "Suggest URL" link at the top menu of the page, select a more specific subcategory. Because some categories do not have "suggest URL" or "update URL" links. These categories don't accept suggestions, so you should find a more specific category for the site.

Step 4.
Type the address of your blog in the Site URL input field, such as like "(http://www.myblogger-tricks.com)". Click to select the radio button next to (What type of link is this?).

Step 5.
Type the name of your blog in the Title of Site input field.

Step 6.
Next type a description of your blog in Description form, using no more than 25 words. The description should momentarily explain the type of content your blog contains.

Step 7.
Complete the Your Email Address input field to give DMOZ a way to contact you about your listing.

Step 8.
Type the code in the User Verification input field appearing in the image below. This step prevents the DMOZ submission process from being completed by an automated script.

Step 9.
Read the Submission Agreement thoroughly.

Step 10.
Click the Submit button to send your blog to the DMOZ editors for approval. You should now see the message Submission Received. and you are done..!!!!

Wait until you have an established blog with plenty of original content before submitting it to DMOZ. Stay Updated by subscribing our RSS feed for more Special
tips.
Read Article →

6 comments

Blogger_tipsYou might have seen the Pencil , Screwdriver and Spanner links on blogger. It seems like these icons appear only when you are logged in to your blog. In todays tutorial I am going to share and little blogger hack about how to hide pencil (quick edit), Wrench Spanner (Quick edit Gadget). I am writing this tutorial because I get asked by a lot of my blog readers how they can get rid of those quick edit icons so if you have seen those quick edit icons under your posts and the little wrench icons in the sidebar on your blog you maybe thinking how do I get rid of them. You can also see icons below in screen shoots. Once you have hide the wrench icons and quick edit, you can see the changes while you are refresh the blog page.

 

Wrench Icons

 

wrench_icon

Quick Edit

 

quick_edit

 

If we think about user friendly features they are useful if you need to quickly edit your blog post's or a widget in the sidebar you can just click them to instantly edit your post or widget they are only shown to the admin of the blog if you log out you shouldn't see them.

How to Hide Quick Edit Icon

so to hide the quick edit icon below the post footer go to Blogger Dashboard>> layout >>  and click the edit link for the blog posts widget and uncheck the checkbox titled "Show Quick Editing" then click on save button and your done…!!!!

 

How to hide wrench icons

each widget you have in the sidebar section will have one of them so to save time having to remove each one of them just paste the following code after the opening <b:skin> tag or before closing </b:skin> tag in your template to hide them.

.quickedit{display:none;}


Save The Template and look at your Page Source Once again. You will find that those links are no longer there.

If the Wrench Link of the Followers Gadget Cannot be removed, and you really want to remove that, then remove the Followers Gadget and Add it as a HTML/ JavaScript Gadget with the Code from Google Friend Connect.

Read Article →

0 comments

Effective

Search promotion of blogs is an important condition of its popularity among users, publicity and high attendance. Those, who has already worked with blogs at WordPress, knows that such blogs are quite flexible in control and if you use some plug-ins for WordPress sensibly, it will be possible to achieve the full-function blog. You can find some effective methods for blog promotion below.

 

1. To advance the blog in search engines

Search engines are the most valuable source of a unique traffic. Before you offer a search engine your blog WordPress, write some useful and interesting articles on the chosen subject. Every page of the blog has to be already optimized under a certain key inquiry, the graphics on the blog has to have the alternative description, the number of external proceeding links to the other resources has to be a minimum of 3-5 links.

 

2. Blog promotion in the catalogs

Expediency to advance the blog on WordPress through catalogs is a question now,because of loss of relevance of such way of promotion. Search engines, in most cases, ceased to consider links from catalogs and the only thing that you can get is additional visitors on the blog. Entering the blog in the catalog, never put a back link on the catalog, otherwise, you do not gain any effect from placement of the blog. Add the blog only in the white catalogs, putting direct references and with a manual moderation of sites.

 

3. Blog addition in ratings of blogs

Sometimes ratings can give a good growth of a traffic for the blog, on conditions that the user finds the interesting and demanded information in the blog. The more visitors come to the blog, the more ratings will be in your blog, consequently, the more target visitors will you have on the site. Add only corresponding subject in the sections, sometimes it is required the channel RSS address.

 

4. To advance blogs through RSS catalogs and tapes

Popularity of usage the blog promotion by means of news lines via RSS channels, grows, and in this case, you also can advance the blog by using RSS technology.

 

5. We go to mass and promote the blog on social networks.

In the search of new communities and acquaintances on the social networks people look for each other taking into account common interests and hobbies, and unite for achievement of the same purpose. Social networks are quite popular nowadays that will render a positive effect on the promotion of the blog WordPress. Social networks unite a huge number of the people having a different geographical location, that facilitates the search of adherents, who not only will be able to become constant readers of your blog, but also to help with promotion of the blog.

 

6. We advance the blog in social laying's

The popularity of social laying's experiences some recession of activity of users, because very often it is not represented a big advantage for users. That is why you should add only useful and interesting material from the blog that can awake users’ interest in it instead of all posts that you have. Otherwise, the search engine decides that it is spam. Links in social laying's perfectly give into indexation by search engines, that begins to work in the shortest period of time, that brings additional visitors to the blog, and back links which will be considered by the search engines.

 

7. Promotion of the blog with use of paid advertising

I think more than once it was necessary to see advertising blocks of a contextual advertising on other blogs and sites, for example from Google or any other. This way of promotion is most effective in case of involvement of target auditory and probably, will be justified from the financial side of this case, if to apply it to commercial blogs. Though, this advertising will bring only those visitors on your blog, who are interested in your services or a product in reality.

 

8. Active commenting on other blogs.

Find adherents in the network, find popular blogs in which you can take active part in commenting of posts and participate in the competitions. Intelligent and good comments on the subject, can attract other participants who in turn will glance on your blog.

 


About the author: Paul Smith is a well-known writer, who are good at SEO, SMO, blog promotion, email marketing and affiliate marketing. Many sites’ owners use his essay writing services to increase the traffic and popularity. You can find him at Google Plus.

Read Article →

0 comments

Secrets

For some people, blogging is a passion, a hobby, an extracurricular. For others it’s a way to promote a business or build a brand – a way to lay the groundwork for an overall internet presence. If you’re the type of blogger who falls into that second group but you’re just not sure you’re branding everything the way you should be, take a look at these five secrets to building a better brand for your blog.

 

1. Be Like a Business

Is your blog a business blog? Great! You’re one step ahead of the game. If it’s not you need to think of it that way and do everything from develop a logo to creating a tagline. Branding is all about consistency and you want your blog to be the flagship of your brand. Your “brand” and voice have to be visually apparent on every page. Simply put, make sure your blog doesn’t look like every other WordPress site out there, even if that means paying for a custom template. The brand value will be worth it.

 

2. Carve out a Niche

No one brand covers everything. It’s important, particularly if you’re a one-man operation, to make a space for yourself and develop a reputation among your social network as an expert in a particular area. Whether it’s gluten-free baking or stock advice for baby boomers, blog often and consistently in the area you want to become a “big fish” in. Reach out to other bloggers and businesses in that sphere and attend real world events. Generally just make your name synonymous with a particular segment.

 

3. Offer to Guest Blog

One of the fastest and most effective ways to build your own brand is to hitch your wagon to someone else’s. By now you should have several blogs and bloggers you admire within your industry – reach out to them and ask to guest post. Try to score a link in the post to your own blog but if not, a simple header with your name and experience will do. Anything that gets you more street cred on a bigger, more popular blog will inevitably lead to more traffic and more recognition for your own blog brand.

 

4. Keep the Messaging Consistent

Branding your blog obviously means putting the content out there in more ways than one. Using social media to promote your blog’s brand is a great way to build a devoted audience, but you have to be consistent. If you’re irreverent and sarcastic on your blog, for example, people will expect that kind of content from you on other sites. Give them what they want and you’ll further cement your brand voice.

 

5. Blog More Often

Not only does blogging constantly  help solidify your blog brand in the minds of others, it’s helpful for you, too, in that you’ll more naturally carve out your own tone and areas of interest. The more often you blog, the more the blog simply becomes an extension of your personal brand rather than a one-off editorial space. At the end of the day, you want your blog’s brand to closely reflect your own so everything will be seamless.

 

About Author: Ryan Currie is a product manager at BizShark.com, with 5 year’s experience in online marketing and product development.  In addition to web related businesses, he also enjoys the latest news and information on emerging technologies and open source projects.

 

Image credit:- freedigitalphoto

Read Article →

7 comments

Blogger_Begginer_template_small_previewBlogger is a very simple and easy to use blogging platform. There are many beautiful templates that add to its value. The Blogger Beginner Blogger Template is a combination of three colors ( Orange, White and dark brown, which makes it look unique. Blogger Beginner is a minimalist, simple and super clean free blogger blog theme with focus on readability & very easy to setup. This theme is perfect choice for your personal blog,  corporate blog theme,  or creative blog. When you talk about pure Css3, this template is almost visible because we have used just CSS3 for making this template looking awesome. You Can also check out our previous blogger template.

 

Template Name: Blogger Beginner

Platform: Blogger / Blogspot

Release date : 25, OCT 2013

Author : www.myblogger-tricks.com

License : Creative Commons Attribution 3.0

 

Live Preview  Download Now

 

Image Preview

 

Blogger_Begginer_template_large_preview

 

Features
  1. Threaded Comment Style:- We have added an advanced  comment system to this theme, its beautiful design will force the users to comments on your blog. Threaded Comment CSS Designed By Mohammad Mustafa Zaidi and we have just customized Version.
  2. SEO Friendly: It is pre-optimized for on-page SEO. Including heading tags, Meta tags, Keywords and in-depth optimizing things. More importantly, the speed of this it significantly faster than the majority of other heavy-duty templates. 
  3. Related Posts: This theme has a built-in related post plugin which would display most relevant suggests to your visitors. It would not only decrease the bounce rate of your site but would increase your website credibility.
  4. and many more features also added in this Template.

 

Customization

ADSENSE BELOW POST TITLE
  1. Adsense Ad Dimensions: 336px X 280px
  2. Search for the tag <!-- Adsense Below Post Title -->
  3. Put your Adsense Code just after the it.
  4. PLEASE Encode the Adsense code before pasting into the Template using the HTML Encode Tool
EDIT DROP DOWN MENU LINKS
  1. Search for the tag  <!-- Start - Navigation Menu  -->
  2. And Replace the ( # ) with your respective links.

 

EDIT EMAIL SUBSCRIPTION BOX

  1. Search for the tag  <!-- Start – email subscription  -->
  2. and Replace The Highlighted Text below with your feed burner username.
  3. and text with your own text.

<!-- Start - email subscription  -->
<div id='subscriptionwrap'>
<div class='subscriptionbox'>
<h4>Ready To Be Make <strong>Elegant Blog</strong></h4>
<p>Subscribe to My Blogger Tricks to enjoy Free Tricks</p><center>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&quot;http://feedburner.google.com/fb/a/mailverify?uri=bl0ggertricks&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='bl0ggertricks'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='emailinput1' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email...'/>
<input class='emailbutton1' title='' type='submit' value='SignUp'/>
</form>
</center>
</div>
</div>

 

We Hope our readers enjoy this new blogger free template.

You can get further help from Comments. Please leave your Comments and share this Template with your friends. Thanks.  Stay Updated by subscribing our news feed or like us our facebook, Google Plus page.

NOTE:- Please do not re-share or Host this blogger template any where. !

Read Article →

11 comments

Recent_post_widget_with_3d_borderRecent Posts is a very powerful widget for blogger, which displays your recent posts with thumbnails. It’s the perfect solution for online magazines or simple blogs and it comes with customization options available. You can dynamically re-size thumbnails to any desired dimension. Displaying a list of the recent posts in your sidebar is a great way to keep your visitors busy. There are lots of recent posts gadgets you can use but the one we will be covering in this post will definitely grab the attention of people on your blog. This Widget originally made by Blogger plugins.org and we share customized version by adding some CSS code. Installation of this this is very easy you just need to add html/JavaScript gadget and drop it where you want to show recent posts. So let's start the tutorial.

 

Live Preview

 

How to add it to blogger blog

  1. Go to blogger layout section
  2. Click Add A Gadget.
  3. In Add A Gadget window, select HTML/JavaScript .
  4. Copy the code below and paste it inside the content box.
  5. Save the gadget.
  6. Drag the gadget and reposition it where you want to show recent posts.
  7. Click Save button (top right hand corner).

 

<style>
#bp_recent {
width:300px;
padding: 5px;
color: #999;
font-size: 14px;
text-align:justify;
}

#bp_recent img {
width: 70px;
height: auto;
border-top:5px groove #00a4ef !important;
border-bottom:5px groove #ffb900 !important;
border-right:5px groove #7fba00 !important;
border-left:5px groove #f25022 !important;

webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.2);
box-shadow:1px 1px 1px rgba(0,0,0,0.2);
}

#bp_recent a{
color: #fff;
font-size: 15px;
text-transformation: uppercase;
margin-bottom: 10px!important;
}

#bp_recent a:hover {
text-decoration: underline;
}

</style>
<div id='bp_recent'></div>
<script type="text/javascript" src="http://yourjavascript.com/401413211131/recentposts-orig.js"></script>
<script style='text/javascript'>
var numberOfPosts = 9;
var showPostDate = false;
var showSummary = false;
var summaryLength = 0;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 55;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
var readMore = 'Read More';
</script>
<script src='HERE_IS_YOUR_BLOG_URL/feeds/posts/summary?max-results=10&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

 

Widget Customizations

1. Simply replace the HERE_IS_YOUR_BLOG_URL with your own blog address (Url) which is include "http://".

2. Widget comes with fixed width you can also edit width by changing following value (300 to 350 e.g.).

width: 300px;

 

Need any help

Do you have any query regarding these tutorial on how to add recent posts widget to blogger? We're always there to put you through. Post your queries via comment and we'll get back to you as soon as possible.  We've done our own part by sharing these informative tutorial with you. So, it's now your turn to show appreciation by leaving a useful comment below.You don't want to miss any of our future updates? Subscribe to our rss feeds to get all our latest updates delivered directly to your email inbox.

Read Article →

2 comments

Dropdown_navigationNowadays you can see plenty of different types of navigation menus with attractive, creative and elegant designs. The navigation menu on a website/blog is like a stars on the sky and improve impressions of your webpage. The navigation in website design is very important and plays a major role in a website's usability as well as in user experience. It is better to use simple, obvious and clear layout that are easy to figure out and keep your webpage up to industry. Any link that takes users more than a second or two to figure out is probably unsuitable for use. Today's tutorial we are sharing another simple and user friendly navigation menu, we built it using  css3. No images were used, just CSS. It is cross browser compatible and was optimized for IE7 and for newest versions. So if u like, take a five mints to implement on your blog and Enjoy…!!!

 

Live Preview

 

How to add it to blogger (Menu Style 1)

Parrot_menu

1. Go to your Blogger Dashboard>>Template>>Edit Html

2. Find following code in your template.

</b:skin>

 

3. and paste the following code before/above </b:skin>

#menu_parrot {
        width: 960px;
        margin: 0px auto;
        border: 1px solid #82BF00;
        border-top: none!important;
    background: rgb(166,198,83); /* Old browsers */
background: -moz-linear-gradient(top, rgb(166,198,83) 0%, rgb(130,191,0) 50%, rgb(143,200,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(166,198,83)), color-stop(50%,rgb(130,191,0)), color-stop(100%,rgb(143,200,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(166,198,83) 0%,rgb(130,191,0) 50%,rgb(143,200,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(166,198,83) 0%,rgb(130,191,0) 50%,rgb(143,200,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(166,198,83) 0%,rgb(130,191,0) 50%,rgb(143,200,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgb(166,198,83) 0%,rgb(130,191,0) 50%,rgb(143,200,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6c653', endColorstr='#8fc800',GradientType=0 ); /* IE6-8 */
-moz-box-shadow: 0 0px 1px #777, 0 0 1px #666 inset;
        -webkit-box-shadow: 0 0px 1px #777, 0 0 1px #666 inset;
        box-shadow: 0 0px 1px #777, 0 0 1px #666 inset;
  

    }
   
    #menu_parrot, #menu_parrot ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
   
   
    #menu_parrot:before,
    #menu_parrot:after {
        content: "";
        display: table;
    }
   
    #menu_parrot:after {
        clear: both;
    }
   
   
    #menu_parrot li {
        float: left;
        border-right: 1px dotted #86A800;
        position: relative;
    }
   
    #menu_parrot a {
        float: left;
        padding: 15px 30px;
        color: #fff;
        letter-spacing: 4;
        text-transform:inherit;
        font-family: Verdana, Helvetica;
        font-size: 14px;
        text-decoration: none;
         text-shadow: 0 1px #333;
       
    }
   
    #menu_parrot li a:hover {
        background: rgb(166,198,83);
       
    }
   
    #menu_parrot li:hover > a {
        color: #fafafa;
       
    }
   
    *html #menu_parrot li a:hover {
    /* IE6 only */
        color: #fafafa;
    }
   
    #menu_parrot ul {
        margin: 20px 0 0 0;
        _margin: 0; /*IE6 only*/
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 47px;
        left: 0;
        z-index: 1;   
    background: rgb(166,198,83); /* Old browsers */
background: -moz-linear-gradient(top, rgb(166,198,83) 0%, rgb(130,191,0) 50%, rgb(143,200,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(166,198,83)), color-stop(50%,rgb(130,191,0)), color-stop(100%,rgb(143,200,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(166,198,83) 0%,rgb(130,191,0) 50%,rgb(143,200,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(166,198,83) 0%,rgb(130,191,0) 50%,rgb(143,200,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(166,198,83) 0%,rgb(130,191,0) 50%,rgb(143,200,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgb(166,198,83) 0%,rgb(130,191,0) 50%,rgb(143,200,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6c653', endColorstr='#8fc800',GradientType=0 ); /* IE6-8 */       
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out; 
    }

    #menu_parrot li:hover > ul {
        opacity: 1;
        visibility: visible;
        margin: 0;
    }
   
    #menu_parrot ul ul {
        top: 0;
        left: 174px;
        margin: 0 0 0 20px;
        _margin: 0; /*IE6 only*/
               
    }
   
    #menu_parrot ul li {
        float: none;
        display: block;
        border: 0;
        _line-height: 0; /*IE6 only*/
       
    }
   
       
    #menu_parrot ul a {   
        padding: 12px;
        width: 150px;
        color: #fff;
        border-bottom: 1px dotted #86A800;
        border-radius: 5px;
        _height: 12px; /*IE6 only*/
        display: block;
        white-space: nowrap;
        float: none;
        text-transform: none;
    }
   
    #menu_parrot ul a:hover {
        background: rgb(166,198,83);
        color: #fff;
       
    }
   
    #menu_parrot ul:first-child {
    border-left: 0;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;           
}

#menu_parrot ul:last-child a {
    border-right: 0;
    -moz-border-radius:5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;           
}

 

4. and paste the following HTML Code where you want to show Navigation menu.

<ul id="menu_parrot">
        <li><a href="">Home</a></li>
        <li><a href="">Blogger</a>
        <ul>
        <li><a href="">Widgets</a></li>
        <li><a href="">Plugin</a>
        <ul>
        <li> <a href="">Facebook</a></li>
        <li> <a href="">Twitter</a></li>
        <li> <a href="">Pinterest</a></li>
        <li> <a href="">Google Plus</a></li>
        <li> <a href="">Adsense</a></li>
        <li> <a href="">Custom</a>
        <ul>
        <li> <a href="">Hello Bar</a></li>
        <li> <a href="">Earning Boster</a></li>
        <li> <a href="">Clock</a></li>
        </ul>
        </li>
        </ul>
        </li>
        <li><a href="">Tips Tricks</a></li>
        <li><a href="">Blogger News</a></li>
        <li><a href="">Blogger Help</a></li>
        </ul>   
        </li>
        <li><a href="">Template</a>
        <ul>
        <li><a href="">Blogger</a>
        <ul>
        <li><a href="">By Column</a>
        <ul>
        <li><a href="">1 Column</a></li>
        <li><a href="">2 Column</a></li>
        <li><a href="">3 Column</a></li>
        </ul>
        </li>
        <li><a href="">By Color</a>
        <ul>
        <li><a href="">Red</a></li>
        <li><a href="">Blue</a></li>
        <li><a href="">Orange</a></li>
        </ul>
        </li>
        <li><a href="">By Width</a></li>
        </ul>
        </li>
       
        <li><a href="">WordPress</a></li>
        </ul>
        </li>
        <li><a href="">Faqs</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
    </ul>

 

 

How to add it blogger (Menu Style 2)

 

ferozi_menu

1. Go to your Blogger Dashboard>>Template>>Edit Html

2. Find following code in your template.

#menu_ferozi {
        width: 960px;
        margin: 0px auto;
        border: 1px solid #17A2C1;
    background: rgb(0,183,234); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(top,  rgba(0,183,234,1) 0%, rgba(0,158,195,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,183,234,1)), color-stop(100%,rgba(0,158,195,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(0,183,234,1) 0%,rgba(0,158,195,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(0,183,234,1) 0%,rgba(0,158,195,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(0,183,234,1) 0%,rgba(0,158,195,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(0,183,234,1) 0%,rgba(0,158,195,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-8 */
  

    }
   
    #menu_ferozi, #menu_ferozi ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
   
   
    #menu_ferozi:before,
    #menu_ferozi:after {
        content: "";
        display: table;
    }
   
    #menu_ferozi:after {
        clear: both;
    }
   
   
    #menu_ferozi li {
        float: left;
        border-right: 1px dotted #008DCE;
        -moz-box-shadow: 0px 0 0 #F95700;
        -webkit-box-shadow: 0px 0 0 #F95700;
        box-shadow: 0px 0 0 #F95700;
        position: relative;
    }
   
    #menu_ferozi a {
        float: left;
        padding: 15px 30px;
        color: #fff;
        letter-spacing: 4;
        text-transform:inherit;
        font-family: Verdana, Helvetica;
        font-size: 14px;
        text-decoration: none;
       
    }
   
    #menu_ferozi li a:hover {
        background: #333;
       
    }
   
    #menu_ferozi li:hover > a {
        color: #fafafa;
       
    }
   
    *html #menu_ferozi li a:hover {
    /* IE6 only */
        color: #fafafa;
    }
   
    #menu_ferozi ul {
        margin: 20px 0 0 0;
        _margin: 0; /*IE6 only*/
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 47px;
        left: 0;
        z-index: 1;   
        background: rgb(0,183,234); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */

background: -moz-linear-gradient(top,  rgba(0,183,234,1) 0%, rgba(0,158,195,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,183,234,1)), color-stop(100%,rgba(0,158,195,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(0,183,234,1) 0%,rgba(0,158,195,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(0,183,234,1) 0%,rgba(0,158,195,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(0,183,234,1) 0%,rgba(0,158,195,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(0,183,234,1) 0%,rgba(0,158,195,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-8 */       
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out; 
    }

    #menu_ferozi li:hover > ul {
        opacity: 1;
        visibility: visible;
        margin: 0;
    }
   
    #menu_ferozi ul ul {
        top: 0;
        left: 174px;
        margin: 0 0 0 20px;
        _margin: 0; /*IE6 only*/
               
    }
   
    #menu_ferozi ul li {
        float: none;
        display: block;
        border: 0;
        _line-height: 0; /*IE6 only*/
       
    }
   
       
    #menu_ferozi ul a {   
        padding: 12px;
        width: 150px;
        color: #fff;
        border-bottom: 1px dotted #008DCE;
        _height: 12px; /*IE6 only*/
        display: block;
        white-space: nowrap;
        float: none;
        text-transform: none;
    }
   
    #menu_ferozi ul a:hover {
        background-color:#3d3d3d;
        color: #fff;        
   }

 

4. and paste the following HTML Code where you want to show Navigation menu.

<ul id="menu_ferozi">
        <li><a href="">Home</a></li>
        <li><a href="">Blogger</a>
        <ul>
        <li><a href="">Widgets</a></li>
        <li><a href="">Plugin</a>
        <ul>
        <li> <a href="">Facebook</a></li>
        <li> <a href="">Twitter</a></li>
        <li> <a href="">Pinterest</a></li>
        <li> <a href="">Google Plus</a></li>
        <li> <a href="">Adsense</a></li>
        <li> <a href="">Custom</a>
        <ul>
        <li> <a href="">Hello Bar</a></li>
        <li> <a href="">Earning Boster</a></li>
        <li> <a href="">Clock</a></li>
        </ul>
        </li>
        </ul>
        </li>
        <li><a href="">Tips Tricks</a></li>
        <li><a href="">Blogger News</a></li>
        <li><a href="">Blogger Help</a></li>
        </ul>   
        </li>
        <li><a href="">Template</a>
        <ul>
        <li><a href="">Blogger</a>
        <ul>
        <li><a href="">By Column</a>
        <ul>
        <li><a href="">1 Column</a></li>
        <li><a href="">2 Column</a></li>
        <li><a href="">3 Column</a></li>
        </ul>
        </li>
        <li><a href="">By Color</a>
        <ul>
        <li><a href="">Red</a></li>
        <li><a href="">Blue</a></li>
        <li><a href="">Orange</a></li>
        </ul>
        </li>
        <li><a href="">By Width</a></li>
        </ul>
        </li>
       
        <li><a href="">WordPress</a></li>
        </ul>
        </li>
        <li><a href="">Faqs</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
    </ul>

 

The widget is extremely easy to be edited. To change links title simply replaced the text with your page titles and replace the hash sign (#) with respective links.

and you are done…!!!! Don’t Forget To check our previous Menus.

For any further help please feel free to post your queries in the comment box below. Its Very Handy, Light weight and Professional navigation Which you all can use to get rid of scripts and bulky menus that uses CSS3 and takes a lot of time to load. Thanks For Reading our Post.

Read Article →

4 comments

Pinning an image just got easier and more intuitive with this hover button. You may have noticed that some professional photographer website have custom pinterest hover button for their website's professional images, with Word Press it’s quite straightforward, whereas with Blogger it can be much more complicated, mostly for those who are hate modifying the code for their blog template.Now luckily we're excited to tell that pinterest developer team finally made an official image hover pin it button for blogger. The on hover pin it button appear just like the regular pin it button, but it only shows up when a person mouse over an image.The pin it button should disappear again when your mouse-cursor is not on the image anymore.They look great on pages with lots of images and might look and feel better if your design is on the minimal side. Pinterest developer team made it very easy to install on your blogger blog. It only takes one line of code to get the button on mouse over the image. So follow the simple step below.

 

Live Preview

 

How To Add It In Blogger Blog

No HTML is required for hoverbuttons; all you have to do is load the JavaScript listed below. Once you have this installed, images should show a Pin It button when hovered over. (If you're already running pinit.js, just add the data-pin-hover="true" attribute to the existing SCRIPT tag.)

 

1. Go to your blogger dashboard>>Template>> Edit HTML

2. and find the following code in your template code.

</body>

 

3. and put it just above your closing </BODY> tag. (provided by pinterst).

4. Click on save button and you're done..!!!

<script type="text/javascript" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>

 

Note:- If you are already using pinterest pin it button then just add following attribute code in pinterest script tag.

data-pin-hover="ture"

 

You can see complete script above in step 3.

Note:- If you're not already running pinit.js on your page, please visit the Widget Builder to find out more about the Pin It button and the rest of Pinterest's fleet of handy widgets.

 

Some Images Won't Work with the following reasons.

CSS background images, images that are under 80 by 80 pixels in size, images that have the data-pin-no-hover="true" attribute set, images that have the nopin="nopin" attribute set, and images whose SRC attribute starts with data: won't show hover buttons.

You can definitely still use Pinterest regular Pin It button, and we think these new hover buttons are pretty nice, too..!!

Read Article →

4 comments

google-dns

Most home user's set DNS server setting on automatic or the DNS addresses provided by the user's ISP (Internet service provider), But you can use any DNS Server address as you like (even you can make your own DNS Server). Before changing your DNS Server addresses, You must have the new DNS server address ready to be entered. If you don't know the DNS addresses, contact your ISP (Internet Service Provider) or the Administrator, Company, IT Department. If you wanting to use free open source DNS Server so Google and OPENDNS is the best sources on the internet. We suggest if a DNS address is already entered, You write the address information down in case you need to change it back. I have personally done it. When my internet speed going to slow I use Google or OPENDNS DNS Addresses it's working 100%.

 

To use Google’s Public DNS service or OPENDNS, You’ll need to configure your router or computer to use their DNS servers addresses.

 

How to set up  Google Public DNS server?

The Google Public DNS IP addresses (IPv4) are as follows:

  • 8.8.8.8
  • 8.8.4.4

The Google Public DNS IPv6 addresses are as follows:

  • 2001:4860:4860::8888
  • 2001:4860:4860::8844

You can use either number as your primary or secondary DNS server. You can specify both numbers, but do not specify one number as both primary and secondary.

You can configure Google Public DNS addresses for either IPv4 or IPv6 connections, or both.

For More details go to official Google Public DNS page

 

How to set up OpenDNS Public DNS server?

With OpenDNS, you’ll also get additional services like malware detection, stats, and more, in addition to the speed boost.

To configure OpenDNS use this link.

 

In our next post we are teach you how to change your dns server automatically with our any trouble. Wish you success and peace buddies. Stay updated by subscribing our email news feed or like our facebook page.

Read Article →

15 comments

Feed Logo GraphicEverybody knows the importance of RSS feeds. So its better to give the readers an option to subscribe to your blog feed by email. Another JQuery Widget with beautiful look, as before I have also share Facebook Popup and Twitter Follower Popup Widget for blogger user. But today I bring in this post another beautiful widget with JQuery light box. In this widget visitors can subscribe you blog’s daily updates via RSS FEED. So here is the complete instructions for how to install the email subscription widget.

 

 

 

 

 

Update:- 16-04-2015

Colorbox Plugin CSS (Created by Jackle) Code Added and some bug fixes.

Update:- 23-04-2015

1. Documentation Updated for editing Popup width and height.

2. Popup Auto Time out feature added (self closed after 10 second).

3. and some bug fixes according readers feedback.

 

if you see any bug in the code below please let us know in the comment box below or send us a note via our contact form.

 

Live Preview

 

How to install email popup subscription box

Before you edit any template it's better to keep a Template Backup.

 

1. Go to your Blogger Dashboard>>Template>>Edit Html

2. Find following code in your template.

 

</head>

3. and paste the following code before/above </head>

 

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script><script src='http://yourjavascript.com/69231961363/jquery-colorbox-min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function(){
if (document.cookie.indexOf(&#39;visited=true&#39;) == -1) {
var setDays = 1000*60*60*24*7;
var expires = new Date((new Date()).valueOf() + setDays);
document.cookie = &quot;visited=true;expires=&quot; + expires.toUTCString();

//set timeout for closing the popup
setTimeout(function () { $.fn.colorbox.close(); }, 20000);

//color box width, height and popup id  
$.colorbox({width:&quot;autopx&quot;, height:&quot;autopx&quot;, inline:true, href:&quot;#email-popup&quot;});
}});</script>

 

Troubleshoot cookies and set timeout for popup box

1. *7 Setting this value will effect cookie refreshment. I have set the Subscription box to appear once to the visitor and Subscription box will appear again after 1 week. If you want to display after a 1 day then set 7 to 1.

2. Set the popup timeout highlighted in Green color, the default timeout is 20 second (20000  millisecond). For example, Setting up popup time out to 1 minute you need replace 20000 to 60000.

 

Note:- Showing twice will must annoy your readers, So Leave it By Default and follow the next step.

 

4. Now Search for </b:skin>.   ( Note:- Click the black arrow to expand the code. )

 

/* Colorbox Core Style: The following CSS is consistent between example themes and should not be altered. */#colorbox, #cboxOverlay, #cboxWrapper {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    overflow: hidden;
}
#cboxOverlay {
    position: fixed;
    width: 100%;
    height: 100%;
}
#cboxMiddleLeft, #cboxBottomLeft {
    clear: left;
}
#cboxContent {
    position: relative;
}
#cboxLoadedContent {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
#cboxTitle {
    margin: 0;
}
#cboxLoadingOverlay, #cboxLoadingGraphic {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
    cursor: pointer;
}
.cboxPhoto {
    float: left;
    margin: auto;
    border: 0;
    display: block;
    max-width: none;
    -ms-interpolation-mode: bicubic;
}
.cboxIframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}
#colorbox, #cboxContent, #cboxLoadedContent {
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
} /* User Style: Change the following styles to modify the appearance of Colorbox. They are ordered and tabbed in a way that represents the nesting of the generated HTML. */#cboxOverlay {
    background: #000;
}
#colorbox {
    outline: 0;
}
#cboxContent {
    margin-top: 20px;
    background: #000;
}
.cboxIframe {
    background: #fff;
}
#cboxError {
    padding: 50px;
    border: 1px solid #ccc;
}
#cboxLoadedContent {
    border: 5px solid #e9e9e9;
    -webkit-border-radius:4px;    
    -moz-border-radius:4px;
    border-radius: 4px;
   
    background: #fff;
    box-shadow: 3px 3px 3px #fff;
}
#cboxTitle {
    position: absolute;
    top: -20px;
    left: 0;
    color: #ccc;
}
#cboxCurrent {
    position: absolute;
    top: -20px;
    right: 0px;
    color: #ccc;
}
#cboxLoadingGraphic {
    background: url(http://2.bp.blogspot.com/-jcn46y_t6D0/Uc8cG9q6ExI/AAAAAAAAC1k/K63u_2VkemM/s32/loading.gif) no-repeat center center;
} /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
    border: 0;
    padding: 0;
    margin: 0;
    overflow: visible;
    width: auto;
    background: none;
} /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {
    outline: none;
}
#cboxSlideshow {
    position: absolute;
    top: -20px;
    right: 90px;
    color: #fff;
}
#cboxPrevious {
    position: absolute;
    top: 50%;
    left: 5px;
    margin-top: -32px;
    background: url(http://2.bp.blogspot.com/-F2Kb9fiqmnI/UlVbabCkxBI/AAAAAAAADoc/RjbydjK0j-I/s1600/controls.png) no-repeat top left;
    width: 28px;
    height: 65px;
    text-indent: -9999px;
}
#cboxPrevious:hover {
    background-position: bottom left;
}
#cboxNext {
    position: absolute;
    top: 50%;
    right: 5px;
    margin-top: -32px;
    background: url(http://2.bp.blogspot.com/-F2Kb9fiqmnI/UlVbabCkxBI/AAAAAAAADoc/RjbydjK0j-I/s1600/controls.png) no-repeat top right;
    width: 28px;
    height: 65px;
    text-indent: -9999px;
}
#cboxNext:hover {
    background-position: bottom right;
}
#cboxClose {
    position: absolute;
    top: 5px;
    right: 5px;
    display: block;
    background: url(http://2.bp.blogspot.com/-F2Kb9fiqmnI/UlVbabCkxBI/AAAAAAAADoc/RjbydjK0j-I/s1600/controls.png) no-repeat top center;
    width: 38px;
    height: 19px;
    text-indent: -9999px;
}
#cboxClose:hover {
    background-position: bottom center;
}

#subscriptionwrap {
    width: 600px; height: 190px;
    background: #e9e9e9;
    padding: 15px;
    margin: 14px;
    border: 1px solid #ddd;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
    -moz-box-shadow: 0 1px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
    box-shadow: 0 1px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
}

.subscriptionbox h4 {
    font-size: 30px;
    font-family: 'Verdana', Arial;
    font-variant: small-caps;
    margin: 0 auto;
    text-align: center;
    line-height: 30px;
    color: #333;
    font-weight: 600;
    text-shadow: 1px 1px 5px #333;
    text-decoration: none !important;
}

.subscriptionbox p {
    font-family: geogia;
    font-style: italic;
    font-size: 26px;
    text-align: center;
    margin: 0px;
    line-height: 30px;
    margin-top: 25px;
    border-bottom: 1px solid #333;
    color: #454545;
    padding-bottom: 20px;
}

.emailbutton1 {
    background: #f7f8f9;
    background: -webkit-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
    background: -moz-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
    background: -o-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
    background: -ms-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
    background: linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f7f8f9",endColorstr="#e9e9e9",GradientType=0 );
    border: 1px solid #ddd;
    -webkit-border-top-right-radius: 4px;
    -moz-border-top-right-radius: 4px;
    border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -moz-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px;
    -webkit-box-shadow: 0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
    -moz-box-shadow: 0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
    box-shadow: 0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
    color: #888 !important;
    text-shadow: 0 1px 0 #fff;
    line-height: 1.5;
    top: 0px;
    margin: 10px 0 0 -15px;
    cursor: pointer;
    padding: 18px 15px 15px 15px !important;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none !important;
}

.emailbutton1:hover {
    background: #f1f1f1;
    background: -webkit-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
    background: -moz-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
    background: -o-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
    background: -ms-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
    background: linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f1f1f1",endColorstr="#e0e0e0",GradientType=0 );
    text-decoration: none !important;
}

.emailinput1 {

    width: 490px;height: 37px;    padding-right: 30px !important;
    float: left;
    margin: 10px 0 0 0px;
    padding: 8px 40px 8px 10px;
    border: 1px solid #d2d2d2;
    background: #fff;
    font-family: georgia;
    font-style: italic;
    font-size: 16px;
    color: #949494;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-decoration: none!important;
}

5. Save your template and you are done second last step! Visit your blog to see it working just perfectly? if everything is working fine then Follow the final step below.

 

6. Now finally find the following code.

 

</body>

7. and paste the following code before closing </body> tag.

 

<div style='display:none'>
<div id='email-popup' style='position:scroll; z-index:99999;'>
<div id='subscriptionwrap'>
<div class='subscriptionbox'>
<h4>Ready To Be Make <strong>Elegant Blog</strong></h4>
<p>Subscribe to My Blogger Tricks to enjoy Free Tricks</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform1' method='post' onsubmit='window.open(&quot;http://feedburner.google.com/fb/a/mailverify?uri=mybloggertricks&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='mybloggertricks'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='emailinput1' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email...'/>
<input class='emailbutton1' title='' type='submit' value='SignUp'/>
</form>
</div>
</div>
  </div>
  </div>

 

Troubleshoot Popup

Now you need to make these changes in the above CSS and HTML codes.

  • Edit the highlighted yellow text to anything you like. It will appear at the top of the input box.
  • Edit the highlighted code in green color for width and height adjustment as you wish for your current blog/website layout.
  • replace mybloggertricks with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.
  • Replace mybloggertricks with your feed title. It appear at the end of your feed link. In my case it is <input name='uri' type='hidden' value='mybloggertricks />

Save your template and you are all set!

 

Visit your blogs and see it popping up just fine! Remember that the popup will show only once in week. To see it again you will first need to delete your browser cookie and then refresh the page to see it appearing again. I just hope you would find this tutorial easy, Please let me know if you need further help.  Stay updated by subscribing our email news feed or join us on Facebook by pressing like button.

 

Image Credit:- FreeDigitalPhotos.net

Read Article →