Amazing Popup window for Blogger 2015– Popup window code

You might notice in some websites that a popup window opens suddenly without the knowledge of you which leads to other websites and they do it for some promotional purpose.

It’s easy to add popup window for blogger and adding popup window helps in increasing page views of your blog and you can help visitors to know useful links within your site and other external sites.

How to create a popup window for Blogger

1. Login to your blogger  account
2. Go to Dashboard >> layout and click “add a gadget” from sidebar or footer
3. Open HTML/JavaScript gadget
4. Add the following script in HTML/JavaScript content area and click save

<script type="text/javascript">                                                                                            

document.body.onclick= function(){                                                                                    

window.open('http://errorcodexin.blogspot.com', 'poppage', 'toolbars=0, scrollbars=1, location=0, statusbars=0, menubars=0, resizable=1, width=950, height=650, left = 300, top = 50');    

}</script>                                                                                                                              

Note:

Make sure to change the http://errorcodexin.blogspot.com URL

Customize the width and height of the popup window like you wish

Now a popup window opens pointing to that page when users click somewhere on your blog.

How to install contact form in a static page of blogger blog

Installing the Contact Form In Static Page- Ok just here i will not discuss the function and why the contact form widget has an important role on a blog but here i will share tips on how to install the contact form on static pages blogger, please read carefully to.

Firstly you have to enter this contact form widget on the blog.

And before you have installed an awesome font in the template, if not please add the link below before </head> HTML <link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/> Remove the <br/> in the code Next, please go to Template> Edit Template> to apply the code before the </style> or ]]</b: skin> CSS #ContactForm1 { display: none; } #ContactForm1_contact-form-name, #ContactForm1_contact-form-email { width: 300px; height: auto; margin: 10px auto; padding: 10px; background: #fdfdfd; color: #666; border: 1px dashed #ddd; transition: all 0.5s ease-in-out; } #ContactForm1_contact-form-email-message { width: 450px; height: 175px; margin: 10px auto; padding: 10px; background: #fdfdfd; color: #666; font-family: 'Roboto',sans-serif; border: 1px dashed #ddd; transition: all 0.5s ease-in-out; } #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus { background: #fff; outline: none; border: 1px dashed #f8a82a; } #ContactForm1_contact-form-submit { font-family: 'Roboto'; font-size: 15px; width: 101px; height: 35px; float: left; color: #fff; padding: 0; margin: 10px 0 3px 0; cursor: pointer; background: #aaa; border: none; border-radius: 2px; transition: background 0.4s linear; } #ContactForm1_contact-form-submit:hover { background: #f8a82a; } #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message { width: 450px; margin-top: 35px; } Remove <br/> in the code Save the template So it looks neats neat, you should use the Press "Enter" for a new line on the menu "Option" as shown below

Then create a new static page and apply the code below in the HTML tab HTML <form name="contact-form"> <span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-user"></i> Nama</span> <input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> <span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-envelope"></i> Alamat Email <span style="color: red; font-weight: bolder;">*</span></span> <input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> <span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-pencil"></i> Isi Pesan <span style="color: red; font-weight: bolder;">*</span></span> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <input id="ContactForm1_contact-form-submit" type="button" value="Kirim" /> <div style="max-width: 222px; text-align: center; width: 100%;"> <div id="ContactForm1_contact-form-error-message"> </div> <div id="ContactForm1_contact-form-success-message"> </div> </div> </form> Publish and view it. Thank you

Easily Install Fixed contact form widget in blogger blog

Installing Fixed Contact Form Widget in Blog- On this occasion i will share about how to install the widget fixed contact form means that the widget will appear on the blog page exactly at the bottom right corner. 

As we knwo, widget contact form/contact form is one of Blogger Email Facility that serves to connect between the visitor and the owner of the blog to communicate with each other personally. Way messge divlivery was fairly easy, we just need to write your name, email address, and the message content. So do not bother to log in to an email account, but the contact form widgets already available on our blog. 

For those who previously used this trick: Add a Contact Form on Static Pages

Before making sure it is installed on your blog widget contact form. If not add the widget in the Layout>

Add new widget. Ok, just the way it is applied. 

1. Go to Blogger> Template> Edit HTML> Then add the following code just above ]]> </b: skin> or </style> CSS

