My Blogger Tricks

Understanding The Nuts And Bolts Of JQuery Mobile

Posted by Ishtiaq Ahmad at 9:54:00 PM Labels: IPhone , JQuery , SmartPhone 0 comments

Web development using JavaScript frameworks has always proved befitting for developers who need to create rich, interactive and outstanding websites and web applications. One such JavaScript framework that has received appreciations from global web developers is jQuery Mobile. As a brand new framework specially designed for building mobile web apps, jQuery Mobile has been built on top of jQuery and is well equipped with a suite of excellent user interface elements that can be efficiently used in the mobile apps. If you're new to jQuery Mobile, then keep on reading this blog as I'll be making you familiar with all interesting aspects related to this awesome JavaScript framework.

A closer look at jQuery Mobile

Serving as an easiest means for building websites and applications, jQuery Mobile is a JavaScript framework that comes loaded with several touch-friendly UI widgets and a simple AJAX powered navigation system that supports animated page transitions. A huge number of developers contribute open source plug-ins for jQuery, and you can find a suitable plug-in for almost any application you might have. The wide range of plug-ins and the simple syntax make jQuery such a great library.

What all does jQuery Mobile do?

Quite unlike a variety of JavaScript frameworks available in the market, jQuery Mobile does a lot more for easing the process of developing user interfaces for mobile web apps. Here's a look at some of the best things that are done by jQuery:

It renders several new custom events that allow you to detect mobile and touch specific activities including tapping, swiping, tapping and holding, rotating the device and many more.
With a built-in markup-driven interface configuration, jQuery Mobile makes it convenient for you to create a basic app interface with the help of HTML. Plus, there's no need for you to write even a single piece of JavaScript code.
It utilizes progressive enhancement for ascertaining that the app interface works brilliantly on any web-enabled device.
It utilizes a series of themes that make it simple for you to customize the overall look of your application.

Unveiling the jQuery Mobile Page Structure

Well, a majority of pages in your jQuery Mobile web apps will include the following basic template:

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />

<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>

<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>

</head>

<body>

<div data-role="page">

<div data-role="header">

    <h1>Page Title</h1>

</div>

<div data-role="content">

    <p>Page content goes here.</p>

</div>

<div data-role="footer">

    <h4>Page Footer</h4>

</div>

</div>

</body>

</html>

The three things that you need to include in your page for using jQuery Mobile are:

jQuery Mobile CSS file(jquery.mobile-1.0a1.min.css)
jQuery library(jquery-1.4.3.min.js)
jQuery Mobile library(jquery.mobile-1.0a1.min.js)

One of the best things about the jQuery Mobile Page structure is that you can easily create multiple pages within a single HTML page, resulting into a smoother user experience.

Ajax navigation adds to the excellence of jQuery Mobile

Ajax works as the right tool for making mobile user experience as smooth as possible. In-line with this fact, jQuery Mobile uses Ajax for allowing the linked pages to get loaded by default. In simple words, instead of the browser following a specific link for opening a new page, jQuery Mobile simply intercepts the link, requests the focused page via Ajax, followed by incorporating the new page content into the focused page's DOM. And that's not all, Ajax also allows jQuery Mobile developers to use URL hashes for ensuring that each page receives its individual and 100% unique bookmark able URL.

jQuery Mobile reflects a greater potential for mobile web app development

It is quite interesting to note that within 36 hours of the release of jQuery Mobile's beta version, an app was being built using the technology. John Resign, the creator of jQuery has displayed his confidence in jQuery Mobile and is keenly looking forward to making the JavaScript framework available for more and more mobile web app developers across the world. If you're an avid supporter of open web, then jQuery Mobile will serve as your best-fit launch. Backed by a rock-solid foundation for creation of impressive mobile apps, jQuery Mobile has opened doors to innovation in mobile web app design and development. With such a remarkable tool at their disposal, developers can deliver apps that look great and operate exceptionally.

Wrapping Up

The flexibility and easily theme able design of jQuery Mobile has made the framework stand out from the crowd of mobile web app development frameworks. So, get going and opt for utilizing the features of jQuery Mobile for delivering high-quality apps that run on varied platforms.

About Emily Heming

Emily Heming is an iPhone app developer and blogger and Currently working at Xicom Technologies. A Mobile apps development services provider which offers the reliable iPhone development services.

Read Article →

VB.NET: Basic HTML Editor For Blogger Beginner

Posted by Ishtiaq Ahmad at 10:49:00 PM Labels: Blogger Tools , VB.Net 0 comments

For the first time ever, our users can use a HTML Editor for checking demos or making blogger widgets offline. Using our HTML Editor, you can create Navigations, Widgets, Blogger Plugins and also can make a simple web pages. The HTML editor supplies a rich text box for you to enter your raw HTML and a preview button. Its probably not for use by serious developers as actual HTML editor, but both can be starting points for development of such an widget.

Open or Edit HTML Files using this program and save them as HTML.
Split-Screen Preview lets you view your webpage in a browser right from inside the Code Editor.
Support for Windows XP SP3 to Windows 8.1.
Support for all versions of IE.

We will also trying to add more features in next few days.

What is an HTML Editor

An HTML editor is a specialized piece of software that assists in the creation of HTML code. Similar to text editors such as Notepad and TextEdit, HTML editors allow users to enter raw text.

Most (if not all) professional web developers use an HTML editor to create and maintain their websites. This is because a good HTML editor can boost productivity enormously.

