how to add beautifull flat UI buttons for blogger

As we all know that having a professional design of a blog is necessary these days as it gives several benefits. Bloggers and webmasters are trying to make their blog design better applying free or paid themes on their blogs and websites. The theme or design of a blog should be beautiful to look and have several features like easy interface for user, SEO friendly, Ad space ready, the colors should not affect on user's eye and many more. Previously, we've shared colorful Flat UI label cloud widget for blogger which was liked by many of our readers and they also applied that on their blogs but today, we're back with another Flat UI element or item for our blogs. Today, I'm going to share beautiful Flat UI buttons for blogger which I coded recently.
Recommended : How To Add Push Buttons in Blogger

Beautiful Flat UI Buttons - Review

These are Flat UI design beautiful buttons which will help you to bring awesomeness to your blog design. These buttons have different colors and sizes which will help you to use them for most appropriate situations and places. There are three sizes for these buttons which are big, medium and small. We've chosen total five Flat UI colors for these buttons which are Blue, Green, Red, Purple and Sea Green. Actually, These are not exact those colors mentioned above but we can call them above colors in common because mostly they match with each other. We've coded these buttons in such way that they will not affect on the loading speed of your blog because we've written short coding, compressed it and only used CSS3 without images. Another thing about these buttons is that they will work perfectly on all browsers because we've tweaked them for every browser. Click the below button to see it's live demo.

Flat UI Buttons Demo

How To Add Beautiful Flat UI Buttons in Blogger?

Implementing these buttons in our blog is not any difficult job but anyone can easily add them in his blog by following the simple steps given below. So, let's start the first step by installing these buttons in our blogs.

Step 1. Installation

• Go To Blogger >> Template >> Backup Your Template
• Click Edit HTML and Search For </head>
• Paste The Following Code Above </head>