/* Fixed Contact Form */ .ContactForm,.ContactForm .title{display:none} .floating-ai{position:fixed;width:280px;right:30px;bottom:0;z-index:99} .floating-ai-head a{padding:8px 10px;background:#2997e0;color:#fff;font-weight:400;display:inline-block;transition:all .3s linear} .floating-ai-head a:hover{background:#2588ca;color:#fff} .floating-ai-body{height:285px;background:#fff;padding:10px;display:none;box-shadow:0 2px 5px 0 rgba(0,0,0,.26)} .floating-ai-head{text-align:right} .floating-ai-body .ContactForm{margin:0;display:block!important} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{background:#fff;border:0;padding:10px 0;color:#999;font-weight:normal;width:100%;max-width:initial;border-bottom:1px solid #ccc;transition:.2s ease all} #ContactForm1_contact-form-email-message{background:#fff;border:none;color:#8f8f8f;padding:10px 0;width:100%;max-width:initial;border-bottom:1px solid #ccc} #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-name:hover,#ContactForm1_contact-form-email:hover,#ContactForm1_contact-form-email-message:hover{background:#fff;box-shadow:none;border-bottom-color:#ff3c3c;transition:all .3s linear} #ContactForm1_contact-form-submit{position:relative;color:#fff;font-weight:400;font-size:12px;cursor:pointer;background:#57ad68;border:none;float:left;box-shadow:0 0 0 0 rgba(0,0,0,0.19);transition:all .3s linear} #ContactForm1_contact-form-submit:hover{background:#468a53;} #ContactForm1_contact-form-submit:active{box-shadow:0 4px 15px 0 rgba(0,0,0,0.19);} .contact-form-widget form{display:table;margin:0 auto;} .contact-form-widget {max-width:initial;} .floating-ai-body{-moz-box-sizing:initial;-webkit-box-sizing:initial;box-sizing:initial} 2. Then add the following code before the </body>

<script type='text/javascript'> //<![CDATA[ // Fixed Contact Form $("body").append('<div class="floating-ai"><div class="floating-ai-head"><a href="#no-move">Contact Form</a></div><div class="floating-ai-body"></div></div>'),$(".ContactForm").appendTo(".floating-ai-body");var slide_up_ai=!1;$(".floating-ai-head a").click(function(){slide_up_ai?(slide_up_ai=!1,$(".floating-ai-body").slideUp()):(slide_up_ai=!0,$(".floating-ai-body").slideDown())}); //]]> </script> Save the Template It's completed Thank you for reading.

Easily Divert Old Blog Url To New Blog Url

This method is useful for those who have just moved domain or create a anew blog and want to divert visitors from the lod blog that already have a source of traffic from organic search results as well as of backlinks to your new blog.

So how? Ok, here i give you three different ways to divert url blog to other blogs. The first way is to implement a javascript code to your blog template Login to Blogger> Open and click edit HTML Templates> Apply the code just below the </head> JavaScript <script type='text/javascript'> var d='<data:blog.url/>'; d=d.replace(/.*\/\/[^\/]*/, ''); location.href = 'http://online-blogger-ustaad.blogspot.com'; </script> n the above javascript code written link destination is http://online-blogger-ustaad.blogspot.com please replace the destination link to your blog. The second way is to use javascript application code whose application is no different with the code of the way first. JavaScript

<script> if(window.location.href == 'http://errorcodexin.blogspot.com') { window.location="http://online-blogger-ustaad.blogspot.com"; } </script>

And the third way to use the applicatiion meta refresh tag in the blog template that will be transfered . HTML <meta content='5;url=http://online-blogger-ustaad.blogspot.com' http-equiv='refresh'/> Content=5 above is the length/time required when a blog url diverted to other blogs. Please replace it and you're advised not to give the value of the Content=0. Remove  <br/> tag in all code. Thanks for the patience.

The article is taken from my brother's blog............ you can read here

Prevent Automatic Redirect from blogspot.com To blogspot.co.uk

How to Prevent Automatic Redirect from blogspot.com to blogspot.co.uk-On this occassion Ustaad will share related tuturorial that was warmly discussed by bloggers, especially in many forums regarding the transfer of the sub domain blogspot.com blog to blogspot.co.uk. 

Here i'm going to discuress about this transition, but in this article i will only give a tutorial on how to prevent automatic  redirect from blogspot.com to blogspot.co.uk. Actually this tutorial is long and many have shared in other sources, but there is no harm if the current share here because at the moment it may be beneficial to man. 

Also Read: How to  divert old blog url to new blog url?

Note: For  users who have installed Ads on his blog. It is unvisible to not install the code would share this. As they may be considered to violate the rules of the Google-Adsense policy. 

Simply follow the steps: 

1. Go to Blogger> Template> Edit HTML>Then add the following code just below 

THE <head> or above </head>

JavaScript

<script type='text/javascript'> var str=window.location.href.toString();if("-1"==str.indexOf(".com/")){var str1=str.substring(str.lastIndexOf(".blogspot."));if("-1"==str1.indexOf("/"))var str2=str1;else var str2=str1.substring(0,str1.indexOf("/")+1);window.location.href=window.location.href.toString().replace(str2,".blogspot.com/ncr/")} </script> Or it could be with this code:

JavaScript <script type="text/javascript"> var blog = document.location.hostname;var slug = document.location.pathname;var ctld = blog.substr(blog.lastIndexOf("."));if (ctld != ".com") {var ncr = "http://" + blog.substr(0, blog.indexOf("."));ncr += ".blogspot.com/ncr" + slug;window.location.replace(ncr);} </script> 2. Save the Template  Now add the code above the location where  who will open your blog. The blog will not be teredirect automatically to other subdomains, such as blogspot.co.uk or blogspot.co.id Good Luck

Submit Sitemap To Google Webmaster In Easy Steps

How To Submit Blogger Sitemap To Google Webmaster Tools?-To be successful in your blogging career you must have to generate decent organic traffic to your blog. By the term “organic traffic” I mean the traffic which comes to your blog through search engines like Google.

If you are a new blogger then you should be aware with the Google Webmaster Tools. This is a great tool which is provided by Google itself. It is useful for bloggers and webmasters to get their blog or website index by the Google and it also help to improve our blog’s crawling rate.

You just need to verify your blog ownership in Google Webmaster Tools and then submit a simple sitemap. It is very important to submit blogger sitemap to Google in terms of SEO which tells Google about your blog and its content.

Whenever you update your blog with new posts, your sitemap helps to index them easily in search engines. This is what we are going to discuss in this post. Let see how to add blogger sitemap to Google Webmaster Tools.

Submit Blogger Sitemap To Google Webmaster Tools
Below are some easy steps you have to go through in terms to submit your blogspot blog sitemap.

1. Sign in to Google Webmaster Tools.
2. Click on the blog title for which you want to add sitemap.
3. Click on Sitemaps button as shown below.

At the top right corner of the page, press Add/Test sitemap button.

Once you click the button, a small box will appear as shown in the screenshot below.

Add the below code in the text field.

atom.xml?redirect=false&start-index=1&max-results=500

This is the sitemap code for your blogger blog which you need to add.

Press “Submit Sitemap” button.

Refresh the page.

Congratulation! You have finished the process of submitting your blog sitemap.

Note: The above sitemap will work for 500 posts only. If you have more than 500 posts published in your blog, then you have to add one more sitemap. The Whole procedure will be same but at this time you have to add this code.

atom.xml?redirect=false&start-index=501&max-results=500

The sitemap which we submit to Google Webmaster Tools is a XML sitemap which is used by search engines to find our content easily. There is HTML sitemap too which is for our blog readers. We should add sitemap page to our blog so that our readers can easily view all of our blog posts at the single location. It’ll be easy for them to read the post which they want to.

100% Gurantee to Remove Footer Credit Link from Blogger Template

Many websites like templateism, templateify, waythemes etc. are available on the internet which provides very stylish blogger template at very low cost. If you purchase their template than that template will not contain any credit link. These websites also provide most of the free blogger template with Non-removable credit link. Means, what? If you'll try to remove credit link from their template, then your blog will automatically redirect to their website (Homepage or a particular site). This is because they added some JavaScript into their free templates. In other hand, if you undo the changes and keep their original credit of template then it works perfectly.

Some days ago, I have visited one of these types of Blogger template websites where I have seen what? that some peoples (newbies blogger) are requesting how to remove credit/footer link from their template and the admin and other staff members are making jokes of that requests which result in creation of this topic.

Basically, newbies blogger don't want to invest money in purchasing any premium template and thus, use these types of free template for their blog. Many of them are trying to remove credit link but unsuccessful, if you are one of them then no need to wait more. Because here I have shared the method by which you can remove footer link and stop redirecting to any website.

How to Remove Credit Link?
Actually, these links are attached with some JavaScript or CSS. Finding JavaScript from the template and then removing is too boring and time-consuming also it requires lot's of effort to do this. But in other hand, you can easily hide the credit/footer link via CSS. This method is very simple and takes only 2 minutes.

Steps to Remove Credit/Footer Link:
First of all go to Blogger.com
Just Login to your Blogger Profile and select your blog.
Now go to Dashboard > Template > Edit HTML.
Edit Blogger Template

Go to the footer and find the credit/footer link which needs to remove/hide. You'll find something like Copyright, credit or designed etc (Like the picture shown below).

Add the following line with your original copyright ID. (As shown in picture below).

style="visibility: hidden"

Now, you need to Save your Template.

Conclusion:

Some of you are searching on the internet how to remove footer credit link and convert free blogger template into premium. So, I hope this tutorial helps you. Share your idea/suggestion/feedback related to articles I publish here. Thanks, and stay tuned.

Reference: http://www.alltechway.com/2014/10/remove-footer-credit-link-from-blogger-template.html

How to Backup & Restore Blogger Template?

Pro bloggers always habitual to backup their Blogger template. care is better than cure. Before you do anything with your blogger template, I will strongly recommended you to backup your blogger blog along with this You should know to how to backup entire blogger blog & Restore it again like post, pages categories and all those stuff.

Why to backup Blogger Template?
You might be using premium or free blogger template. There  are numbers of bloggers are blogging on blogger base blog. So you must have tried numbers of tutorial like inserting JavaScript, Modifying HTML and all those stuff.

You may have find that when you remove already existing code from template and save template, It's not possible to get that code again.  So if you have backup files than you can easily able to get your code.

How to Backup Blogger Template?
Step 1:-  Navigate: Blogger Dashboard > Template > Backup / Restore.

nished – you have now a backup of your template.

How to Restore Blogger Template?
So you are ready with your blogger template, It's same like installing third party template in blogger blog.

Step 1:- Navigate: Blogger Dashboard > Template > Backup / Restore.

Step 2:- Click on choose file, and upload your backup template.
Step 3:- That set.

How to Find Code in Backup Template without Restore?
It's quite easy to find your code in backup blogger template. Just open backup file in notepad or notepad plus. Search your code, it will same coding as in blogger HTML editor.

Conclusion:
Always backup your blogger blog template as well as entire blogger blog, save it in your hard disk date wise. It will help you to sustain successful blogging life.

How To Remove Disqus Comment System & Retrieve Blogger Comments Box?

It is possible that you might have more families default comments box of blogger blog. After changing blogger comment box to disqus system you are might facing problem with retrieving your blogger comment box Again. Don't worried about it we have a solution for you. This post is all about how to remove disqus comment system and retrieve bloggger comments box? up till now you can synchronize comment blogger to disqus but blogger doesn't provide such a facilities of retrieving comments from disqus to blogger.

How To Remove Disqus Comment System & Retrieve Bloggger Comments Box?

Step 1: Login into your blogger account.
Step 2: Go to Layout tab and find your widget name with Disqus for blog url.
Step 3: Remove that widget. That set your disqus comment is removed from your blog and your are successfully retrieved you blogger comment box.

Note: Some html code are still in your blogger template your can remove it manually by searching word Disqus.Before doing any think make sure that you backup your blogger template. find word disqus by pressing Template > Edit HTML > Proceed button and then tick mark on Expand Widget Templates.

How To Remove Disqus Footer Logo from my blogger blog

Many Of blogger are using Disqus comments system in blogger blog and WordPress blog as well. Disqus comment system is really awesome and famous comments system in the world of bloggers. It does provide multiple comments system on same network or place. 

You may post comment via facebook, twitter, email or as a disqus user.  Disqus comment system shows a footer bar including disqus logo which reserve a lot of space on your blogger page and many of bloggers do not like that. I will teach you that how can you remove or hide Disqus footer logo in blogger from your disqus comments system. We will use a CSS Small trick and this css code will remove/hide the Disqus comments Logo Footer.

How To Hide| Remove Disqus Footer Logo From Blogger Comments

Well Please Follow The Below Steps And Also Look on The Above Screen Shot Which Part We Are Going To Remove.

• 
  
• Open Your Blogger Dashboard
• Go To Template > Edit HTML Section
• Find The Below Code 

]]></b:skin>