(Screenshot)

Download Now

Note:- The rich text box only support stylesheet named with sytle.css or you can write a code under the body using “<style> tag. We hope it will fix as soon as possible.

I am sure for newbie bloggers who are looking for an easy and correct way to optimize their blogs widgets, this tool provides an easy option to edit widgets and web pages. Take good care of your loved ones and don't forget to share this exciting free tool with your friends! :)

Read Article →

JQUERY: Automatic Timed & Self-Closing Facebook Popup Like Box For Blogger

Posted by Ishtiaq Ahmad at 8:37:00 PM Labels: Blogger Plugins , Facebook Tricks , JavaScript , JQuery , Social Plugins 0 comments

How can you tell that a blog or a website is successful? Obviously, some would say that it depends on the traffic, but actually, traffic alone is not everything. Often the goal for a website is to generate sales, increase subscription rates, and develop loyal readership. Internet marketers are more familiar to this principle than any others are working online, and part of their success formula is the use of forceful and effective call to action, which is oftentimes contained in a pop-up box or lightbox. Creating your own pop-ups for your website is not an easy task. You need to have knowledge of programming to be able to generate the codes that define your intended pop-up. Fortunately, for WordPress websites, there are many useful pop-up plugins available. Pop-ups actually are versatile, and can be used for many conversion related purposes.

So today i have write a tutorial on how to add popup like box with timer on blogger blog. You can set it for how long the widget/Plugin must display before disappearing automatically. It also includes a close option, we just trying to add some more features into code and update it as soon as possible. its a beta version please post your review below in the comment section. if you see any bug let us know we will try to fix that as soon as possible.

Live Preview

The plugin depends on jQuery, so be sure to include the library. Any recent jQuery version will do. We include plug-in file very similar to jQuery library file in the <head> of the document.

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

2. and add the following jquery link before closing </head> or after opening <head> tag.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

Okay, we've completed adding JQuery now but we'll add a couple of styles to our Facebook Popup box.

3. again find the following code in your template.

]]></b:skin>

4. and paste the below code before/above closing b:skin tag.

/*css for fbpopup*/

#fbpopupdata {
    background-color: none;
    position:absolute;
    z-index: 9999;
    display: none;
    padding: 0;
    border: 10px solid #446c95;
    -webkit-background-clip: padding-box;
/* for Safari */
    background-clip: padding-box;
/* for IE9+, Firefox 4+, Opera, Chrome */
    -webkit-border-radius: 8px 8px 8px 8px;
    -moz-border-radius: 8px 8px 8px 8px;
    border-radius: 8px 8px 8px 8px;
    width: 420px;
    height: 300;
    overflow: auto;
    left:50% !important;
    margin-left:-220px;
    margin-top:auto;
    box-shadow: inset 0 1px rgba(0,0,0,0.1);
}

#fbpopupdata span {
    font-size: 12px !important;
    font-weight: normal !important;
}

#fbpopupdata h1 {
    background: #446c95 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd6kExHL_oBVyV40K9Xi8gHQXuT5dwtNc7tEymqIcMTwea9EsFmJC704Cp8-o03RMTRn2Dv7_8qktVzxLQtvjGIZ3dMFly2GlbV0QHJnU0e6vJ9olt4UhkMG3zCtARvlAaDL9qU-WqDMc/s1600/aktechz-fb-lock.png) 98% 30% no-repeat;
    border: 0px solid #3b5998 !important;
    color: #FFF !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    padding: 5px !important;
    margin: 0 0 10px 0 !important;
    font-family: arial !important;
    overflow: hidden !important;
}

.fbpopupdatadata {
    font-size: 12px !important;
    font-weight: normal !important;
    height: 275px !important;
    padding: 1px !important;
    background: #fff !important;
    border-bottom: 0px solid #ddd;
    overflow: show !important;
}

#fbpopupdatafooter {
    text-align: right;
    font-size:12px;
    background: #F2F2F2 !important;
    height: auto !important;
    padding: 10px !important;
    overflow: hidden !important;
}

#fbpopupdatafooter p {
    text-align: right;
    font-size:12px;
}

#fbpopupdataclose {
    float: right;
    background-color: #446c95 !important;
    border: 0px solid #ccc !important;
    color: #fff !important;
    font-weight: normal !important;
    padding: 5px 35px !important;
    text-decoration: none !important;
    display: inline-block !important;
    font-family: arial !important;
    outline: none !important;
    font-size: 12px !important;
    margin: 0px !important;
    box-shadow: inset 0 1px rgba(0,0,0,0.1);
    -webkit-transition: background 0.3s;
    -moz-transition: background 0.3s;
    transition: background 0.3s;
}

5. and last and final step, just paste the below before closing your </body> tag.