<!-- Flat UI Buttons By Www.BloggerYard.Com Start -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css"></link>
<style type="text/css">
.button {color:white!important; font-family:open sans; margin:10px 10px 10px 0;text-decoration:none!important; font-weight:700;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-oborder-radius:5px; transition:all .4s;-webkit-transition:all .4s;-moz-transition:all .4s;-ms-transition:all .4s;-o-transition:all .4s;}
.blue {background: #3498db;border-bottom: 3px solid #226693;}
.blue:hover {background:#2980b9;}
.green {background: #2ecc71;border-bottom: 3px solid #1F8C4C;}
.green:hover {background: #27ae60;}
.red {background: #e74c3c;border-bottom: 3px solid #922C20;}
.red:hover {background:#c0392b;}
.purple {background: #9b59b6; border-bottom: 3px solid #74398E;}
.purple:hover {background:#8e44ad;}
.seagreen {background: #1abc9c;border-bottom: 3px solid #127F69;}
.seagreen:hover {background: #16a085;}
.big {font-size:18px; padding:15px 20px;}
.medium {font-size:15px; padding: 10px 15px;}
.small {font-size:12px; padding:8px 10px;}
</style>
<!-- Flat UI Buttons By Www.BloggerYard.Com End -->

• Click "Save Template".
• Installation Completed!

Step 2. Adding Flat UI Buttons in Blogger 

You can use these Flat UI buttons anywhere in your blog. For that, you just need to copy the any button code and paste it anywhere you want to use it. Below, I'm going to give you button codes and also going to show you that how can we use them in a post.

• Go To Blogger >> Create New Post
• Click "HTML" Tab
• Copy and Paste Any Button Code There.

Big Size Buttons

<a class="button blue big" href="#">Blue Button</a>
<a class="button green big" href="#">Green Button</a>
<a class="button red big" href="#">Red Button</a>
<a class="button purple big" href="#">Purple Button</a>
<a class="button seagreen big" href="#">SeaGreen </a>

Medium Size Buttons

<a class="button blue medium" href="#">Blue Button</a>
<a class="button green medium" href="#">Green Button</a>
<a class="button red medium" href="#">Red Button</a>
<a class="button purple medium" href="#">Purple Button</a>
<a class="button seagreen medium" href="#">SeaGreen</a>

Small Size Buttons

<a class="button blue small" href="#">Blue Button</a>
<a class="button green small" href="#">Green Button</a>
<a class="button red small" href="#">Red Button</a>
<a class="button purple small" href="#">Purple Button</a>
<a class="button seagreen small" href="#">SeaGreen </a>

• Replace #  With The Link of Button.
• Replace Highlighted Text With The Text You Want to Show On That Button.
• Prepare Post Content and Publish.
• That's All. 

Final Words

These were beautiful Flat UI Buttons for Blogger which I liked to share today with you all and I hope this little effort in preparing these buttons will help everyone to stylify their blogs. Facing any problem in implementing these buttons? Feel free to ask below. Keep in touch with us for the upcoming hot dish which is being prepared in our kitchen and also share these buttons with your friends. Take Care!

Read More

How To Add A Shining CSS3 Horizontal Menu For Blogger

How To Add A Shining CSS3 Horizontal Menu For Blogger

The importance of horizontal menu including: reducing the space occupied by the sections/labels and distort the appearance of blog, coordinate and beautify the style of blog.Horizontal menu best alter

This widget is designed by CSS3 technology, And you can add this gadget to your blog with very easy way:

Adding the widget to Blogger blog:

1. Go to Blogger Dashboard  → Layout → click on "Add a gadget".
2. Select "html/java script" and add the code given below:

........................................................................................................................................

<style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOgKx_XNFdmLhDuiMjsVnnr2m0kybrMxQPgPdK1kO-vrsrMLAvwAzKIR5n4c4xEMaDop_QLhI7l12oMV-i6LYT2biX7yNEGlR3K0Z-4gUrUWP8O_49pLl3p9Eq1b_ecmX1JyS9WOcVt0Q/s1600/noop-menu-blogger.png") repeat scroll 0 0 transparent;border:1px solid #1357AF!important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style>
<a href="http://javaid1818.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY3YgMbJipNeh1UP-6Mb2xDAl0-UfkqLi6RoZO9vAVOMAepa8jC3ouTiqOIZsfCWG2WmP1Ff70jrTXVVYo-uMd9dqgMt_GmkA8H3iyqufVOUYgCO1ekBnAdPI96S38_5ADYczRU1gA4fc/s1600/1x1juice.png" /></a>
<div class="wg-shining-menu">
    <ul class="menu">
        <li><a href="http://javaid1818.blogspot.com/">Home</a></li>
        <li><a href="http://javaid1818.blogspot.com/">Features</a></li>
        <li><a href="http://javaid1818.blogspot.com/">Products</a></li>
        <li><a href="http://javaid1818.blogspot.com/">Contact</a></li>
        <li><a href="http://javaid1818.blogspot.com/">Tips</a></li>
        <li><a href="http://javaid1818.blogspot.com/">Tricks</a></li>
        <li><a href="http://javaid1818.blogspot.com/">About</a></li>
    </ul>

</div>

..................................................................................................................................................
NOTE: 
3. - Replace the URL in blue with your own.
    - Replace the tab name in red with your own.
4. Finally click on save.
Now you can see the result

Read More

NEW Blogger All In One Seo Pack SEO Plugin 2014

The largest drawback of Bloggger contrasted and Wordpress SEO capacities ifGoogle's Blogger is a he developed in the bic searching for. So why Blogger-Blogspot SEO competencies with Wordpress? Upgrade your Bloggger SEO: Write preferred substance and have a totally streamlined Bloggger post utilizing the Bloggger SEO plugin by Muhammad Shahid. 

Title and Description 



Meta Tags and Description 


Instructions to Install All In One Seo Pack for Blogspot? 

Click tab Design > Edit HTML. CTRL + F and look this code.

<title><data:blog.title/></title>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
 <meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>

Replace with 

<!-- / All In One Seo Pack Blogger SEO Plugin by javaid188.blogspot.com. -->

<title><data:blog.pageTitle/></title>

 <b:else/>
   <title><data:blog.pageName/> - <data:blog.title/></title>
    </b:if> 
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
 <meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex, nofollow' name='robots'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title' name='keywords'/>
<meta content='index, follow' name='robots'/>
</b:if> <b:else/>
<b:if cond='data:blog.pageTitle != data:blog.title'>
<meta expr:content='data:blog.pageName' name='keywords'/>
</b:if></b:if>
<meta content='global' name='distribution'/>
<meta content='3 days' name='revisit'/>
<meta content='3 days' name='revisit-after'/>
<meta content='document' name='resource-type'/>
<meta content='all' name='audience'/>
<meta content='general' name='rating'/>
<meta content='all' name='robots'/>
<meta content='index, follow' name='robots'/>
<meta content='en-us' name='language'/>
<meta content='USA' name='country'/>
<link href='https://plus.google.com/ID/about' rel='author'/>
<link href='https://plus.google.com/ID/posts' rel='publisher'/></b:if>

<!-- / All In One Seo Pack Blogger SEO Plugin by javaid1818.blogspotcom. -->

Read More

Home  »  Blogger • Newbies Guide • SEO   »   All in One SEO Pack Of 2014

All in One Seo Pack Of 2014

As You all know that SEO is Search Engine Optimization and its must important thing for bloggers because without SEO blog will not followed by search engine crawlers and its mean no visitors and no visitors means no earning means no more blogging and then you leave the blogging because nothing you gained or you don’t get anything thats why I tought to give you the latest tech tricks about SEO thats why I named that post as Full Seo Pack Of 2014  So lets start the post from below and give you the all latest tricks :

All SEO On – Page Tech Tricks

So guys in this part of post going to give you the SEO pack for free. You just need to follow all the steps clearly.

In this part I will teach you these things :

• Add Meta Tags in Your Blogger
• Show Post Title First In Search Results
• SEO Optimize Blogger Comments
• SEO Optimize Blogger Labels
• SEO Optimize Blogger Archives
• Optimize Post Title Using H2 Tag
• Add an SEO Friendly Robots.txt File

Add Meta Tags In Your Blog

So guys this is my first guide on how you can add Meta Description and Keyword Tags. So lets start this guide from below :

Step1

• Login to your Blogger blog account
• Then Go to Dashboard
• After going to Dashboard Click on Template
• And in Template You’ll See Edit Html Button click on them

Step 2

• So after that Go to <head> section in Template.
• You can easily search  by using Ctrl+F button
• After Searching for <head> put following code in your <head> section.

<!– SEO Pack Full By Bornblogger.net  –>

 <meta content=’Your Blog Description‘ name=’description’/>

 <meta content=’Keyword1,Keyword2,Keyword3‘ name=’keywords’/>

 <meta content=’Author Name‘ name=’Author’/>

 <meta content=’Author Email Address‘ name=’Email’/>

 <meta content=’all’ name=’robots’/>

 <meta content=’index, follow’ name=’robots’/>

 <meta content=’Language Name‘ name=’language’/>

 <meta content=’Country Name‘ name=’country’/>

 <meta content=’blogger’ name=’generator’/>

<!– SEO Pack Full By Bornblogger.net  –>

• Replace all the bolded text with yours.
• That’s all
• Congratulations! : Now you successfully add this to your blogger blog.Now scroll down to the next SEO Guide. 

Show Post tittle First in Search Result

So guys another SEO trick is now alive and I know you wanted to add this in your blog. So lets follow the steps from below and make your blog more SEO Friendly.

Follow these all step from below to place post title before blog title.

Step1

• Login to your Blogger blog account
• Then Go to Dashboard
• After going to Dashboard Click on Template
• And in Template You’ll See Edit Html Button click on them

Step2

• Find the below Html code
• You can easily search  by using Ctrl+F button

<title><data:blog.pageTitle/></title>

• And replace the above code with below ones

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<title><data:blog.pageName/> – <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

• Now Save your template.
• Now wait for some time because give some time to google means Google will index it soon 
• Congratulations! : Now you successfully add this to your blogger blog.Now scroll down to the next SEO Guide.

How to SEO Optimize Your Blogger Comments

You think why we do that? I know thats why I’m going to tell you that why you do this? you do this because some readers try to add links in comments which is followed by search engine and it will be SPAM by search engine and I know you don’t want to remove relations with your readers, Don’t Worry! Why we are here? We are here because help you to solve this problem means you just need to add these coding in your blogger blog. So just follow the step clearly.

Step1

• Login to your Blogger blog account
• Then Go to Dashboard
• After going to Dashboard Click on Template
• And in Template You’ll See Edit Html Button click on them

Step2

• Find the below Html code
• You can easily search  by using Ctrl+F button

expr:href=’data:post.createLinkUrl’

• And replace the above code with below ones

rel=’external nofollow’ expr:href=’data:post.createLinkUrl’

• Save your template.
• Congratulations! : Now your big problem solve by just small coding  . Now scroll down to the next SEO Guide.

How to SEO Optimize Your Blogger Labels

I think that you all know about Labels, Yes? then We’re going to optimize it to make our blog more SEO Friendly. Follow below steps clearly.

Step1

• Login to your Blogger blog account
• Then Go to Dashboard
• After going to Dashboard Click on Template
• And in Template You’ll See Edit Html Button click on them

Step2

• Find the below Html code
• You can easily search  by using Ctrl+F button

<a expr:href=’data:label.url’

• And replace the above code with below ones

<a expr:href=’data:label.url’ rel=’tag’

• Save your template.

Note: If the rel=’tag’ is already exist then don’t do anything.

• Congratulations! : Now you successfully add this to your blogger blog. Now scroll down to the next SEO Guide.

How to SEO Optimize Your Blogger Archives

So in this part I’m going to teach you about How you can SEO Optimize your blog archives. You just need to follow my Guide to take your blog to the next level of SEO.

Step1

• Login to your Blogger blog account
• Then Go to Dashboard
• After going to Dashboard Click on Template
• And in Template You’ll See Edit Html Button click on them

Step2

• Find the below Html code
• You can easily search  by using Ctrl+F button

<a class=’post-count-link’ expr:href=’data:i.url’>

• And replace the above code with below ones

<a rel=”archives” class=’post-count-link’ expr:href=’data:i.url’>

• Save your template.
• Congratulations! : Now you successfully add this to your blogger blog. Now scroll down to the next SEO Guide.

How to SEO Optimize Your Post Tittle using H2 Tags

So Guys in this part I’m going to tell you about How you can Optimize your Post tittle using H2 tags. Just follow steps clearly.

Step1

• Login to your Blogger blog account
• Then Go to Dashboard
• After going to Dashboard Click on Template
• And in Template You’ll See Edit Html Button click on them

Step2

• Find the .post h3 by using Ctrl+F button
• and replace it with .post h2  (keep replacing that for all occurrences of .post h2)
• after replacing now search for,

<h3><data:title/></h3>

• And replace the above code with below ones

<h2><data:title/></h2>

• Save your template.
• Congratulations! : Now you successfully add this to your blogger blog. Now scroll down to the next SEO Guide.

How to Add an SEO Friendly Robots.txt file

So you think that what is this ? This is only a text file even simple text file which written by blog or website owner to instruct the search engine crawlers that which of the part of the site or blog will be access and which part of the blog which not be indexed by search engine crawlers.You can see your robots.txt file by just following below link :

http://www.yourdomain.com/robots.txt

So lets tell you how you can add it by our codings. This all proccess is easy you just need to follow our steps clearly.

Step1

• Login to your Blogger blog account
• Then Go to Settings
• After going to the Settings click on Search Preferences.

• Now box will appear tick mark on “Yes”  and then also a box will appear, See the screen shot below:

• Now just copy the below coding
• after copying paste it in that box

User-agent: Mediapartners-Google
Disallow:

User-agent: *
Disallow: /search
Allow: /

Sitemap: http://www.yourdomain.com/feeds/posts/default?orderby=UPDATED

• Replace Bolded text with yours
• Click on Save Changes.

From The Editors Desk!

So Guys you have successfully optimized your Blogger Template by these tricks. So If you are our loyal reader then you probably know that I tell you about I’m creating a template as new year gift, Guys its ready successfully and going to publish it soon at my blog means Born Blogger and I already done that all seo tricks on that template and Stay tuned with us and like our facebook Page to tell for know that we have published the template or not. Take Care of yours, your parents and all relatives. Peace!

Read More