Now Just Above/Before It Paste The Below Css Code.

#‎disqus_thread‬{

position: relative;

}

#disqus_thread:after{

content: "";

display: block;

height: 55px;

width: 100%;

position: absolute;

bottom: 0px;

background:white;

}

Now Save Your Blogger Template.

Congratulation You Have Successfuly Removed Disqus Footer Logo From Your Blogger.

Final Words

I am using this Css Blogger trick and it is working fine in my blogger blog paklinkz. Before editing your template always make full backup of your blogger blog. If you like our blogger tips tricks 2014 please share the post with your friends as well.

100% Add HTTPS support in your Blogger Blog

Benefits of  Securing Blogger Blog with HTTPS.

As such, you all know about the HTTPS that it adds extra security to your blogs by encrypting it. Mostly the hosting companies provide that services to add it with your custom domain e.g; https://www.mybloggerlab.com/. And of course, they will charge you for providing that service.

Blogger is providing you that security encryption for free, but only for blogspot blogs. So, you can enjoy this awesome security for your blogs for free. And, it will let you start every kind of ecommerce or data recording services on your free blogs.

Official Example:  https://googleonlinesecurity.blogspot.com/

How to Add HTTPS support to your Blogger blog

Now here are the steps which you need to follow in order to add HTTPS support to your blogger blog. Follow the below steps to get it for your blog.