<script type='text/javascript'>
jQuery(document).ready(function() {
function fbpopupdatafunc() {
var sec = 60
var timer = setInterval(function() {
$("#fbpopupdatafooter span").text(sec--);
if (sec == 0) {
$("#fbpopupdata").fadeOut("slow");
clearInterval(timer);
}
},1000);
var fbpopupdatawindow = jQuery(window).height();
var fbpopupdatadiv = jQuery("#fbpopupdata").height();
var fbpopupdatatop = jQuery(window).scrollTop()+50;
jQuery("#fbpopupdata").css({"top":fbpopupdatatop});}
jQuery(window).fadeIn(fbpopupdatafunc).resize(fbpopupdatafunc)
//alert(jQuery.cookie('sreqshown'));
//var fbpopupdataww = jQuery(window).width();
//var fbpopupdatawww = jQuery("#fbpopupdata").width();
//var fbpopupdataleft = (fbpopupdataww-fbpopupdatawww)/2;
var fbpopupdataleft = 500;
//var fbpopupdatawindow = jQuery(window).height();
//var fbpopupdatadiv = jQuery("#fbpopupdata").height();
//var fbpopupdatatop = (jQuery(window).scrollTop()+fbpopupdatawindow-fbpopupdatadiv) / 2;
jQuery("#fbpopupdata").animate({opacity: "1", left: "0" , left: fbpopupdataleft}, 0).show();
jQuery("#fbpopupdataclose").click(function() {
jQuery("#fbpopupdata").animate({opacity: "0", left: "-5000000"}, 1000).show();});});

</script>
<div id="fbpopupdata">
<h1>Join Us On Facebook <a style="font-size:12px; color: white; float:right; margin-right: 15px; text-align: inherit; text-decoration: none;" href="www.myblogger-tricks.com" rel="nofollow"
>Get Widget</a></h1>
<div class="fbpopupdatadata"><center><iframe src="http://facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2F/mybloggerstricks&width=400&colorscheme=light&show_faces=true&border_color=%23fff&stream=false&header=false&height=250" scrolling="no" frameborder="0" style="border:none; overflow:show; width:400px; height:250px;" allowtransparency="true"></iframe></center></div><div id="fbpopupdatafooter">Please Wait <span>60</span> Seconds<br/><a href="wwww.myblogger-tricks.com" target="_blank" id="fbpopupdataclose" onclick="return false;">Close X</a></div></div>
<!-- Facebook POPUP LikeBox With Timer Code End –>

Note:- Please change highlighted mybloggerstricks in yellow with your own facebook username..

Okay we've done it! Hope you enjoyed the tutorial and was helpful. The above code can be modified and enhanced as per your requirements.

If the content on this website somehow helped you to learn something new, please let others know about it by sharing it on your twitter page or on your Facebook page with your friends.

Read Article →

JQUERY: Simple Accordion Drop Down Menu With Jquery & CSS

Posted by Ishtiaq Ahmad at 9:33:00 PM Labels: Blogger Plugins , JavaScript , JQuery , Web Design 0 comments

A lot of Blogger users are having problem getting the correct accordion menu to show up your blog recipes. In this tutorial I am going to show you how to add a jQuery accordion menu in blogger blog. Most of the time it is possible to create very functional website navigations with just CSS, but this time we are going to need a little jQuery magic to accomplish the accordion functionality. Before that, lets first talk a bit about why you would want to add accordion menu? Well some people think that it will help with the SEO. But we think that the main reason why you would want to use them is to offer a better user experience on your site.

This tutorial requires you to have fair understanding of HTML, CSS.

Features: V 1.0

Standard Expand/Collapse functionality.
Activate/Deactivate whenever a 'click' event occurs.
The Accordion plugin provides support for unlimited number of levels.
The plugin could easily be customized and used with any website.
It allows multiple instances of the accordion on the same page.

and in future we will try to add some design update, functionality and much more..

Live Preview

How to add it to blogger blog

Blogger: Go to Template > Edit HTML.
Locate the ]]></b:skin> tag end of the style sheet.
Copy the code below and insert it right above the tag.

#accor-wrap{
    width: 350px;
    font-family:Verdana, Geneva, sans-serif;
    margin-left: auto;
    margin-right: auto;
    }
.accordionButton {
    width: 325px;
    float: left;
    background: #fff url(https://dl.dropboxusercontent.com/u/223738947/Demos/Jquery%20Accordion%20Menu%20For%20Blogger/Images/bg-shade-light.png) repeat-x bottom left;
    font-size: 14px;
    font-weight: bold;
    color: #555;
    border-bottom: solid 1px #ddd;
    padding: 3px 0px;
    cursor: pointer;
    padding: 5px 10px;
    text-shadow: #fff 0px 1px 0px;
    }

.accordionButton span {
    float:right;
    margin-right: 10px;
    color:#555;
    border: 1px dotted #555;
    display:inline-block;
    }
.accordionContent {
    width: 325px;
    float: left;
    background: #444;
    font-size:12px;
    display: none;
    padding: 5px 10px;
    margin: 0 auto;
    }
.accordionContent ul {
    float: left;
    width:300px;
    margin:0 auto;
    padding:10px 10px;
}
.accordionContent li {
    list-style: none;
    list-style-image: none;
}
.accordionContent li a {
    background: #555 url(https://dl.dropboxusercontent.com/u/223738947/Demos/Jquery%20Accordion%20Menu%20For%20Blogger/Images/bg-shade-light.png) repeat-x 0 100%;
    display:block;
    font-family:Arial, sans-serif,Helvetica;
    font-size:12px;
    font-weight: bold;
    overflow:hidden;
    color:#555;
    border: none;
    text-decoration:none;
    position:relative;
    width:100%;
    line-height:20px;
    text-transform:capitalize;
    padding:5px 0 10px 5px;
    text-shadow:0px 1px px #fff;
        }
.accordionContent li a:hover{
    background: #b3b3b3 url(https://dl.dropboxusercontent.com/u/223738947/Demos/Jquery%20Accordion%20Menu%20For%20Blogger/Images/bg-shade-medium.png) repeat-x 0 100%;
    text-shadow:none;
    color: #fff;
    text-decoration:none;

}