Caution: You will not be able to enjoy this service on your custom domain.

First of all, Sign in to your Blogger and click on your click. Now Click on Settings from sidebar and go to Basic (by default you go to the Basic first so no need to click anywhere else). Look for HTTPS Settings, and click on down arrow and select YES. Remember: HTTPS Ava liability is only for Blogger Custom Domains.

Now changes will be saved automatically. Congratulations, your blog is now encrypted with high security environment best for websites doing business or even blogs.

This was it!

This was our article which has made you learn to add HTTPS support to your BlogSpot blogs. If you have confusion related to this article then drop it in the comment box. I shall get back to your queries as soon as possible.

Was it awesome? Then praise us by your shares and likes. Your share may be proven helpful for many of the users out there who are in search of same stuffs. So, keep sharing and keep helping.

How to Add a Google Sitemap to your Blogger Blog

The XML Sitemap file is like a directory of all web pages that exist on your website or blog. Search engines like Google and Bing can use these sitemap files to discover pages on your site that the search bots may have otherwise missed during regular crawling.

The Problem with Blogger Sitemap Files

An complete sitemap file should mention all pages of a site but that’s not the case if your blog is hosted on Blogger.

The default XML sitemap file of any Blogger blog will have only the 26 most recent blog posts – see example. That’s a limitation because some of your older blog pages, that are missing in the default XML sitemap file, may never get indexed in search engines. There’s however a simple solution to fix this problem.