Locate the </head> tag in the middle of your template.
Copy the code below and insert it right above the tag.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/223738947/Demos/Jquery%20Accordion%20Menu%20For%20Blogger/JavaScript/Accordion.js"</script>

Go to Layout.
Click Add A Gadget.
In Add A Gadget window, select HTML/Javascript .
Copy the code below and paste it inside the content box.
Save the gadget.
Drag the gadget and reposition it where you want to show gadget.
Click Save button (top right hand corner).

<div id="accor-wrap">


<div class="accordionButton">Top Blogger widget 2014 <span>▼</span></div>
        <div class="accordionContent">
        <ul>
        <li><a href="#" >1. Floating Sharing Bar</a></li>
                    <li> <a href="#">2. Facebook Poput Like Box</a></li>
                    </ul>
        </div>




<div class="accordionButton">Top SEO Articles <span>▼</span></div>
        <div class="accordionContent">
        <ul>
        <li><a href="#"> 1. Search Engines That Respect Privacy </a></li>
                    <li> <a href="#"> 2. The SEO Tools That Help Boost Your Sites Traffic </a></li>
                    </ul>
      </div>





        <div class="accordionButton">Top Best Blogger Template <span> ▼ </span> </div>
        <div class="accordionContent">
             <ul>
        <li><a href="#" >1. Blogger Beginner</a></li>
                    <li> <a href="#">2. Premium Blogger Template</a></li>
                    <li> <a href="#">3. Sky Blue Blogger Template</a></li>
                    </ul>
        </div>
     



<div class="accordionButton">Top Blogger Resources & Tools <span>▼</span></div>
        <div class="accordionContent">
             <ul>
        <li><a href="#" >1. HTML Econder</a></li>
                    <li> <a href="#">2. HTML Editor</a></li>
                    </ul>
        </div>


    </div>

Troubleshooting for setting up for your blog

In the above html code we have created 4 accordion menu.

Replace Highlighted in yellow with the name of the dorp down title.
Replace Highlighted in Green with your Link anchor text.
Replace hash (#) sign with your article (page) link.

So now we sure you want to add another dropdown, So then just add the following code after

<!--end dropdown 4 –->

<div class="accordionButton">here is the title For your new dropdown <span>▼</span></div>
        <div class="accordionContent">
             <ul>
        <li><a href="#" >here is your anchor text </a></li>
                    <li> <a href="#">here is your anchor text </a></li>
                    </ul>
        </div>

We hope that you will find this article useful and it will help you create cool looking accordion menu. Have Any Questions? Leave them in comments below and don’t forget to share.

Read Article →

JQuery Plugin: Social Subscription Sliding Bar

Posted by Ishtiaq Ahmad at 2:55:00 PM Labels: Blogger Plugins , JQuery , Social Plugins 0 comments

Adding social widget can be important part of increasing your blog or website traffic, Social widget enable visitors to subscribe quickly on your official pages on social media networks. This tutorial have one really Amazing Sliding plugins, Sliding plugin bar sticky at the right side of your page that will slide out social share buttons when mouse hovers over. The Sliding Plugin is originally Created by Márta Dániel, we have just customized version of it. The plugin officially created as an social sharing bar but we are using as a social subscription widget, we are very thankful to developer for making it under MIT license and allow us to share this on our blog.

Follow the Steps below for achieving sliding bar cool effect.

Live Demo

How to implement this jQuery accordion style menu:

Include jQuery, Ui and sliding Pluing script:

Google hosts the library so you can link to it there. This can be done by putting the following code in the head of your document:

Here are the steps:

Go to your blogger template
Before editing back up your template.
The look for the following data tag in your HTML.

</head>

and Paste the following code immediately before (above) it:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<script src="https://dl.dropboxusercontent.com/u/223738947/Demos/SlidingShare/JavaScript/slidingplugin.js"</script>

<link href="https://dl.dropboxusercontent.com/u/223738947/Demos/SlidingShare/style.css" rel="stylesheet" type="text/css" />

Note:- Please change the social links with your own social links by editing slidingplugin.js before processed next step…download slidingpluing.js in your hard drive and after making changes upload it on any free hosting server like Dropbox or Yourjavascript. For more detail please watch video tutorial below. ( how to edit your social links ).

Now last and final step calling social share bar div in you body section. just paste the below before closing your body tag.

<div id="socialside">
</div>

That's it. we have successfully done! If you are facing any trouble regarding this tutorial please feel free drop a comment below and also don’t forget to share this and share your valuable review with us.

after editing your links go to file click on save as and save your with .js extension for example slidingplugin.js and upload on any free hosting website.

Read Article →

Social Plugins: Stay Tuned Social Subscription Widget V 2.0

Posted by Ishtiaq Ahmad at 8:37:00 PM Labels: Blogger Plugins , CSS , Social Plugins 0 comments

There are literally hundreds of social media sharing plugins that can display social share button for WordPress, blogger and many more are added each day. Today we have a great social subscription plugins with simple design, which we have created early, its a second version of our previous social subscription plugins with tooltip. In the updated version we have removed some CSS reset bugs and also make some addition in the plugin layout.

The plugin allow visitors to join social networks, such as Facebook, Twitter, Pinterest, Google Plus, Rss Feed, Linkedin, Tumbler and the lastly on YouTube.

Why Social Plugin Important: A Writer Chuck Price share an article on Search engine watch before 3 months ago and said social profiles are very important for boosting your search engine ranking. Read the statement below or you can read full article about ranking, traffic and backlinks.

“Think about where your target audience spends their time. Is it Facebook, Twitter, pinterest? You need to be there as well. Like blog and forum communities, getting to know people via social media opens up link opportunities.”

So now leave the discussion and go ahead to add social plugin to your blogger blog.

before adding see live demo by clicking the live preview button below.

Update: Bug Fixes for alignment and added Responsive Mobile friendly width property. For the example of update you check the great tutorial written by martin wolf.

Live Preview

How to add it blogger

1. Go to Template > Edit HTML.

2. Back up your template.

3. Look for the following data tag in your Template:

]]></b:skin>

4. Paste the following code immediately above (before) it:

#social_profiles-wrap {
    background: rgba(255,255,255,0.3);
    width: 94%;
    height: auto;
    float: left;
    margin: 10px 0 10px 0;
    padding: 20px;
    text-align: center;
    border-radius: 4px;
    font-family: 'Open Sans Condensed', Verdana;
    border: 1px solid #f2f2f2;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
    -moz-box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
    box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
    text-decoration: none;
}

#social_profiles-wrap p {
    color: #446cb3;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    text-decoration: none !important;
}

.social_profiles {
    display: inline-block;
    padding: 5px 0;
}

ul.social_profiles {
    background: none;
    float: none;
    margin: 0 37px;
    text-decoration: none;
}

/* fix for ul li default arrow symbol*/
ul.social_profiles li {
    background: none !important;
    padding: 0!important;
}

.social_profiles li {
    display: inline;
    margin-top: 40px;
    list-style-type: none;
}

.social_profiles li a {
    display: inline-block;
    list-style-type: none;
    width: 40px;
    height: 40px;
    outline: none;
    margin-right: 7px;
    position: relative;
    vertical-align: middle;
    z-index: 3;
    text-decoration: none;
}

.social_profiles li a > :last-child {
    margin-right: 0 !important;
}

.social_profiles li .facebook {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat;
}

.social_profiles li .twitter {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -45px;
}

.social_profiles li .gplus {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -90px;
}

.social_profiles li .pinterest {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -135px;
}

.social_profiles li .rss {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -180px;
}

.social_profiles li .linkedin {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -225px;
}

.social_profiles li .tumblr {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -270px;
}

.social_profiles li .youtube {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -315px;
}

.social_profiles li .mail {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -360px;
}

.social_profiles li a span {
    width: 60px;
    height: auto;
    padding: 2px;
    left: 50%;
    margin-left: -38px;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #fff;
    text-align: center;
    border: 5px solid #446cb3;
    background: #446cb3;
    text-indent: 0px;
    position: absolute;
    pointer-events: none;
    border-radius: 5%;
    opacity: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.social_profiles li a span:before,
.social_profiles li a span:after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

.social_profiles li a span:after {
    bottom: -15px;
    margin-top: 6px;
    margin-left: -10px;
    border-top: 10px solid #446cb3;
}

.social_profiles li a:hover span {
    opacity: 0.9;
    bottom: 50px;
}

Now lets go and do one more step…

5. Now again look for the following code in your Template:

<b:includable id='postQuickEdit' var='post'>

Normally there are three instances of the tag present in your template ( post-footer, post-footer-line-1, post-footer-line-2 like this.

you just need to locate post-footer (from top) one.

6. Paste the following code immediately below (after) opening post-footer div:

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

<div id='social_profiles-wrap'>
<p>Don't Miss Any Update, Join Us on Social Networks.</p>
<ul class='social_profiles'>
<li><a class='facebook' href='http://www.facebook.com/mybloggerstricks' target='_blank'><span>Facebook</span></a></li>
<li><a class='twitter' href='http://twitter.com/mybloggertriks' target='_blank'><span>Twitter</span></a></li>
<li><a class='gplus' href='https://plus.google.com/b/103598710564060829080' target='_blank'><span>Googl+</span></a></li>
<li><a class='pinterest' href='http://www.pinterest.com/mybloggertrickx' target='_blank'><span>Pinterest</span></a></li>
<li><a class='rss' href='http://feeds.feedburner.com/mybloggerstrick' target='_blank'><span>RSS</span></a></li>
<li><a class='linkedin' href='http://www.linkedin.com/in/mybloggertricks' target='_blank'><span>LinkedIn</span></a></li>
<li><a class='tumblr' href='http://www.thumblr.com/mybloggertricks' target='_blank'><span>Tumblr</span></a></li>
<li><a class='youtube' href='http://www.youtube.com/mybloggertricks' target='_blank'><span>Youtube</span></a></li>
</ul></div></b:if>

Note:- Change the links highlighted in yellow color with your social profiles links.

I hope you enjoyed this little effect and find it useful!.. As we state in our previous tutorial, it will only work in modern browsers that support pseudo-elements and CSS transitions. if you have question or need to change something like width, font family, color or facing issue with alignment, please let us know we try to help you on every way. lastly want to say happy blogging..!! :)

Read Article →

Best Ever Screen Capture Tools For Desktop & Scrolling Webpages

Posted by Ishtiaq Ahmad at 1:03:00 PM Labels: Apps , Tips and Tricks , Windows Tips 0 comments

There are many of reasons you might want to take a screenshot of your desktop or an scrollable webpage. One of the most common reason is to send the image to tech support company to show a problem you're experiencing. Here's how to take a screenshot on application or scrolling webpage. Last night i am working on a webpage and i need to take a screen shot for whole webpage to showing a offline webpage to my client, after searching i have found to interesting tools for taking a whole web page screen shot.

Before I start to make websites screenshot, pressing "PrtScn" key is my first choice to take snapshots since it's easy to use and requires no additional tools. However, it fails to work when I want to have a copy of the whole web page even the part that extends beyond the screen. Lucky me, I finally find this free Webpage Screenshot Tool and get the image of the web page successfully.

Free screen capture for online and offline

ScreenShot.net is an free online tools which is offer users take screenshots like a breeze.

An application which has integrated essential screenshot functions, extreme image editor and free cloud service for Windows and Mac users. You can create amazing screenshots with your own annotations and make one-click upload to share them efficiently. Visual communication with images has never been so easy!

Screenshot.net also offer offline application this gorgeous screen cast tool lets you easily capture and edit anything on the screen including windows, objects, menus, media files, web pages, webcam and more. A Power Screen Capture software allows you variety of modes including full screen, customized region, application window, delayed capture and scrolling window. Built-in photo editor, ability to upload photos to social media, and its $0 price tag. Also, it supports devices range from Windows PC to Surface Pro, Mac and more.

Capture any on your screen with snagit

Snagit helps users transform the level and quality of their communication with video and images. Users can capture any image and enhance it with effects or create a quick video of their computer screen. No matter what you're working on, Snagit helps you capture great looking images and videos with just a few clicks. Easily customize your screen captures with effects, or show off what's important with Snagit’s markup tools. You can also create quick videos by recording your screen.

Snagit Screen Capture software also allows you variety of modes, you are able to take screenshots for full screen, particular region, specific program window, scrolling windows, web pages and so on. Built-in photo editor, ability to upload photos to social media, and its $0 price tag. Also, it supports devices range from Windows PC to Mac and more.

Use Google Drive to store images or videos so they are accessible on any device at anytime. To import images or videos from Google Drive into Snagit Editor, see Import Content from Google Drive.

How To Import Content from Google Drive

Use Google Drive to store images or videos so they are accessible on any device at anytime.
1. In Snagit Editor, select File > Import from Google Drive.

2. If you have not previously logged into your Google account, the Connect with Google Drive dialog appears. Enter your email and password and click Sign in.

3. Click Accept in the Connect with Google Drive dialog.

4. The Import from Google Drive dialog appears. Click to select the image or video to import into Snagit. Shift+click to import multiple images or videos.

5. Click the Import button.

Snagit adds the images or videos into the tray in Snagit Editor.

Snagit is available under $49 Price affordable for every professional user.

Download Snagit For Windows Pcs and For Mac.

I hope this tutorial helped. If you have any questions, please feel free to share them with us. Take care :) !! How do you screenshot webpage? Any other easy ways to share with me?