Generate a Complete Sitemap for your Blogger Blog

This section is valid for both regular Blogger blogs (that use a .blogspot.com address) and also the self-hosted Blogger blogs that use a custom domain (like postsecret.com).

Here’s what you need to do to expose your blog’s complete site structure to search engines with the help of an XML sitemap.

Open the Sitemap Generator and type the full address of your blogspot blog (or your self-hosted Blogger blog).

Click the Create Sitemap button and this tool will instantly generate the necessary text for your sitemap. Copy the entire generated text to your clipboard (see screenshot below).

Next go to your Blogger dashboard and under Settings – > Search Preferences, the enable Custom robots.txt option (available in the Crawling and Indexing section). Paste the clipboard text here and save your changes.

And we are done. Search engines will automatically discover your XML sitemap files via the robots.txt file and you don’t have to ping them manually.

Copy the entire text to the clipboard

How To Add a Drop Down Menu To a Blogger Blog

Drop down menus can help organize and categorize content links. While many web developers debate whether or not they are good or bad practice, there’s no doubt that they can help clean up a design if you have a rather busy blog. If your blog contains a large amount of information and you’re interested in categorizing your links a little better, a drop down menu might be the ticket!

Since Blogger doesn’t offer the option to automatically add a drop down menu as WordPress does, we have to make our own. This requires a little bit of CSS and HTML knowledge, but I will walk you through it so it doesn’t seem so confusing.

The menu I’ve put together is built entirely with CSS3 and HTML. No Javascript to deal with here, so it is nice and lightweight and easy to configure. You can view a demo of it here. To get started, you’ll need to head on over to the Layout page in your Blogger dashboard and add a HTML/Javascript gadget in the top/header area:

Add the following code to your new widget, customizing the titles and links to match your own blog:

<ul id="icbabdrop"><li><a href="#">Home</a></li><li><a href="#">About</a></li><li> Topics <ul><li><a href="#">Lifestyle</a></li><li><a href="#">Blogging</a></li><li><a href="#">Art and Design</a></li></ul></li><li><a href="#">Portfolio</a></li><li><a href="#">Contact</a></li></ul>

You will need to replace the # characters with the actual links of your pages, and the menu titles with your own.
TIP: To add additional menu items with sub-menus, you can copy the red portion of the code and paste a duplicate before or after any <li> or </li> codes, like so:

<ul id="icbabdrop"><li><a href="#">Home</a></li><li><a href="#">About</a></li><li> Topics <ul><li><a href="#">Lifestyle</a></li><li><a href="#">Blogging</a></li><li><a href="#">Art and Design</a></li></ul></li><li> Topics 2 <ul><li><a href="#">Lifestyle 2</a></li><li><a href="#">Blogging 2</a></li><li><a href="#">Art and Design 2</a></li></ul></li><li><a href="#">Portfolio</a></li><li><a href="#">Contact</a></li></ul>Now, you’ll want to pop on over to the Template > Customize page of Blogger and scroll down to Advanced > CSS. Add the following code to give that menu some style: /* DROPDOWN MENU BY icanbuildablog.com */ .tabs-inner .widget ul#icbabdrop { text-align: left; display: inline; margin: 0; padding: 15px 4px 17px 0; list-style: none; border:none; } .tabs-inner .widget ul#icbabdrop li { font-size: 12px/18px; font-family: sans-serif; /* Font for the menu */ display: inline-block; margin-right: -4px; position: relative; padding: 15px 20px; background: #fff; /* background colour of the main menu */ float:none; cursor: pointer; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .tabs-inner .widget ul#icbabdrop li a { padding:0; font-family: sans-serif; /* Font for the menu links */ border:0; } .tabs-inner .widget ul#icbabdrop li:hover { background: #555; /* background colour when you roll over a menu title */ color: #fff; /* font colour when you roll over a menu title */ } .tabs-inner .widget ul#icbabdrop li:hover a { background: transparent; color: #fff; /* font colour when you roll over a menu title link */ } .tabs-inner .widget ul#icbabdrop li ul { z-index:1000; border:none; padding: 0; position: absolute; top: 45px; left: 30px; float:none; width: 150px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; display: none; opacity: 0; visibility: hidden; -webkit-transiton: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; -transition: opacity 0.2s; } .tabs-inner .widget ul#icbabdrop li ul li { background: #555; /* background colour of the sub menu items */ display: block; color: #fff; /* font colour of the sub menu items */ text-shadow: 0 -1px 0 #000; } ul#icbabdrop li ul li a{ color:#fff /* link colour of the sub menu items */ } .tabs-inner .widget ul#icbabdrop li ul li:hover { background: #666; /* background colour when you roll over sub menu items */ } .tabs-inner .widget ul#icbabdrop li:hover ul { display: block; opacity: 1; visibility: visible; }

You can change the colours and fonts wherever I’ve placed the comments in the code.

How To Add a Contact Form on a Blogger Blog

Having a contact page on your blog is highly important. It is how visitors, brands, and companies can reach you and it’s something that every blogger should have. If sharing your email address on your blog is not your cup of tea, a contact form can serve as an easy way for others to get in touch.

If you do go the route of using a contact form, I do suggest that you also include an email address on the Contact page as well. You can set one up specifically for your blog if you don’t want your personal email address to be seen. The reason I believe this is so important to offer both options is because most brands and companies will not fill out a contact form to contact you. They usually want to email you through their own email client and add you to their contacts.

Adding a contact form to Blogger can be done with a few coding tweaks. Blogger actually offers a free contact form for your blog, unfortunately they’ve made it as a Gadget and placed it on the Layout page so that it is added to your sidebar. Not the ideal place for a contact form, if you ask me! It should be situated on its own page, so here’s how to set it up that way:

Adding a Contact Form to Blogger

Step 1 – First, go to the Layout page in Blogger and click an Add a Gadget link. From the popup, choose More Gadgets in the sidebar and then select Contact Form and add it. It doesn’t matter where it ends up in your sidebar right now, since we are going to modify that and make it look nice!

Now, visit your Customize > Edit HTML page.