Read Article →

Add CSS3 & HTML5 Email Subscription Widget To Blogger Blog

Posted by Ishtiaq Ahmad at 11:11:00 PM Labels: Blogger Plugins , Bogger Widgets , CSS , Gadgets 0 comments

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

What our subscription widget is going to look like. See image below.

Live Preview

Little brief about HTML5

We will use HTML5's new required tag. Right now, different browsers will do different things when a form using HTML5 elements is submitted. When the form is submitted, most browsers will prevent the form from being submitted and will display a "hint" to the user, marking the first field that is required and has no value.

HTML5 validation works according to the type attribute that is set within the form fields. For years HTML only supported a handful of type attributes, such as type="text" but with HTML5 there are a over a dozen new input types including email and url which we are going to use in our form.

add it to blogger blog

1. Go to Template > Edit HTML.

2. Back up your template.

3. Look for the following data tag in your Template.

]]></b:skin>

4. Paste the following code immediately above (before) it:

#subs_wrapper {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7xTs2_VzRZmYCxMaRMNOllPN_wNBipCrYVC-fb1GNi6BHqEmtzTLTSKYSXurhfgLE8dhOsXvC5DC2npu4QtT5VyaYfBqspPhyVvOQfWDccNWvaGjhVC-1LxPWZWEM2qCS8mW-h9AOVzQt/s1600/Subcription_bg.png) no-repeat;
    width: 300px;
    height: 250px;
    padding: 10px 10px;
    margin: 5px;
}

#subs_wrapper p {
    font-family: Tahoma, Geneva, sans-serif;
    margin-top: 60px;
    color: yellow;
    text-align: center;
    margin-right: 20px;
}

.subs_form input {
    height: 27px;
    font-size: 15px
    font-family:'Open Sans', sans-serif;
    font-size: 14px;
    border: 1px solid #26beaf;
    width: 238px;
    margin: inherit;
    padding: 6px;
    float:;
}

.subs_form input {
    margin: 2px;
}

.subs_form input {
    border: 1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius: 3px;
    padding-right: 30px;
    -moz-transition: padding .25s;
    -webkit-transition: padding .25s;
    -o-transition: padding .25s;
    transition: padding .25s;
}

.subs_form input:focus {
    background: #fff;
    border: 1px solid #fff;
    box-shadow: 0 0 3px #aaa;
}

*:focus {
    outline: none;
}

:-moz-placeholder {
    color: blue;
}

.emailinput {
    color: #666;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: italic;
}

::-webkit-input-placeholder {
    color: blue;
}

::-webkit-validation-bubble-message {
    padding: 1em;
    margin-left: -40px;
}

button.submit {
    background-color: #68b12f;
    background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
    background: -webkit-linear-gradient(top, #68b12f, #50911e);
    background: -moz-linear-gradient(top, #68b12f, #50911e);
    background: -ms-linear-gradient(top, #68b12f, #50911e);
    background: -o-linear-gradient(top, #68b12f, #50911e);
    background: linear-gradient(top, #68b12f, #50911e);
    border: 1px solid #509111;
    border-bottom: 1px solid #5b992b;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    box-shadow: inset 0 1px 0 0 #9fd574;
    -webkit-box-shadow: 0 1px 0 0 #9fd574 inset;
    -moz-box-shadow: 0 1px 0 0 #9fd574 inset;
    -ms-box-shadow: 0 1px 0 0 #9fd574 inset;
    -o-box-shadow: 0 1px 0 0 #9fd574 inset;
    color: white;
    font-weight: bold;
    padding: 10px 96px;
    text-align: center;
    text-shadow: 0 -1px 0 #396715;
    list-style-type: none;
}

button.submit:hover {
    opacity: .85;
    cursor: pointer;
}

button.submit:active {
    border: 1px solid #20911e;
}

Now lets go and do one more step…

5. Now again look for the following data tag in your Template.

<div class='post-footer'>

Normally there are three instances of the tag present in your template ( post-footer, post-footer-line-1, post-footer-line-2 like this. Locate the post-footer (from top) one.

6. Paste the following code immediately below (after) it:

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

<div id="subs_wrapper" style='float:left;'>
<p> Get Latest Updates To Your Inbox..!</p>
<form class="subs_form" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=mybloggerstrick', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" action="http://feedburner.google.com/fb/a/mailverify">

<input type="hidden" value="My Blogger Tricks" name="uri">
<input type="hidden" value="en_US" name="loc">
<input class="emailinput" type="email" value="Enter Your Email..." onfocus="if (this.value == "Enter Your Email...") {this.value = ""}" onblur="if (this.value == "") {this.value = "Enter Your Email...";}" name="email" required />
<button class="submit" type="submit">Submit Form
</button><br/>

<p style="color: #999; text-align:center; font-size: 10px; padding: 10px; margin: 20px 20px; text-decoration:none;">We Always Respect Your Privacy.</p>
</form>
</div>

</b:if>
</b:if>

Widget alignment

Change the value of float property:
Align right: set it to right;
Align left: set it to left;

Note:- Must change mybloggertricks highlighted in yellow with your feedburner username..

Now click on save button and View your blog. The widget should appear on post pages.

I hope this tutorial helped. If you have any questions, please feel free to share them with us. Take care :)

Read Article →

(Info-Graphic) - Online Shopping Is Becoming Popular Day By Day

Posted by Ishtiaq Ahmad at 4:59:00 PM 0 comments

This is a Guest Post by Peter Sauer
Online Shopping is a technique of buying or even advertising and marketing by means of electronic medium. This is a kind of E-commerce website that allows consumers to get offerings specifically from the retailer over the internet using web browsers.

Glimpse of Online Shopping:

An English entrepreneur Michael Aldrich invented the concept of Online Shopping in 1979. He associated a modified domestic Television set to a real-time transaction processing computer by means of a domestic telephone line.

This methodology empowers closed corporate information systems to be opened to ‘outside’ correspondents not just for transaction processing but also for e-messaging and information retrieval and dissemination, known as e-business.

In 1990, Tim Berners- Lee created the first World Wide Web server and browser and in 1991, opened for commercial use. Due to resulting technological innovations came forth in 1994, online banking, launching Pizza Hut, Netscape’s SSL v2 encryption standard for secure information exchange, and Intershop’s first online shopping system were unveiled. Immediately after, in 1995, Amazon.com and eBay were initiated.

Statistics show that online shopping trend is growing exponentially.

In 2012, Asia-Pacific increased their International sales over 30% giving them over $433 billion in revenue and created a difference of $69billion from the U.S. revenue of $364.66 billion.
It is estimated that in year 2014, Asia-Pacific will build its revenue by another 30%.
Industry experts state that in US, online retail sales will increase as much as 57% till 2018.

Increasing online retailers has transformed the shopping style of a human being.

Why Online shopping is becoming popular now?

1. Convenience
2. Infinite choices
3. Cheaper
4. Privacy in purchasing
5. Customer review
6. Experts review
7. Shipping facility
8. Return policy
9. Various Online Payment methods
10. Cash On delivery facility
11. Customer service

Big Players of Online Marketing: Amazon.com, eBay, etsy.com, GroupOn, Alibaba.com, reebok.com, Pizza Hut, nike.com, WalMart, BestBuy.

We have seen lots of benefits of Online shopping over traditional shopping. So Keep Enjoying Online shopping and Save your Money and Effort. For learning more, scroll down to infographic. Click on the image for large veiw.

Peter Sauer is a Founder of Online Product Mall live in Miami, Florida, USA. The Online Product Mall is a online business that He started a few months back and would like to make it big, You can also find him on Facebook

Read Article →

How To Send Report To Google About Scrapped Content

Posted by Ishtiaq Ahmad at 8:40:00 PM Labels: S.E.O , Webmaster Tools 0 comments

Bloggers probably know more about scrapped content than anyone else, It is really annoying to write an article about one unique topic, and after few dsys see many people copy your article without your permission and paste them on their own website or blogs. In our case people usually do it in order to increase traffic to their own websites. But does that work? In this post, we will took a look at how you can stop people from copying your content.

when we talk about content copying issue Google is on the top list for helping people free of cost. Before 4 month ago Google annouce a scrap report tool. The new scrapper tool allows you to alert Google about scrapped content by filling out three fields. All you have to do is provide the URL of the page where the content was taken from, the URL where the scraped content appears, the the search result URL that demonstrates the problem. You also have to check a box confirming your site is following Google’s Webmaster Guidelines and is not affected by manual actions. Below we will explain you, how you can send spam report using scrapper tool. These reports are directly to Google spam team and these links also used for find better solution to fight spam. If you don't have webmaster tools account you can send spam report using following link.

Send Spam report without webmaster tools account

Google Word

If you see pages with scraped content ranking above or instead of the original, please tell us more about it.

Why Is Duplicate Content Bad?

Duplicate content confuse search engine. Why? because they have hard time deciding which website or blog is most relevant for user search query. Search engines will never display two identical pieces of of content in the SERPs. This is done to ensure the highest search quality seeing the same content twice is very bad for user and not very interesting for users and also another problem is ranking power is lose when search engine found same content another website. Having same content another site you can lose your lot of traffic coming from Google Search so take it serious issue and send it a report to Google spam team..

How you can send scrapped content report to Google

First you need three link

What's the URL on your site where the content was taken from?
What's the exact URL on the scraper site?
What's the Google search result URL that demonstrates the problem?

Then copy link below and paste in your browser address bar Press enter you can the form like we showing in screen shot below fill the form

Field and click on sumbit button after cliking on sumbit your done....

https://docs.google.com/forms/d/1Pw1KVOVRyr4a7ezj_6SHghnX1Y6bp1SOVmy60QjkF0Y/viewform

and fill all the required input with required data and First, review the Manual Actions page to see if Google has found any issues with your site and after that don't forget to click on i confirm if your site is not effected by manual actions.
and click submit you are done..!!

Checking for a manual penalty

Login to your account on Google Webmaster Tools, and check if you have received any manual actions against your website. Click on “Search Traffic” and “Manual Actions”.

It’s important to note that the Scraper Report tool does not promise any kind of fix, or give any indication of what Google intends to do with the information you submit to them. Google

So, what're your thoughts on it? Leave your 'good' comments in the section below.

Image Credit:- shutterstock

Read Article →

How To Check Duplicate Content Using Different Methods

Posted by Ishtiaq Ahmad at 5:28:00 PM Labels: Blogger Errors , S.E.O , Webmaster Tools 5 comments

As Google, Bing and other search engines become more sophisticated, they are rewarding websites who present only quality, unique content to their search bots for indexation.
Today we will talk about how duplicate content is created, and how can you identify duplicate content on your site? When search engine detect duplicate content, such as through variations caused by URL parameters, well maintained search engine (like Google) group the duplicate URLs into one cluster and then select the best URL to represent the cluster in search results.
Having duplicate content can effect your website in a variety of ways, but unless you have been duplicating deliberately, it's unlikely that one of those ways will be a penalty.
There are some penalties that are related to the idea of having the same content as another site—for example, if you're scraping content from other sites and republishing it, or if you republish content without adding any additional value.

How to Identify duplicate content

Why Duplicate content:

canonical issues (www and non-www version);
pagination when different pages have identical titles and meta description;
various versions of the home page (e.g. www.site.com and www.site.com/index.php);
incorrect internal navigation creating several URLs to one and the same page (e.g. www.site.com/page.php?id=200 and www.site/category/page.php?id=200); etc

There are many tools you can use to find duplicate content problems for your site: but in our article we are introducing just two Google Webmaster Tools and Screaming Frog.

Using Google Webmaster Tools you can easily find pages with both duplicate titles and meta descriptions. You simply click on “HTML Improvements” under “Search Appearance”.

Google_Webmaster_Tools_-_HTML_Improvements

webmaster will show you what pages have duplicate meta descriptions and page titles.

Google_Webmaster_Tools_-_Duplicate_Descriptions

Second Tools
Download the screaming frog web crawler and use it to crawl 500 pages for free.

Page Titles/Meta Descriptions
You can find duplicate page titles by simply clicking on the tab “Page Titles” or “Meta Description” and filtering for “Duplicate.” For more detailed.

Identify Duplicate Content Using Google Search

Use The inurl: Search Operator

inurl:Dell_laptops This works because the string “Dell_laptops” is found in the URL we are auditing. Many times automated scrapper sites will simply replicate every aspect of a domain, even the URL structure, this allows us to easily hunt this scrapped content down.

Use The intitle: Search Operator

When you use the intitle: search operator you can quickly find pages that are duplicating the title tag of a page you are auditing. For example lets say we want to look to see if this page is being duplicated, we would run the following query: intitle:”Muhammad Iqbal - Wikipedia, the free encyclopedia ” Some of the results in those results have legitimate reasons to have the same title tag, but if you look further down you can see that some sites are simplely scrapping Wikipedia. This is the type of duplicate content that SEOs should be concerned about.

The canonical tag (rel="canonical") is an essential tool in the search engine optimization (SEO) toolbox. It is often a better solution that a 301 redirect in cleaning up duplicate content issues.
in our next article we will learn about canonical rel tag and how to fix duplicate content issue on your site. Luckily, you have control over your own site, so you have the power to fix it.
stay tuned for our next update. Enjoy.

Image Credit:- Vector15

Read Article →