Click inside of the editor textarea and press CTRL+F (CMD+F on a Mac) and in the search bar type ContactForm then hit enter.

It should find the code below. Click the black down arrow to the left of:

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>

then click the down arrow again beside:

<b:includable id='main'>

if they are not already open.

3. You will see this code:

3. You will see this code:

<b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <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 + &quot;_contact-form-name&quot;' 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 + &quot;_contact-form-email&quot;' 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 + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' 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 + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>
</b:includable>

Delete everything shown in red so you should just be left with:

<b:includable id='main'></b:includable>

4. Do a new search, this time looking for ]]></b:skin> and pasting this code directly before it:

/*CUSTOM CONTACT FORM BY ICANBUILDABLOG.COM */
.contact-form-widget {
margin-left:auto;
margin-right:auto;
width: 600px;
max-width: 100%;
padding: 0px;
color: #000;
}
.fm_name, .fm_email {
float:left;
padding:5px;
width:48%
}
.fm_message {
padding:5px;
}
.contact-form-name, .contact-form-email {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
height:40px;
padding:10px;
font-size:16px;
}
.contact-form-email-message {
width:100%;
max-width: 100%;
height:100px;
margin-bottom:10px;
padding:10px;
font-size:16px;
}
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
height:30px;
font-size:16px;
}
.contact-form-button-submit:hover{
background: #ffffff;
color: #000000;
border: 1px solid #FAFAFA;
}

5. Save the template then go to Pages to create a new Contact page if you haven’t got one already. In the page editor, switch to HTML mode and paste the following:

<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<div class="fm_name">
Your Name:
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div>
<div class="fm_email">
E-mail Address *:
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div>
<div style="clear:both">
</div>
<div class="fm_message">
Message *:
<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" />
<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>
</div>
</form>
</div>
</div>
</div>

6. Save your page and view your new contact form! It should look like this:

Since this uses the Blogger Gadget interface, the emails sent using this form will be sent to the email associated with your account. You can change this email address in the Admin settings of your blog.

Releasing Professional Blogger Notification Bar!

Today we are releasing a new fancy style black notification bar for your blogger blog. This notification bar will show your desire post which you wish to show up at the top of your blog. However many bloggers display the hot deals or popular post with the help of this blogger notification bar. The biggest advantage of notification message at the top of the blog is to remain exist even if we grab the mouse down or scrolling up and down. This top righted bar will interact with every page or post. So if you have not yet added a notification bar into blogger then i would recommend to add this simple black color notification bar in your blogger blog. 

You may follow the easy steps mentioned below in order to add the widget to your blogger blogs. Same procedure will work for any other platform like Wordpress. 

Go To Blogger > Template

Backup your template

Click Edit HTML

Search for ]]></b:skin>

Just  paste the following code above it:

/* ----Blogger Notification bar by Saad Ahmad Azaad----- */
#bloggernotificationWrap{ 
    display: none; 
    margin: 0; 
    padding: 0; 
    position: fixed; 
    margin-top: -41px; 
    z-index: 999999; 
    width: 100%; 
    height: 41px; 
}
#bloggernotification { 
    width: 100%; 
    height: 28px; 
    margin: 0px; 
    padding-top: 7px; 
    text-align: center; 
    background: none repeat scroll #2E2F2E; 
    position: relative; 
    box-shadow:0px 1px 3px #666; 
    z-index: 9998; 
    text-decoration: none; 
    color: #cccccc; 
    font-family: arial,sans-serif; 
    font-size: 13px; 
    font-weight: bold; 
    text-shadow: 1px 1px 1px #000; 
    border-bottom:2px solid #fff; 
}

#bloggernotification a{ 
    text-decoration: none; 
    color:#FFFC00; 
     font-family: arial,sans-serif; 
    font-size: 13px; 
    font-weight: bold; 
    text-shadow: 1px 1px 1px #000; 
    outline: none; 
}
#bloggernotification a:hover{ 
    text-decoration: underline; 
}
#bloggernotificationWrap #closebloggernotification{ 
    display: block; 
    position: absolute; 
    top: 0; 
    right: 23px; 
    height: 40px; 
    width: 21px; 
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1zc0K-e5NwnHRSxRjApGar5fqXi_L0e2xwd7XuEUsjN8tYOedDiR-6nRnX21JPibnecY1D60NvdeofhmfNwNyZS3NtUUafnL2iEXo_v21CfCvdBDg4rOu_xl38_Dpgg95ARYqOM-h3MAd/s400/light.png) no-repeat 0 center; 
    cursor: pointer; 
}
#bloggernotificationWrap #closebloggernotification:hover{ 
    background-position: -21px 50%; 
}
#bloggernotificationWrap.bottomPosition #closebloggernotification{ 
    background-position: right 50%; 
}
#bloggernotificationWrap.bottomPosition #closebloggernotification:hover{ 
    background-position: -42px 50%; 
}
#bloggernotificationWrap #openbloggernotification{ 
    display: block; 
    position: absolute; 
    top: -6px; 
    right: 15px; 
    padding: 0 7px; 
    background: #2E2F2E; 
    border-left: 3px solid #fff; 
    border-right: 3px solid #fff; 
    border-bottom: 3px solid #fff; 
    cursor: pointer; 
    z-index: 1; 
    -webkit-border-bottom-right-radius: 5px; 
    -webkit-border-bottom-left-radius: 5px; 
    -moz-border-radius-bottomright: 5px; 
    -moz-border-radius-bottomleft: 5px; 
    border-bottom-right-radius: 5px; 
    border-bottom-left-radius: 5px; 
       box-shadow:0px 1px 3px #666; 
}
#bloggernotificationWrap #openbloggernotification span{ 
    display: block; 
    width: 21px; 
    height: 34px; 
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1zc0K-e5NwnHRSxRjApGar5fqXi_L0e2xwd7XuEUsjN8tYOedDiR-6nRnX21JPibnecY1D60NvdeofhmfNwNyZS3NtUUafnL2iEXo_v21CfCvdBDg4rOu_xl38_Dpgg95ARYqOM-h3MAd/s400/light.png) no-repeat right 50%; 
}

To change the background color of the bar simply edit #2E2F2E

To change text color edit #cccccc

To change hyperlink color edit #FFFC00

Finally  the bar appears just add the following code below <body>

<div class='openbloggernotification' id='bloggernotificationWrap' style='display: block; margin-top: 0px;'><div id='bloggernotification'> 

Write Your Notification Message Here
<span id='closebloggernotification'/></div><span id='openbloggernotification' style='top: -6px;'><span/></span></div>

<br/><br/>

Save your Template you r all done(y)!!!!

Create Links

To create links inside the notification bar use the following code:

<a class='link' href='ADD-URL-HERE' target='_blank'>Link Text</a>

You must add the class='link' , which is required by the script.

How To Add Stylish Notification Bar?

Go To Blogger Dashboard>> 

Edit Template>>

Search For </body> 

Paste the code above the </body>

<!-- Notification code start -->

<style type='text/css'>

#ut-sticky

{

background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTiyI2wcZu1KT-RIfK1I3dv4HCi5HqdmriW_AxOIGBLN7kozCyunJI1QtwNn7i4yv-XwR3RTY_3gyB01C7DuElWet6c3SKR55R7mfqG6e_023-LhOwoVbnLYudgRhSGB7R7i8BnqpkVmcm/s1600/ut-bg.png&#39;)  repeat; 

color:#fff; 

text-align: center;

margin:0 auto; 

border-top: 1px solid #fff;

height:28px; 

font-size:13px; 

position:fixed; 

bottom:0; 

z-index:999; 

width:95%;

border-top-left-radius:15px;

border-top-right-radius:15px; 

display:block;

font-weight: bold;

font-family: arial,&quot;Helvetica&quot;;

font-color:#fff;

}

#ut-sticky:hover

{background:#333;}

#ut-sticky p{line-height:5px; font-size:13px; text-align:center; width:95%; float:left;}

#ut-sticky p a{ text-decoration:underline; color:#FFFF33;}

.ut-cross{display:block; position:relative; right:15px; float:right;}

.ut-cross a{font-size:18px; font-weight:bold; font-family:&quot;Arial&quot;; color:#FF0000; line-height:30px;}

</style>

<div id='ut-sticky'>

<p>Add This Transparent Notification Bar  To Your Blog <a href='http://www.errorcodexin.blogspot.com'  target='_blank'>Stylish Notification Bar</a></p>

<div class='ut-cross'><a href='javascript:hide_cross();'>X</a></div>

</div>

<script language='JavaScript'>

function hide_cross() {

crosstbox = document.getElementById(&quot;ut-sticky&quot;);

crosstbox.style.visibility = &#39;hidden&#39;;

}

</script>

Congratulations You have done it(y)